/* DAY ONE design system: tokens and components (seed for WEB-037).
   Source of truth: redesign/03-Foundations/design-system-plan.md. Decisions D70 to D79. */

@font-face { font-family: "Archivo"; src: url("fonts/Archivo-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("fonts/AlbertSans-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("fonts/AlbertSans-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 88%; descent-override: 21%; line-gap-override: 0%; }
@font-face { font-family: "Albert Sans Fallback"; src: local("Arial"); size-adjust: 101%; ascent-override: 96%; descent-override: 25%; line-gap-override: 0%; }

:root {
  /* colour (brand guide v1.0, D73, D74) */
  --c-obsidian: #070707; --c-oxford: #132436; --c-teal: #014745; --c-teal-hover: #026560; --c-emerald: #00BC72;
  --c-ink: #1E293B; --c-ink-2: #475569; --c-surface-2: #F6F8F9;
  --c-ink-3: #64748B; --c-rule: #94A3B8; --c-border: #E2E8F0;
  --c-surface: #F0F2F5; --c-surface-teal: #E6F2F1; --c-white: #FFFFFF;
  --c-on-dark: #FFFFFF; --c-on-dark-2: #94A3B8; --c-line-dark: rgb(148 163 184 / 0.22);
  --c-error: #B91C1C; --c-error-dark: #FCA5A5;

  /* type (D70, D71) */
  --f-display: "Archivo", "Archivo Fallback", Arial, sans-serif;
  --f-text: "Albert Sans", "Albert Sans Fallback", Arial, sans-serif;
  --t-display: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);
  --t-h1: clamp(2.125rem, 1.75rem + 1.6vw, 3.25rem);
  --t-h2: clamp(1.75rem, 1.5rem + 1vw, 2.375rem);
  --t-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --t-h4: 1.125rem;
  --t-lede: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-body: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --t-small: 0.9375rem; --t-caption: 0.8125rem; --t-label: 0.8125rem; --t-button: 0.9375rem;

  /* space, layout, radius */
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 72px; --s-8: 96px; --s-9: 128px;
  --section: clamp(40px, 2rem + 3vw, 72px); --chapter: clamp(56px, 2rem + 6vw, 128px);
  --max: 1180px; --measure: 44rem; --gutter: 24px;
  --r-card: 4px; --r-pill: 999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --z-sticky: 100; --z-dropdown: 200;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; font-family: var(--f-text); font-size: var(--t-body); line-height: 1.6; color: var(--c-ink); background: var(--c-white); font-kerning: normal; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; font-stretch: 104%; letter-spacing: -0.015em; line-height: 1.12; margin: 0; text-wrap: balance; color: inherit; }
h1 { font-size: var(--t-h1); line-height: 1.06; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.005em; }
h4 { font-family: var(--f-text); font-size: var(--t-h4); font-weight: 600; letter-spacing: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--c-teal); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-teal-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--c-white); color: var(--c-ink); padding: 8px 16px; z-index: 999; }
.skip:focus { left: 8px; }

/* grounds (D72) */
.ground-dark { background-color: var(--c-obsidian); background-image: radial-gradient(70% 60% at 88% -10%, rgb(1 71 69 / 0.62), transparent 70%), radial-gradient(50% 50% at 0% 110%, rgb(1 71 69 / 0.28), transparent 70%); color: var(--c-on-dark); line-height: 1.7; }
.ground-dark a { color: var(--c-emerald); }
.ground-dark :focus-visible { outline-color: var(--c-emerald); }
.ground-oxford { background: var(--c-oxford); color: var(--c-on-dark); line-height: 1.7; }
.ground-oxford a { color: var(--c-emerald); }
.ground-surface { background: var(--c-surface); }
.muted { color: var(--c-ink-2); }
.ground-dark .muted, .ground-oxford .muted { color: var(--c-on-dark-2); }
.hl { color: var(--c-emerald); }        /* keyword highlight, dark grounds only */
.em-teal { color: var(--c-teal); }      /* emphasis on light grounds */

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section); }
.chapter { padding-block: var(--chapter); }
.measure { max-width: var(--measure); }

.label { font-family: var(--f-text); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-teal); }
.ground-dark .label, .ground-oxford .label { color: var(--c-emerald); }
.lede { font-size: var(--t-lede); line-height: 1.5; }
.caption { font-size: var(--t-caption); line-height: 1.45; font-weight: 500; letter-spacing: 0.01em; color: var(--c-ink-2); }
.ground-dark .caption, .ground-oxford .caption { color: var(--c-on-dark-2); }

