/* The thread is an example customer record, drawn at an editorial scale. */
#timeline { padding-block: 100px 115px; background: var(--lt); color: var(--ink); }
#timeline .journey-heading { align-items: end; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 65px; }
#timeline .journey-heading .h2 { margin: 0; font: 400 clamp(52px,6.2vw,88px)/.98 var(--serif); letter-spacing: -.05em; }
#timeline .journey-heading .lead { color: var(--mut); font-size: 17px; }
#timeline .journey-nav-label { align-items: center; margin-top: 44px; margin-bottom: 18px; color: var(--mut); font-size: 14px; }
#timeline .journey-nav-label > :first-child { color: var(--mut); }
.journey-replay { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; min-height: 44px; background: #e5e0d7; color: var(--ink); border-radius: 3px; transition: background-color 180ms,transform 180ms var(--ease); }
.journey-replay > span { font-size: 22px; line-height: 1; }
.journey-replay b { font: 500 14px var(--sans); }
.journey-replay:hover { background: #d9d1c4; transform: translateY(-2px); }
.journey-replay[aria-pressed="true"] { background: var(--orange); }
#timeline .journey-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; overflow: visible; padding: 0; }
#timeline .journey-tab { display: flex; align-items: center; gap: 10px; padding: 16px 12px; min-width: 0; min-height: 54px; border: 0; background: transparent; position: relative; }
#timeline .journey-tab::before { content: ''; display: block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #b9b7af; transform: none; opacity: 1; position: static; }
#timeline .journey-tab::after { display: none; }
#timeline .journey-tab b { margin: 0; color: #5b5b56; font: 400 16px/1.25 var(--sans); }
#timeline .journey-tab.done::before { background: #a0493e; }
#timeline .journey-tab[aria-selected="true"] { background: #e8e3da; }
#timeline .journey-tab[aria-selected="true"]::before { background: var(--flame); }
#timeline .journey-tab[aria-selected="true"] b { color: var(--ink); font-weight: 500; }
#timeline .journey-tab:hover { background: #ebe7df; }
#timeline .journey-caption { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); min-height: 108px; padding: 28px 0 30px; }
#timeline .journey-caption h3 { color: var(--ink); font: 400 26px/1.15 var(--sans); }
#timeline .journey-caption p { color: var(--mut); font-size: 16px; line-height: 1.6; }
#timeline .journey-app { background: transparent; color: var(--ink); border: 0; border-radius: 0; overflow: visible; }
#timeline .journey-app-bar { background: transparent; color: var(--ink); padding: 0 0 20px; border: 0; font-size: 13px; }
#timeline .journey-app-brand b { color: var(--mut); font-size: 13px; }
#timeline .journey-demo { color: var(--mut); font-size: 13px; }
#timeline .journey-body { grid-template-columns: minmax(0,.85fr) minmax(0,1.4fr); gap: clamp(40px,5vw,72px); align-items: start; }
#timeline .journey-profile { position: sticky; top: 92px; background: var(--orange); color: var(--ink); padding: 34px 30px 28px; border: 0; border-radius: 160px 160px 5px 5px; }
#timeline .journey-person { display: grid; grid-template-columns: 1fr auto; justify-items: start; gap: 15px; }
#timeline .journey-avatar { grid-column: 1 / -1; justify-self: center; width: 120px; height: 120px; margin-bottom: 5px; color: var(--ink); border: 0; background: transparent; font: 400 80px/.9 var(--serif); letter-spacing: -.08em; transform: rotate(-8deg); }
#timeline .journey-person h4 { font: 400 42px/1 var(--serif); letter-spacing: -.04em; }
#timeline .journey-person div > span { display: block; font-size: 13px; margin-top: 6px; color: #382d29; }
#timeline .journey-status,#timeline .journey-status.converted { background: var(--ink); color: var(--lt); border: 0; margin: 0; align-self: start; padding: 7px 9px; font-size: 12px; }
#timeline .journey-identity { color: #382d29; font-size: 12px; margin-top: 26px; }
#timeline .journey-identity b { color: #382d29; }
#timeline .journey-metrics { border: 0; gap: 8px; margin-top: 12px; padding: 12px 0 20px; }
#timeline .journey-metrics dt { color: #382d29; font-size: 12px; }
#timeline .journey-metrics dd { font: 400 35px/1 var(--sans); color: var(--ink); }
#timeline .journey-source { margin-top: 0; }
#timeline .journey-eyebrow { color: #382d29; font: 500 12px/1.4 var(--sans); text-transform: none; letter-spacing: 0; }
#timeline .journey-source p { color: var(--ink); font-size: 15px; margin-top: 8px; }
#timeline .journey-source svg { stroke: var(--ink); width: 16px; height: 16px; }
#timeline .journey-source p > span,#timeline .journey-source small { color: #382d29; font-size: 12px; }
#timeline .journey-context { background: var(--ink); color: var(--ink-d); border: 0; padding: 20px; min-height: 170px; margin: 24px -10px 0; border-radius: 5px; }
#timeline .journey-context .journey-eyebrow { color: #c9c9cc; font-size: 12px; }
#timeline .journey-context h5 { font-size: 18px; line-height: 1.25; color: #fff; margin-top: 14px; }
#timeline .journey-context p { color: #d0d0d3; font-size: 13px; line-height: 1.5; margin-top: 9px; }
#timeline .journey-context-module { color: #ffad98; font-size: 12px; margin-top: 14px; }
#timeline .journey-profile-footer { color: #382d29; font-size: 12px; margin-top: 19px; }
#timeline .journey-linked { color: var(--ink); }
#timeline .journey-feed { padding: 6px 0 0; min-width: 0; }
#timeline .journey-feed-heading { margin-bottom: 25px; display: flex; flex-direction: row; align-items: center; }
#timeline .journey-feed-heading h4 { font: 400 26px/1.1 var(--serif); color: var(--ink); margin: 0; }
#timeline .journey-feed-heading > span { color: var(--mut); font-size: 13px; max-width: none; }
#timeline .journey-events { position: relative; --thread: 1; }
#timeline .journey-events::before { content: ''; position: absolute; top: 32px; bottom: 62px; left: 69px; width: 3px; background: #d5cfc4; }
#timeline .journey-events::after { content: ''; position: absolute; top: 32px; bottom: 62px; left: 69px; width: 3px; background: var(--orange); transform: scaleY(var(--thread)); transform-origin: top; transition: transform 650ms var(--ease); }
#timeline .journey-event { display: grid; grid-template-columns: 42px 30px minmax(0,1fr); gap: 14px; align-items: center; padding: 0 0 16px; min-height: 111px; position: relative; transition: opacity 450ms; }
#timeline .journey-event::after { display: none; }
#timeline .journey-event.future { opacity: .62; }
#timeline .journey-event time { color: #64645e; font-size: 12px; line-height: 1.5; }
#timeline .journey-event time b { color: #454643; }
#timeline .journey-event-icon { position: relative; z-index: 2; background: #e5e0d7; color: var(--ink); border: 0; border-radius: 50%; width: 30px; height: 30px; }
#timeline .journey-event-icon svg { stroke: currentColor; width: 16px; height: 16px; }
#timeline .journey-event.current .journey-event-icon { background: var(--orange); color: var(--ink); border: 0; }
#timeline .event-ticket { padding: 20px 22px; background: #e8e3da; border-radius: 4px; min-width: 0; transform-origin: 15% 50%; transition: transform 350ms var(--ease); }
#timeline .journey-event:nth-child(even) .event-ticket { margin-left: 18px; }
#timeline .journey-event.current .event-ticket { background: var(--ink); }
#timeline .journey-event h5 { color: var(--ink); font: 500 18px/1.25 var(--sans); letter-spacing: -.025em; }
#timeline .journey-event p { color: #565650; font-size: 13px; margin-top: 7px; }
#timeline .journey-event-module { margin-top: 10px; font-size: 12px; color: #565650; }
#timeline .journey-event-state { position: absolute; top: 22px; right: 18px; font-size: 10px; display: none; }
#timeline .journey-event.current h5 { color: #fff; }
#timeline .journey-event.current p { color: #d0d0d3; }
#timeline .journey-event.current .journey-event-module { color: #ffad98; }
#timeline .journey-feed-footer { border: 0; color: var(--mut); padding-top: 8px; font-size: 13px; }
#timeline .journey-feed-footer i { background: var(--orange); }
@media(hover:hover) and (pointer:fine) {
#timeline .event-ticket:hover { transform: translateY(-4px) rotate(-.6deg); }
}

/* Motion has separate layers, so scrolling never fights hover or reading. */
.nav::after { display: block; position: absolute; content: ''; bottom: 0; left: 0; right: 0; height: 2px; background: var(--orange); transform: scaleX(var(--nav-progress,0)); transform-origin: left; }
.portfolio-screen img { transform: translateY(var(--image-y,0px)) scale(var(--image-scale,1.04)); transition: none; }
.portfolio-preview:hover .portfolio-screen img { transform: translateY(var(--image-y,0px)) scale(var(--image-scale,1.04)); }
.portfolio-preview { transition: transform 400ms var(--ease); }
.portfolio-preview:hover { transform: translateY(-6px); }
.docs-preview { transform: perspective(1400px) rotateY(var(--docs-angle,0deg)) translateY(var(--docs-y,0px)); transform-origin: 100% 50%; transition: filter 200ms; }
.docs-preview:hover { transform: perspective(1400px) rotateY(var(--docs-angle,0deg)) translateY(calc(var(--docs-y,0px) - 5px)); }
@media(prefers-reduced-motion:no-preference) {
.motion-live .module-art { animation: module-drift 4.8s ease-in-out infinite alternate; }
.motion-live .node-forms .module-art { animation-delay: -2s; animation-duration: 5.8s; }
.motion-live .node-commerce .module-art { animation-delay: -1s; animation-duration: 6.4s; }
.motion-live .node-bookings .module-art { animation-delay: -3s; animation-duration: 5.2s; }
.motion-live .node-campaigns .module-art { animation-delay: -4s; animation-duration: 5.6s; }
.journey-replay[aria-pressed="true"] > span { animation: replay-turn 2s linear infinite; }
}
@keyframes module-drift { from { transform: translateY(-5px) rotate(-2deg); } to { transform: translateY(6px) rotate(2deg); } }
@keyframes signal-beat { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.65); } }
@keyframes replay-turn { to { transform: rotate(360deg); } }
@media(max-width:1100px) {
#timeline .journey-body { gap: 35px; grid-template-columns: minmax(0,.95fr) minmax(0,1.3fr); }
#timeline .journey-profile { padding: 30px 23px 24px; }
#timeline .journey-event { gap: 10px; grid-template-columns: 36px 28px minmax(0,1fr); }
#timeline .journey-events::before,#timeline .journey-events::after { left: 59px; }
#timeline .event-ticket { padding: 18px; }
#timeline .journey-event:nth-child(even) .event-ticket { margin-left: 0; }
#timeline .journey-event h5 { font-size: 17px; }
}
@media(max-width:900px) {
#timeline .journey-heading { grid-template-columns: 1fr; gap: 24px; }
#timeline .journey-heading .lead { max-width: 600px; }
#timeline .journey-body { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 24px; }
#timeline .journey-profile { padding-inline: 21px; border-radius: 120px 120px 4px 4px; }
#timeline .journey-person { grid-template-columns: 1fr; }
#timeline .journey-status { grid-row: 1; justify-self: end; }
#timeline .journey-avatar { grid-row: 1; justify-self: start; width: 95px; height: 95px; font-size: 68px; margin-top: 25px; }
#timeline .journey-person h4 { font-size: 38px; }
#timeline .journey-metrics { grid-template-columns: 1fr 1fr; }
#timeline .journey-source p { flex-wrap: wrap; gap: 7px; }
#timeline .journey-caption { grid-template-columns: 1fr; gap: 10px; min-height: 125px; }
#timeline .journey-event { grid-template-columns: 28px minmax(0,1fr); gap: 12px; }
#timeline .journey-event time { display: none; }
#timeline .journey-events::before,#timeline .journey-events::after { left: 13px; }
#timeline .event-ticket { padding: 17px 15px; }
}
@media(max-width:600px) {
#timeline { padding-block: 64px 72px; }
#timeline .journey-heading .h2 { font-size: clamp(42px,11.7vw,60px); }
#timeline .journey-heading .lead { font-size: 16px; }
#timeline .journey-nav-label { margin-top: 27px; gap: 10px; }
#timeline .journey-nav-label > :first-child { font-size: 12px; max-width: 135px; }
#timeline .journey-nav-label > :last-child { display: inline-flex; font-size: 14px; }
.journey-replay { padding: 9px 11px; }
.journey-replay b { font-size: 13px; }
#timeline .journey-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
#timeline .journey-tab { padding: 13px 10px; min-height: 46px; gap: 9px; }
#timeline .journey-tab b { font-size: 14px; }
#timeline .journey-caption { min-height: 140px; padding-block: 24px; }
#timeline .journey-caption h3 { font-size: 24px; }
#timeline .journey-caption p { font-size: 15px; }
#timeline .journey-body { grid-template-columns: 1fr; gap: 32px; }
#timeline .journey-app-bar { gap: 8px; padding-bottom: 20px; }
#timeline .journey-app-brand b { font-size: 11px; margin-left: 0; }
#timeline .journey-profile { position: relative; top: auto; border-radius: 130px 130px 4px 4px; padding: 24px 23px; }
#timeline .journey-person { grid-template-columns: 1fr auto; }
#timeline .journey-avatar { grid-row: 1; grid-column: 1/-1; justify-self: center; margin-top: 8px; margin-bottom: 10px; width: 100px; height: 90px; font-size: 78px; }
#timeline .journey-status { grid-column: 2; grid-row: 2; }
#timeline .journey-person h4 { font-size: 40px; }
#timeline .journey-identity { margin-top: 22px; }
#timeline .journey-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); padding-bottom: 22px; }
#timeline .journey-metrics dd { font-size: 32px; }
#timeline .journey-metrics dt { font-size: 11px; }
#timeline .journey-source small { display: none; }
#timeline .journey-context { min-height: 0; margin-top: 22px; padding: 19px; }
#timeline .journey-profile-footer { font-size: 12px; }
#timeline .journey-feed-heading h4 { font-size: 25px; }
#timeline .journey-feed-heading > span { font-size: 12px; }
#timeline .journey-event { min-height: 110px; padding-bottom: 13px; }
#timeline .journey-event h5 { font-size: 16px; }
#timeline .journey-event p { font-size: 13px; }
#timeline .journey-event-module { font-size: 11px; }
#timeline .journey-feed-footer { font-size: 12px; }
}
@media(prefers-reduced-motion:reduce) {
.module-art,.journey-replay > span { animation: none !important; }
.portfolio-screen img,.docs-preview { transform: none !important; }
#timeline .event-ticket,#timeline .journey-event,#timeline .journey-events::after { transition: none; }
}
#timeline .journey-event { transform: translate3d(var(--ticket-x,0px),var(--ticket-y,0px),0) rotate(var(--ticket-turn,0deg)); }
.journey-context-details[hidden],.journey-context-toggle[hidden] { display: none; }
.journey-context-toggle { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; padding: 15px 0 0; margin-top: 4px; font: 500 13px var(--sans); }
.journey-context-toggle b { font-weight: 400; transition: transform 220ms var(--ease); }
.journey-context-toggle:hover b { transform: translate(3px,-3px); }
.journey-context-toggle[aria-expanded="true"] b { transform: rotate(90deg); }
@media(prefers-reduced-motion:reduce) {
#timeline .journey-event { transform: none; } }
/* The layer stack keeps a clear edge above the SDK route. */
.journey-map { position: relative; --thread: 0; }
.journey-map-svg { display: none; }
#timeline .journey-event.future { opacity: .87; }
#timeline .journey-event p,#timeline .journey-event-module { color: #454643; }
#timeline .journey-event.current p { color: #d0d0d3; }
#timeline .journey-event.current .journey-event-module { color: #ffad98; }
@media(min-width:1101px) {
#timeline .journey-feed { padding-top: 6px; }
#timeline .journey-map-svg { display: block; position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-width: 2; }
.thread-base { stroke: #c5bfb4; }
.thread-active { stroke: var(--orange); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--thread)); transition: stroke-dashoffset 800ms var(--ease); }
#timeline .journey-events { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px 22px; }
#timeline .journey-events::before,#timeline .journey-events::after { display: none; }
#timeline .journey-event { display: block; min-height: 206px; padding: 0; }
#timeline .journey-event-icon { position: absolute; top: 16px; left: 18px; z-index: 2; }
#timeline .journey-event time { position: absolute; top: 17px; right: 18px; z-index: 2; font-size: 11px; display: flex; gap: 7px; }
#timeline .journey-event .event-ticket { margin: 0; padding: 62px 20px 44px; height: 100%; min-height: 206px; }
#timeline .journey-event h5 { font-size: 18px; max-width: 240px; }
#timeline .journey-event p { font-size: 13px; max-width: 240px; }
#timeline .journey-event-module { position: absolute; bottom: 18px; left: 20px; }
#timeline .journey-event.current time,#timeline .journey-event.current time b { color: #d0d0d3; }
}
@media(prefers-reduced-motion:reduce) {
.thread-active { transition: none; } }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
.plans .plan { transition: translate 300ms var(--ease); }
.plans .plan:hover { translate: 0 -6px; }
.atlas-module:is(:hover,:focus-visible) .atlas-module-card { background: var(--orange); color: var(--ink); transform: translateY(-5px) rotate(-2deg); }
.atlas-module:is(:hover,:focus-visible) .atlas-module-icon { color: var(--ink); }
}
@media(max-width:600px) {
#timeline .journey-nav-label > :first-child { font-size: 13px; }
}