/* Generated by scripts/product/build.mjs from scripts/product/product.css. Do not edit. */

/* The product library (MARKETING-CONTENT, 16 October 2026). Built on the product's tokens and card styles
   (product.css) and the site's band and type (styles.css, marketing.css). Each page takes its accent from its record
   type through data-entity-type; colour marks records and data, blue stays for actions. */

/* Business area colours: the example's palette entries (src/theme/domainColour.ts). */
.ba-customer { --entity-accent: #527878; }
.ba-operations { --entity-accent: #9b6958; }
.ba-corporate { --entity-accent: #7e6e94; }

/* The strip of product pages under the band. */
/* Product pages navigation (V2): grouped and wrapped on wide screens, a native disclosure on narrow ones. No horizontal
   scrolling. Only the current page is highlighted. */
.pp-nav { border-bottom: 1px solid var(--stravx-border); background: #fff; }
/* Two balanced rows: Start here and Plan above, Change and Review below, in two aligned columns. */
.pp-nav-wide { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 4px 0; padding-block: 8px; }
.pp-nav .pp-nav-wide .pp-nav-group, .pp-nav .pp-nav-wide ul { flex-wrap: nowrap; }
.pp-nav-wide .pp-nav-group:nth-child(odd) { padding-right: 12px; }
.pp-nav-wide a { padding-inline: 8px; }
.pp-nav-group { display: flex; align-items: center; gap: 2px 4px; flex-wrap: wrap; }
.pp-nav-label { margin: 0 6px 0 0; color: var(--stravx-text-muted); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.pp-nav ul { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pp-nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 10px; border-radius: 8px; color: var(--stravx-ink-muted); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.pp-nav a:hover { background: var(--stravx-paper); color: var(--stravx-ink); }
.pp-nav a[aria-current="page"] { background: var(--stravx-primary-soft); color: var(--stravx-link); box-shadow: inset 0 -2px 0 var(--stravx-primary); }
.pp-nav-wide .pp-nav-group:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--stravx-border); }
.pp-nav-wide .pp-nav-label { min-width: 62px; }
.pp-nav-menu { display: none; }
.pp-nav-menu summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 0; cursor: pointer; list-style: none; }
.pp-nav-menu summary::-webkit-details-marker { display: none; }
.pp-nav-menu summary:hover { color: var(--link-hover); }
.pp-nav-menu summary::after { content: ""; width: 9px; height: 9px; margin-right: 6px; border-right: 2px solid var(--stravx-ink-muted); border-bottom: 2px solid var(--stravx-ink-muted); transform: rotate(45deg) translateY(-3px); }
.pp-nav-menu[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.pp-nav-menu-label { color: var(--stravx-text-muted); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.pp-nav-menu-current { flex: 1; color: var(--stravx-ink); font-size: 15px; font-weight: 600; }
.pp-nav-menu-body { display: grid; gap: 14px; padding: 4px 0 16px; }
.pp-nav-menu-body .pp-nav-group { display: grid; gap: 4px; align-items: start; }
.pp-nav-menu-body .pp-nav-group + .pp-nav-group { margin: 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--stravx-border); }
.pp-nav-menu-body ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 2px; }
.pp-nav-menu-body a { min-height: 44px; white-space: normal; }
/* The two rows need about 1,360 pixels, wider than the page column, so the bar takes its own wider column; below
   1,440 pixels the disclosure is clearer than squeezed rows (design critique, 17 October 2026). */
.pp-nav > .wrap { width: min(1400px, calc(100% - 48px)); }
@media (max-width: 1439px) {
  .pp-nav > .wrap { width: min(1240px, calc(100% - 64px)); }
  .pp-nav-wide { display: none; }
  .pp-nav-menu { display: block; }
}

.band-panel.pp-decides ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pp-decides li { position: relative; padding: 12px 14px 12px 40px; border-radius: 12px; background: rgb(255 255 255 / .07); color: #e8eef4; font-size: 15px; line-height: 1.45; }
.pp-decides li::before { content: "?"; position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgb(199 118 109 / .3); color: #f6c3b9; font-size: 12px; font-weight: 600; }

.pp-page { --pp-accent: var(--entity-accent, var(--stravx-ink)); }
.pp-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; padding-block: 40px 80px; }
/* Only an illustration scrolls sideways, never the page: every container between the page and a picture's scroll
   region may shrink below the picture's 960-pixel minimum. */
.pp-body > *, .pp-shot, .pp-shot-frame, .pp-shot-caption, .pp-section, .pp-cols { min-width: 0; max-width: 100%; }
.pp-shot-scroll { width: 100%; max-width: 100%; min-width: 0; }
.pp-body h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.3; letter-spacing: -.02em; }
.pp-body h3 { margin: 0 0 6px; font-size: 16px; }
.pp-intro { margin: 0 0 20px; color: var(--stravx-ink-muted); }
.pp-section > :last-child { margin-bottom: 0; }
.pp-page .text-link { color: var(--link-ink); min-height: 44px; }
.pp-page .text-link:hover { color: var(--link-hover); }

/* Screenshot-style figures. */
.pp-shot { margin: 0; }
.pp-shot-frame { overflow: hidden; border: 1px solid var(--stravx-border); border-top: 3px solid var(--entity-edge); border-radius: 16px; background: #fff; box-shadow: 0 2px 4px rgb(16 27 42 / .04), 0 24px 60px -18px rgb(16 27 42 / .22); }
.pp-shot-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 18px; border-bottom: 1px solid var(--stravx-border); background: var(--stravx-paper); font-size: 12.5px; }
.pp-shot-place { padding: 2px 10px; border-radius: 999px; background: var(--entity-chip); color: var(--entity-ink); font-weight: 500; }
.pp-shot-view { color: var(--stravx-ink); font-weight: 500; }
.pp-shot-scroll { overflow-x: auto; scrollbar-width: thin; }
.pp-shot-scroll:focus-visible { outline-offset: -4px; }
.pp-shot-canvas { min-width: 960px; padding: 22px 26px 26px; color: var(--stravx-ink); font-size: 13px; line-height: 1.45; }
.pp-shot-canvas p { max-width: none; margin: 0; }
.pp-shot-caption { margin-top: 18px; }
.pp-callouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px 24px; margin: 0; padding: 0; list-style: none; }
.pp-callouts li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.55; color: var(--stravx-ink-muted); }
.pp-callouts strong { color: var(--stravx-ink); font-weight: 600; }
.pp-pin { display: inline-grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #182438; color: #fff; font-size: 12px; font-weight: 600; font-style: normal; line-height: 1; box-shadow: 0 0 0 3px #fff; }
.pp-shot-canvas .pp-pin { margin-inline: 6px; vertical-align: middle; color: #fff; font-size: 12px; }
/* More specific than ".mk-svg text", which would otherwise paint the number dark on the dark disc. */
.pp-shot-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px; margin-top: 14px; }
.pp-enlarge { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--stravx-border); border-radius: 10px; background: #fff; color: var(--stravx-link); font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), inset 0 -1px 0 rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .08); }
.pp-enlarge:hover { border-color: var(--stravx-primary-line); }
.pp-describe { margin-top: 10px; border-top: 1px solid var(--stravx-border); }
.pp-describe summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--stravx-ink); transition: color .15s ease; font-size: 14px; font-weight: 500; cursor: pointer; }
.pp-describe summary:hover { color: var(--link-hover); }
.pp-describe-body { padding: 4px 0 8px; font-size: 14px; color: var(--stravx-ink-muted); }
.pp-describe-body ul { margin: 0; padding-left: 20px; }
.pp-describe-body li + li { margin-top: 6px; }
.pp-describe-body table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-describe-body :is(th, td) { padding: 6px 8px; border-bottom: 1px solid var(--stravx-border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }

/* The larger view. */
.pp-dialog { width: min(1400px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--stravx-ink); box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.pp-dialog::backdrop { background: rgb(12 21 34 / .72); }
.pp-dialog-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--stravx-border); background: #fff; }
.pp-dialog-head h2 { margin: 0; font-size: 16px; }
.pp-dialog-close { min-height: 40px; padding: 8px 16px; border: 1px solid var(--stravx-border); border-radius: 10px; background: #fff; color: var(--stravx-link); font-weight: 500; cursor: pointer; }
.pp-dialog-note { margin: 10px 18px 0; color: var(--stravx-text-muted); font-size: 13px; }
.pp-dialog-body { overflow: auto; max-height: calc(100vh - 140px); }
.pp-dialog-body .pp-shot-canvas { min-width: 1240px; font-size: 14px; }

/* What you can do. */
.pp-extra { margin-top: 16px; font-size: 14px; }

/* Feature cards: the overview's groups and every page's "Where next". */
.pp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.pp-features-3 { margin-top: 16px; }
/* No percentage min-height: inside a stretched grid section it resolved to the whole section's height and drew the
   guide card as a large white box (owner steering, V2). Cards in a grid row still match heights by grid stretch. */
.pp-feature { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 44px 18px 20px; border: 1px solid var(--stravx-border); border-top: 3px solid var(--entity-edge); border-radius: 14px; background: #fff; color: var(--stravx-ink); text-decoration: none; box-shadow: var(--stravx-shadow-surface); }
.pp-feature strong { font-size: 16px; font-weight: 600; }
.pp-feature > span:not(.pp-feature-kicker):not(.pp-feature-go) { color: var(--stravx-ink-muted); font-size: 14px; line-height: 1.5; }
.pp-feature-kicker { width: fit-content; padding: 1px 9px; border-radius: 999px; background: var(--entity-chip); color: var(--entity-ink); font-size: 12px; font-weight: 500; }
.pp-feature-go { position: absolute; right: 18px; top: 18px; color: #a14d46; font-size: 18px; }
.pp-feature:hover { border-color: color-mix(in srgb, var(--entity-edge) 40%, var(--stravx-border)); }
@media (prefers-reduced-motion: no-preference) {
  .pp-feature { transition: transform .15s ease, box-shadow .15s ease; }
  .pp-feature:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgb(16 27 42 / .1); }
}
/* The overview's features (Simple First, 16 October 2026): four labelled columns read left to right, one card per
   feature page, two columns on a tablet and one on a phone. */
.pp-features-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; }
.pp-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.pp-col { display: grid; gap: 12px; min-width: 0; }
.pp-col h3 { margin: 0; color: var(--stravx-text-muted); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
/* Questions a buyer asks: a native disclosure each, closed by default, the whole row the target. */
@media (max-width: 1100px) { .pp-cols, .pp-features-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pp-cols, .pp-features-4 { grid-template-columns: minmax(0, 1fr); } }

/* The closing next step. */
.pp-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: 20px; color: #fff; background: linear-gradient(135deg, #101b2a, #14263a 60%, #162e31); }
.pp-next h2 { color: #fff; }
.pp-next p { margin: 0; color: #d5e0e9; }
.pp-next-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.pp-next .text-link { color: #e2e9ef; }
.pp-button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 18px; border-radius: 10px; background: #a5534b; color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; }
.pp-button:hover { background: #94443e; }
.pp-button-quiet { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
.pp-button-quiet:hover { background: rgb(255 255 255 / .18); }

/* ------------------------------------------------------------------------------------------------------------------
   The pictures' parts. Everything below draws inside .pp-shot-canvas. */
.mk-card { padding: 16px; border: 1px solid var(--stravx-border); border-radius: 12px; background: #fff; box-shadow: var(--stravx-shadow-surface); }
.mk-card-title { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.mk-sub { color: var(--stravx-text-muted); font-size: 12px; font-weight: 500; }
.mk-small { margin-top: 6px !important; color: var(--stravx-ink-muted); font-size: 12.5px; line-height: 1.45; }
/* Under a full-width picture: its key on the left, the selected record on the right. */
.mk-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 10px 0; font-size: 12.5px; }
.mk-facts dt { color: var(--stravx-text-muted); }
.mk-facts dd { margin: 0; color: var(--stravx-ink); }
.mk-svg { display: block; width: 100%; height: auto; font-family: var(--stravx-font-sans); }
/* SVG text is set in viewBox units. Pictures never render narrower than 0.9 of their viewBox (the canvas keeps a
   minimum width and scrolls instead), so 12 units stays at or above 11 pixels. */
.mk-svg text { fill: var(--stravx-ink); font-size: 13px; }

/* Change impact. */
.impact-0 { background: var(--stravx-muted-surface); color: var(--stravx-ink-muted); }
.impact-1 { background: var(--impact-1); color: var(--impact-ink-1); }
.impact-2 { background: var(--impact-2); color: var(--impact-ink-2); }
.impact-3 { background: var(--impact-3); color: var(--impact-ink-3); }
.impact-4 { background: var(--impact-4); color: var(--impact-ink-4); }
.impact-5 { background: var(--impact-5); color: var(--impact-ink-5); }

/* Plan alternatives. */
.mk-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12.5px; }
.mk-table caption { padding-bottom: 6px; color: var(--stravx-text-muted); font-size: 12px; font-weight: 500; text-align: left; }
.mk-table :is(th, td) { padding: 8px 10px; border-bottom: 1px solid var(--stravx-border); text-align: left; vertical-align: middle; }
.mk-table thead th { background: var(--stravx-paper); color: var(--stravx-text-muted); font-size: 12px; font-weight: 500; }
.mk-table tbody th { font-weight: 500; }
.mk-table tr.is-problem td { background: color-mix(in srgb, var(--rag-red-soft) 45%, #fff); }

/* Insights. */
.mk-findings { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.mk-findings li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--stravx-border); border-radius: 10px; font-size: 12.5px; }
.mk-findings small { color: var(--stravx-link); text-decoration: underline; text-underline-offset: 3px; }

/* Guide mapping. */
/* The document column is drawn cell by cell as one sheet of paper; each line shares a row with its record. */
.mk-doc-head, .mk-doc-line { margin: 0; padding: 10px 24px; border-inline: 1px solid #e3e1da; background: #fffdf8; font-family: Georgia, "Times New Roman", serif; }
.mk-doc-head { padding-top: 22px; border-top: 1px solid #e3e1da; border-radius: 8px 8px 0 0; }
.mk-doc-title { font-size: 18px; font-weight: 600; }
.mk-doc-meta { color: #7b7466; font-size: 12px; font-style: italic; }
.mk-doc-line { display: flex; align-items: center; min-height: 76px; box-shadow: inset 0 1px 0 #efece4; font-size: 13.5px; }
.mk-doc-end { grid-column: 1; min-height: 0; padding-bottom: 18px; border-bottom: 1px solid #e3e1da; border-radius: 0 0 8px 8px; color: #a59f92; }
.mk-doc-line { min-height: 64px; }
/* On a phone the mapping reads top to bottom, each heading followed by its record, instead of a 960-pixel picture
   whose document column filled the screen as a blank box (owner steering, V2). */
@media (max-width: 760px) {
        .mk-doc-line { min-height: 0; margin-top: 22px; border: 1px solid #e3e1da; border-radius: 8px; box-shadow: none; }
  .mk-doc-head { border-radius: 8px; border-bottom: 1px solid #e3e1da; }
  .mk-doc-end { display: none; }
}

/* The prompt runs across the top: title and question on the left, who and what on the right. */
.mg-trend { max-width: 340px; margin-top: 6px; }
.mg-trend-line { fill: none; stroke: var(--entity-kpi); stroke-width: 2; }
.mg-trend-dot { fill: var(--entity-kpi); stroke: #fff; stroke-width: 1.5; }
.mg-trend-target { stroke: var(--stravx-text-muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.mg-values { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 12.5px; }
.mg-values li { display: flex; justify-content: space-between; padding: 4px 8px; border-radius: 6px; background: var(--stravx-paper); }

/* On a phone the scope picture stacks instead of scrolling: it is mostly words and boxes, readable at any width. */

@supports (corner-shape: squircle) {
  :root :is(.pp-shot-frame, .pp-feature, .pp-next, .pp-dialog) { corner-shape: squircle; border-radius: 24px; }
  :root .pp-shot-canvas :is(.record-card, .mk-card) { corner-shape: squircle; border-radius: 16px; }
}

@media (max-width: 1000px) {
  .pp-next { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pp-body { gap: 40px; padding-block: 28px 56px; }
  .pp-shot-frame { border-radius: 12px; }
  .pp-shot-canvas { padding: 16px; }
}
@media (forced-colors: active) {
  .pp-pin { forced-color-adjust: none; }
  .pp-nav a[aria-current="page"] { outline: 2px solid Highlight; }
}
@media print {
  .pp-nav, .pp-enlarge, .pp-dialog, .pp-next { display: none; }
  .pp-shot-scroll { overflow: visible; }
  .pp-describe { display: none; }
}

/* ------------------------------------------------------------------------------------------------------------------
   The overview's answer, played out as boxes and lines (owner direction, 16 October 2026). The cards are the product's
   record cards; product-pages.js draws the connecting lines by the friendly visual language's rule: curves from the
   right edge of one card to the left edge of the next, a timing conflict as a red arc on the right of the two cards it
   joins, and a dashed line to a gap card. */
.pp-shot[data-shot="answer"] .pp-shot-canvas { min-width: 0; padding: 28px clamp(16px, 4vw, 48px) 32px; }
.mk-scenes { --insight-gap: #7d8596; display: grid; gap: 48px; max-width: 900px; margin-inline: auto; }
@media (max-width: 640px) { .mk-player-try { flex-basis: 100%; margin-left: 0; } }
.mk-scene { display: grid; gap: 16px; align-content: start; }
.mk-scene-step { margin: 0; color: var(--stravx-text-muted); font-size: 12px; font-weight: 500; }
.mk-scene-question { margin: 0; color: var(--stravx-ink); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
/* One row per Objective (or placeholder) and its Initiatives, so a record and what it links to sit level. */
.mk-scene-picture { position: relative; display: grid; gap: 16px; padding-right: 40px; }
.mk-scene-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(72px, 12vw, 150px); align-items: center; }
.mk-scene-line-text + .mk-scene-line-text { display: block; margin-top: 2px; }
.mk-scene-side { position: relative; z-index: 1; display: grid; gap: 14px; align-content: center; }
.mk-scene-node .record-card { background: var(--stravx-surface, #fff); }
.mk-scene-status { margin-top: 8px; }
.mk-scene-dates { margin: 4px 0 0; color: var(--stravx-text-muted); font-size: 12px; }
.mk-scene-node { position: relative; }
.mk-scene-node.is-apart { margin-top: 22px; }
.mk-scene-pin { position: absolute; top: -10px; right: -10px; z-index: 2; }
/* A one-line key for a dashed box or a red arrow, the first time each appears (persona round 1). */
.mk-scene-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; color: var(--stravx-ink-muted); font-size: 14px; }
.mk-scene-key li { display: inline-flex; align-items: center; gap: 8px; }
.mk-key-dash { width: 26px; height: 16px; border: 1.5px dashed var(--insight-gap); border-radius: 4px; }
.mk-key-arrow { position: relative; width: 26px; height: 2.5px; background: var(--rag-red); }
.mk-key-arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--rag-red); border-right: 0; }
.mk-scene-numbered { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.mk-scene-numbered.is-plain { margin-top: 10px; }
.mk-scene-numbered .pp-pin { flex: none; }
/* The standard gap card: dashed edge and border, no shadow, a transparent body and the title in muted ink. */
/* One even dashed border, so a placeholder never shows the record edge; round corners, as a dashed squircle draws
   a doubled line. */
.mk-scene .mk-scene-node .record-card.is-gap { border: 1.5px dashed var(--insight-gap); background: transparent; box-shadow: none; }
@supports (corner-shape: squircle) { :root .mk-scene .mk-scene-node .record-card.is-gap { corner-shape: round; } }
.mk-scene-node .record-card.is-gap .record-title { color: var(--stravx-text-muted); font-weight: 500; }
.mk-scene-lines { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mk-scene-line { fill: none; stroke: color-mix(in srgb, var(--entity-initiative) 55%, #fff); stroke-width: 2.5; stroke-linecap: round; }
.mk-scene-line.is-gap { stroke: var(--insight-gap); stroke-width: 2; stroke-dasharray: 6 5; }
.mk-scene-line.is-conflict { stroke: var(--rag-red); stroke-width: 2.5; stroke-linejoin: round; }
.mk-scene-head { fill: var(--rag-red); stroke: var(--rag-red); stroke-width: 1; stroke-linejoin: round; }
.mk-scene-verdict { margin: 0; color: var(--stravx-ink-muted); font-size: 16px; line-height: 1.55; }
.mk-scene-verdict strong { color: var(--stravx-ink); font-weight: 600; }
/* On a phone the two sides stay side by side, narrower, so every line still runs from one side to the other. */
@media (max-width: 640px) {
  .mk-scene-picture { padding-right: 38px; }
  .mk-scene-row { column-gap: 40px; }
  .mk-scene-side { gap: 10px; }
  .mk-scene-node .record-card--compact .record-title { font-size: 13px; line-height: 18px; overflow-wrap: break-word; }
  .mk-scene-node .record-card--compact .record-identity { padding-inline: 10px; }
  .mk-scene-node .record-card--compact .record-body { padding: 6px 10px 10px; }
}
/* With the player running, one scene shows at a time: the cards appear, then the lines draw in. */
.mk-scenes.is-playing .mk-scene:not(.is-current), .mk-scenes.is-playing .mk-scene-step { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .mk-scenes.is-playing .mk-scene.is-current { animation: mk-scene-in .2s ease-out; }
  @keyframes mk-scene-in { from { opacity: 0; } }
  .mk-scenes.is-playing .mk-scene-line:not(.is-gap) { stroke-dashoffset: 0; transition: stroke-dashoffset .7s ease-out .25s; }
  .mk-scenes.is-playing .mk-scene-line:not(.is-gap).is-drawing { stroke-dasharray: 1; stroke-dashoffset: 1; transition: none; }
  .mk-scenes.is-playing .mk-scene-line.is-gap { transition: opacity .5s ease .35s; }
  .mk-scenes.is-playing .mk-scene-line.is-gap.is-drawing { opacity: 0; transition: none; }
}
/* The player bar, inside the picture's frame: icon buttons with hover labels, one dot per step, and the next step. */
.mk-player { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 16px; border-top: 1px solid var(--stravx-border); background: var(--stravx-paper); }
.mk-player[hidden] { display: none; }
.mk-player-btn, .mk-player-dot { position: relative; cursor: pointer; }
.mk-player-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--stravx-border); border-radius: 999px; background: #fff; color: var(--stravx-ink); }
.mk-player-btn:hover { border-color: var(--stravx-ink-muted); }
.mk-player-btn .mk-player-play, .mk-player-btn.is-playing .mk-player-pause { display: grid; }
.mk-player-btn .mk-player-pause, .mk-player-btn.is-playing .mk-player-play { display: none; }
.mk-player-steps { display: flex; align-items: center; gap: 2px; margin: 0 0 0 6px; padding: 0; list-style: none; }
.mk-player-dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; }
.mk-player-dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--stravx-border); transition: width .2s ease, background-color .2s ease; }
.mk-player-dot:hover::before { background: var(--stravx-ink-muted); }
.mk-player-dot[aria-current="step"]::before { width: 18px; background: var(--stravx-ink); }
.mk-player-try { margin-left: auto; min-height: 36px; font-size: 14px; }
/* Hover labels, not browser tooltips (owner direction, 16 October 2026): on pointer hover after a pause, at once on focus. */
.mk-player [data-tip]::after { content: attr(data-tip); position: absolute; z-index: 30; bottom: calc(100% + 8px); left: 50%; padding: 4px 8px; border: 1px solid var(--stravx-border); border-radius: 8px; background: #fff; color: var(--stravx-ink); box-shadow: var(--stravx-shadow-raised); font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; translate: -50% 3px; transition: opacity .12s ease, translate .12s ease; }
.mk-player [data-tip]:hover::after { opacity: 1; translate: -50% 0; transition-delay: .3s; }
.mk-player [data-tip]:focus-visible::after { opacity: 1; translate: -50% 0; }
.mk-player-steps li:first-child [data-tip]::after { left: 0; translate: 0 3px; }
.mk-player-steps li:first-child [data-tip]:is(:hover, :focus-visible)::after { translate: 0 0; }
@media (prefers-reduced-motion: no-preference) { .mk-scenes.is-playing { transition: height .3s ease; } }
.mk-scenes.is-playing { overflow: hidden; align-items: start; align-content: start; }

/* A normal month (owner direction, 16 October 2026): one year at the invented firm, told as quotes from the people
   doing the work, on a line of dated moments. "In waytrk" under each quote says what the person records. */
.fr-cast { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 28px; padding: 0; list-style: none; }
.fr-cast li { display: flex; align-items: center; gap: 10px; }
.fr-cast b { display: block; font-weight: 600; color: var(--stravx-ink); }
.fr-cast small { color: var(--stravx-text-muted); font-size: 13px; }
.fr-face { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.fr-face.is-helen { background: #1f3a5f; }
.fr-face.is-ana { background: #a5534b; }
.fr-face.is-chloe { background: #6d3fb3; }
.fr-face.is-ben { background: #0f6d63; }
.fr-face.is-dev { background: #475569; }
.fr-year { position: relative; display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.fr-year::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 118px; width: 2px; background: var(--stravx-border); }
.fr-moment { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 32px; align-items: start; }
.fr-meeting, #fr-story { scroll-margin-top: 24px; }
.fr-moment::before { content: ""; position: absolute; top: 22px; left: 113px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #a5534b; }
.fr-when { margin: 0; padding-top: 16px; color: var(--stravx-text-muted); font-size: 13px; font-weight: 500; text-align: right; }
.fr-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; max-width: 760px; padding: 16px 18px; border: 1px solid var(--stravx-border); border-radius: 14px; background: #fff; box-shadow: var(--stravx-shadow-surface); }
.fr-card > * { grid-column: 2; }
.fr-card > .fr-face { grid-column: 1; grid-row: 1 / span 2; }
.fr-name { margin: 0; color: var(--stravx-text-muted); font-size: 13px; }
.fr-name b { color: var(--stravx-ink); font-weight: 600; }
.fr-says { margin: 6px 0 0; padding-left: 16px; border-left: 3px solid #e2c4bf; }
.fr-says p { margin: 0; color: var(--stravx-ink); font-size: 18px; font-style: italic; line-height: 1.5; }
.fr-then { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--stravx-border); color: var(--stravx-ink-muted); font-size: 15px; }
.fr-then b { margin-right: 6px; color: #7f3a33; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.fr-see { justify-self: start; min-height: 32px; margin-top: 8px; padding: 4px 0; border: 0; background: none; color: #a5534b; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.fr-see:hover { color: #7f3a33; }
.fr-see:focus-visible { outline: 2px solid var(--stravx-focus); outline-offset: 3px; border-radius: 4px; }
.fr-meeting { display: grid; max-width: 760px; padding: 18px 20px; border-radius: 14px; background: #fbf3f1; box-shadow: inset 0 0 0 1px #edd3ce; }
.fr-meeting h3 { margin: 0 0 4px; color: #7f3a33; font-size: 13px; font-weight: 500; }
.fr-question { margin: 0 0 12px; color: var(--stravx-ink); font-size: 20px; font-weight: 600; line-height: 1.35; }
.fr-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 4px; padding: 0; list-style: none; }
.fr-options li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; background: #fff; color: var(--stravx-ink-muted); font-size: 15px; }
.fr-options .fr-face { width: 32px; height: 32px; font-size: 12px; }
.fr-options b { display: block; color: var(--stravx-ink); font-weight: 600; }
.fr-meeting .fr-then { border-top-color: #edd3ce; }
.fr-roles { margin: 26px 0 0; color: var(--stravx-text-muted); font-size: 14px; }
.pp-dialog-body > .pp-shot { margin: 0; }
.pp-dialog-body > .pp-shot .pp-shot-foot { display: none; }
@media (max-width: 760px) {
  .fr-year::before { left: 6px; }
  .fr-moment { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-left: 26px; }
  .fr-moment::before { top: 4px; left: 1px; }
  .fr-when { padding-top: 0; text-align: left; }
  .fr-card { grid-template-columns: 36px minmax(0, 1fr); padding: 14px; }
  .fr-card > .fr-face { width: 36px; height: 36px; font-size: 13px; }
  .fr-says p { font-size: 17px; }
  .fr-options { grid-template-columns: minmax(0, 1fr); }
}

/* The story's small pictures: one idea each, opened from a moment in the page's dialog, which narrows to fit them. */
.pp-dialog:has(.pp-shot[data-shot^="fr-"]) { width: min(800px, calc(100vw - 32px)); }
.pp-dialog:has(.pp-shot[data-shot^="fr-"]) .pp-dialog-head { padding: 16px 24px; }
.pp-dialog:has(.pp-shot[data-shot^="fr-"]) .pp-dialog-head h2 { font-size: 17px; font-weight: 600; }
.pp-dialog:has(.pp-shot[data-shot^="fr-"]) .pp-dialog-note { display: none; }
.pp-dialog-body:has(> .pp-shot[data-shot^="fr-"]) { padding: 28px 32px 32px; background: var(--stravx-paper); }
.pp-dialog-body > .pp-shot[data-shot^="fr-"] .pp-shot-bar { display: none; }
.pp-dialog-body > .pp-shot[data-shot^="fr-"] .pp-shot-frame { box-shadow: 0 1px 2px rgb(16 27 42 / .05), 0 10px 30px -14px rgb(16 27 42 / .2); }
.pp-dialog-body > .pp-shot[data-shot^="fr-"] .pp-shot-canvas { min-width: 0; padding: 28px; font-size: 14px; }
.pp-dialog-body > .pp-shot[data-shot^="fr-"] .pp-shot-scroll { overflow: visible; }
.pp-dialog-body > .pp-shot[data-shot^="fr-"] .pp-shot-caption:empty, .pp-dialog-body > .pp-shot[data-shot^="fr-"] .pp-shot-caption:not(:has(*)) { display: none; }
.fr-pic-one { display: grid; max-width: 520px; margin-inline: auto; }
.fr-pic-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fr-pic-stack { display: grid; align-content: start; }
.fr-pic-join { justify-self: center; width: 2px; height: 16px; background: var(--stravx-border); }
.fr-pic-card .mk-small + .mk-small { margin-top: 2px; }
.fr-pic-chain { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.fr-pic-arrow { display: grid; justify-items: center; gap: 2px; color: var(--stravx-text-muted); }
.fr-pic-arrow b { font-size: 20px; line-height: 1; color: var(--stravx-ink-muted); }
.fr-pic-arrow small { max-width: 64px; font-size: 12px; line-height: 1.2; text-align: center; }
.fr-pic-clash { display: block; width: 100%; height: auto; }
.fr-clash-grid { stroke: var(--stravx-border); stroke-width: 1; }
.fr-clash-month { fill: var(--stravx-text-muted); font-size: 12px; }
.fr-clash-bar.is-sheets { fill: color-mix(in srgb, var(--entity-initiative) 22%, #fff); stroke: var(--entity-initiative); }
.fr-clash-bar.is-app { fill: color-mix(in srgb, #5e7393 18%, #fff); stroke: #5e7393; }
.fr-clash-label { fill: var(--stravx-ink); font-size: 12px; font-weight: 500; }
.fr-clash-note { fill: var(--stravx-text-muted); font-size: 12px; }
.fr-clash-was { stroke: var(--stravx-text-muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.fr-clash-overlap { fill: rgb(200 30 30 / .1); stroke: var(--stravx-danger); stroke-width: 1.5; stroke-dasharray: 4 3; }
.fr-pic-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--stravx-ink-muted); }
.fr-pic-note { display: grid; gap: 2px; margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--stravx-paper); color: var(--stravx-ink-muted); font-size: 13px; }
.fr-pic-note b { color: var(--stravx-ink); font-weight: 600; font-size: 12px; }
.fr-pic-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--stravx-ink-muted); }
.fr-pic-head b { color: var(--stravx-ink); font-weight: 600; }
.fr-pic-table { font-size: 13.5px; }
.fr-pic-history { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--stravx-ink-muted); font-size: 13px; }
.fr-pic-history span { display: inline-block; min-width: 72px; color: var(--stravx-text-muted); }
@media (max-width: 640px) {
  .fr-pic-two, .fr-pic-chain { grid-template-columns: minmax(0, 1fr); }
  .fr-pic-arrow { grid-auto-flow: column; justify-content: start; }
  .fr-pic-arrow b { transform: rotate(90deg); }
  .pp-dialog-body:has(> .pp-shot[data-shot^="fr-"]) { padding: 16px; }
  .pp-dialog-body > .pp-shot[data-shot^="fr-"] .pp-shot-canvas { padding: 16px; }
}
/* Illustrated headshots replace the initials: the drawing fills the circle. */
.fr-face:has(.fr-avatar) { overflow: hidden; background: none; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgb(24 36 56 / .18); }
.fr-avatar { display: block; width: 100%; height: 100%; }
/* One month (owner direction, 16 October 2026): short cards before and after September, the month itself on the line. */
.fr-part { margin: 26px 0 12px; color: var(--stravx-text-muted); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.fr-briefs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.fr-briefs-one { grid-template-columns: minmax(0, 760px); }
.fr-brief .fr-card { height: 100%; box-sizing: border-box; padding: 14px 16px; }
.fr-brief .fr-says p { font-size: 16px; }
.fr-brief .fr-then { font-size: 14px; }
@media (max-width: 1000px) { .fr-briefs { grid-template-columns: minmax(0, 1fr); } }

/* Try before you buy (owner direction, 16 October 2026): three ways in, a trial in three steps, topics to ask about. */
.ev-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ev-way { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; padding: 22px 22px 20px; border: 1px solid var(--stravx-border); border-radius: 16px; background: #fff; box-shadow: var(--stravx-shadow-surface); }
.ev-way.is-demo { border-color: #e2b3ac; background: #fbf3f1; }
.ev-way-n { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-bottom: 6px; border-radius: 50%; background: var(--stravx-paper); color: var(--stravx-ink); font-size: 14px; font-weight: 600; }
.ev-way.is-demo .ev-way-n { background: #a5534b; color: #fff; }
.ev-way h3 { margin: 0; font-size: 19px; font-weight: 600; }
.ev-way p { margin: 0; color: var(--stravx-ink-muted); }
.ev-way-go { justify-self: start; margin-top: 10px; color: #a5534b; font-weight: 500; text-decoration: none; }
.ev-way.is-demo .ev-way-go { padding: 10px 16px; border-radius: 10px; background: #a5534b; color: #fff; }
.ev-way-go::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.ev-way:hover { border-color: #c98f86; }
.ev-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ev-step { position: relative; display: grid; align-content: start; gap: 6px; padding: 18px 20px; border-top: 3px solid #a5534b; border-radius: 0 0 12px 12px; background: #fff; }
.ev-step + .ev-step::before { content: "→"; position: absolute; top: 18px; left: -14px; color: var(--stravx-text-muted); }
.ev-step-n { color: #a5534b; font-size: 13px; font-weight: 600; }
.ev-step h3 { margin: 0; font-size: 17px; font-weight: 600; }
.ev-step p { margin: 0; color: var(--stravx-ink-muted); }
.ev-signs { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--stravx-ink-muted); }
.ev-signs span { margin-right: 8px; color: var(--stravx-success); font-weight: 600; }
.ev-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ev-topics li { padding: 8px 14px; border: 1px solid var(--stravx-border); border-radius: 999px; background: #fff; color: var(--stravx-ink); font-size: 15px; }
.ev-topics li.is-planned { border-style: dashed; }
.ev-topics b { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--stravx-paper); color: var(--stravx-text-muted); font-size: 12px; font-weight: 500; }
@media (max-width: 860px) {
  .ev-ways, .ev-steps { grid-template-columns: minmax(0, 1fr); }
  .ev-step + .ev-step::before { content: none; }
}

/* Use your existing strategy (owner direction, 16 October 2026): the picture leads; three steps, what you don't need. */
.ug-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ug-step { position: relative; display: grid; align-content: start; gap: 6px; padding: 18px 20px; border-top: 3px solid var(--entity-priority-area); border-radius: 0 0 12px 12px; background: #fff; }
.ug-step + .ug-step::before { content: "→"; position: absolute; top: 18px; left: -14px; color: var(--stravx-text-muted); }
.ug-step-n { color: var(--entity-priority-area); font-size: 13px; font-weight: 600; }
.ug-step h3 { margin: 0; font-size: 17px; font-weight: 600; }
.ug-step p { margin: 0; color: var(--stravx-ink-muted); }
.ug-not { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ug-not li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--stravx-border); color: var(--stravx-ink-muted); }
.ug-not span { color: var(--stravx-danger); font-weight: 600; }
@media (max-width: 860px) { .ug-steps { grid-template-columns: minmax(0, 1fr); } .ug-step + .ug-step::before { content: none; } }

/* The guide's picture (owner direction, 16 October 2026): the strategy document becomes connected records, one heading
   at a time. product-pages.js marks what is still to come with "is-ahead" and the current heading with "is-now". */
/* Wide enough for the document beside the structure; on a phone the picture scrolls sideways like the others. */
.pp-shot[data-shot="mapping"] .pp-shot-canvas { min-width: 880px; }
.mk-build { position: relative; display: grid; grid-template-columns: minmax(250px, .78fr) 76px minmax(0, 1.42fr); align-items: start; }
.mk-build-doc { overflow: hidden; border: 1px solid #e3e1da; border-radius: 8px; background: #fffdf8; box-shadow: 0 1px 2px rgb(16 27 42 / .05); }
.mk-build-doc .mk-doc-head { position: relative; border: 0; border-radius: 0; }
.mk-build-doc .mk-doc-line { display: block; min-height: 0; margin: 0; padding: 12px 22px; border: 0; border-radius: 0; line-height: 1.45; transition: background-color .45s ease, box-shadow .45s ease; }
.mk-build-doc .mk-doc-end { border: 0; border-radius: 0; }
.mk-doc-line.is-now { background: #fdf1c7; box-shadow: inset 3px 0 0 #d9a93a; }
.mk-build-into { position: relative; align-self: center; display: grid; justify-items: center; margin: 0; padding-top: 18px; color: var(--stravx-text-muted); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.mk-build-into::before { content: ""; position: absolute; top: 0; left: 10px; right: 14px; height: 2px; background: var(--entity-edge); }
.mk-build-into::after { content: ""; position: absolute; top: -5px; right: 6px; border: 6px solid transparent; border-left-color: var(--entity-edge); }
.mk-build-tree { position: relative; display: grid; gap: 30px; }
.mk-build-row { position: relative; z-index: 1; display: grid; gap: 18px; }
.mk-build-row.is-top { justify-items: center; }
.mk-build-row.is-top > .mk-build-card { width: min(62%, 330px); }
.mk-build-row.is-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.mk-build-pair { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.mk-build-row.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk-build-card { background: #fff; transition: opacity .5s ease, transform .65s cubic-bezier(.2, .7, .2, 1); }
.mk-build-card .mk-small { margin: 2px 0 0; color: var(--stravx-text-muted); font-size: 12px; }
.mk-build-lines { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mk-build-line { fill: none; stroke: #9aa8b8; stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset .7s ease-out .2s, opacity .4s ease; }
.mk-build-line.is-dep { stroke: #7f8da0; stroke-width: 1.75; stroke-dasharray: 5 4; }
.mk-build-line.is-dep.is-tip { stroke-dasharray: none; }
.mk-build-head { fill: #7f8da0; }
.mk-build .mk-build-key { display: flex; align-items: center; gap: 10px 28px; flex-wrap: wrap; margin: 64px 0 4px; color: var(--stravx-text-muted); font-size: 12px; transition: opacity .4s ease; }
.mk-build-key-item { display: inline-flex; align-items: center; gap: 10px; }
.mk-build-key i { display: inline-block; width: 24px; height: 0; border-top: 2px solid #9aa8b8; }
.mk-build-key i.is-dep { border-top: 2px dashed #7f8da0; }
.mk-build .is-ahead.mk-build-card { opacity: 0; transform: translateX(-36px); }
.mk-build .mk-build-key.is-ahead { opacity: 0; }
.mk-build-line.is-ahead:not(.is-dep) { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: none; }
.mk-build-line:not(.is-dep) { stroke-dasharray: 1; stroke-dashoffset: 0; }
.mk-build-line.is-dep.is-ahead { opacity: 0; transition: none; }
.mk-build-player { display: flex; justify-content: flex-end; padding: 16px 24px 24px; }
.mk-build-replay { padding: 8px 14px; border: 1px solid var(--stravx-border); border-radius: 10px; background: #fff; color: #a5534b; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.mk-build-replay:hover { border-color: #c98f86; }
/* The feature pages' card-and-line pictures (owner direction, 16 October 2026): the build tree alone, each part
   arriving at its step. A gap is a dashed placeholder with no type chip; a chip names a type or a score. */
.mk-build.is-tree { display: block; }
.pp-shot:is([data-shot="measures"], [data-shot="plans"], [data-shot="connections"], [data-shot="impact"], [data-shot="alternative"], [data-shot="assess"], [data-shot="insights"], [data-shot="together"]) .pp-shot-canvas { min-width: 640px; }
.mk-build-gap { display: grid; place-items: center; min-height: 64px; padding: 12px 14px; border: 1.5px dashed var(--insight-gap, #9aa5b4); border-radius: 12px; background: transparent; color: var(--stravx-text-muted); font-size: 13px; text-align: center; }
.mk-build-chip { display: inline-flex; align-items: center; width: fit-content; padding: 1px 9px; border-radius: 999px; background: var(--stravx-muted-surface, #eef1f5); color: var(--stravx-ink); font-size: 12px; font-weight: 500; }
/* The board pack as a small A4 sheet: paper, serif heading, one line per section. */
.mk-pack { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid #e6dfcf; border-radius: 6px; background: #fffdf7; box-shadow: 0 6px 18px rgb(16 27 42 / .08); font-size: 12px; }
.mk-pack-head { margin: 0 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-weight: 600; color: #1d2433; }
.mk-pack-line { margin: 0; color: var(--stravx-ink-muted); line-height: 1.45; }
.mk-pack-line b { display: block; color: var(--stravx-ink); font-weight: 600; }
.mk-build-chip.is-impact { background: color-mix(in srgb, var(--entity-edge, #c2185b) 14%, #fff); color: var(--entity-ink, #7a1040); }
.mk-build-status { display: grid; justify-items: start; gap: 4px; margin-top: 8px; transition: opacity .5s ease; }
.mk-build-status .mk-small { margin: 0; }
.mk-build .mk-build-status.is-ahead { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mk-build-card, .mk-build-line, .mk-build-key, .mk-build-status, .mk-build-doc .mk-doc-line { transition: none; } }
/* With script, the arrow follows the build: from the heading being read to the first record it becomes. The static
   arrow between the columns is only for readers without script. */
.mk-build-flow { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mk-build-flow-line { fill: none; stroke: var(--entity-edge); stroke-width: 1.75; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .6s ease-out; }
.mk-build-flow.is-drawing .mk-build-flow-line { stroke-dashoffset: 1; transition: none; }
.mk-build-flow-head { fill: var(--entity-edge); transition: opacity .15s ease-out .5s; }
.mk-build-flow.is-drawing .mk-build-flow-head { opacity: 0; transition: none; }
.mk-build.has-flow .mk-build-into { align-self: start; padding-top: 6px; }
.mk-build.has-flow .mk-build-into::before, .mk-build.has-flow .mk-build-into::after { display: none; }
@media (prefers-reduced-motion: reduce) { .mk-build-flow-line, .mk-build-flow-head { transition: none; } }

/* ------------------------------------------------------------------------------------------------------------------
   The feature pages' screens (owner, 17 October 2026: show the software). Each draws the waytrk screen it is about;
   the parts below are the screens' own. Restored from the screens of 15 October, with nothing below 12px. */
.mk-page-head { margin-bottom: 16px; }
.mk-eyebrow { color: var(--stravx-text-muted); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.mk-title { margin-top: 2px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.mk-desc { margin-top: 4px; color: var(--stravx-ink-muted); }
.mk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.mk-control { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 11px; border: 1px solid var(--stravx-border); border-radius: 8px; background: #fff; color: var(--stravx-ink); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.mk-control-primary { border-color: var(--stravx-primary); background: var(--stravx-primary); color: #fff; }
.mk-control-link { border-color: transparent; background: transparent; color: var(--stravx-link); text-decoration: underline; text-underline-offset: 3px; padding-inline: 4px; }
.mk-control-tab { border-color: transparent; border-radius: 0; background: transparent; color: var(--stravx-link); box-shadow: inset 0 -2px 0 var(--stravx-primary); }
.mk-control-tabmuted { border-color: transparent; background: transparent; color: var(--stravx-text-muted); }
.mk-control-field { border-color: #c9d3dd; background: #fff; font-weight: 400; color: var(--stravx-ink); }
.mk-figure { margin: 6px 0 10px !important; color: var(--stravx-ink-muted); font-size: 12.5px; }
.mk-figure b { margin-right: 4px; color: var(--stravx-ink); font-size: 22px; font-weight: 600; }
.mk-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px !important; color: var(--stravx-text-muted); font-size: 12px; }
.mk-key-row { margin-top: 14px !important; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-split { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.mk-split-wide { grid-template-columns: minmax(0, 1fr) 300px; }
.mk-split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Under a full-width picture: its key on the left, the selected record on the right. */
.mk-below { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; margin-top: 12px; }
.mk-key-bar { display: inline-block; width: 22px; height: 10px; border-radius: 5px; background: var(--entity-initiative); }
.mk-key-bar.is-run { background: #cbd5e1; }
.mk-key-bar.is-undated { background: #fff; border: 1.5px dashed #a0acb9; }
.mk-key-conflict { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--rag-red); }
.mk-side-card .record-body { gap: 2px; }
/* SVG text is set in viewBox units. Pictures never render narrower than 0.9 of their viewBox (the canvas keeps a
   minimum width and scrolls instead), so 12 units stays at or above 11 pixels. */
.mk-grid { stroke: #edf1f5; stroke-width: 1; }
.mk-axis { fill: var(--stravx-text-muted) !important; font-size: 12px !important; }
.mk-year { fill: var(--stravx-ink) !important; font-size: 12px !important; font-weight: 600; }
.mk-today { stroke: #1f62e0; stroke-width: 1.5; stroke-dasharray: 4 3; }
.mk-today-chip { fill: #1f62e0; }
.mk-today-text { fill: #fff !important; font-size: 12px !important; font-weight: 600; }

/* Strategy map. */
.mk-band { fill: color-mix(in srgb, var(--entity-priority-area) 7%, #fff); }
.mk-band-edge { fill: var(--entity-priority-area); }
.mk-band-text { fill: color-mix(in srgb, var(--entity-priority-area) 70%, #182438) !important; font-size: 12.5px !important; font-weight: 600; }
.mk-row-title { font-size: 13px !important; font-weight: 600; }
.mk-row-sub { fill: var(--stravx-text-muted) !important; font-size: 12px !important; }
.mk-gap-mark { fill: none; stroke: #b45309; stroke-width: 1.2; stroke-dasharray: 3 2; }
.mk-okr-line { stroke: color-mix(in srgb, var(--entity-okr) 35%, #fff); stroke-width: 6; stroke-linecap: round; }
.mk-line-label { fill: var(--entity-okr) !important; font-size: 12px !important; font-weight: 600; }
.mk-kr { stroke: #fff; stroke-width: 2; }
.mk-kr-green { fill: var(--rag-green); } .mk-kr-amber { fill: var(--rag-amber); } .mk-kr-red { fill: var(--rag-red); }
.mk-kr-none { fill: #fff; stroke: var(--rag-none); stroke-dasharray: 3 2; stroke-width: 1.5; }
.mk-kr-glyph { fill: #fff !important; font-size: 12px !important; font-weight: 600; }
.mk-kr-label { font-size: 12px !important; }
.mk-kpi-line { stroke: color-mix(in srgb, var(--entity-kpi) 30%, #fff); stroke-width: 3; }
.mk-kpi-end { fill: #fff; stroke: var(--entity-kpi); stroke-width: 2.5; }
.mk-kpi-value { fill: var(--stravx-text-muted) !important; font-size: 12px !important; }
.mk-key-kpi { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--entity-kpi); transform: rotate(45deg); }

/* Work timeline. */
.mk-band-figures { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.mk-band-figures span { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; border: 1px solid var(--stravx-border); border-radius: 10px; background: var(--stravx-paper); color: var(--stravx-ink-muted); font-size: 12px; }
.mk-band-figures b { color: var(--stravx-ink); font-size: 17px; font-weight: 600; }
.mk-fn { fill: color-mix(in srgb, var(--entity-accent) 9%, #fff); }
.mk-fn-edge { fill: var(--entity-accent); }
.mk-fn-text { font-size: 12.5px !important; font-weight: 600; fill: color-mix(in srgb, var(--entity-accent) 60%, #182438) !important; }
.mk-fn-area { fill: var(--stravx-text-muted) !important; font-size: 12px !important; }
.mk-name { font-size: 12px !important; }
.mk-name.is-selected { font-weight: 600; }
.mk-chiptext { fill: var(--stravx-text-muted) !important; font-size: 12px !important; }
.mk-bar { fill: var(--entity-initiative); }
.mk-bar.is-run { fill: #cbd5e1; }
.mk-bar.is-selected { stroke: #182438; stroke-width: 2; }
.mk-bar.is-ghost { fill: #fff; stroke: var(--entity-initiative); stroke-width: 1.5; stroke-dasharray: 4 3; }
.mk-bar-note { fill: var(--stravx-text-muted) !important; font-size: 12px !important; }
.mk-bar-note.is-gap { fill: #b45309 !important; font-weight: 500; }
.mk-undated { fill: #fff; stroke: #a0acb9; stroke-dasharray: 3 3; }
.mk-conflict { fill: none; stroke: var(--rag-red); stroke-width: 1.8; }
.mk-conflict-head { fill: var(--rag-red); }

/* Connections. */
.mk-node-box { fill: #fff; stroke: var(--stravx-border); stroke-width: 1.2; }
.mk-node-edge { fill: var(--entity-accent); }
.mk-node.is-centre .mk-node-box { stroke: #182438; stroke-width: 2; }
.mk-node-type { fill: var(--entity-ink) !important; font-size: 12px !important; font-weight: 500; }
.mk-node-title { font-size: 13px !important; font-weight: 600; }
.mk-intent { fill: none; stroke: var(--entity-objective); stroke-width: 1.8; }
.mk-intent-label { fill: color-mix(in srgb, var(--entity-objective) 75%, #182438) !important; font-size: 12px !important; font-style: italic; }
.mk-belongs { stroke: #a0acb9; stroke-width: 1.5; }
.mk-dep { fill: none; stroke: #64748b; stroke-width: 1.8; }
.mk-dep-head { fill: #64748b; stroke: none; }
.mk-dep.mk-dep-conflict { stroke: var(--rag-red); stroke-dasharray: 6 4; }
.mk-dep-head.mk-dep-conflict { fill: var(--rag-red); }
.mk-dep.mk-dep-unknown { stroke: #a0acb9; stroke-dasharray: 2 3; }
.mk-dep-head.mk-dep-unknown { fill: #a0acb9; }
.mk-edge-badge rect { fill: #fff; stroke: var(--stravx-border); }
.mk-edge-badge text { font-size: 12px !important; font-weight: 500; }
.mk-tone-green rect { fill: var(--rag-green-soft); stroke: none; } .mk-tone-green text { fill: var(--rag-green-ink) !important; }
.mk-tone-red rect { fill: var(--rag-red-soft); stroke: none; } .mk-tone-red text { fill: var(--rag-red-ink) !important; }
.mk-tone-amber rect { fill: var(--rag-amber-soft); stroke: none; } .mk-tone-amber text { fill: var(--rag-amber-ink) !important; }
.mk-tone-none rect { fill: #fff; stroke: var(--rag-none); stroke-dasharray: 3 2; } .mk-tone-none text { fill: #475569 !important; }
.mk-key-intent, .mk-key-dep { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--entity-objective); }
.mk-key-dep { border-top-color: #64748b; }

/* Change impact. */
.mk-heat-grid { display: grid; grid-template-columns: 150px repeat(9, minmax(0, 1fr)); gap: 4px; }
.mk-heat-corner, .mk-heat-month { color: var(--stravx-text-muted); font-size: 12px; font-weight: 500; text-align: center; }
.mk-heat-corner { text-align: left; }
.mk-heat-month small { display: block; font-size: 12px; font-weight: 400; }
.mk-heat-month.is-now { color: #1f62e0; font-weight: 600; }
.mk-heat-fn { display: flex; flex-direction: column; justify-content: center; padding: 4px 8px; border-left: 3px solid var(--entity-accent); border-radius: 4px; background: color-mix(in srgb, var(--entity-accent) 8%, #fff); font-size: 12px; font-weight: 600; }
.mk-heat-fn small { color: var(--stravx-text-muted); font-size: 12px; font-weight: 400; }
.mk-heat-cell { position: relative; display: grid; place-items: center; min-height: 40px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.mk-heat-cell.is-empty { background: #fff; box-shadow: inset 0 0 0 1px #eef2f5; }
/* Work in flight with no complete assessment: unknown, drawn apart from an assessed 0. */
.mk-heat-cell.is-unknown { background: repeating-linear-gradient(135deg, #fff 0 5px, #eef2f5 5px 8px); color: #475569; box-shadow: inset 0 0 0 1px #a0acb9; }
.mk-heat-key.is-empty { background: #fff; box-shadow: inset 0 0 0 1px #c4ccd5; }
.mk-heat-cell i { position: absolute; right: 3px; top: 2px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: #fff; color: #475569; font-size: 12px; font-style: normal; font-weight: 600; box-shadow: inset 0 0 0 1px #a0acb9; }
.mk-heat-cell.is-selected { outline: 2.5px solid #182438; outline-offset: 2px; }
.mk-heat-cell .pp-pin { position: absolute; left: -8px; bottom: -8px; margin: 0; }
.mk-heat-key { display: inline-grid; place-items: center; width: 18px; height: 16px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.mk-heat-key.is-unknown { background: #fff; color: #475569; box-shadow: inset 0 0 0 1px #a0acb9; }
.mk-heat-note { margin-top: 10px !important; }
.mk-quote { padding-left: 10px; border-left: 2px solid var(--entity-edge); }
.mk-parts { display: grid; grid-template-columns: 1fr 70px 14px; gap: 3px 8px; align-items: center; margin: 10px 0 4px; font-size: 12px; }
.mk-part { color: var(--stravx-ink-muted); }
.mk-part-bar { height: 6px; border-radius: 999px; background: #eef2f5; overflow: hidden; }
.mk-part-fill { display: block; height: 100%; border-radius: 999px; background: var(--entity-change); }
.mk-part-fill.w0 { width: 0; } .mk-part-fill.w1 { width: 20%; } .mk-part-fill.w2 { width: 40%; } .mk-part-fill.w3 { width: 60%; } .mk-part-fill.w4 { width: 80%; } .mk-part-fill.w5 { width: 100%; }
.mk-part-n { text-align: right; font-weight: 600; }
.mk-adkar-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 6px; }
.mk-adkar { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 6px; background: #eef2f5; font-size: 12px; font-weight: 600; }
.mk-adkar b { color: var(--stravx-text-muted); font-size: 12px; font-weight: 500; }
.mk-adkar.r1 { background: var(--rag-red-soft); color: var(--rag-red-ink); }
.mk-adkar.r2 { background: var(--rag-amber-soft); color: var(--rag-amber-ink); }
.mk-adkar.r4, .mk-adkar.r5 { background: var(--rag-green-soft); color: var(--rag-green-ink); }

/* Plan alternatives. */
.mk-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; counter-reset: step; }
.mk-steps li { counter-increment: step; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--stravx-paper); color: var(--stravx-ink-muted); font-size: 12px; }
.mk-steps li::before { content: counter(step); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; font-size: 12px; font-weight: 600; }
.mk-steps li.is-done::before { content: "✓"; background: var(--rag-green); color: #fff; }
.mk-steps li.is-next { background: #fff; box-shadow: inset 0 0 0 1px var(--stravx-border); color: var(--stravx-ink); font-weight: 500; }
.mk-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.mk-compare-col { padding: 12px 14px; border: 1px solid var(--stravx-border); border-radius: 12px; background: var(--stravx-paper); }
.mk-compare-col.is-alt { background: #fff; border-color: var(--entity-initiative); box-shadow: inset 0 3px 0 var(--entity-initiative); }

/* Function assessment. */
.mk-radar-svg { max-width: 460px; margin-inline: auto; }
.mk-ring { fill: none; stroke: #e6ebf0; }
.mk-spoke { stroke: #e6ebf0; }
.mk-radar-label { fill: var(--stravx-ink-muted) !important; font-size: 12px !important; }
.mk-radar-label.is-gap { fill: #8a3d36 !important; font-weight: 600; }
.mk-current { fill: rgb(63 111 120 / .3); stroke: #3f6f78; stroke-width: 2; }
.mk-target { fill: none; stroke: #c7766d; stroke-width: 2; stroke-dasharray: 6 4; }
.mk-previous { fill: none; stroke: #8796a8; stroke-width: 1.5; stroke-dasharray: 1 3; stroke-linecap: round; }
.mk-key-current, .mk-key-target, .mk-key-previous { display: inline-block; width: 16px; height: 8px; border-radius: 2px; }
.mk-key-current { background: rgb(63 111 120 / .35); border: 2px solid #3f6f78; }
.mk-key-target { border: 2px dashed #c7766d; }
.mk-key-previous { border: 2px dotted #8796a8; }
.mk-areas { display: grid; gap: 6px; margin: 8px 0 10px; padding: 0; list-style: none; }
.mk-area { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--stravx-border); border-radius: 10px; background: #fff; font-size: 12.5px; }
.mk-area.is-gap { border-left: 3px solid #c7766d; }
.mk-area.is-unplanned { background: color-mix(in srgb, var(--rag-red-soft) 40%, #fff); }
.mk-area-name { font-weight: 500; }
.mk-area-levels { font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-area-levels small { color: var(--stravx-text-muted); font-weight: 400; }
.mk-area-plan { grid-column: 1 / -1; }

/* Insights. */
.mk-query { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px !important; font-size: 14px; }
.mk-query .pp-pin { margin-left: 0; }
.mk-qgrid { display: grid; grid-template-columns: 150px repeat(3, minmax(0, 1fr)); gap: 6px; }
.mk-grid-col { align-self: end; padding-bottom: 4px; color: var(--stravx-ink-muted); font-size: 12px; font-weight: 600; text-align: center; }
.mk-grid-row { display: flex; align-items: center; padding-left: 10px; border-left: 3px solid var(--entity-accent); font-size: 12.5px; font-weight: 500; }
.mk-grid-cell { position: relative; display: grid; place-items: center; min-height: 54px; border-radius: 8px; font-size: 16px; font-weight: 600; }
.mk-grid-cell.q0 { background: #f3f6f9; color: #8796a8; }
.mk-grid-cell.q1 { background: #ccfbf1; color: #134e4a; } .mk-grid-cell.q2 { background: #5eead4; color: #134e4a; } .mk-grid-cell.q3 { background: #0f766e; color: #fff; } .mk-grid-cell.q4 { background: #134e4a; color: #fff; }
.mk-grid-cell.is-gap { border: 2px dashed #8796a8; background: #fff; color: var(--stravx-ink); }
.mk-grid-cell.is-run { background: #e2e8f0; color: #334155; }
.mk-grid-cell.is-selected { outline: 2.5px solid #1f62e0; outline-offset: 2px; }
.mk-grid-cell .pp-pin { position: absolute; right: -8px; top: -8px; margin: 0; }
.mk-q { display: inline-block; width: 14px; height: 12px; border-radius: 3px; }
.mk-q.q4 { background: #134e4a; } .mk-q.is-gap { border: 1.5px dashed #8796a8; } .mk-q.is-run { background: #e2e8f0; }
.mk-records { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--stravx-border); border-radius: 12px; background: var(--stravx-paper); }
.mk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mk-a4 { border-top: 3px solid var(--entity-priority-area); }
.mk-a4-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.mk-a4-tiles span { display: flex; flex-direction: column; padding: 10px; border-radius: 10px; background: var(--stravx-paper); color: var(--stravx-ink-muted); font-size: 12px; }
.mk-a4-tiles b { color: var(--stravx-ink); font-size: 18px; font-weight: 600; }

/* Working together. */
.mk-flow { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; gap: 6px; }
.mk-step { display: grid; gap: 8px; align-content: start; }
.mk-flow-arrow { height: 2px; background: var(--entity-edge); position: relative; }
.mk-flow-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left-color: var(--entity-edge); }
.mk-dialog { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--stravx-border); border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgb(16 27 42 / .14); }
.mk-label { margin-top: 6px; color: var(--stravx-ink); font-size: 12px; font-weight: 500; }
.mk-input { padding: 6px 10px; border: 1px solid #c9d3dd; border-radius: 8px; font-size: 13px; }
.mk-input-long { color: var(--stravx-ink-muted); }
.mk-dialog .mk-control-primary { justify-self: start; margin-top: 10px; }
.mk-change { display: flex; align-items: center; gap: 8px; margin: 4px 0 !important; }
.mk-where { margin: 6px 0 0; padding-left: 18px; color: var(--stravx-ink-muted); font-size: 12.5px; }
.mk-callout-line { margin-bottom: 8px !important; font-size: 13px; }
.mk-previews { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.mk-preview { display: grid; gap: 4px; }
.mk-preview.is-blocked { border-color: var(--rag-red-line); box-shadow: inset 0 3px 0 var(--rag-red); }
.mk-errors { margin: 8px 0 4px; padding-left: 18px; color: var(--rag-red-ink); font-size: 12.5px; }
.mk-blocked { margin-top: 6px !important; padding: 8px 10px; border-radius: 8px; background: var(--stravx-paper); font-size: 12.5px; font-weight: 500; }

.pp-svg-pin circle { fill: #182438; stroke: #fff; stroke-width: 3; }
/* More specific than ".mk-svg text", which would otherwise paint the number dark on the dark disc. */
.mk-svg .pp-svg-pin text { fill: #fff !important; font-size: 12px !important; font-weight: 600; }
.mk-row-gap { fill: #b45309 !important; font-weight: 500; }
.mk-area-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; grid-column: 1 / -1; }
.mk-area-why { grid-column: 1 / -1; color: var(--stravx-ink-muted); font-size: 12.5px; }
.mk-rating { position: relative; }
.mk-rating > .pp-pin { position: absolute; right: -4px; top: 2px; }
.mk-records > .mk-tools { margin-top: 4px; }

/* The guide through a screen: each of the page's three steps lights up its part of the screen in turn; the rest
   fades back. Parts never nest, so dimming never compounds. With no step chosen, the whole screen shows. */
.mk-focus { transition: opacity .35s ease, filter .35s ease; }
.mk-guide:is([data-stage="1"], [data-stage="2"], [data-stage="3"]) .mk-focus { opacity: .2; filter: grayscale(.7); }
.mk-guide[data-stage="1"] .mk-focus:is([data-focus~="1"]),
.mk-guide[data-stage="2"] .mk-focus:is([data-focus~="2"]),
.mk-guide[data-stage="3"] .mk-focus:is([data-focus~="3"]) { opacity: 1; filter: none; }
.mk-guide-player { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 18px; border-top: 1px solid var(--stravx-border); background: var(--stravx-paper); }
.mk-guide-player[hidden] { display: none; }
.mk-guide-steps { display: flex; gap: 8px; }
.mk-guide-step { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--stravx-border); border-radius: 50%; background: #fff; color: var(--stravx-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.mk-guide-step:hover { border-color: #182438; }
.mk-guide-step[aria-current="step"] { border-color: #182438; background: #182438; color: #fff; }
.mk-guide-text { flex: 1 1 320px; min-height: 44px; display: flex; align-items: center; margin: 0; color: var(--stravx-ink-muted); font-size: 15px; line-height: 1.45; }
.mk-guide-text b { color: var(--stravx-ink); font-weight: 600; }
.mk-guide-text > span { display: none; }
.mk-guide-text > span.is-now { display: inline; }
@media (prefers-reduced-motion: reduce) { .mk-focus { transition: none; } }
@media print { .mk-guide .mk-focus { opacity: 1 !important; filter: none !important; } .mk-guide-player { display: none; } }