/* Outcome Agency — values from designs/Sunset · interactive walkthrough. Colors come from
   the palette in js/themes.js; the fallbacks below are the default (1 · Teal & sand). */
:root {
  --primary: #0F766E; --dark: #115E59; --petal: #14B8A6; --petal-fill: rgba(20,184,166,.15);
  --tint: #DDF3EF; --tint-2: #F0FAF8; --purpose-fill: #FAEEDB; --purpose-line: #D29A45; --purpose-text: #7A4E0E;
  --support: #E9ECEB; --agent: #F97316; --ink: #0B2421; --muted: #5B616E;
  --support-line: rgba(0,0,0,.22); --pill-line: rgba(0,0,0,.16);
  --display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --text: 'Inter', system-ui, sans-serif;
  --side: clamp(16px, 5vw, 64px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--text); }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--primary); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { max-width: 1280px; margin: 0 auto; padding: 64px var(--side) 0; }

/* Masthead */
.overline, .label { margin: 0; font-size: 12px; line-height: 16px; letter-spacing: .12em; font-weight: 600; text-transform: uppercase; }
.overline, .label--muted { color: var(--muted); }
.label { color: var(--primary); }
.label.label--muted { color: var(--muted); }
.builds__frame .label { color: var(--primary); }
.title { margin: 8px 0 0; font-family: var(--display); font-size: clamp(28px, 8.4vw, 60px); white-space: nowrap; line-height: 1.07; font-weight: 700; letter-spacing: -.02em; }
.subtitle__link { color: inherit; text-decoration-color: color-mix(in srgb, var(--primary) 55%, transparent); text-decoration-thickness: 2px; }
.subtitle__link:hover { color: var(--primary); }
.model { scroll-margin-top: 16px; }
.title { display: flex; align-items: center; gap: .22em; }
.logo { width: .92em; height: .92em; flex: none; }
.subtitle { margin: 4px 0 0; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.33; color: var(--muted); }

