/* Outcome studies: a single visual, a concrete payoff, one next action. */
.iv-content { color: #303624; }
.iv-content h1 { font: 400 46px/1.02 'Instrument Serif', Georgia, serif; letter-spacing: -.8px; text-align: left; text-wrap: pretty; }
.iv-description { font: 400 12px/1.75 'Manrope', sans-serif; color: #657053; margin-top: 17px; max-width: 360px; text-wrap: pretty; }
.iv-figure { position: relative; margin: 30px 0 0; color: #455a34; }
.iv-figure svg { width: 22px; height: 22px; }
.iv-figure figcaption { margin-top: 22px; font: 400 11px/1.6 'Manrope', sans-serif; text-align: center; color: #6b765a; }
.iv-small-label { font: 500 9px/1.5 'Manrope', sans-serif; letter-spacing: .1em; }
.result-origin { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 10px; line-height: 1.6; margin-bottom: 22px; }
.result-origin .design-mark { width: 32px; height: 37px; }
.result-origin strong { font-weight: 500; }
.artifact-sheet { background: #fcfaf3; border: 1px solid #ccd0bd; border-radius: 5px; transform: rotate(-1.5deg); }
.artifact-heading { display: flex; justify-content: space-between; align-items: center; padding: 14px 17px; border-bottom: 1px solid #e2e2d4; font: 400 21px/1.2 'Instrument Serif', Georgia, serif; }
.artifact-heading > svg { width: 17px; height: 17px; }
.artifact-calendar { position: relative; padding: 18px 16px 20px; height: 167px; }
.calendar-week { display: grid; grid-template-columns: repeat(5,1fr); text-align: center; font-size: 9px; color: #8c927b; }
.calendar-grid { position: absolute; inset: 48px 16px 18px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(20% - 1px), #e8e7db calc(20% - 1px), #e8e7db 20%); border-top: 1px solid #e8e7db; border-bottom: 1px solid #e8e7db; }
.calendar-meeting { position: relative; margin: 31px 4px 0 26px; background: #e4e9d7; padding: 14px 13px; display: flex; gap: 11px; align-items: center; border-radius: 3px; }
.calendar-meeting strong { display: block; font-size: 11px; font-weight: 500; }
.calendar-meeting span { display: block; font-size: 9px; margin-top: 6px; color: #758365; }
.artifact-campaign { padding: 16px; }
.campaign-poster { background: #e8e5d1; position: relative; padding-top: 13px; overflow: hidden; }
.campaign-poster > span { display: block; text-align: center; font: 25px 'Instrument Serif', Georgia, serif; }
.campaign-poster svg { width: 100%; height: 90px; margin-top: 8px; }
.campaign-caption { padding-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.campaign-caption span { font-size: 8px; color: #7b856d; }
.campaign-caption strong { font-size: 11px; font-weight: 500; }
.artifact-reply { padding: 18px; }
.reply-question { text-align: right; font-size: 11px; color: #7f856f; margin-bottom: 22px; }
.reply-answer { display: flex; align-items: center; gap: 12px; padding: 17px; background: #e8ecdf; font: 23px/1.2 'Instrument Serif', Georgia, serif; }
.artifact-resolution { display: flex; align-items: center; gap: 7px; font-size: 9px; margin-top: 17px; }
.artifact-resolution svg { width: 14px; height: 14px; }
.artifact-research { padding: 24px 20px; }
.research-index { font-size: 8px; letter-spacing: .12em; }
.artifact-research > strong { display: block; font: 29px/1.15 'Instrument Serif', Georgia, serif; margin-top: 12px; }
.artifact-research > div { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; font-size: 9px; color: #7b8568; }
.artifact-tasks { padding: 12px 19px; }
.artifact-tasks > div { display: flex; align-items: center; gap: 12px; padding: 14px 0; font-size: 12px; }
.artifact-tasks > div + div { border-top: 1px solid #e0e4d3; }
.artifact-tasks svg { width: 17px; height: 17px; }
.capacity-goal { padding: 17px 0; border-top: 1px solid #c8cebb; border-bottom: 1px solid #c8cebb; }
.capacity-goal > span { font-size: 8px; letter-spacing: .12em; }
.capacity-goal > p { font: 26px/1.2 'Instrument Serif', Georgia, serif; margin-top: 7px; }
.capacity-engine { display: flex; align-items: center; gap: 13px; justify-content: center; margin: 20px 0; }
.capacity-engine .design-mark { width: 29px; height: 32px; }
.capacity-engine > span { height: 1px; background: #c5cdb5; width: 36px; }
.output-fan { position: relative; height: 174px; margin: 0 8px; }
.output-slip { position: absolute; background: #f9f8ef; border: 1px solid #bfc9aa; border-radius: 3px; width: 86%; padding: 16px 14px; display: flex; align-items: center; gap: 11px; font-size: 12px; }
.output-slip > svg { width: 21px; height: 21px; }
.output-0 { left: 0; top: 0; transform: rotate(-4deg); }
.output-1 { right: 0; top: 54px; transform: rotate(2deg); background: #edf0e2; }
.output-2 { left: 3%; top: 108px; transform: rotate(-1deg); background: #e0e7d0; }
.output-check { margin-left: auto; }
.output-check svg { width: 15px; height: 15px; }
.momentum-result { height: 309px; padding-top: 5px; max-width: 340px; margin-left: auto; margin-right: auto; }
.momentum-result-label { display: flex; align-items: center; gap: 9px; font: 25px/1.1 'Instrument Serif', Georgia, serif; max-width: 240px; }
.momentum-result-label svg { width: 19px; height: 25px; }
.momentum-path { position: absolute; inset: 38px 0 auto; width: 100%!important; height: 230px!important; overflow: visible; }
.momentum-track { stroke: #d3d9c7; stroke-width: 2; }
.momentum-progress { stroke: #647c46; stroke-width: 2.5; stroke-dasharray: 440; animation: iv-draw 1.5s ease-out both; }
.momentum-stage { position: absolute; font-size: 10px; color: #697957; }
.stage-start { left: 0; top: 252px; }
.stage-middle { left: 40%; top: 211px; }
.stage-end { right: 0; top: 117px; text-align: right; }
.momentum-result figcaption { position: absolute; bottom: 0; width: 100%; }
.brief-top { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 8px; letter-spacing: .1em; margin-bottom: 17px; }
.brief-top svg { width: 20px; height: 20px; }
.brief-paper { background: #fcfaf3; border: 1px solid #cbd2bc; border-radius: 4px; padding: 21px; }
.brief-title { display: flex; gap: 12px; align-items: center; font: 27px/1.13 'Instrument Serif', Georgia, serif; }
.brief-title .design-mark { width: 29px; height: 35px; }
.brief-receipts { padding: 16px 0; }
.brief-receipts > div { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 11px; }
.brief-receipts svg { width: 15px; height: 15px; }
.brief-decision { border-top: 1px solid #d2d7c5; padding-top: 15px; }
.brief-decision > span { font-size: 8px; text-transform: uppercase; letter-spacing: .08em; color: #848868; }
.brief-decision p { margin-top: 6px; font-size: 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brief-decision svg { width: 16px; height: 16px; }
.attention-work { padding-left: 9px; }
.attention-work > p { display: flex; align-items: center; gap: 9px; font-size: 10px; margin-top: 11px; color: #768367; }
.attention-work svg { width: 13px; height: 13px; }
.attention-bridge { position: absolute; top: 48px; left: 53%; transform: rotate(45deg); color: #a5b08e; }
.attention-bridge svg { width: 31px; height: 31px; }
.attention-space { position: relative; margin: 24px 0 0 40px; padding: 19px 22px; border: 1px solid #c2ccae; border-radius: 3px; background: #edf0e3; }
.attention-horizon svg { width: 100%; height: 70px; margin-top: 3px; }
.attention-space > strong { font: 28px/1.1 'Instrument Serif', Georgia, serif; display: block; margin-top: 7px; }
.attention-space > span:last-child { display: block; font-size: 9px; line-height: 1.7; margin-top: 9px; color: #758163; }
.boundary-operator { display: flex; gap: 7px; align-items: center; font: 34px/1 'Instrument Serif', Georgia, serif; }
.boundary-operator .design-mark { width: 24px; height: 30px; }
.boundary-run { margin-top: 27px; }
.boundary-line { display: flex; justify-content: space-between; align-items: center; height: 27px; position: relative; margin: 7px 0 10px; }
.boundary-line::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: #91a477; }
.boundary-line i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #617b42; }
.boundary-line svg { position: relative; width: 22px; height: 22px; background: #f6f5ef; }
.boundary-run > strong { font: 25px/1.15 'Instrument Serif', Georgia, serif; }
.boundary-turn { height: 43px; width: 63%; border-left: 1px solid #afb99d; border-bottom: 1px solid #afb99d; margin: 14px 0 0 14px; border-radius: 0 0 0 17px; }
.boundary-owner { margin: -1px 0 0 21%; padding: 18px 42px 18px 18px; background: #e9eddc; border: 1px solid #c6d0b4; border-radius: 3px; position: relative; }
.boundary-owner > span { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.boundary-owner p { font-size: 12px; line-height: 1.5; margin-top: 6px; }
.boundary-owner > svg { position: absolute; right: 14px; top: 22px; width: 18px; height: 18px; }
.quiz-shell.visual-story .story-focus { padding: 28px 0 8px; justify-content: center; }
.quiz-shell.visual-story .iv-content h1 { font-size: 46px; text-align: left; }
.visual-story .story-footer { padding-top: 22px; }
@keyframes iv-draw { from { stroke-dashoffset: 440; } to { stroke-dashoffset: 0; } }
@media (max-width: 650px) {
  .quiz-shell.visual-story .iv-content h1 { font-size: 41px; }
  .iv-figure { margin-top: 27px; }
  .iv-description { font-size: 11px; }
  .quiz-shell.visual-story .story-focus { padding-top: 29px; }
}
@media (max-width: 650px) and (max-height: 740px) {
  .quiz-shell.visual-story .iv-content h1 { font-size: 35px; }
  .quiz-shell.visual-story .story-focus { padding-top: 22px; }
  .iv-description { margin-top: 13px; font-size: 10px; }
  .iv-figure { margin-top: 21px; }
  .iv-figure figcaption { margin-top: 15px; font-size: 10px; }
  .result-origin { margin-bottom: 16px; }
  .artifact-calendar { height: 145px; }
  .calendar-meeting { margin-top: 24px; padding: 11px; }
  .visual-story .story-footer { padding-top: 12px; }
  .iv-capacity.iv-outcome .iv-figure { margin-top: 17px; }
  .capacity-goal { padding: 10px 0; }
  .capacity-goal > p { font-size: 23px; margin-top: 4px; }
  .capacity-engine { margin: 8px 0; }
  .capacity-engine .design-mark { width: 24px; height: 26px; }
  .output-fan { height: 137px; }
  .output-slip { padding: 11px 12px; font-size: 10px; }
  .output-slip > svg { width: 17px; height: 17px; }
  .output-1 { top: 43px; }
  .output-2 { top: 86px; }
  .iv-capacity.iv-outcome .iv-figure figcaption { margin-top: 10px; }
  .iv-delivered.iv-ownership .iv-figure { margin-top: 14px; }
  .brief-top { margin-bottom: 3px; }
  .brief-paper { padding: 14px; }
  .brief-title { font-size: 24px; }
  .brief-receipts { padding: 6px 0; }
  .brief-receipts > div { padding: 6px 0; font-size: 10px; }
  .brief-decision { padding-top: 10px; }
  .brief-decision p { font-size: 10px; }
  .attention-work > p { margin-top: 7px; }
  .attention-space { margin-top: 13px; padding: 14px 18px; }
  .attention-horizon svg { height: 32px; }
  .attention-space > strong { font-size: 25px; }
  .boundary-operator { font-size: 29px; }
  .boundary-run { margin-top: 18px; }
  .boundary-run > strong { font-size: 23px; }
  .boundary-turn { height: 24px; margin-top: 9px; }
  .boundary-owner { padding-top: 13px; padding-bottom: 13px; }
  .momentum-result { height: 276px; }
  .momentum-path { height: 205px!important; }
  .stage-start { top: 229px; }
  .stage-middle { top: 190px; }
  .stage-end { top: 110px; }
}
@media (prefers-reduced-motion: reduce) { .momentum-progress { animation: none; } }