/* Quiet, original UI examples. One visible example advances at a time. */
.hr-rich-card-head h4 a{text-decoration:none;color:inherit}
.hr-rich-card-head h4 a:hover{text-decoration:underline;text-underline-offset:5px}
.hr-rich-overview .hr-rich-card:hover{background:#f2eee7;border-color:transparent;transform:none}
.hr-module-example{--hx-sage:#e7ecdf;--hx-green:#4d6242;--hx-line:#e7dfd4;margin:0 0 26px;min-width:0;border:1px solid #dfd6ca;border-radius:9px;background:#fffdfa;overflow:hidden;color:var(--steen);font-size:12px;line-height:1.5;box-shadow:0 6px 20px #36332e03}
.hr-module-example *{box-sizing:border-box}
.hr-module-example [hidden]{display:none!important}
.hr-module-example b,.hr-module-example strong{font-weight:600}
.hr-module-example svg{flex:none;vertical-align:middle}
.hx-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px;border-bottom:1px solid var(--hx-line);background:#faf7f2}
.hx-top>span{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:550}
.hx-top>small{font-size:10px;color:#746c61}
.hx-stage{padding:22px 23px;background:linear-gradient(135deg,#fffdfa,#f8f5ee);min-height:295px;display:grid;align-items:center}
.hx-frame{min-width:0;width:100%;max-width:450px;margin:auto}
.hx-person{display:flex;gap:11px;align-items:center;margin-bottom:19px}
.hx-person>span{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;flex:none;background:#ede0d0;color:#865237;font-size:15px}
.hx-person b{display:block;font-size:13px;line-height:1.5}
.hx-person small{display:block;font-size:10px;color:#766e63;margin-top:3px}
.hx-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--hx-line);font-size:11px;min-width:0}
.hx-row>span:first-child{min-width:0}
.hx-badge{display:inline-flex;align-items:center;justify-content:center;gap:4px;background:#f3e5d7;color:#82502f;padding:4px 7px;border-radius:4px;font-size:9px;line-height:1.5;text-align:center;flex:none;font-weight:500}
.hx-badge.is-done{background:var(--hx-sage);color:var(--hx-green)}
.hx-progress{height:5px;background:#e8e2d8;border-radius:4px;margin:17px 0;overflow:hidden}
.hx-progress i{display:block;height:100%;border-radius:4px;background:#a7b198;transform-origin:left}
.hx-note{display:flex;align-items:center;gap:7px;background:#f0ebe3;padding:10px 11px;margin-top:16px;border-radius:5px;color:#74624e;font-size:10px;line-height:1.65;min-height:38px}
.hx-note.is-done{color:var(--hx-green);background:var(--hx-sage)}
.hx-checklist>div{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--hx-line);padding:10px 0;font-size:11px}
.hx-checklist i{display:grid;place-items:center;background:#ece7df;color:#8d8579;width:22px;height:22px;border-radius:50%;flex:none}
.hx-checklist .is-done i{background:var(--hx-sage);color:var(--hx-green)}
.hx-checklist small{font-size:9px;margin-left:auto;color:#786f61}
.hx-checklist .is-done small{color:var(--hx-green)}
.hx-sheet{border:1px solid var(--hx-line);border-radius:6px;padding:17px 19px;background:#fffdfa;box-shadow:0 4px 0 #f0ebe3}
.hx-sheet-top{display:flex;gap:9px;align-items:center;font-size:11px;margin-bottom:18px;color:#786752}
.hx-hours-change,.hx-timecompare,.hx-invoice{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hx-hours-change>div,.hx-timecompare>div,.hx-invoice>div{padding:11px 12px;border-radius:5px;min-width:0;flex:1}
.hx-hours-change small,.hx-timecompare small,.hx-invoice small{font-size:9px;display:block;color:#796f61}
.hx-hours-change b{font-size:30px;letter-spacing:-.05em;display:block;white-space:nowrap}
.hx-hours-change em{font-size:13px;font-style:normal;font-weight:400;letter-spacing:0}
.hx-hours-change>span{flex:none;color:#a08d77}
.hx-timecompare{background:#fffdfa;border:1px solid var(--hx-line);border-radius:6px;padding:7px;margin-bottom:9px}
.hx-timecompare b{font-size:25px;display:block;letter-spacing:-.04em}
.hr-module-example .is-highlight{background:#f2e3d3}
.hx-invoice{margin-top:15px}
.hx-invoice b{font-size:23px;display:block;white-space:nowrap;letter-spacing:-.03em}
.hx-invoice .is-corrected{background:var(--hx-sage)}
.hx-route{display:flex;align-items:center;margin-bottom:17px;gap:6px}
.hx-route>span{flex:1;border-radius:4px;background:#eee9e1;color:#847b6e;font-size:9px;text-align:center;padding:8px 3px}
.hx-route .is-current{background:#ddc7ae;color:#59432d}
.hx-task{background:#fffdfa;border:1px solid var(--hx-line);border-radius:6px;padding:19px}
.hx-task>small,.hx-expense-info>small,.hx-payroll>small,.hx-chart-heading small{font-size:9px;color:#917252;letter-spacing:.055em}
.hx-task>b{display:block;font-size:17px;margin:7px 0 19px;letter-spacing:-.025em}
.hx-assignee{display:flex;gap:10px;align-items:center}
.hx-assignee>span{display:grid;place-items:center;width:29px;height:29px;background:var(--hx-sage);border-radius:50%;color:var(--hx-green)}
.hx-assignee strong{font-size:11px;display:block}
.hx-assignee small{font-size:10px;color:#82796d;display:block;margin-top:2px}
.hx-calendar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.hx-calendar>div{background:#f0ece5;border:1px solid transparent;border-radius:6px;padding:9px 2px;text-align:center}
.hx-calendar small{display:block;font-size:10px;color:#7d7264}
.hx-calendar b{font-size:18px;display:block;margin:2px 0}
.hx-calendar i{font-size:12px;font-style:normal;color:#a1998b}
.hx-calendar .is-selected{background:#f1dfca;border-color:#dbc0a2}
.hx-calendar .is-selected i{color:#80552e}
[data-frame="2"] .hx-calendar .is-selected{background:var(--hx-sage);border-color:#bcc5ae}
[data-frame="2"] .hx-calendar .is-selected i{color:var(--hx-green)}
.hx-balance{display:flex;align-items:center;justify-content:space-between;margin-top:13px;font-size:11px}
.hx-balance b{font-size:22px;letter-spacing:-.03em}
.hx-balance small{font-size:11px;font-weight:400;letter-spacing:0}
.hx-explanation{display:flex;align-items:center;gap:8px;margin-top:13px;color:#8c7054;font-size:11px;min-height:27px}
.hx-roster{border:1px solid var(--hx-line);background:#fffdfa;border-radius:6px;padding:12px}
.hx-roster-days,.hx-roster-line{display:grid;grid-template-columns:35px repeat(3,minmax(0,1fr));gap:6px;align-items:center;margin-bottom:8px}
.hx-roster-days>b{font-size:9px;text-align:center;font-weight:500}
.hx-roster-line:last-child{margin-bottom:0}
.hx-roster-line>small{font-size:9px;color:#877c6e}
.hx-roster-line>span{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px 2px;gap:3px;background:#eee9df;border:1px solid transparent;border-radius:4px}
.hx-roster-line b{display:grid;place-items:center;width:22px;height:22px;background:#ded7ca;border-radius:50%;font-size:10px}
.hx-roster-line small{font-size:9px}
.hx-roster-line .is-open{background:#fffdfa;border:1px dashed #baa68f}
.hx-roster-line .is-open b{background:transparent;color:#977551}
.hx-roster-line .is-assigned{background:var(--hx-sage);border-color:#b9c3ab}
.hx-roster-line .is-assigned b{background:#c6d0b9;color:var(--hx-green)}
.hx-phone{max-width:220px;background:#fffdfa;border:3px solid #d5ccbd;border-radius:21px;padding:12px 16px 16px;margin:auto;min-height:254px;box-shadow:7px 7px 0 #ede7dc}
.hx-phone-notch{width:45px;height:4px;border-radius:4px;background:#d4cbbb;margin:0 auto 17px}
.hx-phone>small{font-size:8px;letter-spacing:.045em;color:#907352}
.hx-phone>b{display:block;font-size:15px;line-height:1.4;margin:5px 0 17px;letter-spacing:-.03em}
.hx-phone .hx-row{font-size:9px;gap:5px;padding:12px 0}
.hx-phone .hx-badge{font-size:8px;padding:4px 5px}
.hx-phone .hx-timecompare{padding:2px;margin-top:12px;margin-bottom:17px}
.hx-phone .hx-timecompare>div{padding:7px}
.hx-phone .hx-timecompare b{font-size:19px}
.hx-expense{display:grid;grid-template-columns:115px minmax(0,1fr);gap:23px;align-items:center;margin:5px 0 23px}
.hx-receipt{position:relative;background:#fffdfa;border:1px solid #e0d5c5;box-shadow:3px 5px 0 #eee7dc;border-radius:3px;padding:17px 12px;display:flex;flex-direction:column;gap:10px;align-items:center;transform:rotate(-3deg)}
.hx-receipt svg{color:#9a8063}
.hx-receipt small{font-size:7px;color:#9a8063;letter-spacing:.05em}
.hx-receipt b{font-size:21px;letter-spacing:-.03em}
.hx-receipt i{height:1px;width:100%;background:#e1d7c9}
.hx-receipt i:nth-last-child(2){width:70%}
.hx-receipt>span{font-size:8px;color:#998570}
.hx-expense-info>b{display:block;font-size:19px;letter-spacing:-.03em;margin:7px 0}
.hx-expense-info>span:not(.hx-badge){display:block;font-size:10px;line-height:1.7;color:#7e7263;margin-bottom:13px}
.hx-sources{display:flex;gap:9px;justify-content:center}
.hx-sources>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;flex:1;padding:13px 5px;background:#fffdfa;border:1px solid #e1d8ca;border-radius:5px;font-size:10px;color:#7f6b55}
.hx-join{display:flex;height:24px;justify-content:space-around;margin:0 15% 0}
.hx-join>span{width:1px;background:#c5b398;position:relative}
.hx-join>span::after{content:'';position:absolute;bottom:0;left:-2px;width:5px;height:5px;background:#c5b398;border-radius:50%}
.hx-payroll{max-width:270px;margin:auto;padding:16px;text-align:center;background:#f1e9dd;border:1px solid #dcccb5;border-radius:6px}
.hx-payroll>b{display:block;margin:6px 0 11px;font-size:16px;letter-spacing:-.025em}
.hx-payroll .hx-badge{display:flex;width:max-content;margin-inline:auto}
.hx-chart-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.hx-chart-heading b{display:block;font-size:17px;margin-top:5px;letter-spacing:-.02em}
.hx-chart{position:relative;display:flex;align-items:flex-end;gap:7px;height:140px;border-bottom:1px solid #d8cdbd;padding:0 5px;background:repeating-linear-gradient(to top,transparent 0,transparent 34px,#ece5da 34px,#ece5da 35px)}
.hx-chart>i{height:var(--hx-height);min-width:0;flex:1;background:#cbb99e;border-radius:3px 3px 0 0;transform-origin:bottom}
.hx-chart>i.is-low{background:#c48d67}
.hx-chart>i.is-added{background:#a3b292}
.hx-chart-target{position:absolute;left:0;right:0;bottom:65%;border-top:1px dashed #a29178}
.hx-chart-labels{display:flex;justify-content:space-between;font-size:8px;color:#91816d;padding-top:6px}
.hx-controls{padding:10px 13px 0;background:#fffdfa;border-top:1px solid var(--hx-line)}
.hx-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.hx-steps button{appearance:none;display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:5px 3px;font:inherit;font-size:10px;line-height:1.35;background:transparent;border:1px solid transparent;border-radius:5px;color:#817462;cursor:pointer}
.hx-steps button>span{font-size:8px;color:#9d8d77}
.hx-steps button[aria-pressed="true"]{background:#f2eadd;border-color:#e5d7c3;color:#6c5033}
.hx-steps button:hover{background:#f7f1e8}
.hx-play{display:flex;align-items:center;justify-content:center;gap:7px;margin:4px auto 0;min-height:34px;padding:5px 8px;border:0;border-radius:5px;background:none;color:#84715a;font:inherit;font-size:10px;cursor:pointer}
.hx-play:hover{color:#4c4236;background:#f6f0e7}
.hx-play>svg{width:11px;height:11px}
.hr-module-example button:focus-visible{outline:2px solid var(--terra-d);outline-offset:2px}
.hr-module-example>figcaption{padding:10px 19px 17px;font-size:11px;line-height:1.8;letter-spacing:0;color:#776b5b;min-height:83px;text-align:left}
.hr-feature-hero .hr-module-example{margin:0;box-shadow:0 14px 50px #68533908}
.hr-feature-hero .hx-stage{min-height:330px;padding:30px}
.hr-feature-hero .hx-frame{max-width:360px}
.hr-feature-hero .hr-module-example>figcaption{font-size:12px;padding:12px 25px 21px}
.hr-module-example[data-animate="true"] .hx-frame:not([hidden]){animation:hx-arrive .45s ease-out both}
.hr-module-example[data-animate="true"] .hx-progress i{animation:hx-reveal .6s ease-out both}
.hr-module-example[data-animate="true"] .hx-chart>i{animation:hx-grow .65s ease-out both}
@keyframes hx-arrive{from{opacity:.45;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes hx-reveal{from{transform:scaleX(.75)}to{transform:scaleX(1)}}
@keyframes hx-grow{from{transform:scaleY(.8)}to{transform:scaleY(1)}}
@media(max-width:1100px) and (min-width:721px){.hx-stage{padding:20px 15px}.hx-expense{grid-template-columns:88px minmax(0,1fr);gap:14px}.hx-receipt{padding:14px 8px}.hx-invoice b{font-size:19px}.hx-sheet{padding:14px}.hx-hours-change{gap:5px}.hx-hours-change>div{padding:8px}.hx-hours-change b{font-size:26px}.hx-steps button{font-size:9px;flex-direction:column;gap:3px}.hx-row{font-size:10px;gap:7px}.hx-badge{font-size:8px}}
@media(max-width:480px){.hx-top{padding:12px 14px}.hx-top>small{font-size:9px}.hx-stage{padding:19px 15px;min-height:285px}.hx-person b{font-size:12px}.hx-row{gap:7px;font-size:10px}.hx-badge{font-size:8px}.hx-expense{grid-template-columns:89px minmax(0,1fr);gap:16px}.hx-expense-info>b{font-size:17px}.hx-receipt{padding:16px 10px}.hx-sheet{padding:15px 12px}.hx-hours-change{gap:5px}.hx-hours-change>div,.hx-invoice>div{padding:8px}.hx-hours-change small,.hx-invoice small{font-size:8px}.hx-hours-change b{font-size:27px}.hx-invoice b{font-size:21px}.hx-chart{gap:5px}.hx-chart-heading b{font-size:15px}.hx-controls{padding:9px 8px 0}.hx-steps{gap:2px}.hx-steps button{flex-direction:column;font-size:9px;gap:3px;padding:6px 2px;min-height:45px}.hr-module-example>figcaption{font-size:10px;padding:9px 14px 15px;min-height:89px}.hr-feature-hero .hx-stage{min-height:300px;padding:20px}.hr-feature-hero .hr-module-example>figcaption{font-size:11px;padding:12px 18px 18px}.hx-sources{gap:6px}.hx-sources>span{font-size:9px}.hx-roster{padding:9px}.hx-roster-days,.hx-roster-line{grid-template-columns:29px repeat(3,minmax(0,1fr));gap:4px}.hx-roster-days>b,.hx-roster-line small{font-size:8px}}
@media(max-width:360px){.hr-rich-overview .hr-rich-card{padding-inline:18px}.hx-stage{padding:17px 12px}.hx-badge{padding:4px 5px}.hx-person>span{width:31px;height:31px}.hx-person{gap:8px}.hx-expense{gap:12px;grid-template-columns:80px minmax(0,1fr)}.hx-expense-info>b{font-size:15px}.hx-expense-info>small{font-size:8px}.hx-note{font-size:9px;padding:9px 8px}.hx-hours-change b{font-size:24px}.hx-invoice b{font-size:18px}.hx-checklist>div{gap:7px;font-size:10px}.hx-checklist small{font-size:8px}.hx-top>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hr-module-example *, .hr-module-example *::after{animation:none!important;transition:none!important}}
[data-motion-choice="off"] .hr-module-example *{animation:none!important}