/* buttons (plan §12) */
.btn { --bg: var(--c-teal); --fg: var(--c-white); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: var(--r-pill); border: 2px solid var(--bg); background: var(--bg); color: var(--fg); font-family: var(--f-display); font-stretch: 108%; font-weight: 700; font-size: var(--t-button); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 150ms var(--ease-out); }
.btn:hover { --bg: var(--c-teal-hover); color: var(--fg); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--bg); }
.btn--ghost:hover { background: var(--c-surface-teal); color: var(--c-teal); }
.ground-dark .btn, .ground-oxford .btn { --bg: var(--c-emerald); --fg: var(--c-obsidian); }
.ground-dark .btn:hover, .ground-oxford .btn:hover { --bg: var(--c-emerald); box-shadow: 0 0 0 4px rgb(0 188 114 / 0.28); }
.ground-dark .btn--ghost, .ground-oxford .btn--ghost { background: transparent; color: var(--c-emerald); }
.ground-dark .btn--ghost:hover { background: rgb(0 188 114 / 0.1); color: var(--c-emerald); }
.btn:not(.btn--ghost), .ground-dark a.btn:not(.btn--ghost), .ground-oxford a.btn:not(.btn--ghost) { color: var(--fg); }
a.btn--ghost, .btn--ghost { color: var(--bg); }
.ground-dark a.btn--ghost, .ground-oxford a.btn--ghost { color: var(--c-emerald); }
.site-header .btn { --bg: var(--c-teal); --fg: var(--c-white); }
.site-header .btn:hover { --bg: var(--c-teal-hover); box-shadow: 0 0 0 4px rgb(1 71 69 / 0.15); }
.site-header .btn--ghost { background: transparent; color: var(--c-teal); }
.site-header .btn--ghost:hover { background: var(--c-surface-teal); }
.site-header--dark .btn { --bg: var(--c-emerald); --fg: var(--c-obsidian); }
.site-header--dark .btn:hover { --bg: var(--c-emerald); box-shadow: 0 0 0 4px rgb(0 188 114 / 0.3); }
.site-header--dark .btn--ghost { color: var(--c-emerald); }
.site-header--dark .btn--ghost:hover { background: rgb(0 188 114 / 0.1); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.helper { font-size: var(--t-small); }

/* site header (C1). Default since D92: light (white) header; .site-header--dark keeps the dark variant. */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: rgb(255 255 255 / 0.96); backdrop-filter: saturate(1.4) blur(8px); color: var(--c-ink); border-bottom: 1px solid var(--c-border); }
.site-header .logo { display: inline-flex; padding: 6px 0; }
.site-header .logo .logo-dark { display: none; }
.site-header--dark { background: rgb(7 7 7 / 0.94); color: var(--c-on-dark); border-bottom-color: var(--c-line-dark); }
.site-header--dark .logo .logo-light { display: none; }
.site-header--dark .logo .logo-dark { display: inline; }
.site-header .wrap { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.site-header .logo img { width: 132px; height: auto; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav button, .nav a.navlink { font: 500 var(--t-small)/1 var(--f-text); color: inherit; background: none; border: 0; padding: 10px 12px; border-radius: var(--r-card); cursor: pointer; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.nav button[aria-expanded="true"], .nav button:hover, .nav a.navlink:hover { background: var(--c-surface); color: var(--c-teal); }
.site-header--dark .nav button[aria-expanded="true"], .site-header--dark .nav button:hover { background: rgb(255 255 255 / 0.08); color: var(--c-on-dark); }
.site-header :focus-visible { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.site-header--dark :focus-visible, .ground-dark :focus-visible, .ground-oxford :focus-visible { outline-color: var(--c-emerald); }
.nav .chev { width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.site-header .btn { min-height: 40px; padding: 0 18px; font-size: 0.8125rem; margin-left: 12px; }
.menu-toggle { display: none; }
@media (max-width: 959px) { .nav { display: none; } .site-header .menu-toggle { display: inline-flex; margin-left: auto; } .site-header .btn:not(.menu-toggle) { display: none; } }
.mega[hidden] { display: none; }
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-dropdown); padding: 10px var(--gutter) 0; color: var(--c-ink); }
.mega .panel { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 340px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 6px rgb(7 7 7 / 0.05), 0 36px 72px -32px rgb(7 7 7 / 0.45); transform-origin: top center; animation: mega-in 240ms var(--ease-out) both; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px) scale(0.99); } to { opacity: 1; transform: none; } }
.mega .panel__main { padding: 28px 32px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px 28px; align-content: start; }
.mega .panel__main--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega .grp { display: grid; gap: 4px; align-content: start; }
.mega .grp-title { font: 600 0.8125rem/1.3 var(--f-text); color: var(--c-ink-2); margin: 0 0 6px; }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega a.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 12px; margin-inline: -12px; border-radius: 8px; color: var(--c-ink); text-decoration: none; transition: background-color 150ms var(--ease-out); }
.mega a.item strong { font-weight: 600; font-size: 0.9375rem; }
.mega a.item span { grid-column: 1; font-size: 0.8125rem; color: var(--c-ink-2); line-height: 1.4; }
.mega a.item::after { content: "→"; grid-column: 2; grid-row: 1; color: var(--c-teal); opacity: 0; transform: translateX(-4px); transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out); }
.mega a.item:hover, .mega a.item:focus-visible { background: var(--c-surface-teal); color: var(--c-ink); }
.mega a.item:hover::after, .mega a.item:focus-visible::after { opacity: 1; transform: none; }
.mega ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; }
.mega ol.steps a.item { grid-template-columns: 26px minmax(0, 1fr) auto; }
.mega ol.steps li { counter-increment: st; }
.mega ol.steps a.item::before { content: counter(st); grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--c-teal); color: var(--c-teal); font: 700 0.75rem/23px var(--f-display); text-align: center; margin-top: 1px; }
.mega ol.steps a.item strong, .mega ol.steps a.item span { grid-column: 2; }
.mega ol.steps a.item::after { grid-column: 3; }
.mega .panel__feature { position: relative; padding: 28px; display: grid; gap: 14px; align-content: start; color: var(--c-on-dark); background-color: var(--c-obsidian); background-image: radial-gradient(90% 70% at 100% 0%, rgb(1 71 69 / 0.75), transparent 70%); }
.mega .panel__feature .feat-kicker { font: 600 0.8125rem/1.3 var(--f-text); color: var(--c-emerald); }
.mega .panel__feature h4 { font-family: var(--f-display); font-stretch: 104%; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--c-on-dark); }
.mega .panel__feature p { font-size: 0.875rem; color: var(--c-on-dark-2); line-height: 1.5; }
.mega .panel__feature a.feat-link { color: var(--c-emerald); font-weight: 600; font-size: 0.875rem; }
.mega .mini { background: var(--c-white); color: var(--c-ink); border-radius: 6px; font-size: 11px; overflow: hidden; box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.8); }
.mega .mini div { display: flex; justify-content: space-between; padding: 7px 10px; border-bottom: 1px solid var(--c-border); font-variant-numeric: tabular-nums; }
.mega .mini div:first-child { background: var(--c-surface); font-weight: 600; color: var(--c-ink-2); }
.mega .mini .hl-row { background: var(--c-surface-teal); }
.mega .panel__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 14px 32px; background: var(--c-surface); border-top: 1px solid var(--c-border); font-size: 0.875rem; color: var(--c-ink-2); }
.mega .panel__foot a { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .mega .panel { animation: none; } }

/* product crop (C4) */
.crop { margin: 0; }
.crop__frame { position: relative; border-radius: 10px; overflow: hidden; background: #0d1110; padding: 10px; box-shadow: 0 0 0 1px rgb(148 163 184 / 0.18), 0 30px 60px -30px rgb(0 0 0 / 0.8); }
.crop__frame img { border-radius: 4px; width: 100%; }
.ground-white .crop__frame, .crop--light .crop__frame { background: var(--c-white); padding: 0; border: 1px solid var(--c-border); box-shadow: 0 18px 40px -24px rgb(19 36 54 / 0.35); }
.crop figcaption { margin-top: 12px; }
.pin { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: var(--c-emerald); color: var(--c-obsidian); font: 700 0.8125rem/28px var(--f-text); text-align: center; box-shadow: 0 0 0 4px rgb(0 188 114 / 0.25); transform: translate(-50%, -50%); }
.pins { list-style: none; counter-reset: pin; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.pins li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-size: var(--t-small); line-height: 1.5; }
.pins li::before { counter-increment: pin; content: counter(pin); width: 28px; height: 28px; border-radius: 50%; background: var(--c-emerald); color: var(--c-obsidian); font: 700 0.8125rem/28px var(--f-text); text-align: center; }
.ground-white .pins li::before, .pins--light li::before { background: var(--c-teal); color: var(--c-white); }

@media (max-width: 640px) { .pin--desk { display: none; } }

/* proof card (C7) */
.proof-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); column-gap: 32px; }
.proof { padding: 24px 0 8px; display: grid; gap: 8px; align-content: start; border-top: 1px solid var(--c-line-dark); }
.proof__unit { font-size: 0.45em; font-stretch: 100%; letter-spacing: 0; margin-left: 0.15em; }
.proof__fig { font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1; letter-spacing: -0.02em; color: var(--c-emerald); font-variant-numeric: tabular-nums; }
.proof__label { font-weight: 600; }
.proof__note { font-size: var(--t-small); color: var(--c-on-dark-2); }
.proof-source { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 16px; font-size: var(--t-caption); color: var(--c-on-dark-2); font-weight: 500; }
.proof-source strong { color: var(--c-on-dark); font-weight: 600; }
.ground-white .proof { border-color: var(--c-border); }
.ground-white .proof__fig { color: var(--c-teal); }
.ground-white .proof__note, .ground-white .proof-source { color: var(--c-ink-2); }
.ground-white .proof-source strong { color: var(--c-ink); }


