/* HR Letters product page (/hr-letters) — the mock-ups only; the layout is product.css. */
.hl-letter, .hl-preview { width: 260px; background: #fff; border-radius: 10px; padding: 16px 18px; box-shadow: 0 12px 30px rgba(16, 24, 40, .1); font-size: .74rem; line-height: 1.7; color: #3c4557; }
.hl-preview { width: auto; box-shadow: none; border: 1px solid #eef0f4; padding: 14px 16px; font-size: .8rem; }
.hl-preview p { margin: 0 0 8px; }
.hl-letter p { margin: 10px 0; }
.hl-letterhead { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 2px solid #0c64ae; margin-bottom: 8px; }
.hl-letterhead b { display: block; font-size: .8rem; color: #1d2433; line-height: 1.2; }
.hl-letterhead small { color: #8a93a4; font-size: .66rem; }
.hl-logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #0c64ae, #7c3aed); flex: none; }
.hl-line { height: 6px; border-radius: 3px; background: #eceef3; margin: 6px 0; width: 100%; }
.hl-line.w80 { width: 80%; } .hl-line.w60 { width: 60%; } .hl-line.w40 { width: 40%; }
.hl-field { padding: 1px 6px; border-radius: 5px; font-weight: 600; color: #0c64ae; background: #e8f1fb; box-shadow: inset 0 0 0 1px #c9def4;
  animation: hlField 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes hlField { 0%, 70%, 100% { background: #e8f1fb; } 20% { background: #cfe3f8; } }
.hl-sign { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.hl-sign small { color: #8a93a4; }
.hl-scribble { font-family: "Segoe Script", "Brush Script MT", cursive; font-size: .95rem; color: #1d3a6e; border-bottom: 1px solid #c8cdd8; padding-bottom: 2px; width: 110px; }

.hl-starters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 300px; }
.hl-starter { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: #fff; font-size: .74rem; font-weight: 600; color: #1d2433;
  box-shadow: 0 4px 12px rgba(16, 24, 40, .07); opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .45s, transform .45s; transition-delay: calc(var(--i) * 90ms + .2s); }
.hl-starter i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pp-card.in .hl-starter { opacity: 1; transform: none; }

.hl-ask { width: 250px; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 12px 30px rgba(16, 24, 40, .1); display: grid; gap: 9px; font-size: .78rem; }
.hl-ask label { display: flex; flex-direction: column; gap: 4px; font-size: .66rem; font-weight: 600; color: #8a93a4; }
.hl-ask label span { font-size: .78rem; font-weight: 500; color: #1d2433; border: 1px solid #e3e7ee; border-radius: 7px; padding: 6px 9px; background: #fafbfd; }
.hl-send { justify-self: start; margin-top: 2px; padding: 7px 14px; border-radius: 8px; background: #0c64ae; color: #fff; font-weight: 600; font-size: .74rem; }

.hl-track { width: 240px; display: grid; gap: 0; }
.hl-track-step { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: #fff; border-radius: 12px; box-shadow: 0 6px 16px rgba(16, 24, 40, .07); position: relative; margin-bottom: 12px;
  opacity: 0; transform: translateX(-10px); transition: opacity .5s, transform .5s; transition-delay: calc(var(--i) * .45s + .3s); }
.hl-track-step:not(:last-child)::after { content: ""; position: absolute; left: 26px; bottom: -15px; width: 2px; height: 16px; background: #bbe5cb; }
.hl-track-step small { display: block; color: #8a93a4; font-size: .7rem; }
.hl-track-step b { font-size: .84rem; }
.hl-dot { width: 26px; height: 26px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; font-size: .66rem; flex: none; }
.pp-card.in .hl-track-step { opacity: 1; transform: none; }

.hl-pdf { position: relative; }
.hl-pdf-page { width: 170px; height: 220px; background: #fff; border-radius: 6px; padding: 18px 16px; box-shadow: 0 2px 0 #e8eaf0, 0 4px 0 #f1f2f6, 0 18px 36px rgba(16, 24, 40, .14);
  transform: rotate(-4deg); transition: transform .5s; }
.pp-card:hover .hl-pdf-page { transform: rotate(0deg) translateY(-4px); }
.hl-pdf-ref { display: inline-block; font-family: ui-monospace, Consolas, monospace; font-size: .62rem; font-weight: 700; color: #0c64ae; background: #e8f1fb; border-radius: 4px; padding: 3px 6px; margin-bottom: 14px; }
.hl-pdf-badge { position: absolute; right: -16px; bottom: 18px; padding: 6px 10px; border-radius: 8px; background: #dc2626; color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .06em;
  box-shadow: 0 6px 16px rgba(220, 38, 38, .35); }

.hl-folder { width: 270px; background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 12px 30px rgba(16, 24, 40, .1); font-size: .78rem; }
.hl-folder-head { font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid #eef0f4; margin-bottom: 4px; }
.hl-folder-head i { color: #d97706; --fa-primary-color: #d97706; --fa-secondary-color: #f59e0b; }
.hl-folder-row { display: flex; align-items: center; gap: 9px; padding: 8px 2px; border-bottom: 1px solid #f4f5f8; opacity: 0; transition: opacity .4s; transition-delay: calc(var(--i) * .2s + .4s); }
.hl-folder-row:last-child { border-bottom: 0; }
.hl-folder-row i { color: #dc2626; --fa-primary-color: #dc2626; --fa-secondary-color: #dc2626; }
.hl-folder-row small { margin-left: auto; color: #8a93a4; white-space: nowrap; }
.pp-card.in .hl-folder-row { opacity: 1; }

.hl-ready { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: #ecfdf3; color: #15803d; font-weight: 600; }
.pp-scene.on .hl-ready { animation: ppRow .5s .8s both; }

@media (prefers-reduced-motion: reduce) {
  .hl-starter, .hl-track-step, .hl-folder-row { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hl-field { animation: none; }
}