/* New process proposals for the templates catalog only.
   ProcessVisual supplies the miniature document/window language; the observed
   Firecrawl scan and input → result pattern informs these new 9.6s sequences.
   The base styles are the complete final result. The shared catalog controller
   enables motion and supplies --spm-play, including for pseudo-elements. */
.templates-catalog .tpr-card { aspect-ratio: auto; }
.templates-catalog .tpr-card .spm-card-index,
.templates-catalog .tpr-card .spm-kicker { font-size: 13px; line-height: 19px; }
.templates-catalog .tpr-scene {
  min-height: 486px; flex: none; padding: 24px 18px; color: #262626;
  font: 400 14px/20px var(--dealyo-font); --spm-duration: 9.6s;
}
.tpr-process { width: 100%; max-width: 340px; min-width: 0; }
.tpr-steps {
  display: flex; align-items: center; justify-content: space-between;
  gap: 7px; margin: 0 0 24px; color: #ababab;
}
.tpr-steps > svg { flex: 0 0 14px; width: 14px; height: 14px; }
.tpr-step {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  color: #555; font-size: 13px; line-height: 20px;
}
.tpr-step b { color: #fe4a23; font: 400 13px/20px var(--dealyo-mono); }
.tpr-report-stage { position: relative; min-height: 330px; }
.tpr-observations,.tpr-report-sheet,.tpr-page {
  width: 100%; background: #fff; border: 1px solid #e7e7e7;
  box-shadow: 0 10px 24px #26262607; border-radius: 0;
}
.tpr-observations { position: absolute; inset: 0 0 auto; opacity: 0; pointer-events: none; }
.tpr-panel-head {
  display: flex; align-items: center; gap: 11px; min-height: 65px;
  padding: 11px 16px; border-bottom: 1px solid #e7e7e7;
}
.tpr-panel-head > svg { flex: 0 0 21px; color: #fe4a23; }
.tpr-panel-head > span { font-size: 17px; line-height: 23px; font-weight: 500; }
.tpr-panel-head small { display: block; margin-top: 1px; font-size: 13px; line-height: 19px; font-weight: 400; color: #666; }
.tpr-finding {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; height: 68px; padding: 10px 16px; border-bottom: 1px solid #e7e7e7;
}
.tpr-finding strong { display: block; font-size: 15px; line-height: 22px; font-weight: 500; }
.tpr-finding small { display: block; color: #666; font-size: 13px; line-height: 19px; }
.tpr-read { flex: 0 0 20px; color: #fe4a23; }
.tpr-selection {
  display: flex; align-items: center; gap: 9px; min-height: 43px;
  padding: 10px 16px; font-size: 13px; line-height: 20px; background: #fff2ed;
}
.tpr-selection-mark { flex: 0 0 6px; width: 6px; height: 6px; background: #fe4a23; }
.tpr-report-sheet { position: relative; }
.tpr-action {
  display: flex; align-items: center; gap: 13px; min-height: 72px;
  padding: 11px 16px; border-bottom: 1px solid #e7e7e7;
}
.tpr-action > b { align-self: center; flex: 0 0 22px; font: 400 13px/20px var(--dealyo-mono); color: #666; }
.tpr-action > span { min-width: 0; }
.tpr-action small { display: block; color: #666; font-size: 13px; line-height: 19px; }
.tpr-action strong { display: block; font-size: 15px; line-height: 22px; font-weight: 500; }
.tpr-action > svg { margin-left: auto; flex: 0 0 18px; color: #fe4a23; }
.tpr-action-first { background: #fff2ed; }
.tpr-action-first > b { color: #fe4a23; }
.tpr-ready { display: flex; align-items: center; gap: 8px; min-height: 43px; padding: 10px 16px; color: #555; font-size: 13px; line-height: 20px; }
.tpr-ready > svg { flex: 0 0 17px; color: #fe4a23; }
.tpr-page { overflow: hidden; }
.tpr-browser-bar {
  display: flex; align-items: center; gap: 9px; height: 39px;
  padding: 9px 15px; color: #666; font: 400 13px/20px var(--dealyo-font);
  border-bottom: 1px solid #e7e7e7;
}
.tpr-browser-bar > svg { margin-left: auto; flex: 0 0 16px; color: #999; }
.tpr-browser-mark { width: 6px; height: 6px; flex: 0 0 6px; background: #fe4a23; }
.tpr-page-slot { position: relative; border-bottom: 1px solid #e7e7e7; background: #fcfcfc; }
.tpr-page-block { position: relative; height: 100%; background: #fff; padding: 13px 17px; }
.tpr-block-label { display: block; margin-bottom: 6px; color: #666; font: 400 13px/19px var(--dealyo-mono); }
.tpr-page-block > strong { display: block; color: #262626; font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: -.025em; }
.templates-catalog .tpr-page-block > p { margin: 4px 0 0; color: #666; font-size: 13px; line-height: 19px; }
.tpr-offer-slot { height: 109px; }
.tpr-offer-block > strong { font-size: 25px; line-height: 29px; }
.tpr-proof-slot { height: 103px; }
.tpr-contact-slot { height: 99px; }
.tpr-page-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 38px; padding: 7px 12px; background: #fe4a23; color: #fff; font-size: 14px; line-height: 24px; font-weight: 500; }
.tpr-page-cta > svg { display: block; width: 24px; height: 24px; flex: 0 0 24px; }
.tpr-page-ready { min-height: 42px; }

/* No delays: every child shares one clock, so scan, choice and assembly stay
   aligned when the inherited controller pauses or resumes either scene. */
.tpr-step-scan { --spm-animation: tpr-step-scan; }
.tpr-step-select { --spm-animation: tpr-step-select; }
.tpr-step-result { --spm-animation: tpr-step-result; }
.tpr-observations { --spm-animation: tpr-observations; }
.tpr-finding-offer { --spm-animation: tpr-scan-offer; }
.tpr-finding-proof { --spm-animation: tpr-scan-proof; }
.tpr-finding-contact { --spm-animation: tpr-scan-contact; }
.tpr-read-offer { --spm-animation: tpr-read-offer; }
.tpr-read-proof { --spm-animation: tpr-read-proof; }
.tpr-read-contact { --spm-animation: tpr-read-contact; }
.tpr-selection { --spm-animation: tpr-selection; }
.tpr-report-sheet { --spm-animation: tpr-report-sheet; }
.tpr-action-first { --spm-animation: tpr-action-first; }
.tpr-action-second { --spm-animation: tpr-action-second; }
.tpr-action-third { --spm-animation: tpr-action-third; }
.tpr-report-ready { --spm-animation: tpr-report-ready; }
.tpr-step-offer { --spm-animation: tpr-step-offer; }
.tpr-step-proof { --spm-animation: tpr-step-proof; }
.tpr-step-contact { --spm-animation: tpr-step-contact; }
.tpr-offer-block { --spm-animation: tpr-offer-block; }
.tpr-proof-block { --spm-animation: tpr-proof-block; }
.tpr-contact-block { --spm-animation: tpr-contact-block; }
.tpr-page-ready { --spm-animation: tpr-page-ready; }

@keyframes tpr-step-scan { 0%,24% { color:#fe4a23; } 28%,96% { color:#777; } 100% { color:#fe4a23; } }
@keyframes tpr-step-select { 0%,22%,41%,100% { color:#777; } 26%,36% { color:#fe4a23; } }
@keyframes tpr-step-result { 0%,37%,100% { color:#777; } 42%,96% { color:#fe4a23; } }
@keyframes tpr-observations { 0%,34%,100% { opacity:1; } 37%,98% { opacity:0; } }
@keyframes tpr-scan-offer { 0%,3%,15%,100% { background:#fff; } 5%,11% { background:#fff2ed; } }
@keyframes tpr-scan-proof { 0%,11%,24%,100% { background:#fff; } 15%,20% { background:#fff2ed; } }
@keyframes tpr-scan-contact { 0%,21%,100% { background:#fff; } 25%,96% { background:#fff2ed; } }
@keyframes tpr-read-offer { 0%,7%,100% { opacity:0; } 11%,96% { opacity:1; } }
@keyframes tpr-read-proof { 0%,16%,100% { opacity:0; } 20%,96% { opacity:1; } }
@keyframes tpr-read-contact { 0%,25%,100% { opacity:0; } 29%,96% { opacity:1; } }
@keyframes tpr-selection { 0%,26%,100% { opacity:0; } 31%,96% { opacity:1; } }
@keyframes tpr-report-sheet { 0%,38%,98%,100% { opacity:0; } 43%,96% { opacity:1; } }
@keyframes tpr-action-first { 0%,41%,100% { opacity:0; } 48%,96% { opacity:1; } }
@keyframes tpr-action-second { 0%,49%,100% { opacity:0; } 56%,96% { opacity:1; } }
@keyframes tpr-action-third { 0%,57%,100% { opacity:0; } 64%,96% { opacity:1; } }
@keyframes tpr-report-ready { 0%,62%,100% { opacity:0; } 67%,96% { opacity:1; } }
@keyframes tpr-step-offer { 0%,27% { color:#fe4a23; } 31%,96% { color:#777; } 100% { color:#fe4a23; } }
@keyframes tpr-step-proof { 0%,25%,49%,100% { color:#777; } 31%,44% { color:#fe4a23; } }
@keyframes tpr-step-contact { 0%,44%,100% { color:#777; } 50%,96% { color:#fe4a23; } }
@keyframes tpr-offer-block { 0%,7%,100% { opacity:0; transform:translateY(8px); } 22%,96% { opacity:1; transform:translateY(0); } }
@keyframes tpr-proof-block { 0%,28%,100% { opacity:0; transform:translateY(8px); } 43%,96% { opacity:1; transform:translateY(0); } }
@keyframes tpr-contact-block { 0%,47%,100% { opacity:0; transform:translateY(8px); } 62%,96% { opacity:1; transform:translateY(0); } }
@keyframes tpr-page-ready { 0%,62%,100% { opacity:0; } 67%,96% { opacity:1; } }

@media(max-width:991px) {
  .templates-catalog .tpr-scene { padding-inline: 16px; }
  .templates-catalog .tpr-card .spm-card-head { flex-wrap: wrap; gap: 5px 14px; }
}
@media(max-width:767px) {
  .templates-catalog .tpr-scene { padding-block: 23px; min-height: 445px; }
  .tpr-process { max-width: 340px; }
}
@media(max-width:359px) {
  .templates-catalog .tpr-scene { padding-inline: 12px; }
  .tpr-steps { gap: 4px; margin-bottom: 22px; }
  .tpr-step { gap: 4px; }
  .tpr-steps > svg { flex-basis: 10px; width: 10px; }
  .tpr-panel-head,.tpr-finding,.tpr-action,.tpr-ready,.tpr-selection { padding-inline: 12px; }
  .tpr-panel-head { gap: 9px; }
  .tpr-panel-head > span { font-size: 16px; }
  .tpr-action { gap: 9px; }
  .tpr-action > b { flex-basis: 20px; }
  .tpr-action strong { font-size: 14px; }
  .tpr-page-block { padding-inline: 13px; }
  .tpr-page-cta { font-size: 14px; }
  .tpr-ready { gap: 7px; }
}
@media(prefers-reduced-motion:reduce) {
  .templates-catalog .tpr-scene .spm-animated { animation:none !important; }
}
@media print {
  .templates-catalog .tpr-scene .spm-animated { animation:none !important; }
}