/* chain (C5) */
.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); counter-reset: stage; position: relative; }
.chain::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 2px; background: linear-gradient(90deg, var(--c-emerald), rgb(0 188 114 / 0.25)); transform-origin: left; }
.chain.in-view::before { animation: draw 900ms var(--ease-out) both; }
.chain li { position: relative; padding: 52px 18px 0 0; }
.chain.in-view li { animation: rise 600ms var(--ease-out) both; }
.chain.in-view li:nth-child(2) { animation-delay: 90ms; } .chain.in-view li:nth-child(3) { animation-delay: 180ms; } .chain.in-view li:nth-child(4) { animation-delay: 270ms; } .chain.in-view li:nth-child(5) { animation-delay: 360ms; } .chain.in-view li:nth-child(6) { animation-delay: 450ms; }
.chain li::before { counter-increment: stage; content: counter(stage); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--c-obsidian); border: 2px solid var(--c-emerald); color: var(--c-emerald); font: 700 0.9375rem/36px var(--f-display); text-align: center; }
.chain li.is-active::before { background: var(--c-emerald); color: var(--c-obsidian); }
.chain h3 { font-size: 1.25rem; margin-bottom: 6px; }
.chain p { font-size: var(--t-small); color: var(--c-on-dark-2); line-height: 1.5; }
.chain a { font-size: var(--t-small); font-weight: 600; display: inline-block; margin-top: 8px; }
/* chain on a light ground */
.chain--light::before { background: linear-gradient(90deg, var(--c-teal), rgb(1 71 69 / 0.2)); }
.chain--light li::before { background: var(--c-white); border-color: var(--c-teal); color: var(--c-teal); }
.chain--light li.is-active::before { background: var(--c-teal); color: var(--c-white); }
.chain--light p { color: var(--c-ink-2); }
.chain--light a { color: var(--c-teal); }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 959px) {
  .chain { grid-template-columns: 1fr; gap: 0; }
  .chain::before { left: 19px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--c-emerald), rgb(0 188 114 / 0.25)); transform-origin: top; animation-name: drawy; }
  .chain li { padding: 0 0 28px 64px; min-height: 40px; }
}
@keyframes drawy { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* feature row (C6) */
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.feature--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature--flip .feature__text { order: 2; }
.feature > *, .cta-band > *, .split > * { min-width: 0; }
.feature__text { display: grid; gap: 16px; align-content: start; }
.feature ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
@media (max-width: 959px) { .feature, .feature--flip { grid-template-columns: 1fr; } .feature--flip .feature__text { order: 0; } }

/* site footer (C2), light since D92 */
.site-footer { background: var(--c-surface); color: var(--c-ink); border-top: 1px solid var(--c-border); padding-block: 56px 40px; font-size: var(--t-small); }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.site-footer .col-title { font-family: var(--f-text); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-2); margin: 0 0 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--c-ink); text-decoration: none; }
.site-footer a:hover { color: var(--c-teal); text-decoration: underline; }
.site-footer .legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--c-border); display: grid; gap: 6px; color: var(--c-ink-2); font-size: var(--t-caption); }
.site-footer .legal a { color: var(--c-ink-2); text-decoration: underline; }
@media (max-width: 959px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }

/* route builder: an interactive sentence (home) */
.route { display: grid; gap: 28px; }
.route > * { min-width: 0; }
@media (max-width: 640px) { .route__pick { display: flex; width: 100%; margin: 4px 0 10px; } .route__pick select { width: 100%; margin: 0; } .route__sentence .punct { display: none; } }
.route__sentence { font-family: var(--f-display); font-stretch: 104%; font-weight: 600; font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem); line-height: 1.45; letter-spacing: -0.01em; color: var(--c-ink); text-wrap: balance; max-width: 30em; }
.route__pick { position: relative; display: inline-flex; align-items: baseline; vertical-align: baseline; }
.route__sentence .punct { margin-left: -0.08em; }
.route__sentence .nb { white-space: nowrap; }
@media (max-width: 640px) { .route__sentence .nb { white-space: normal; display: block; } }
.route__pick select { appearance: none; -webkit-appearance: none; font: inherit; color: var(--c-teal); background: transparent; border: 0; border-bottom: 2px solid var(--c-teal); padding: 0 1.15em 0 0.1em; margin: 0 0.1em; cursor: pointer; border-radius: 0; max-width: 100%; text-overflow: ellipsis; }
.route__pick::after { content: ""; position: absolute; right: 0.35em; top: 50%; width: 0.35em; height: 0.35em; border-right: 2px solid var(--c-teal); border-bottom: 2px solid var(--c-teal); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.route__pick select:hover { background: var(--c-surface-teal); }
.route__pick select:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 4px; }
.route__result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--c-border); }
.route__step { display: grid; gap: 6px; align-content: start; padding: 22px 24px 4px 0; color: var(--c-ink); text-decoration: none; transition: transform 200ms var(--ease-out); }
.route__step + .route__step { padding-left: 24px; border-left: 1px solid var(--c-border); }
.route__step .k { font: 600 0.8125rem/1.3 var(--f-text); color: var(--c-ink-2); }
.route__step strong { font-family: var(--f-display); font-stretch: 104%; font-size: 1.25rem; line-height: 1.25; }
.route__step span.d { color: var(--c-ink-2); font-size: var(--t-small); }
.route__step span.go { color: var(--c-teal); font-weight: 600; font-size: var(--t-small); margin-top: 4px; }
.route__step:hover strong { color: var(--c-teal); }
.route__step.is-updated { animation: route-pulse 420ms var(--ease-out); }
@keyframes route-pulse { from { opacity: 0.35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 959px) { .route__result { grid-template-columns: 1fr; } .route__step + .route__step { padding-left: 0; border-left: 0; border-top: 1px solid var(--c-border); } }
@media (prefers-reduced-motion: reduce) { .route__step.is-updated { animation: none; } }

/* featured customer story (dark) */
.story { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
.story > * { min-width: 0; }
.story__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--t-small); color: var(--c-on-dark-2); }
.story__card { background: rgb(255 255 255 / 0.04); border: 1px solid var(--c-line-dark); border-radius: 12px; padding: 28px; display: grid; gap: 18px; }
.story__card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; }
.story__card dt, .story__card dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--c-line-dark); font-size: var(--t-small); }
.story__card dt { color: var(--c-on-dark-2); padding-right: 20px; }
@media (max-width: 959px) { .story { grid-template-columns: 1fr; } }

/* comparison table (C10) */
.table-region { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-card); background: var(--c-white); }
table.cmp { width: 100%; border-collapse: collapse; font-size: var(--t-small); font-variant-numeric: tabular-nums; min-width: 560px; }
table.cmp caption { text-align: left; padding: 16px 20px; font-weight: 600; color: var(--c-ink); border-bottom: 1px solid var(--c-border); }
table.cmp th, table.cmp td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: top; }
table.cmp thead th { font-family: var(--f-display); font-stretch: 104%; font-size: 1rem; background: var(--c-surface); }
table.cmp tbody th { font-weight: 600; position: sticky; left: 0; background: var(--c-white); }
table.cmp tr:last-child > * { border-bottom: 0; }
.yes { color: var(--c-teal); font-weight: 600; }
.part { color: var(--c-ink-2); }
.no { color: var(--c-ink-3); }