/* Goal + principles */
.panel { background: var(--tint); border-radius: 16px; padding: 16px 28px; }
.panel--goal { margin-top: 32px; min-height: 76px; display: flex; flex-direction: column; justify-content: center; }
.goal { margin: 0; font-size: 18px; line-height: 26px; font-weight: 500; }
.panel--principles { margin-top: 32px; padding: 18px 28px 22px; }
.principles { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.principles li { padding-left: 16px; border-left: 2px solid var(--primary); font-size: 15px; line-height: 22px; font-weight: 500; }
.principles__n { display: block; margin-bottom: 6px; font-family: var(--display); font-size: 28px; line-height: 32px; font-weight: 700; color: var(--primary); }

/* Model frame */
.model { margin-top: 16px; }
.model__canvas { position: relative; container-type: inline-size; aspect-ratio: 1152 / 1040;
  border: 2px solid var(--primary); border-radius: 28px; background: var(--tint-2); overflow: hidden; }
.model__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

.c-purpose { fill: var(--purpose-fill); stroke: var(--purpose-line); stroke-width: 2; }
.t-purpose { fill: var(--purpose-text); stroke: var(--purpose-fill); stroke-width: 3; stroke-linejoin: round; paint-order: stroke; font: 700 13px var(--text); letter-spacing: 2px; }
.c-support { fill: var(--support); stroke: var(--support-line); stroke-width: 2; }
.c-white { fill: #fff; }
.c-tot { fill: none; stroke: var(--primary); stroke-width: 2; stroke-dasharray: 6 5; }
.tot-gap { fill: none; stroke: #fff; stroke-width: 16; }
.t-tot { fill: var(--primary); font: 700 12px var(--text); letter-spacing: 1.6px; }
.t-support { fill: var(--muted); font: 700 12px var(--text); letter-spacing: 1.8px; }
.c-strategy { fill: color-mix(in srgb, var(--primary) 14%, transparent); stroke: var(--primary); stroke-width: 3; }
.t-strategy { fill: var(--dark); font: 700 13px var(--text); letter-spacing: 1.2px; }
.c-customers { fill: var(--ink); }
.c-customers-veil { fill: var(--ink); opacity: .6; }
.teams circle { fill: var(--petal-fill); stroke: var(--petal); stroke-width: 2; }
.t-cocreation text { fill: var(--primary); font: italic 600 12px var(--text); text-anchor: middle; }
.t-customers { fill: #fff; font: 700 24px var(--display); text-anchor: middle; }
.t-team text { fill: var(--dark); font: 700 19px var(--display); text-anchor: middle; }
.agents circle { fill: var(--agent); stroke: var(--ink); stroke-width: 2; }
.pills rect { fill: var(--support); stroke: var(--pill-line); stroke-width: 1.5; }
.pills text { fill: var(--ink); font: 600 14px var(--text); text-anchor: middle; }
.leaders path { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; }
.leaders circle { fill: var(--primary); stroke: #fff; stroke-width: 2; }

/* Callouts: placed on the 1152×1040 canvas, sized with the canvas (cqw) */
.callouts { list-style: none; margin: 0; padding: 0; }
.callout { position: absolute; left: calc((var(--x) + var(--dx, 0)) / 1152 * 100%); top: calc((var(--y) + var(--dy, 0)) / 1040 * 100%); width: calc(var(--ww, var(--w)) / 1152 * 100%);
  border-radius: 8px; outline-offset: 4px; }
.callout h3 { margin: 0; font-size: calc(15.6 / 1152 * 100cqw); line-height: 1.38; letter-spacing: .12em; font-weight: 600; color: var(--primary); text-transform: uppercase; }
.callout p { margin: calc(4 / 1152 * 100cqw) 0 0; font-size: calc(18 / 1152 * 100cqw); line-height: 1.47; font-weight: 400; }
.callout--center { text-align: center; }
.callout:focus-visible { outline: 2px solid var(--primary); }

/* Layers: spotlight + reveal */
[data-layer] { transition: opacity .35s ease, filter .35s ease; }
.is-dim { opacity: .22; filter: grayscale(1); }
.is-off { opacity: 0; pointer-events: none; }
.is-off .callout, .callout.is-off { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { [data-layer] { transition: none; } }

/* Step-by-step reveal */
.walk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; padding-bottom: 10px; }
.walk__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1; }
.walk__controls[hidden] { display: none; }
.walk__btn { font: 600 14px var(--text); color: var(--ink); background: #fff; border: 1.5px solid var(--pill-line); border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.walk__btn:hover { border-color: var(--primary); color: var(--primary); }
.walk__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.walk__btn--mode { background: #fff; border-color: var(--primary); color: var(--primary); }
.walk__btn--mode[aria-pressed="true"] { background: var(--primary); color: #fff; }
.walk__btn { display: inline-flex; align-items: center; gap: 7px; }
.ico { width: 11px; height: 11px; fill: currentColor; flex: none; }
.walk__btn--mode[aria-pressed="true"] .ico { display: none; }
.walk__kbd { display: none; font: 600 11px var(--text); line-height: 1; padding: 3px 6px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.6); color: #fff; }
.walk__btn--mode[aria-pressed="true"] .walk__kbd { display: inline-block; }
@media (hover: none) { .walk__btn--mode[aria-pressed="true"] .walk__kbd { display: none; } }
.walk__btn--play { min-width: 86px; justify-content: center; }
.walk__btn--play .ico--pause, .walk__btn--play.is-playing .ico--play { display: none; }
.walk__btn--play.is-playing .ico--pause { display: block; }
.walk__caption { margin: 0 0 0 6px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--primary); }
.walk__count { color: var(--muted); margin-right: 6px; }
.walk__controls { position: relative; }
.walk__bar { position: absolute; left: 0; right: 0; bottom: -10px; height: 3px; background: var(--tint); border-radius: 2px; overflow: hidden; }
.walk__bar span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .3s ease; }

/* Builds on */
.builds { margin-top: 40px; padding-top: 32px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.builds__frame { background: var(--tint-2); border: 2px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 16px; padding: 20px 28px 24px; }
.builds__grid { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 28px; }
.builds__grid li { min-width: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.builds__grid span { display: block; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--muted); }

/* Footer */
.footer { max-width: 1280px; margin: 56px auto 0; padding: 24px var(--side) 40px; border-top: 1px solid var(--support); font-size: 14px; color: var(--muted); }
.footer p { margin: 0; }
.footer a { color: var(--muted); }

/* Palette picker (localhost / ?theme= only): in the row under the model, right-aligned */
.theme-picker { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--text); color: var(--ink); }
.theme-picker select { font: 600 14px var(--text); color: var(--ink); background: #fff; border: 1.5px solid var(--pill-line);
  border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.theme-picker select:hover { border-color: var(--primary); }
.theme-picker select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ≤1099px: diagram alone, callouts as a list below it */
@media (max-width: 1099px) {
  .model__canvas { aspect-ratio: auto; border: 0; background: none; overflow: visible; container-type: normal; }
  .model__svg { position: static; height: auto; aspect-ratio: 1; border: 2px solid var(--primary); border-radius: 28px; background: var(--tint-2); overflow: hidden; }
  .leaders { display: none; }
  .callouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin-top: 24px; }
  .callout, .callout--center { position: static; width: auto; text-align: left; }
  .callout h3 { font-size: 15.6px; letter-spacing: .12em; }
  .callout p { margin-top: 4px; font-size: 18px; line-height: 26px; }
  .principles, .builds__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .page { padding-top: 40px; }
  .builds__frame { padding: 16px 18px 20px; }
  .panel { padding: 16px 18px; }
  .callouts, .principles, .builds__grid { grid-template-columns: 1fr; }
  .goal { font-size: 16px; line-height: 24px; }
  .walk__controls { flex-basis: 100%; order: 1; }
  .walk__caption { flex-basis: 100%; margin: 4px 0 0; }
}

/* Intro (first view): quicker fades so the 10× reveal reads as one build-up */
.is-intro [data-layer] { transition-duration: .15s; }

/* Callouts rest in grey; full color while the pointer is inside the model frame (desktop with a mouse only) */
@media (min-width: 1100px) and (hover: hover) {
  .callout h3, .callout p { transition: color .25s ease; }
  .model__canvas:not(:hover) .callout:not(:focus-within):not(:focus) h3,
  .model__canvas:not(:hover) .callout:not(:focus-within):not(:focus) p { color: #9CA3AF; }
}

/* Invisible hover areas over petal overlaps → spotlight Co-creation */
.cocreation-hits circle { fill: transparent; pointer-events: all; }

/* Fit the whole model to the window height (Alexey, 2026-10-31). The frame (.model__canvas) spans
   the full content width like the panels above; the stage inside keeps the design's 1152/1040
   aspect, sized so frame + reveal bar fit one screen, and centers. */
:root { --fit-h: calc(100dvh - 88px); }
@media (min-width: 1100px) {
  .model__canvas { aspect-ratio: auto; container-type: normal; display: flex; justify-content: center; }
  .model__stage { position: relative; container-type: inline-size; aspect-ratio: 1152 / 1040;
    width: min(86%, calc(var(--fit-h) * 1152 / 1040)); }   /* ≤86% keeps room for the side callouts */
}
@media (max-width: 1099px) {
  .model__svg { max-width: var(--fit-h); margin-inline: auto; }
}

/* Phones/tablets: one callout card under the diagram, chosen by tapping the model (Alexey, 2026-10-31) */
.card-nav { display: none; }
@media (max-width: 1099px) {
  .card-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px;
    padding: 10px 12px; border: 2px solid color-mix(in srgb, var(--primary) 35%, transparent); border-bottom: 0;
    border-radius: 16px 16px 0 0; background: var(--tint-2); }
  .card-nav__hint { font: 600 13px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .card-nav__btn { width: 40px; height: 40px; border-radius: 999px; border: 1.5px solid var(--pill-line); background: #fff;
    font: 600 20px/1 var(--text); color: var(--primary); cursor: pointer; }
  .callouts { display: block; margin-top: 0; padding: 4px 18px 18px; min-height: 120px;
    border: 2px solid color-mix(in srgb, var(--primary) 35%, transparent); border-top: 0; border-radius: 0 0 16px 16px; background: var(--tint-2); }
  .callout { display: none; }
  .callout.is-current { display: block; }
  .callout.is-dim { opacity: 1; filter: none; }
}
@media (max-width: 1099px) {
  /* the tap spotlight only dims the model, not the panels around it */
  .panel.is-dim, .builds.is-dim { opacity: 1; filter: none; }
}
@media (max-width: 639px) {
  /* reveal row: one column */
  .walk { flex-direction: column; align-items: stretch; gap: 10px; }
  .walk__btn--mode { justify-content: center; }
  .theme-picker { margin-left: 0; justify-content: space-between; order: 2; }
  .theme-picker select { flex: 1; }
  .walk__controls { justify-content: space-between; }
}
@media (max-width: 1099px) {
  /* card text = Guiding principles text (Alexey, 2026-10-31) */
  .callout h3 { font-size: 12px; line-height: 16px; letter-spacing: .12em; font-weight: 600; }
  .callout p { margin-top: 8px; font-size: 15px; line-height: 22px; font-weight: 500; }
}