.record-journey { --record-ink: #111b3e; --record-muted: #536381; --record-line: #dfe6fb; --record-ease: cubic-bezier(.22, 1, .36, 1); position: relative; isolation: isolate; overflow: clip; padding-block: 64px; color: var(--record-ink); background: #f7f8ff; }
.record-journey .kicker { color: #2563df; font-size: 11px; }
.record-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; margin-bottom: 28px; }
.record-intro h2 { color: var(--record-ink); font-size: clamp(28px, 2.65vw, 42px); line-height: 1.13; letter-spacing: -.04em; margin: 16px 0; max-width: 23ch; }
.record-intro p { color: var(--record-muted); font-size: 15px; line-height: 1.7; margin: 0; max-width: 64ch; }
.record-visual { position: relative; height: 290px; }
.record-orbit { position: absolute; inset: 0; width: 100%; height: 100%; }
.record-stack { position: absolute; width: 158px; height: 215px; left: calc(50% - 79px); top: 25px; transform: scale(1.12); transform-origin: center; }
.record-sheet { position: absolute; inset: 0; display: block; border-radius: 15px; border: 1px solid #d8def9; }
.record-sheet--back { background: #dce1ff; transform: translate(16px, 17px) rotate(14deg); }
.record-sheet--middle { background: #eaeaff; transform: translate(8px, 8px) rotate(11deg); }
.record-sheet--front { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background: #fff; box-shadow: 0 14px 24px rgb(91 82 171 / 10%); transform: rotate(9deg); }
.record-person { display: grid; place-items: center; width: 46px; height: 46px; color: #7738df; background: #f0eaff; border-radius: 50%; margin-bottom: 14px; }
.record-person svg { width: 27px; height: 27px; }
.record-sheet strong { font-size: 12px; color: var(--record-ink); white-space: nowrap; }
.record-lines { width: 100%; margin-top: 20px; }
.record-lines i { display: block; height: 5px; background: #d9dbff; border-radius: 3px; margin-top: 10px; }
.record-lines i:nth-child(2) { width: 86%; }
.record-lines i:nth-child(4) { width: 72%; }
.record-tone--blue { --record-accent: #1765ed; --record-soft: #eaf1ff; }
.record-tone--green { --record-accent: #07965d; --record-soft: #e5f6ee; }
.record-tone--orange { --record-accent: #dd780b; --record-soft: #fff2e2; }
.record-tone--purple { --record-accent: #7935dd; --record-soft: #f0e9ff; }
.record-tone--slate { --record-accent: #667da5; --record-soft: #edf1f9; }
.record-node { position: absolute; display: flex; align-items: center; }
.record-node--1 { left: 0; top: 45px; --record-delay: 400ms; }
.record-node--2 { left: 0; top: 170px; --record-delay: 480ms; }
.record-node--3 { right: 0; top: 35px; --record-delay: 560ms; }
.record-node--4 { right: 0; top: 170px; --record-delay: 640ms; }
.record-node-icon { z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; background: var(--record-accent); color: #fff; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 4px 10px rgb(53 66 110 / 8%); }
.record-node-icon svg { width: 25px; height: 25px; }
.record-node-label { color: var(--record-ink); background: #fff; padding: 12px; font-size: 11px; font-weight: 600; border-radius: 8px; }
.record-node--1 .record-node-label, .record-node--2 .record-node-label { order: -1; }
.record-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.record-stage { position: relative; padding: 20px; border: 1px solid var(--record-line); border-radius: 16px; background: #fff; box-shadow: 0 4px 12px rgb(40 54 106 / 2%); }
.record-stage:not(:last-child)::after { content: '›'; position: absolute; right: -23px; top: 42%; color: #3d547e; font-size: 27px; }
.record-stage-mark { display: flex; gap: 14px; align-items: center; color: var(--record-accent); margin-bottom: 10px; }
.record-stage-mark span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--record-soft); font-size: 18px; font-weight: 600; }
.record-stage-mark svg { width: 28px; height: 28px; }
.record-stage h3 { font-size: 17px; line-height: 1.3; color: var(--record-ink); margin: 0 0 8px; letter-spacing: -.02em; }
.record-stage p { font-size: 13px; line-height: 1.65; color: var(--record-muted); margin: 0; }
.record-progress { display: flex; align-items: center; list-style: none; padding: 0; margin: 24px 0 32px; }
.record-progress li { display: flex; flex: 1; align-items: center; gap: 10px; font-size: 11px; white-space: nowrap; color: #455779; }
.record-progress li:not(:last-child)::after { content: ''; height: 1px; background: #c7d3ec; flex: 1; margin-inline: 12px; transform-origin: left; }
.record-progress-dot { width: 10px; height: 10px; flex-shrink: 0; background: var(--record-accent); border-radius: 50%; box-shadow: 0 0 0 4px var(--record-soft); }
.record-documents { display: grid; grid-template-columns: 1fr 1.12fr; gap: 20px; scroll-margin-top: 100px; }
.record-templates, .record-doc-panel { border: 1px solid var(--record-line); border-radius: 15px; background: #fff; min-width: 0; }
.record-templates header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; background: #f6f7ff; border-radius: 15px 15px 0 0; }
.record-templates header > div { display: flex; align-items: center; gap: 10px; }
.record-templates header svg { width: 21px; height: 21px; color: #2563df; }
.record-templates header h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .055em; color: #455a88; margin: 0; }
.record-draft { white-space: nowrap; text-transform: uppercase; font-size: 10px; letter-spacing: .05em; color: #455a88; border: 1px solid #e1e6ff; padding: 5px 8px; border-radius: 20px; }
.record-draft::before { content: '•'; color: #2563df; margin-right: 5px; }
.record-letter-list { padding: 0 16px; }
.record-letter { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-block: 12px; }
.record-letter + .record-letter { border-top: 1px solid #e5eafa; }
.record-letter-icon { width: 38px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: var(--record-accent); background: var(--record-soft); }
.record-letter-icon svg { width: 23px; height: 23px; }
.record-letter strong { font-size: 12px; color: var(--record-ink); }
.record-letter p { font-size: 11px; line-height: 1.5; color: var(--record-muted); margin: 3px 0 0; }
.record-letter-status { font-size: 10px; color: #39725c; background: #eaf8f0; border-radius: 20px; padding: 5px 8px; white-space: nowrap; }
.record-letter-status::before { content: '•'; color: #08a15e; margin-right: 5px; }
.record-letter-status--waiting { color: #946019; background: #fff3e5; }
.record-letter-status--waiting::before { color: #ee900b; }
.record-doc-panel { display: flex; align-items: center; gap: 16px; padding: 24px; background: #fcfcff; }
.record-doc-copy { flex: 1; min-width: 0; }
.record-doc-copy h2 { font-size: 25px; line-height: 1.2; letter-spacing: -.035em; margin: 16px 0 12px; color: var(--record-ink); }
.record-doc-copy p { color: var(--record-muted); font-size: 12px; line-height: 1.65; margin: 0; }
.record-doc-copy ul { padding: 0; margin: 16px 0 0; list-style: none; display: grid; gap: 10px; }
.record-doc-copy li { display: flex; gap: 8px; color: #455779; font-size: 11px; line-height: 1.5; }
.record-doc-copy li svg { width: 18px; height: 18px; flex-shrink: 0; }
.record-document-art { position: relative; width: 116px; height: 165px; flex-shrink: 0; margin: 28px 8px 0 0; }
.record-document-art .record-sheet--front { padding: 20px; }
.record-document-art .record-lines { margin-top: 12px; }
@media (max-width: 1199px) { .record-documents { grid-template-columns: 1fr; } .record-doc-copy h2 { max-width: 30ch; } .record-doc-panel { gap: 40px; } .record-document-art { width: 140px; height: 190px; margin-right: 24px; } .record-hero { gap: 24px; } .record-node-label { font-size: 10px; padding: 8px; } .record-node-icon { width: 36px; height: 36px; } .record-stack { width: 130px; height: 190px; left: calc(50% - 65px); top: 40px; } }
@media (max-width: 900px) { .record-hero { grid-template-columns: 1fr; } .record-visual { width: min(100%, 600px); margin-inline: auto; } .record-stack { width: 158px; height: 215px; left: calc(50% - 79px); top: 25px; } .record-stages { grid-template-columns: repeat(2,minmax(0,1fr)); } .record-stage:nth-child(2)::after { display: none; } .record-progress li { font-size: 10px; gap: 7px; } .record-progress li:not(:last-child)::after { margin-inline: 8px; } }
@media (max-width: 599px) { .record-journey { padding-block: 48px; } .record-visual { height: auto; padding-top: 270px; display: grid; gap: 12px; } .record-orbit { display: none; } .record-node { position: relative; top: auto; left: auto; right: auto; padding-left: 24px; gap: 12px; } .record-node:not(:last-child)::after { content: ''; position: absolute; left: 42px; top: 36px; height: 16px; width: 1px; background: #c9d2ef; } .record-node .record-node-label { order: 0; font-size: 12px; } .record-stages { grid-template-columns: 1fr; gap: 16px; } .record-stage::after { display: none; } .record-progress { display: grid; gap: 18px; padding-left: 8px; } .record-progress li { position: relative; font-size: 12px; } .record-progress li:not(:last-child)::after { position: absolute; width: 1px; height: 16px; left: 4px; top: 15px; margin: 0; transform-origin: top; } .record-letter { grid-template-columns: 32px minmax(0,1fr) auto; gap: 8px; } .record-letter-icon { width: 32px; } .record-letter-status { font-size: 9px; padding: 4px 6px; } .record-templates header { padding: 12px; gap: 6px; } .record-draft { font-size: 8px; } .record-doc-panel { display: block; padding: 22px; } .record-document-art { margin: 32px auto 24px; } }

/* One-time motion, progressively enhanced only when observers are available. */
.record-ready { opacity: 0; }
.record-in { animation: record-up 450ms var(--record-ease) var(--record-delay, 0ms) both; }
.record-visual.record-in { animation: record-fade 200ms ease both; }
.record-in .record-sheet--back { animation: record-fade 300ms ease 80ms both; }
.record-in .record-sheet--middle { animation: record-fade 300ms ease 160ms both; }
.record-in .record-sheet--front { animation: record-document 550ms var(--record-ease) 200ms both; }
.record-in .record-sheet--front > * { animation: record-fade 300ms ease 550ms both; }
.record-in .record-orbit { animation: record-orbit-in 550ms var(--record-ease) 300ms both; }
.record-in .record-node-icon { animation: record-node-in 300ms var(--record-ease) var(--record-delay) both; }
.record-in .record-node-label { animation: record-fade 250ms ease calc(var(--record-delay) + 100ms) both; }
.record-progress.record-in li::after { animation: record-line 350ms var(--record-ease) both; }
.record-progress.record-in .record-progress-dot { animation: record-node-in 250ms var(--record-ease) calc(250ms + var(--record-delay)) both; }
.record-in .record-letter { animation: record-row 350ms var(--record-ease) var(--record-delay) both; }
.record-in .record-letter-status { animation: record-fade 200ms ease calc(var(--record-delay) + 220ms) both; }
@keyframes record-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes record-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes record-document { from { opacity: 0; transform: translateY(18px) scale(.96) rotate(6deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(9deg); } }
@keyframes record-orbit-in { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes record-node-in { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
@keyframes record-line { from { opacity: 0; scale: 0 1; } to { opacity: 1; scale: 1; } }
@keyframes record-row { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .record-stage { transition: translate 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .record-stage:hover { translate: 0 -2px; border-color: #bccbed; box-shadow: 0 8px 18px rgb(40 54 106 / 5%); } }
@media (prefers-reduced-motion: reduce) { .record-journey *, .record-journey *::before, .record-journey *::after { animation: none !important; transition: none !important; } .record-ready { opacity: 1; } }

/* Reference refinement: stronger feature accents on a quiet lavender canvas. */
.record-journey { --record-ink: #0b1535; --record-muted: #52627d; background: #f7f3ff; }
.record-tone--blue { --record-accent: #2563eb; --record-soft: #e7eeff; }
.record-tone--green { --record-accent: #0b9f71; --record-soft: #e1f7ed; }
.record-tone--orange { --record-accent: #e66b12; --record-soft: #fff0e1; }
.record-tone--purple { --record-accent: #7c3aed; --record-soft: #eee5ff; }
.record-intro h2 { font-size: clamp(30px, 2.9vw, 46px); max-width: 24ch; }
.record-intro p { font-size: 16px; }
.record-hero { margin-bottom: 36px; }
.record-person { color: #7c3aed; background: #ece2ff; }
.record-sheet--back { background: #cbd2fb; }
.record-sheet--middle { background: #dfe0ff; }
.record-lines i { background: #b9bafa; }
.record-stack .record-sheet--front { transform: rotate(-2deg); }
.record-stack .record-sheet strong { font-size: 13px; }
.record-node-icon { width: 50px; height: 50px; }
.record-node-label { font-size: 12px; }
.record-node--2 { --record-delay: 490ms; }
.record-node--3 { --record-delay: 580ms; }
.record-node--4 { --record-delay: 670ms; }
/* Badge centers share the orbit's SVG coordinates at every desktop size. */
@media (min-width: 600px) {
  .record-visual { --node-size: 50px; height: auto; aspect-ratio: 2 / 1; }
  .record-stack { top: calc(53.333% - 107.5px); }
  .record-node { width: var(--node-size); height: var(--node-size); right: auto; }
  .record-node-icon { width: var(--node-size); height: var(--node-size); }
  .record-node--1, .record-node--2 { left: calc(25.8333% - var(--node-size) / 2); }
  .record-node--3, .record-node--4 { left: calc(74.1667% - var(--node-size) / 2); }
  .record-node--1, .record-node--3 { top: calc(34.2783% - var(--node-size) / 2); }
  .record-node--2, .record-node--4 { top: calc(72.3883% - var(--node-size) / 2); }
  .record-node-label { position: absolute; white-space: nowrap; border: 1px solid #eceafb; box-shadow: 0 3px 10px rgb(40 54 106 / 3%); }
  .record-node--1 .record-node-label, .record-node--2 .record-node-label { right: calc(100% - 5px); padding-right: 14px; }
  .record-node--3 .record-node-label, .record-node--4 .record-node-label { left: calc(100% - 5px); padding-left: 14px; }
}
@media (min-width: 600px) and (max-width: 1199px) {
  .record-visual { --node-size: 36px; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .record-stack { top: calc(53.333% - 95px); }
}
.record-stage { padding: 24px 22px; min-height: 224px; box-shadow: 0 4px 14px rgb(40 54 106 / 4%); }
.record-stage:nth-child(1) { --record-delay: 0ms !important; }
.record-stage:nth-child(2) { --record-delay: 100ms !important; }
.record-stage:nth-child(3) { --record-delay: 200ms !important; }
.record-stage:nth-child(4) { --record-delay: 300ms !important; }
.record-stage h3 { font-size: 18px; }
.record-stage p { font-size: 14px; }
.record-stage-mark { gap: 16px; }
.record-stage-mark svg { width: 32px; height: 32px; padding: 2px; border-radius: 8px; }
.record-stage-mark span { font-size: 20px; width: 36px; height: 36px; }
.record-progress { margin-block: 28px 36px; }
.record-progress li { font-size: 12px; color: #3f5277; }
.record-progress-dot { width: 11px; height: 11px; }
.record-letter { padding-block: 14px; grid-template-columns: 42px minmax(0, 1fr) auto; }
.record-letter-icon { width: 42px; height: 46px; }
.record-letter-icon svg { width: 26px; height: 26px; }
.record-letter strong { font-size: 13px; }
.record-letter p { font-size: 12px; }
.record-letter-status { font-size: 11px; color: #246147; }
.record-letter-status--waiting { color: #915215; }
.record-templates header h3 { font-size: 12px; }
.record-doc-copy h2 { font-size: 28px; }
.record-doc-copy p, .record-doc-copy li { font-size: 13px; }
.record-doc-panel { padding: 26px; gap: 22px; }
.record-document-art { width: 135px; height: 195px; margin-right: 6px; isolation: isolate; }
.record-document-art::before { content: ''; position: absolute; inset: -22px -18px; border-radius: 45% 55% 60% 40%; background: #eee8ff; z-index: -1; opacity: .65; }
.record-document-art .record-sheet--front { transform: rotate(3deg); }
.record-stage.record-in { animation-name: record-stage-up; animation-duration: 420ms; }
.record-visual.record-in .record-sheet--front { animation-name: record-main-document; }
.record-in .record-orbit { animation-duration: 700ms; }
.record-in .record-node-icon { animation-name: record-feature-node; }
.record-in .record-node-label { animation-name: record-label; }
.record-stage.record-in .record-stage-mark span { animation: record-fade 180ms ease var(--record-delay) both; }
.record-stage.record-in p { animation: record-fade 250ms ease calc(var(--record-delay) + 320ms) both; }
.record-tone--blue.record-in .record-stage-mark svg { animation: record-feature-node 300ms var(--record-ease) 180ms both; }
.record-tone--green.record-in .record-stage-mark svg { animation: record-onboarding 550ms var(--record-ease) 200ms both; }
.record-tone--orange.record-in .record-stage-mark svg { animation: record-calendar 400ms var(--record-ease) 350ms both; }
.record-tone--orange.record-in .record-stage-mark span { animation-delay: 550ms; }
.record-tone--purple.record-in .record-stage-mark svg { animation: record-exit 450ms var(--record-ease) 450ms both; }
.record-tone--purple.record-in .record-stage-mark span { animation-delay: 500ms; }
.record-progress.record-in .record-progress-dot { animation-name: record-timeline-dot; animation-duration: 400ms; }
.record-progress.record-in li > span:last-child { animation: record-fade 220ms ease calc(400ms + var(--record-delay)) both; }
.record-templates.record-in header { animation: record-fade 220ms ease 100ms both; }
.record-in .record-letter { animation-duration: 300ms; animation-delay: calc(200ms + var(--record-delay)); }
.record-in .record-letter-status { animation-delay: calc(420ms + var(--record-delay)); }
.record-doc-panel.record-in .record-sheet--back { animation: record-back-document 400ms var(--record-ease) 100ms both; }
.record-doc-panel.record-in .record-sheet--middle { animation: record-middle-document 400ms var(--record-ease) 180ms both; }
.record-doc-panel.record-in .record-sheet--front { animation-name: record-front-document; animation-delay: 280ms; }
.record-doc-panel.record-in .record-sheet--front > * { animation-delay: 650ms; }
@keyframes record-main-document { from { opacity: 0; transform: translateY(18px) scale(.94) rotate(-5deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(-2deg); } }
@keyframes record-stage-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes record-feature-node { from { opacity: 0; transform: scale(.78); } to { opacity: 1; transform: scale(1); } }
@keyframes record-label { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes record-onboarding { 0% { opacity: 0; transform: translateY(6px); background: transparent; } 50% { opacity: 1; background: #d1f2e4; } 100% { opacity: 1; transform: translateY(0); background: transparent; } }
@keyframes record-calendar { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes record-exit { 0% { opacity: 0; transform: translateX(0); } 45% { opacity: 1; transform: translateX(6px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes record-timeline-dot { 0% { opacity: 0; transform: scale(.5); } 65% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 6px var(--record-soft); } 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 4px var(--record-soft); } }
@keyframes record-back-document { from { opacity: 0; transform: translate(16px,29px) rotate(11deg); } to { opacity: 1; transform: translate(16px,17px) rotate(14deg); } }
@keyframes record-middle-document { from { opacity: 0; transform: translate(8px,20px) rotate(8deg); } to { opacity: 1; transform: translate(8px,8px) rotate(11deg); } }
@keyframes record-front-document { from { opacity: 0; transform: translateY(18px) rotate(6deg) scale(.94); } to { opacity: 1; transform: translateY(0) rotate(3deg) scale(1); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .record-letter { transition: translate 180ms ease, box-shadow 180ms ease; } .record-letter:hover { translate: 0 -2px; box-shadow: 0 4px 10px rgb(40 54 106 / 4%); } .record-stage:hover .record-stage-mark svg, .record-letter:hover .record-letter-icon { background: color-mix(in srgb, var(--record-soft) 75%, white); } }
@media (max-width: 1199px) { .record-node-icon { width: 36px; height: 36px; } .record-node-label { font-size: 10px; } .record-document-art { width: 145px; height: 205px; margin-right: 20px; } }
@media (max-width: 900px) { .record-progress li { font-size: 10px; } }
@media (max-width: 599px) { .record-stage { min-height: 0; padding: 24px; } .record-letter { grid-template-columns: 32px minmax(0,1fr) auto; gap: 8px; } .record-letter-icon { width: 32px; height: 40px; } .record-letter strong { font-size: 12px; } .record-letter p { font-size: 11px; } .record-letter-status { font-size: 9px; } .record-templates header h3 { font-size: 10px; } .record-document-art { margin: 36px auto 24px; } .record-doc-copy h2 { font-size: 26px; } .record-progress li { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .record-journey::before, .record-journey::after { animation: none !important; } }