/* form (C13) */
.form .muted, .ground-dark .form .muted, .ground-oxford .form .muted { color: var(--c-ink-2); }
.form a, .ground-dark .form a, .ground-oxford .form a, .ground-dark .vig, .ground-dark .vig a { color: var(--c-teal); }
.ground-dark .vig { color: var(--c-ink); }
.form { background: var(--c-white); color: var(--c-ink); border-radius: var(--r-card); padding: clamp(24px, 3vw, 40px); display: grid; gap: 18px; box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.6); line-height: 1.5; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: var(--t-small); }
.field .opt { font-weight: 400; color: var(--c-ink-2); }
.field input, .field select, .field textarea { font: 400 1rem/1.4 var(--f-text); color: var(--c-ink); border: 1px solid var(--c-rule); border-radius: var(--r-card); padding: 12px 14px; background: var(--c-white); min-height: 48px; width: 100%; }
.field textarea { min-height: 104px; resize: vertical; }
/* select (WEB-285 polish, 21 Oct): one custom chevron so the label gets the whole box, an ellipsis if a label ever outgrows it,
   and a tighter 390 layout so the longest option ("Operations and advisory consulting") shows in full. Font stays 16px (no iOS zoom on focus).
   The chevron colour in the data URI is the Teal token #014745 (a data URI cannot read var()). */
.field select { appearance: none; -webkit-appearance: none; text-overflow: ellipsis; padding-right: 40px; background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23014745' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px; }
@media (max-width: 480px) {
  .form { padding: 16px; }
  .field select { padding-left: 12px; padding-right: 32px; background-position: right 12px center; letter-spacing: -0.01em; }
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 1px; border-color: var(--c-teal); }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: var(--t-small); align-items: start; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-teal); }
.form .btn { justify-self: start; }
.field-error { color: var(--c-error); font-size: var(--t-caption); font-weight: 600; }

/* role strip (C15), summary (C16), callout (C19) */
.role-strip { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.role-strip a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--c-border); background: var(--c-white); color: var(--c-ink); text-decoration: none; font-weight: 600; font-size: var(--t-small); }
.role-strip a:hover { border-color: var(--c-teal); color: var(--c-teal); }
.summary { font-size: var(--t-lede); line-height: 1.55; color: var(--c-ink); }
.callout { background: var(--c-surface-teal); border: 1px solid #C9E1DE; border-radius: var(--r-card); padding: 20px 24px; }

/* article body (C21) */
.article { max-width: var(--measure); margin-inline: auto; font-size: var(--t-body); line-height: 1.65; }
.article > * + * { margin-top: 1.1em; }
.article h2 { margin-top: 2em; }
.article blockquote { margin: 1.8em 0; padding: 0; font-family: var(--f-display); font-stretch: 104%; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--c-teal); }

/* CTA band (C14) */
.cta-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 959px) { .cta-band { grid-template-columns: 1fr; } }

/* container-aware layout: components adapt to the space they sit in */
.cq { container-type: inline-size; }
@container (max-width: 880px) {
  .chain { grid-template-columns: 1fr; gap: 0; }
  .chain::before { left: 19px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--c-emerald), rgb(0 188 114 / 0.25)); transform-origin: top; animation-name: drawy; }
  .chain li { padding: 0 0 24px 64px; min-height: 40px; }
  .feature, .feature--flip { grid-template-columns: 1fr; }
  .feature--flip .feature__text { order: 0; }
  .split { grid-template-columns: 1fr !important; }
}

/* ---- Section rhythm (D96, D97) ----------------------------------------
   One section = one ground, one job, one H2. Consecutive sections alternate
   dark (.ground-dark) and light (no ground class). Header and footer are light,
   so a page's sections run dark → light → … → dark (an odd count).
   Need two blocks on one ground? Compose them as one block (.split), or
   re-plan the sequence. Checked by programme/tools/ground-check.py. */
.stack { display: grid; gap: 18px; align-content: start; }
.stack--loose { gap: clamp(32px, 2rem + 2vw, 56px); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.h-sub { font-size: var(--t-h3); }

/* C22 breadcrumb */
.crumbs { font-size: var(--t-caption); color: var(--c-ink-2); }
.crumbs a { color: inherit; }
.ground-dark .crumbs, .ground-oxford .crumbs { color: var(--c-on-dark-2); }

/* C18 steps: weeks (row by default; --stack for a column beside other content) */
.weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: w; }
.weeks li { counter-increment: w; border-top: 2px solid var(--c-teal); padding-top: 16px; display: grid; gap: 6px; align-content: start; }
.weeks li::before { content: "Week " counter(w, decimal-leading-zero); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-teal); }
.weeks h3 { font-size: 1.25rem; }
.weeks--step li::before { content: "Step " counter(w, decimal-leading-zero); } /* Step badge for non-weekly sequences (matches d1-steps badge="Step") */
.weeks--stack { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--c-border); }
.weeks--stack li { grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; border-top: 0; border-bottom: 1px solid var(--c-border); padding: 16px 0; }
.weeks--stack li::before { grid-row: span 2; padding-top: 4px; }
.weeks--stack h3 { font-size: 1.125rem; }
.ground-dark .weeks li { border-color: var(--c-emerald); }
.ground-dark .weeks li::before { color: var(--c-emerald); }

/* C12 FAQ: the standard FAQ section (D98). Light ground, always the chapter
   before the closing CTA. Heading left (sticky on desktop), 4 to 6 questions
   right, first one open, one link per answer, FAQPage JSON-LD mirrors the text. */
.faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.faq-intro { display: grid; gap: 12px; align-content: start; position: sticky; top: 96px; }
@media (max-width: 959px) { .faq-layout { grid-template-columns: 1fr; } .faq-intro { position: static; } }
.faq { display: grid; border-top: 1px solid var(--c-border); }
.faq details { border-bottom: 1px solid var(--c-border); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-family: var(--f-display); font-stretch: 104%; font-weight: 700; font-size: 1.1875rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 28px; width: 10px; height: 10px; border-right: 2px solid var(--c-teal); border-bottom: 2px solid var(--c-teal); transform: rotate(45deg); transition: transform 180ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(225deg); top: 32px; }
.faq details p { padding: 0 0 20px; max-width: var(--measure); color: var(--c-ink-2); }

@media (max-width: 959px) {
  .split, .split--even { grid-template-columns: 1fr; }
  .weeks:not(.weeks--stack) { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}

/* Mobile menu panel (opened by the Menu button, built in ds.js) */
.mnav[hidden] { display: none; }
@media (min-width: 960px) { .mnav { display: none; } }
.mnav { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-dropdown); max-height: calc(100vh - 72px); overflow-y: auto; background: var(--c-white); color: var(--c-ink); border-top: 1px solid var(--c-border); box-shadow: 0 18px 40px rgb(0 0 0 / 0.18); padding: 8px var(--gutter) 24px; }
.mnav details { border-bottom: 1px solid var(--c-border); }
.mnav summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font: 600 1.0625rem/1.2 var(--f-text); }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary::after { content: ""; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 150ms var(--ease-out); }
.mnav details[open] > summary::after { transform: rotate(-135deg); }
.mnav .grp { display: grid; gap: 2px; padding: 0 0 14px; }
.mnav .grp-title { font: 600 0.8125rem/1.3 var(--f-text); color: var(--c-ink-2); margin: 6px 0; }
.mnav ul, .mnav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mnav a.item { display: grid; gap: 2px; padding: 10px 0; color: var(--c-ink); text-decoration: none; }
.mnav a.item strong { font-weight: 600; font-size: 0.9375rem; }
.mnav a.item span { font-size: 0.8125rem; color: var(--c-ink-2); line-height: 1.4; }
.mnav__cta { display: inline-flex !important; margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .mnav summary::after { transition: none; } }

