/* Four phases, one story. The ordinary paired layout is the default.
   Scroll-capable browsers progressively enhance it with a sticky image stack.
   Each image and its copy use the SAME named view timeline. No JavaScript.
   Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/timeline-scope */
.journey-section { padding: 10px 0 76px; }
.journey-heading h2 { font-size: 42px; line-height: 1.15; }
.journey-intro { max-width: 330px; }
.scroll-cue { display: flex; gap: 10px; align-items: center; font-size: 10px; color: #5d6d83; margin-top: 20px; }
.scroll-cue > span { font-size: 19px; }
.phase-nav { display: flex; gap: 0; border-block: 1px solid var(--line); margin: 37px 0 34px; }
.phase-nav a { flex: 1; display: flex; gap: 11px; align-items: center; padding: 16px 14px; font-size: 12px; color: #515f73; }
.phase-nav a + a { border-left: 1px solid var(--line); }
.phase-nav a > span { font-size: 9px; color: #5d6d83; }
.phase-nav small { font-size: 9px; margin-left: auto; color: #5d6d83; }
.phase-nav a:hover { background: #e6eaf0; }
.story-step { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 95px); align-items: center; padding: 25px 0; }
.phase-visual { margin: 0; min-width: 0; height: 650px; background: #e9ebef; border: 1px solid #dbdfe5; border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.visual-caption { display: flex; align-items: center; justify-content: space-between; padding: 20px 25px; color: #607087; font-size: 12px; flex-shrink: 0; }
.visual-caption > span:first-child { display: flex; align-items: center; gap: 5px; }
.visual-caption > span:last-child { font-size: 9px; letter-spacing: .7px; color: #5d6d84; }
.visual-caption .desk-mark { opacity: .65; }
.scene-content { display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 5px 29px 17px; min-height: 0; }
.scene-footer { display: flex; gap: 7px; align-items: center; justify-content: center; padding: 15px 16px 20px; font-size: 9px; line-height: 1.5; color: #5d6d83; flex-shrink: 0; }
.scene-footer .intelligence-star { font-size: 17px; }
.scene-inputs { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; color: #5e6d83; font-size: 9px; }
.scene-inputs > span:first-child { padding: 5px 9px; background: #f6f7f9; border: 1px solid #d2d8e0; border-radius: 4px; color: #58677b; }
.fictional-label { margin-left: auto; font-size: 9px; }
.document-card { background: #fff; border: 1px solid #d5dae2; border-radius: 8px; padding: 23px; box-shadow: 0 12px 26px -16px #343e4d35; }
.document-meta { display: flex; gap: 9px; align-items: center; margin-bottom: 17px; }
.sender-avatar { display: grid; place-items: center; flex-shrink: 0; background: #e1e5eb; border-radius: 50%; width: 29px; height: 29px; font-size: 9px; color: #65778f; }
.document-meta strong { display: block; font-size: 10px; font-weight: 500; color: #475465; }
.document-meta div > span { display: block; margin-top: 3px; font-size: 9px; color: #5d6d84; }
.document-card h4 { font-size: 17px; font-weight: 500; letter-spacing: -.3px; margin-bottom: 15px; }
.document-card > p { color: #617289; font-size: 12px; line-height: 1.85; margin-top: 11px; }
.document-card mark { padding: 2px 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.document-card mark.contradiction-text { color: #967434; background: #fbefd2; border-bottom: 1px dashed #caa858; }
.contradiction-note { margin: 14px 0 0 23px; padding: 16px 17px; background: #fbf8ed; border: 1px solid #e3d7b4; border-left: 3px solid #c2a666; border-radius: 5px; box-shadow: 0 10px 24px -18px #8b743d4a; position: relative; }
.contradiction-note::before { content: ''; width: 10px; height: 15px; border-left: 1px dashed #c3b181; border-bottom: 1px dashed #c3b181; position: absolute; top: -14px; left: -16px; }
.note-label { display: flex; align-items: center; gap: 6px; color: #8d7642; font-size: 10px; }
.note-label > span:first-child { font-size: 19px; }
.note-label strong { font-weight: 500; }
.note-type { margin-left: auto; font-size: 9px; background: #f1e6c9; padding: 4px 6px; border-radius: 3px; }
.contradiction-note > p { font-size: 12px; line-height: 1.7; color: #796943; margin-top: 9px; }
.note-source { font-size: 9px; line-height: 1.6; color: #87785a; display: flex; gap: 6px; margin-top: 10px; }
.suggestion-preview { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 10px; margin-top: 11px; border-top: 1px solid #e8ddbf; font-size: 9px; color: #887958; }
.suggestion-preview strong { font-size: 10px; font-weight: 500; color: #556377; }
.suggestion-preview strong > span { margin-left: 8px; }
/* Context stays with its inquiry. Natural height keeps the expanded case
   readable in the paired layout and on smaller screens. */
.visual-inquiry { height: auto; min-height: 650px; }
.inquiry-scene { padding-top: 8px; }
.inquiry-context { margin-top: 23px; padding-top: 21px; border-top: 1px solid #d2d7df; }
.inquiry-context-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 14px; }
.inquiry-context-heading h4 { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.5; font-weight: 400; color: #5f7087; }
.inquiry-context-heading > span { font-size: 9px; color: #5f7087; line-height: 1.5; }
.inquiry-source-list { list-style: none; margin: 0; padding: 0 16px; background: #f7f8fa; border: 1px solid #d5dae2; border-radius: 6px; }
.inquiry-source { display: flex; align-items: flex-start; gap: 11px; padding: 15px 0; }
.inquiry-source + .inquiry-source { border-top: 1px solid #dce0e6; }
.inquiry-source-icon { display: grid; place-items: center; width: 29px; height: 31px; flex-shrink: 0; border-radius: 5px; background: #e6eaef; border: 1px solid #d7dce4; color: #5d6d83; font-size: 15px; }
.inquiry-source-description { flex: 1; min-width: 0; }
.inquiry-source-title { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 5px 12px; }
.inquiry-source-title strong { font-size: 11px; line-height: 1.5; color: #5e6e84; font-weight: 500; }
.inquiry-source-title > span { font-size: 9px; line-height: 1.5; color: #62748b; }
.inquiry-source-description > p { font-size: 11px; line-height: 1.7; color: #5d6d83; margin-top: 5px; }
.inquiry-context-caption { font-size: 9px; line-height: 1.7; color: #5d6d83; margin-top: 10px; }
.phase-copy { padding: 45px 0; min-width: 0; scroll-margin-top: 25svh; }
.phase-kicker { display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: 1.7px; color: #5d6d83; }
.phase-kicker > span:first-child { display: grid; place-items: center; width: 28px; height: 28px; background: #e2e6ec; border: 1px solid #d2d8e1; border-radius: 50%; font-size: 9px; letter-spacing: 0; }
.phase-copy h3 { font-size: 39px; font-weight: 500; line-height: 1.16; letter-spacing: -1.4px; margin: 24px 0; }
.phase-description > p:not(.phase-kicker) { font-size: 14px; color: #5d6d83; line-height: 1.9; max-width: 410px; }
.phase-description > p.phase-detail { color: #5d6d84; font-size: 12px; margin-top: 19px; }
.phase-takeaway { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #627289; margin-top: 25px; line-height: 1.8; }
.phase-takeaway > span { font-size: 17px; line-height: 1; }
.phase-next { margin-top: 33px; padding-top: 24px; }
.optional-label { letter-spacing: .6px; font-size: 9px; border: 1px solid #d5dae1; padding: 4px 6px; border-radius: 3px; }
.journey-footnote { text-align: center; font-size: 9px; color: #5d6d83; margin-top: 24px; }
.visual-utility { background: #e9ebef; }
.module-pill { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 10px; color: #62738b; margin-bottom: 20px; }
.module-pill > span:first-child { font-size: 18px; }
.module-pill > span:last-child { margin-left: auto; font-size: 9px; color: #5d6d83; }
.utility-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; border-bottom: 1px solid #dfe3e9; padding-bottom: 15px; margin-bottom: 3px; }
.small-label { font-size: 9px; letter-spacing: .9px; color: #5d6d84; }
.utility-card-heading h4 { font-size: 16px; margin: 8px 0 0; }
.module-optional { border: 1px solid #d5dae2; background: #eff2f6; border-radius: 3px; padding: 4px 5px; font-size: 9px; color: #5d6d83; white-space: nowrap; margin-top: 3px; }
.reviewed-item { display: flex; align-items: center; gap: 9px; padding: 15px 0; border-bottom: 1px solid #e9ecf0; }
.large-check { display: grid; place-items: center; width: 23px; height: 23px; flex-shrink: 0; border-radius: 50%; background: #e6eaf0; color: #5d6d83; font-size: 12px; }
.reviewed-item strong { display: block; font-weight: 500; font-size: 11px; color: #536175; }
.reviewed-item p { font-size: 9px; color: #5d6d84; margin-top: 4px; }
.review-status { margin-left: auto; max-width: 60px; font-size: 9px; color: #5d6d83; line-height: 1.6; text-align: right; }
.followup-list { padding: 14px; margin-top: 18px; background: #f3f6f9; border-radius: 4px; border: 1px solid #dde2e9; }
.followup-list p { display: flex; gap: 10px; font-size: 10px; color: #607188; margin-top: 10px; }
.followup-list p > span { font-size: 9px; color: #697a94; }
.module-options { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 9px; color: #5e6d83; margin-top: 17px; }
.module-options > span:first-child { flex-basis: 100%; margin-bottom: 3px; }
.module-options > span:not(:first-child) { border: 1px solid #cdd4de; border-radius: 3px; padding: 5px 8px; }
.visual-response { background: #ebedf0; }
.draft-mode-strip { display: flex; align-items: center; gap: 15px; font-size: 9px; color: #5f7087; margin-bottom: 18px; }
.draft-mode-strip .selected-mode { background: #f8f9fb; border: 1px solid #d2d7df; padding: 7px 11px; border-radius: 4px; color: #5e6e84; }
.mode-label { margin-left: auto; font-size: 9px; letter-spacing: .6px; }
.response-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.editable-label { font-size: 9px; color: #5e6e85; }
.response-document h4 { font-size: 24px; line-height: 1.3; margin-bottom: 6px; letter-spacing: -.6px; }
.response-document .response-subtitle { font-size: 10px; color: #617289; margin-bottom: 22px; margin-top: 0; }
.response-document > p { font-size: 12px; line-height: 1.9; }
.response-document ol { padding-left: 18px; font-size: 12px; color: #5d6d83; margin: 15px 0; line-height: 1.9; }
.response-document li + li { margin-top: 5px; }
.response-signoff { font-size: 9px; color: #627289; margin-top: 23px; padding-top: 15px; border-top: 1px solid #e3e7ec; }
.carried-forward { display: flex; align-items: center; gap: 11px; padding: 14px 17px; margin: 15px 0 0 20px; background: #f3f6f9; border: 1px solid #d0d7e0; border-radius: 5px; }
.carried-forward > span { font-size: 23px; color: #5d6d83; }
.carried-forward strong { font-size: 10px; font-weight: 500; color: #617188; }
.carried-forward p { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; font-size: 9px; color: #5d6d83; }
.visual-action { background: #e4e8ee; }
.action-scene { align-items: center; padding-top: 0; }
.ready-check { display: grid; place-items: center; width: 47px; height: 47px; font-size: 21px; border-radius: 50%; background: #d3dae3; border: 1px solid #c3cbd7; color: #64768e; margin-bottom: 20px; }
.action-scene > h4 { font-size: 27px; letter-spacing: -.8px; font-weight: 500; margin-bottom: 9px; }
.action-scene > p { font-size: 10px; color: #5d6d84; }
.action-options { width: 100%; margin-top: 27px; display: flex; flex-direction: column; gap: 10px; }
.action-options > div { display: flex; align-items: center; gap: 12px; padding: 20px 16px; border: 1px solid #ced5de; background: #f7f8fa; border-radius: 6px; }
.action-option-icon { display: grid; place-items: center; width: 25px; height: 25px; color: #5d6d84; border: 1px solid #dadfe6; border-radius: 5px; font-size: 12px; flex-shrink: 0; }
.action-options strong { font-size: 12px; font-weight: 500; color: #5a697f; }
.action-options p { font-size: 9px; color: #5e6e85; margin-top: 5px; }
.action-options > div > span:last-child { margin-left: auto; color: #65778e; font-size: 12px; }
.action-options .approval-option { background: #d9dfe7; border-color: #bcc5d2; }
.action-options > div > span.suggested-route { font-size: 9px; line-height: 1.6; max-width: 40px; text-align: right; color: #64768e; }
.case-complete-note { font-size: 9px; color: #5d6d83; display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.intelligence-section { margin-top: 0; }
.closing-section { margin-top: 15px; }

/* Desktop enhancement: a phase becomes active when it crosses the viewport's
   center. Later layers fade in over earlier ones, so there is never an empty
   frame between phases. Scrolling backwards reverses the same transition.
   The first layer stays visible; subsequent layers remain after their range.
   Enable the stack only when the expanded inquiry fits in the viewport.
   All layers share a height so earlier content cannot peek out underneath. */
@media (min-width: 901px) and (min-height: 1020px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (timeline-scope: --phase-one) and (view-timeline-inset: 50% 50%) {
    .scroll-story { display: grid; grid-template-columns: 1.05fr 1fr; column-gap: clamp(40px, 6vw, 95px); grid-template-rows: repeat(4, minmax(88svh, auto)); timeline-scope: --phase-one, --phase-two, --phase-three, --phase-four; }
    .story-step { display: contents; }
    .phase-visual { grid-column: 1; grid-row: 1 / 5; position: sticky; top: max(90px, calc((100svh - 840px) / 2)); align-self: start; height: 840px; }
    .visual-inquiry { z-index: 1; }
    .visual-utility { z-index: 2; --phase-timeline: --phase-two; }
    .visual-response { z-index: 3; --phase-timeline: --phase-three; }
    .visual-action { z-index: 4; --phase-timeline: --phase-four; }
    .phase-visual:not(.visual-inquiry) { animation: phase-arrives 1ms linear both; animation-timeline: var(--phase-timeline); animation-range: cover 0% cover 12%; }
    .phase-copy { grid-column: 2; display: flex; align-items: center; padding: 50px 0; view-timeline-axis: block; view-timeline-inset: 50% 50%; }
    .copy-inquiry { grid-row: 1; view-timeline-name: --phase-one; --phase-timeline: --phase-one; }
    .copy-utility { grid-row: 2; view-timeline-name: --phase-two; --phase-timeline: --phase-two; }
    .copy-response { grid-row: 3; view-timeline-name: --phase-three; --phase-timeline: --phase-three; }
    .copy-action { grid-row: 4; view-timeline-name: --phase-four; --phase-timeline: --phase-four; }
    .phase-description { animation: phase-focus 1ms linear both; animation-timeline: var(--phase-timeline); animation-range: cover; }
    .phase-description:focus-within { animation: none; opacity: 1; }
    @keyframes phase-arrives { from { opacity: 0; } to { opacity: 1; } }
    @keyframes phase-focus { 0%, 100% { opacity: .38; } 14%, 78% { opacity: 1; } }
  }
}
@media (max-width: 1100px) {
  .story-step { gap: 40px; }
  .scene-content { padding-inline: 19px; }
  .document-card { padding: 20px; }
  .contradiction-note { margin-left: 14px; padding-inline: 13px; }
  .phase-copy h3 { font-size: 34px; }
  .phase-description > p:not(.phase-kicker) { font-size: 13px; }
  .phase-description > p.phase-detail { font-size: 11px; }
  .scene-footer { font-size: 9px; }
  .module-pill { font-size: 9px; }
  .module-pill > span:last-child { font-size: 9px; }
  .module-optional { display: none; }
  .draft-mode-strip { gap: 10px; font-size: 9px; }
  .draft-mode-strip .mode-label { display: none; }
  .response-document h4 { font-size: 22px; }
  .action-scene > h4 { font-size: 24px; }
  .action-options > div { padding: 17px 12px; gap: 9px; }
  .action-options p { font-size: 9px; }
  .connection-rail { padding: 23px; }
}
@media (max-width: 900px) {
  .connections-heading h2 { font-size: 31px; }
  .connections-heading > p { max-width: 240px; font-size: 11px; }
  .connection-rails { gap: 17px; }
  .rail-heading h3 { font-size: 15px; }
  .connection-rail > p { font-size: 11px; }
  .context-source-list li { flex-direction: column; }
  .journey-heading h2 { font-size: 36px; }
  .journey-intro { max-width: 260px; }
  .journey-intro > p { font-size: 11px; }
  .story-step { gap: 28px; }
  .phase-copy h3 { font-size: 29px; }
  .phase-description > p:not(.phase-kicker) { font-size: 12px; }
  .phase-description > p.phase-detail { font-size: 11px; }
  .phase-takeaway { font-size: 10px; }
  .phase-visual { height: auto; min-height: 570px; }
  .scene-content { padding-inline: 15px; }
  .document-card { padding: 17px; }
  .visual-caption { padding: 16px; }
  .document-card h4 { font-size: 15px; }
  .document-card > p, .contradiction-note > p, .response-document ol { font-size: 11px; }
  .scene-footer { font-size: 9px; }
  .note-label { font-size: 9px; }
  .note-type { font-size: 9px; }
  .module-pill > span:last-child { margin-left: 0; flex-basis: 100%; }
  .utility-card-heading h4 { font-size: 15px; }
  .reviewed-item strong { font-size: 10px; }
  .reviewed-item p { font-size: 9px; }
  .response-document h4 { font-size: 21px; }
  .action-scene > h4 { font-size: 22px; }
  .action-options strong { font-size: 11px; }
  .action-options > div { padding: 16px 10px; }
}
@media (max-width: 720px) {
  .connections-section { padding-top: 8px; padding-bottom: 54px; }
  .connections-heading, .journey-heading { display: block; }
  .connections-heading h2 { font-size: 29px; }
  .connections-heading > p { max-width: none; margin-top: 18px; font-size: 12px; }
  .connection-rails { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
  .connection-rail { padding: 23px; }
  .rail-heading h3 { font-size: 17px; }
  .connection-rail > p { font-size: 12px; }
  .source-chips { gap: 7px; }
  .source-chips li { padding: 7px 10px; font-size: 10px; }
  .context-source-list li { flex-direction: row; padding-block: 8px; }
  .context-source-list span { font-size: 9px; }
  .case-bridge { gap: 11px; margin-top: 18px; }
  .case-bridge p { font-size: 9px; text-align: center; }
  .case-bridge strong { display: block; margin: 3px 0 0; }
  .case-bridge > span { font-size: 21px; }
  .journey-section { padding-top: 0; padding-bottom: 48px; }
  .journey-heading h2 { font-size: 34px; }
  .journey-intro { max-width: none; margin-top: 18px; }
  .journey-intro > p { font-size: 12px; }
  .scroll-cue { margin-top: 15px; font-size: 9px; }
  .phase-nav { margin: 25px 0 16px; }
  .phase-nav a { font-size: 10px; padding: 13px 7px; gap: 6px; }
  .phase-nav a > span { font-size: 9px; }
  .phase-nav small { display: none; }
  .story-step { display: flex; flex-direction: column; gap: 0; padding: 18px 0 22px; }
  .phase-visual { width: 100%; min-height: 0; height: auto; max-width: 510px; }
  .scene-content { padding: 10px 22px 18px; }
  .visual-caption { padding: 17px 22px 10px; font-size: 11px; }
  .document-card { padding: 21px; }
  .document-card h4 { font-size: 17px; }
  .document-card > p, .contradiction-note > p, .response-document ol { font-size: 12px; }
  .note-label { font-size: 10px; }
  .note-type { font-size: 9px; }
  .contradiction-note { padding: 15px; margin-left: 15px; }
  .scene-footer { font-size: 9px; padding: 7px 18px 20px; }
  .phase-copy { width: 100%; max-width: 510px; padding: 29px 0 10px; scroll-margin-top: 30px; }
  .phase-copy h3 { font-size: 31px; margin: 19px 0; }
  .phase-description > p:not(.phase-kicker) { font-size: 13px; max-width: none; }
  .phase-description > p.phase-detail { font-size: 12px; margin-top: 15px; }
  .phase-kicker { font-size: 9px; }
  .phase-takeaway { font-size: 11px; margin-top: 20px; }
  .phase-next { margin-top: 23px; padding-top: 20px; }
  .module-pill { margin-bottom: 16px; font-size: 10px; }
  .module-pill > span:last-child { margin-left: auto; flex-basis: auto; font-size: 9px; }
  .utility-card-heading h4 { font-size: 17px; }
  .reviewed-item { padding: 17px 0; }
  .reviewed-item strong { font-size: 11px; }
  .reviewed-item p { font-size: 9px; }
  .draft-mode-strip { font-size: 9px; gap: 16px; margin-top: 4px; }
  .response-document h4 { font-size: 25px; }
  .response-header { margin-bottom: 23px; }
  .carried-forward { margin-left: 14px; }
  .action-scene { padding-top: 17px; }
  .action-scene > h4 { font-size: 27px; }
  .action-options { margin-top: 22px; }
  .action-options > div { padding: 19px 13px; }
  .action-options strong { font-size: 12px; }
  .action-options p { font-size: 9px; }
  .journey-footnote { font-size: 9px; line-height: 1.8; max-width: 250px; margin: 4px auto 0; }
}
@media (max-width: 380px) {
  .scene-content { padding-inline: 13px; }
  .visual-caption { padding-inline: 15px; }
  .document-card { padding: 17px; }
  .contradiction-note { margin-left: 10px; padding: 13px; }
  .note-label { gap: 4px; font-size: 9px; }
  .note-type { font-size: 9px; }
  .source-chips li { font-size: 9px; }
  .action-options p { font-size: 9px; }
}
@media (max-width: 1100px) {
  .inquiry-source-title { flex-direction: column; gap: 2px; }
}
@media (max-width: 430px) {
  .inquiry-source-list { padding-inline: 13px; }
  .inquiry-context-heading h4 { font-size: 11px; }
}
@media print {
  .scroll-story { display: block; }
  .story-step { display: grid; break-inside: avoid; }
  .phase-visual { position: static; height: auto; opacity: 1; animation: none; }
  .phase-description { opacity: 1; animation: none; }
}

/* Airy product sections, with one consistent palette and readable captions. */
.journey-section { padding:34px 0 95px; }
.journey-heading { display:grid; grid-template-columns:1.12fr 1fr; align-items:end; gap:clamp(40px,6vw,85px); scroll-margin-top:110px; }
.journey-heading .eyebrow { margin-bottom:18px; }
.journey-heading h2 { font-size:40px; font-weight:var(--font-weight-heading); letter-spacing:-.02em; line-height:1.25; }
.journey-intro { max-width:none; }
.journey-intro>p { font-size:15px; line-height:1.75; color:var(--body); }
.scroll-cue { display:flex; align-items:center; gap:8px; font-size:11px; color:#8a9bb2; margin-top:16px; }
.phase-nav { border:1px solid var(--line); border-radius:7px; overflow:hidden; margin:35px 0 29px; background:var(--surface); }
.phase-nav a { color:#6c7f9b; padding:15px 20px; font-size:12px; }
.phase-nav a:hover { background:#edf4fd; }.phase-nav a>span { color:#9eafc6; }.phase-nav small { color:#8e9db2; }
.story-step { gap:clamp(40px,6vw,85px); padding:26px 0; }
.phase-visual { background:#f1f1e8; border:1px solid var(--line); border-radius:9px; }
.visual-utility { background:linear-gradient(160deg,#e9edde,#f5f4eb); }.visual-response { background:linear-gradient(150deg,#f2efe3,#edf0e7); }.visual-action { background:linear-gradient(145deg,#edeedc,#e3e9da); }
.visual-caption { color:#7b8da7; }.visual-caption>span:last-child { color:#95a3b6; }
.phase-copy h3 { font-size:35px; letter-spacing:-.02em; font-weight:var(--font-weight-heading); line-height:1.25; }
.phase-description>p:not(.phase-kicker) { color:var(--body); font-size:15px; line-height:1.75; }
.phase-description>p.phase-detail { font-size:13px; color:#738eaf; }
.phase-kicker { color:var(--body); font-size:10px; letter-spacing:.2em; line-height:1.5; }.phase-kicker>span:first-child { border-color:var(--line); background:var(--soft-green); color:var(--green); }
.phase-takeaway { color:#738eaf; font-size:12px; }
.document-card { border-color:#e2e8ef; box-shadow:0 13px 25px -19px #415c8330; }.document-card h4 { color:#4b5e78; }.document-card>p { color:#7b8799; }
.scene-footer { color:#7f93ae; font-size:10px; }.inquiry-source-list { background:#fcfdff; border-color:#e0e8f3; }.inquiry-context { border-color:#dfe7f1; }.inquiry-source-title strong { color:#637e9f; }.inquiry-context-caption { font-size:10px; color:#8092ab; }
.contradiction-note { background:#fffcf4; border-color:#e9debe; border-left-color:#c8ae77; box-shadow:0 10px 20px -18px #7e68382b; }
.action-options .approval-option { background:var(--soft-green); border-color:#cbd5bd; }.ready-check { color:var(--green); background:#e5ecdc; border-color:#d1dcc6; }
.journey-footnote { font-size:10px; color:#9da7b5; }
.action-app { gap:18px; }
.action-app .product-screenshot { flex-shrink:0; }
.action-app>p { font-size:12px; color:var(--body); }
.draft-sculpture { gap:18px; }
.draft-sculpture img { display:block; width:100%; height:auto; min-height:0; max-height:610px; object-fit:contain; mix-blend-mode:multiply; }
.draft-sculpture>p { display:flex; justify-content:space-between; gap:12px; flex-shrink:0; font-size:12px; color:var(--green); }
@media(max-width:900px) { .journey-heading { gap:36px; }.journey-heading h2 { font-size:34px; }.journey-intro>p { font-size:12px; }.phase-copy h3 { font-size:30px; }.phase-description>p:not(.phase-kicker) { font-size:14px; }.phase-description>p.phase-detail { font-size:12px; } }
@media(max-width:760px) { .journey-heading { display:block; }.journey-intro { max-width:none; margin-top:23px; }.journey-intro>p br { display:none; }.phase-nav a { padding:13px 10px; gap:7px; font-size:11px; }.phase-nav small { display:none; }.story-step { display:flex; flex-direction:column; gap:0; align-items:stretch; padding:12px 0 25px; }.phase-visual { min-height:570px; height:auto; }.phase-copy { padding:30px 0; scroll-margin-top:100px; }.phase-description>p { max-width:none!important; }.scene-footer { font-size:9px; }.journey-section { padding-bottom:55px; } }
@media(max-width:480px) { .journey-heading h2 { font-size:32px; }.phase-nav a { padding-inline:8px; font-size:10px; gap:5px; }.phase-nav a>span { font-size:8px; }.phase-copy h3 { font-size:31px; }.phase-description>p:not(.phase-kicker) { font-size:14px; }.phase-description>p.phase-detail { font-size:12px; }.inquiry-context-caption { font-size:9px; }.scene-footer { justify-content:flex-start; }.optional-label { font-size:8px; } }