/* Product view: a real product screen redrawn as live HTML (programme/tools/product-view.py). */
.pv{background:var(--c-white);border:1px solid var(--c-border);border-radius:10px;box-shadow:0 18px 40px -24px rgb(19 36 54 / .35);overflow:hidden;font-size:1rem;color:var(--c-ink-2)}
.pv-fig--narrow{max-width:1040px}
.pv__tabs{display:flex;gap:clamp(14px,2.4vw,32px);padding:12px clamp(14px,2vw,24px) 0;border-bottom:1px solid var(--c-rule);overflow:hidden;white-space:nowrap}
.pv__tabs b{color:var(--c-teal);padding-bottom:10px;border-bottom:3px solid var(--c-teal)}
.pv__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--c-rule);counter-reset:pvc}
.pv__col{background:var(--c-surface-2);padding:clamp(12px,1.6vw,20px)}
.pv__col h4{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:700 clamp(1.125rem,1rem + .5vw,1.375rem)/1.2 var(--f-display);color:var(--c-ink)}
.pv__col h4::before{counter-increment:pvc;content:counter(pvc);width:28px;height:28px;border-radius:50%;background:var(--c-teal);color:var(--c-white);font:700 1rem/28px var(--f-text);text-align:center;flex:none}
.pv__col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pv__card{display:grid;gap:3px;background:var(--c-white);border:1px solid var(--c-border);border-radius:6px;padding:10px 14px;line-height:1.4;font-variant-numeric:tabular-nums}
.pv__card strong{font-size:1.125rem;color:var(--c-ink)}
.pv__card.is-sel{border-color:var(--c-teal);box-shadow:0 0 0 2px var(--c-teal);background:var(--c-surface-teal)}
.pv__st{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.pv__chip{padding:1px 8px;border-radius:999px;background:var(--c-border);color:var(--c-ink);font-size:.875rem;font-weight:600}
.pv__chip--on{background:var(--c-surface-teal);color:var(--c-teal)}
.pv__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px clamp(14px,2vw,24px);background:var(--c-surface-2);border-bottom:1px solid var(--c-rule)}
.pv__bar strong{font-size:1.25rem;color:var(--c-ink)}
.pv__ph{margin-left:auto;padding:6px 12px;border:1px solid var(--c-border);border-radius:6px;background:var(--c-white)}
.pv__pin{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:8px;border-radius:50%;background:var(--c-teal);color:var(--c-white);font:700 .875rem/1 var(--f-text);vertical-align:middle}
.pv__bar .pv__pin{margin-right:0}
.pv__scroll{overflow-x:auto}
.pv__scroll:focus-visible{outline:3px solid var(--c-teal);outline-offset:-3px}
.pv__tbl{width:100%;min-width:680px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pv__tbl th,.pv__tbl td{padding:8px 12px;text-align:right;border-bottom:1px solid var(--c-border);white-space:nowrap;color:var(--c-ink-2)}
.pv__tbl thead th{font-weight:600;color:var(--c-ink);white-space:normal;vertical-align:bottom;border-bottom:1px solid var(--c-rule)}
.pv__tbl th[scope=row],.pv__tbl thead th:first-child{text-align:left;color:var(--c-ink);font-weight:700}
.pv__tbl tbody .pv__z{color:var(--c-ink-3)}
.pv__f{background:var(--c-surface-2)}
.pv__f:first-child td,.pv__f:first-child th{border-top:2px solid var(--c-ink-2)}
.pv__tbl tfoot th[scope=row]{font-weight:600;color:var(--c-ink-2)}
.pv__lite td,.pv__lite th{color:var(--c-ink-2);font-size:.9375rem}
.pv__tbl .pv__m,.pv__tbl .pv__mh{background:var(--c-surface-teal);color:var(--c-teal);font-weight:700}
.pv__mrow th,.pv__mrow td{border-top:2px solid var(--c-teal);color:var(--c-teal);font-weight:700}
.pv-m{display:none;padding:14px}
.pv-m h4{margin:16px 0 8px;font:700 1.125rem/1.2 var(--f-display);color:var(--c-ink)}
.pv-m ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pv-m__ms li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:6px}
.pv-m__ms strong{font-size:1.125rem;color:var(--c-ink)}
.pv-m__ms .pv__m{background:var(--c-surface-teal);color:var(--c-teal);font-weight:700;padding:2px 8px;border-radius:999px}
.pv-m dl{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 16px;margin:4px 0 0}
.pv-m dl div{display:flex;gap:6px} .pv-m dt{color:var(--c-ink-2)} .pv-m dd{margin:0;color:var(--c-ink);font-weight:600}
.pv-m li>p{grid-column:1/-1;margin:0}
.pv-m__tot{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0;font-weight:600;color:var(--c-ink)}
.pv-m__rates li{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:6px 0;border-bottom:1px solid var(--c-border)}
@media (max-width:900px){.pv__scroll:not(.pv-k__scroll){display:none}.pv-m{display:block}.pv__bar .pv__ph{margin-left:0}}
@media (max-width:760px){.pv__cols{grid-template-columns:1fr}.pv__tabs{display:none}}

/* Product views: schedule (gantt), task board (kanban), counts (kpi) */
.feature--wide{display:grid;grid-template-columns:1fr;gap:20px}
.pv-g__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px clamp(14px,2vw,24px) 8px;background:var(--c-surface-2)}
.pv-g__top>div:first-child{display:grid;line-height:1.2}.pv-g__top strong{font:700 1.5rem/1.2 var(--f-display);color:var(--c-ink)}
.pv-g__badges{display:flex;flex-wrap:wrap;gap:6px}.pv-g__badges span{padding:2px 10px;border-radius:4px;background:var(--c-border);color:var(--c-ink);font-size:.875rem}
.pv-g__stages{display:flex;flex-wrap:wrap;gap:2px;padding:0 clamp(14px,2vw,24px) 12px;background:var(--c-surface-2);border-bottom:1px solid var(--c-rule);font-size:.8125rem}
.pv-g__stages span{flex:1 1 4.2rem;text-align:center;padding:3px 4px;background:var(--c-border);color:var(--c-ink-2);line-height:1.2}
.pv-g__stages .is-on{background:var(--c-teal);color:var(--c-white);font-weight:700}
.pv-g .pv__tabs{font-size:.9375rem}
.pv-g__grid{display:grid;grid-template-columns:minmax(0,13fr) minmax(0,9fr);font-size:.8125rem;font-variant-numeric:tabular-nums}
.pv-g__list{list-style:none;margin:0;padding:0;border-right:1px solid var(--c-rule)}
.pv-g__list li{display:grid;grid-template-columns:minmax(0,1fr) 4.9rem 4.9rem;gap:4px;align-items:center;height:34px;padding:0 6px 0 calc(10px + var(--lv,0) * 14px);border-bottom:1px solid var(--c-border);color:var(--c-ink-2)}
.pv-g__list .pv-g__h{height:30px;padding-left:10px;font-weight:700;color:var(--c-ink);background:var(--c-surface-2);border-bottom:1px solid var(--c-rule)}
.pv-g__n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-ink)}
.pv-g__mini{display:none}
.pv-g__months{position:relative;height:30px;background:var(--c-surface-2);border-bottom:1px solid var(--c-rule)}
.pv-g__months span{position:absolute;top:0;height:100%;padding:6px 0 0 6px;border-left:1px solid var(--c-border);font-weight:700;color:var(--c-ink);white-space:nowrap}
.pv-g__rows{position:relative}
.pv-g__row{position:relative;height:34px;border-bottom:1px solid var(--c-border)}
.pv-g__bar{position:absolute;top:6px;height:22px;display:flex;align-items:center;gap:6px;padding:0 6px;border-radius:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8125rem;font-weight:600}
.pv-g__bar--0{background:var(--c-teal);color:var(--c-white)}
.pv-g__bar--1{background:var(--c-surface-teal);color:var(--c-teal);box-shadow:inset 0 0 0 2px var(--c-teal)}
.pv-g__bar--2{background:var(--c-emerald);color:var(--c-obsidian)}
.pv-g__bar .pv__pin{margin:0;flex:none}
.pv-g__today{position:absolute;top:30px;bottom:0;width:2px;background:#B91C1C;pointer-events:none}
.pv-g__rows svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pv-g__rows path{fill:none;stroke:var(--c-ink-2);stroke-width:1.5;vector-effect:non-scaling-stroke}
.pv-g__h .pv__pin{margin-right:6px}
.pv-g__bar--2{font-size:0}.pv-g__bar--2 .pv__pin{font-size:.8125rem}
@media (max-width:760px){.pv-g__stages,.pv-g .pv__tabs{display:none}.pv-g__grid{grid-template-columns:1fr}.pv-g__tl{display:none}.pv-g__list{border-right:0}
 .pv-g__list li{height:auto;grid-template-columns:minmax(0,1fr) auto auto;padding-block:8px;gap:2px 10px}.pv-g__list .pv-g__n{grid-column:1/-1;white-space:normal}
 .pv-g__list .pv-g__h{grid-template-columns:1fr auto auto}.pv-g__mini{display:block;grid-column:1/-1;position:relative;height:6px;border-radius:3px;background:var(--c-border)}
 .pv-g__mini u{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--c-teal)}}
.pv-k{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:12px;padding:14px;background:var(--c-surface-2);align-items:start}
.pv-k__scroll{scroll-snap-type:x proximity}.pv-k__col{scroll-snap-align:start}
.pv-k__col h4{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0 0 10px;padding:8px 10px;background:var(--c-white);border-radius:6px;font:700 1.0625rem/1.2 var(--f-display);color:var(--c-ink)}
.pv-k__col h4 span{font:400 .875rem/1.2 var(--f-text);color:var(--c-ink-2)}
.pv-k__col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pv-k__card{position:relative;display:grid;gap:8px;padding:10px 12px;background:var(--c-white);border:1px solid var(--c-border);border-radius:6px;font-size:.9375rem;line-height:1.35}
.pv-k__card strong{color:var(--c-ink);font-weight:600}
.pv-k__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.875rem;color:var(--c-ink-2)}
.pv-k__who i{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:5px;border-radius:50%;background:var(--c-surface-teal);color:var(--c-teal);font:700 .6875rem/1 var(--f-text);font-style:normal}
.pv-k__due.is-late{color:#B91C1C;font-weight:600}
.pv-k__pr{padding:1px 8px;border-radius:999px;font-weight:600}
.pv-k__pr--high{background:#FEE2E2;color:#991B1B}.pv-k__pr--medium{background:#FEF3C7;color:#92400E}
.pv-k__menu{position:absolute;z-index:2;right:-6px;top:calc(100% - 30px);width:8.5rem;margin:0;padding:6px 0!important;gap:0!important;background:var(--c-white);border:1px solid var(--c-border);border-radius:6px;box-shadow:0 10px 24px -8px rgb(19 36 54 / .4)}
.pv-k__menu li{padding:5px 12px;color:var(--c-ink)}.pv-k__menu .is-on{background:var(--c-surface-teal);color:var(--c-teal);font-weight:700}
.pv-k__card .pv__pin{position:absolute;left:6px;top:-12px;margin:0;z-index:3}
.pv-q__head{display:flex;align-items:center;gap:8px;padding:12px clamp(14px,2vw,24px);background:var(--c-surface-2);border-bottom:1px solid var(--c-rule)}.pv-q__head strong{font:700 1.375rem/1.2 var(--f-display);color:var(--c-ink)}.pv-q__head .pv__pin{margin:0}
.pv-q__tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--c-border)}
.pv-q__tiles li{display:grid;justify-items:center;gap:2px;padding:14px 6px;border-right:1px solid var(--c-border)}.pv-q__tiles li:last-child{border-right:0}
.pv-q__tiles b{font:700 1.75rem/1 var(--f-display);color:var(--c-teal)}.pv-q__tiles span{font-size:.9375rem;color:var(--c-ink-2)}
.pv-q__bars{padding:16px clamp(14px,2vw,24px) 20px}.pv-q__bars h4{display:flex;align-items:center;margin:0 0 12px;font:700 1.125rem/1.2 var(--f-display);color:var(--c-ink)}
.pv-q__bars ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pv-q__bars li{display:grid;grid-template-columns:7.5rem minmax(0,1fr) 1.5rem;gap:12px;align-items:center;color:var(--c-ink-2)}
.pv-q__bars i{display:block;height:14px;border-radius:7px;background:var(--c-border)}.pv-q__bars u{display:block;height:100%;border-radius:7px;background:var(--c-teal)}
.pv-q__bars b{text-align:right;color:var(--c-ink)}
@media (max-width:640px){.pv-q__tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.pv-q__tiles li{border-bottom:1px solid var(--c-border)}}
.pv-g__bar--2{overflow:visible;min-width:10px}

/* slim product views (web balance) */
.pv-k{padding:12px;gap:10px;grid-auto-columns:minmax(0,1fr)}
@media (max-width:900px){.pv-k{grid-auto-columns:minmax(220px,1fr)}}
.pv-k__col h4{font-size:1rem;margin-bottom:8px}
.pv-k__card{padding:8px 10px;gap:6px;font-size:.875rem}
.pv-k__meta{font-size:.8125rem}
.pv-k__col ul{gap:6px}
.pv-q__tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.pv-q__tiles li{padding:10px 6px}.pv-q__tiles b{font-size:1.5rem}
.pv-q__bars{padding:12px clamp(14px,2vw,24px) 14px}.pv-q__bars ul{gap:6px}.pv-q__bars i{height:10px}
.pv-g__top{padding-top:10px}.pv-g__top strong{font-size:1.25rem}

/* product view clean-up (22 Oct): bars carry no text, pins sit outside the card, menu hangs below its card */
.pv-g__bar--1{font-size:0}
.pv-g__badges span{white-space:nowrap}
.pv-k__card .pv__pin{left:-10px;top:-10px}
.pv-k__menu{top:calc(100% + 2px);right:8px;width:7.75rem;font-size:.8125rem}
.pv-k__menu li{padding:4px 12px}
.pv-g__months span{padding-left:4px;font-size:.75rem}
@media (min-width:761px){.pv-g__grid{grid-template-columns:minmax(0,15fr) minmax(0,10fr)}.pv-g__list li{grid-template-columns:minmax(0,1fr) 4.7rem 4.7rem}}

/* Invoicing and WIP product views (ledger, fields, wide bars) */
.pv-q__bars--wide li{grid-template-columns:9.5rem minmax(0,1fr) 4.5rem}
.pv-l{padding:12px clamp(14px,2vw,24px) 14px}
.pv-l h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:700 1.0625rem/1.2 var(--f-display);color:var(--c-ink)}
.pv-l h4 .pv__pin{margin:0}.pv-l h4 span:not(.pv__pin){padding:1px 8px;border-radius:4px;background:var(--c-border);font:400 .875rem/1.4 var(--f-text);color:var(--c-ink-2)}
.pv-l ul{list-style:none;margin:0;padding:0;font-size:.875rem;font-variant-numeric:tabular-nums}
.pv-l li{display:grid;grid-template-columns:6.5rem minmax(0,1fr) 6rem 6.5rem;gap:4px 12px;align-items:center;padding:9px 6px;border-bottom:1px solid var(--c-border);color:var(--c-ink)}
.pv-l .pv-l__h{padding-block:6px;border-bottom:1px solid var(--c-rule);font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink-2)}
.pv-l .pv-l__h span:last-child,.pv-l__r b,.pv-l__t b{text-align:right}
.pv-l__r strong{color:var(--c-teal);font-weight:600}.pv-l__r b{font-weight:600}
.pv-l .pv-l__t{grid-template-columns:minmax(0,1fr) auto;background:#FEF3C7;border-bottom:0;border-radius:0 0 4px 4px;font-weight:700;color:#92400E}
@media (max-width:640px){.pv-l .pv-l__h{display:none}.pv-l .pv-l__r{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n a" "b d"}.pv-l__r strong{grid-area:n}.pv-l__r b{grid-area:a}.pv-l__r span:nth-of-type(1){grid-area:b}.pv-l__r span:nth-of-type(2){grid-area:d;text-align:right}}
.pv-f{padding:6px clamp(14px,2vw,24px) 14px}
.pv-f__g h4{display:flex;align-items:center;gap:8px;margin:12px 0 4px;padding:6px 10px;border-radius:6px;background:var(--c-surface-2);font:700 1rem/1.2 var(--f-display);color:var(--c-ink)}.pv-f__g h4 .pv__pin{margin:0}
.pv-f dl{margin:0}.pv-f dl div{display:flex;justify-content:space-between;gap:16px;padding:8px 10px;border-bottom:1px solid var(--c-border);font-size:.875rem}
.pv-f dt{font-weight:600;color:var(--c-ink)}.pv-f dd{margin:0;color:var(--c-ink-2)}
.mech__figs{display:grid;gap:28px;align-content:start;min-width:0}
.pv-q__tiles li b{font-size:clamp(1.0625rem,1.9vw,1.5rem);white-space:nowrap}
.pv-q__tiles li{padding-inline:6px}
.pv-q__bars--wide~*,.pv-q__tiles li b{letter-spacing:-.01em}
.pv-fig .pv-q__tiles li b{font-size:clamp(.9375rem,1.6vw,1.25rem)}
@media (max-width:640px){.pv-q__bars--wide li{grid-template-columns:8.25rem minmax(0,1fr) 3.5rem}}
.mech__figs{position:sticky;top:96px}.mech__figs figure{position:static!important}

/* Invoicing and WIP: problem list as ruled rows (no bullets), six-step chain fit */
.pains{list-style:none;margin:0;padding:0;display:grid;align-content:start;border-top:1px solid rgb(255 255 255 / .18)}
.pains li{padding:14px 0;border-bottom:1px solid rgb(255 255 255 / .18);font-size:var(--t-lede);line-height:1.35;color:var(--c-white)}
.chain--light li{padding-right:20px}
.chain--light h3{font-size:1.125rem;line-height:1.25}
@media (min-width:961px){.chain--light li{padding-right:24px}}
/* Time card view (Resourcing hero) */
.pv-t__bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:12px clamp(14px,2vw,24px);background:var(--c-surface-2);border-bottom:1px solid var(--c-rule);font-size:.9375rem;color:var(--c-ink-2)}
.pv-t__bar strong{font:700 1.375rem/1.2 var(--f-display);color:var(--c-ink)}.pv-t__bar .pv__pin{margin:0}.pv-t__bar b{color:var(--c-ink);font-weight:600}
.pv-t__bar span:last-child{margin-left:auto;padding:2px 10px;border-radius:4px;background:var(--c-border);color:var(--c-ink)}
.pv-t__tbl{width:100%;min-width:520px;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.9375rem}
.pv-t__tbl th,.pv-t__tbl td{padding:12px 10px;text-align:center;border-bottom:1px solid var(--c-border);white-space:nowrap;color:var(--c-ink-2)}
.pv-t__tbl thead th{font-weight:600;color:var(--c-ink);border-bottom:1px solid var(--c-rule);background:var(--c-surface-2);padding-block:8px}
.pv-t__tbl thead th span{display:block;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink-2)}
.pv-t__tbl th:first-child{text-align:left;white-space:normal;min-width:11rem}
.pv-t__tbl tbody th{font-weight:400}.pv-t__tbl tbody th strong{display:block;color:var(--c-ink);font-size:1rem}.pv-t__tbl tbody th span{font-size:.8125rem;color:var(--c-ink-2)}
.pv-t__tbl .pv-t__sum{font-weight:700;color:var(--c-ink);background:var(--c-surface-2)}.pv-t__sum span{font-weight:400;color:var(--c-ink-2)}
.pv-t__tbl tfoot th,.pv-t__tbl tfoot td{background:var(--c-surface-teal);color:var(--c-ink);font-weight:700;border-bottom:0}
.pv-t__tbl tfoot th{display:flex;align-items:center;gap:0}.pv-t__tbl tfoot th .pv__pin{margin-right:8px}
.pv-t__tbl tfoot .pv-t__sum{background:var(--c-surface-teal)}
.pv-t__tbl thead th .pv__pin{display:inline-grid;font-size:.875rem;letter-spacing:0;text-transform:none;color:var(--c-white);margin-right:8px}
@media (max-width:640px){.pv-t__tbl{min-width:0;font-size:.875rem}.pv-t__tbl th,.pv-t__tbl td{padding-inline:4px}.pv-t__tbl th:first-child{min-width:0;padding-left:10px}
 .pv-t__tbl thead th:first-child .pv__pin{display:none}.pv-t__tbl tbody th span{font-size:.75rem}.pv-t__tbl tfoot .pv-t__sum span{display:none}}
.pv-t__tbl tbody th strong,.pv-t__tbl tbody th span{line-height:1.3}.pv-t__tbl tbody th span{display:block;margin-top:2px}
.pv-t__acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px clamp(14px,2vw,24px);background:var(--c-surface-2);border-top:1px solid var(--c-rule)}
.pv-t__acts .pv__pin{margin:0 4px 0 0}.pv-t__acts span:not(.pv__pin){padding:6px 14px;border-radius:999px;border:1px solid var(--c-border);background:var(--c-white);font-size:.875rem;font-weight:600;color:var(--c-ink)}
.pv-t__acts .is-primary{background:var(--c-teal);border-color:var(--c-teal);color:var(--c-white)}
.weeks--stack li>p:not(:first-of-type){grid-column:2}
.weeks--stack li>h3,.weeks--stack li>p{grid-column:2}
.pv-t__acts span.is-primary:not(.pv__pin){background:var(--c-teal);border-color:var(--c-teal);color:var(--c-white)}
/* Product view: charts kind (.pv-c) */
.pv-c{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;padding:14px;background:var(--c-surface-2)}
.pv-c--one{grid-template-columns:minmax(0,1fr)}
.pv-c__tab{padding:2px 10px;border-radius:4px;background:var(--c-border);color:var(--c-ink);font-size:.9375rem}
.pv-c__p{display:grid;gap:4px;padding:12px 14px;background:var(--c-white);border:1px solid var(--c-border);border-radius:6px;min-width:0}
.pv-c__p h4{margin:0;font:700 1.0625rem/1.2 var(--f-display);color:var(--c-ink)}.pv-c__p h4 .pv__pin{margin-right:8px}
.pv-c__p>p{margin:0;font-size:.875rem;line-height:1.35;color:var(--c-ink-2)}
.pv-c__leg{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.875rem;color:var(--c-ink)}
.pv-c__leg li::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:2px;background:var(--c-teal)}
.pv-c__leg li.s1::before{background:var(--c-emerald)}
.pv-c__svg{width:100%;height:auto;display:block;overflow:visible}
.pv-c__svg .g{stroke:var(--c-border);stroke-width:1}
.pv-c__svg .t{font:400 11px var(--f-text);fill:var(--c-ink-2)}
.pv-c__svg .ln{fill:none;stroke:var(--c-teal);stroke-width:2.5}
.pv-c__svg .dot{fill:var(--c-teal)}
.pv-c__svg .tg{stroke:var(--c-error);stroke-width:1.5;stroke-dasharray:5 4}
.pv-c__svg .chip{fill:var(--c-error)}.pv-c__svg .chip-t{font:700 11px var(--f-text);fill:var(--c-white)}
.pv-c__svg .b0{fill:var(--c-teal)}.pv-c__svg .b1{fill:var(--c-emerald)}
@media (max-width:640px){.pv-c__svg .t{font-size:13px}.pv-c__svg .chip-t{font-size:12.5px}.pv-c{padding:10px}}

/* Product view: chat kind (.pv-ch), an assistant composer and skill menu */
.pv-ch{display:grid;gap:12px;padding:14px;background:var(--c-surface-2)}
.pv-ch__box{position:relative}
.pv-ch__pin{position:absolute;top:-12px;right:-8px;margin:0;z-index:2}
.pv-ch__menu{list-style:none;margin:0;padding:6px;display:grid;gap:2px;background:var(--c-white);border:1px solid var(--c-border);border-radius:10px;font-size:1.0625rem;color:var(--c-ink)}
.pv-ch__menu li{padding:10px 14px;border-radius:6px;overflow-wrap:anywhere}
.pv-ch__menu li.is-on{background:var(--c-surface-teal);color:var(--c-teal);font-weight:700}
.pv-ch__in{display:grid;gap:14px;padding:16px;margin-top:4px;background:var(--c-white);border:1px solid var(--c-rule);border-radius:12px}
.pv-ch__txt{margin:0;font-size:1.0625rem;line-height:1.55;color:var(--c-ink);overflow-wrap:anywhere}
.pv-ch__chip{display:inline-flex;align-items:center;gap:6px;padding:1px 10px 1px 4px;border-radius:6px;background:var(--c-surface-teal);color:var(--c-teal);font-weight:700;overflow-wrap:anywhere}
.pv-ch__chip .pv__pin{margin:0}
.pv-ch__foot{display:flex;justify-content:space-between;align-items:center;color:var(--c-ink-2);font-size:1.375rem;line-height:1}
.pv-ch__send{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:var(--c-teal);color:var(--c-white);font-size:1.125rem}

/* C3 article header, C21 article additions, related list (article template; WEB-116 family) */
.art-head { padding-block: clamp(40px, 2rem + 4vw, 88px) clamp(40px, 2rem + 3vw, 72px); }
.art-head .wrap > * { width: 100%; max-width: 45rem; margin-inline: auto; }
.art-head .wrap { display: grid; gap: 20px; }
.art-head h1 { font-size: clamp(2rem, 1.55rem + 1.9vw, 2.875rem); line-height: 1.1; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--t-small); color: var(--c-on-dark-2); }
.art-meta strong { color: var(--c-on-dark); font-weight: 600; }
.art-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--c-on-dark-2); }
.art-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.art-tags .pill { font-size: var(--t-caption); line-height: 1; padding: 7px 12px; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.1); color: var(--c-on-dark); font-weight: 600; }
.article--read { max-width: 45rem; }
.article--read > p:first-child { font-size: var(--t-lede); line-height: 1.5; }
.article--read h2 { font-size: clamp(1.625rem, 1.45rem + 0.8vw, 2.125rem); margin-top: 2.2em; }
.article--read h2 + p { margin-top: 0.8em; }
.article--read ul, .article--read ol { padding-left: 1.3em; display: grid; gap: 0.5em; }
.article--read a { text-decoration-thickness: 1px; }
.art-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: center; margin-block: 2.4em !important; padding: 22px 26px; background: var(--c-surface-teal); border: 1px solid #C9E1DE; border-radius: var(--r-card); font-size: var(--t-body); }
.art-cta p { font-weight: 600; color: var(--c-ink); }
@media (max-width: 639px) { .art-cta { grid-template-columns: 1fr; } }
.art-after { max-width: 45rem; margin-inline: auto; display: grid; gap: clamp(36px, 2rem + 2vw, 56px); margin-top: clamp(40px, 2rem + 3vw, 72px); }
.art-author { display: grid; gap: 4px; padding-top: 24px; border-top: 1px solid var(--c-border); }
.art-author .name { font-size: var(--t-h4); font-family: var(--f-text); font-weight: 700; letter-spacing: 0; color: var(--c-ink); }
.art-author p { font-size: var(--t-small); color: var(--c-ink-2); }
.related { display: grid; gap: 16px; }
.related h2 { font-size: var(--t-h3); }
.related__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.related__head a { font-size: var(--t-small); }
.related ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-border); }
.related li { position: relative; display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--c-border); }
.related li a { font-family: var(--f-display); font-stretch: 104%; font-weight: 600; font-size: 1.1875rem; line-height: 1.25; color: var(--c-ink); text-decoration: none; text-wrap: balance; }
.related li a::after { content: ""; position: absolute; inset: 0; }
.related li a:hover { color: var(--c-teal); text-decoration: underline; }
.related li a:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 2px; }
.related .meta { font-size: var(--t-small); color: var(--c-ink-2); }
.art-next { display: grid; gap: 12px; }
.art-next h2 { font-size: var(--t-h4); font-family: var(--f-text); font-weight: 700; letter-spacing: 0; }