/* A quiet, progressive product story. Motion sleeps outside the viewport. */
.home-compact .hero-flow { display:grid; grid-template-columns:68% minmax(0,1fr); row-gap:18px; aspect-ratio:auto; padding-bottom:12px; }
.hero-flow .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero-flow svg { display:block; width:100%; height:auto; }
.home-compact .hero-flow .hero-laptop { position:relative; grid-column:1/-1; grid-row:2; top:auto; bottom:auto; left:0; width:96%; z-index:1; }
.home-compact .hero-flow .hero-phone { top:0; right:0; width:26%; z-index:3; }
.hero-flow .laptop-screen { aspect-ratio:680/420; }
.hero-flow .device-phone-screen { background:#f7f9f5; }
.hf-story { position:relative; grid-column:1; grid-row:1; width:100%; display:grid; padding:19px 21px 21px; border:1px solid #e1e7db; border-radius:17px; background:#fafbf5; box-shadow:0 12px 30px #07150f18; color:#233b2e; z-index:4; }
.hf-story-scene { grid-area:1/1; min-width:0; visibility:hidden; opacity:0; transition:opacity .65s ease; }
.hf-story-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 12px; color:#51675b; font-size:12px; line-height:1.4; font-weight:550; }
.hf-story-meta > span:first-child { display:flex; align-items:center; gap:7px; }
.hero-flow .hf-story-symbol { width:24px; height:24px; flex:none; overflow:visible; }
.hf-story-count { flex:none; font-variant-numeric:tabular-nums; font-size:11px; letter-spacing:.6px; }
.hf-story-title { margin:0 0 10px; font-size:clamp(22px,1.85vw,26px); line-height:1.22; font-weight:600; letter-spacing:-.4px; text-wrap:pretty; }
.hf-story-body { margin:0; color:#41584a; font-size:16px; line-height:1.55; font-weight:450; text-wrap:pretty; }
.hf-story-mobile-copy { display:none; }
.hf-story-phases { display:grid; }
.hf-story-phases > div { grid-area:1/1; min-width:0; }
.hero-flow[data-flow-stage="0"] [data-story-stage="0"],
.hero-flow[data-flow-stage="1"] [data-story-stage="1"],
.hero-flow[data-flow-stage="2"] [data-story-stage="2"],
.hero-flow[data-flow-stage="3"] [data-story-stage="3"],
.hero-flow[data-flow-stage="4"] [data-story-stage="4"],
.hero-flow[data-flow-stage="5"] [data-story-stage="5"],
.hero-flow[data-flow-stage="6"] [data-story-stage="6"],
.hero-flow[data-flow-stage="7"] [data-story-stage="7"] { visibility:visible; opacity:1; }
.hero-flow :is(.hf-plan,.hf-mobile) { font-family:inherit; fill:#30483b; }
.hf-text { font-size:25px; }
.hf-title { font-size:30px; font-weight:600; letter-spacing:-.7px; }
.hf-feature { font-size:33px; font-weight:550; letter-spacing:-.8px; }
.hf-name { font-size:25px; font-weight:550; }
.hf-muted { font-size:22px; fill:#6c7b70; }
.hf-small { font-size:22px; fill:#607366; }
.hf-label { font-size:19px; fill:#718174; letter-spacing:.5px; }
.hf-phone-name { font-size:25px; font-weight:600; }
.hf-phone-project { font-size:21px; font-weight:600; letter-spacing:-.5px; }
.hf-phone-small { font-size:14px; fill:#607366; }
.hf-phone-notice { font-size:12px; fill:#476c54; }
.hf-rule { fill:none; stroke:#dce4d7; stroke-width:1.3; }
.hf-glyph { fill:none; stroke:#688371; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hf-glyph .concept-paper { fill:#fafbf8; }
.hf-check { fill:none; stroke:#62806b; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.hf-paper { fill:#fffefb; stroke:#d9e1d5; }
.hf-soft { fill:#edf2e8; }
.hf-green { fill:#b6c9b8; }
.hf-orange { fill:#efd0b3; }
.hf-alert { fill:#fff0df; stroke:#bd7b46; stroke-width:1.4; }
.hf-open { fill:#fbf6ed; stroke:#c8ad91; stroke-dasharray:5 6; }
.hf-success { fill:#e1efde; stroke:#87a68b; stroke-width:1.3; }
.hf-success-text { font-size:23px; font-weight:550; fill:#47644e; }
.hf-action { fill:#ffb27b; stroke:#b77140; stroke-width:1.4; }
.hf-action-text { font-size:25px; font-weight:650; fill:#263e30; }
.hf-action-target { fill:#fff9ef; }
.hf-action-arrow { fill:none; stroke:#304d3d; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hf-click { fill:#fffdf7; stroke:#304d3d; stroke-width:1.8; }
.hf-tap-ring { fill:none; stroke:#8e4f26; stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; }
.hf-ai-card { fill:#edf3f5; stroke:#9eb6bf; stroke-width:1.3; }
.hf-ai-label { font-size:17px; font-weight:600; fill:#4b6672; }
.hf-ai-prompt { font-size:23px; font-weight:550; fill:#263e30; }
.hf-candidate { fill:#fffefb; stroke:#c8d5cc; stroke-width:1.2; }
.hf-candidate-best { fill:#f0f6ed; stroke:#779981; stroke-width:1.8; }
.hf-candidate-tag { fill:#f8e0ca; }
.hf-candidate-label { font-size:16px; font-weight:600; fill:#78502e; }
.hf-candidate-name { font-size:18px; font-weight:600; }
.hf-candidate-detail { font-size:18px; fill:#526c5c; }
.hf-candidate-filter { font-size:18px; fill:#526c5c; }
.hf-mobile-story .hf-candidate-label,.hf-mobile-story .hf-candidate-detail,.hf-mobile-story .hf-candidate-filter { font-size:14px; }
.hf-mobile-story .hf-candidate-filter { font-size:15px; }
.hf-notice-action text { font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.hf-notice-action path,.hf-notice-arrow { fill:none; stroke:#47664f; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.hf-alert-action { font-size:15px; fill:#6e4b2e; }
.hf-mobile-story .hf-ai-label { font-size:14px; }
.hf-mobile-story .hf-ai-prompt { font-size:17px; }
.hf-m-action-result { font-size:18px; font-weight:650; fill:#6f4324; }
.hf-warning { fill:none; stroke:#a8754d; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hf-handle { stroke:#ad7854; stroke-width:2; stroke-linecap:round; }
.hf-flow-line { fill:none; stroke:#a3b7a4; stroke-width:2; stroke-linecap:round; }
.hf-conflict-link { fill:none; stroke:#c4916d; stroke-width:2; stroke-linecap:round; }
.hero-flow.hero-flow [data-stage-panel] { display:none; }
.hero-flow[data-flow-stage="0"] [data-stage-panel="0"],
.hero-flow[data-flow-stage="1"] [data-stage-panel="1"],
.hero-flow[data-flow-stage="2"] [data-stage-panel="2"],
.hero-flow[data-flow-stage="3"] [data-stage-panel="3"],
.hero-flow[data-flow-stage="4"] [data-stage-panel="4"],
.hero-flow[data-flow-stage="5"] [data-stage-panel="5"],
.hero-flow[data-flow-stage="6"] [data-stage-panel="6"],
.hero-flow[data-flow-stage="7"] [data-stage-panel="7"] { display:revert; }
.hero-flow .hf-owner-bar { height:38px; justify-content:space-between; gap:8px; }
.hero-flow .hf-owner-bar > span { font-size:11px; font-weight:500; color:#63776a; }
.hero-flow .hf-owner-bar .hf-brand { font-size:9px; flex:none; color:#718174; }
.hero-flow .hf-connection { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.hf-sync-line { fill:none; stroke:#d4b99d; stroke-width:1.2; stroke-dasharray:3 7; opacity:0; vector-effect:non-scaling-stroke; }
.hf-sync-dot { fill:#e7b88b; stroke:#fff3e5; stroke-width:2; opacity:0; }
.hf-sync-second { fill:#b8d0b7; }
.hf-phone-old,.hf-phone-primary,.hf-phone-replacement { display:none; }
.hero-flow:is([data-flow-stage="0"],[data-flow-stage="1"],[data-flow-stage="2"],[data-flow-stage="3"],[data-flow-stage="4"],[data-flow-stage="5"]) .hf-phone-old,
.hero-flow:is([data-flow-stage="6"],[data-flow-stage="7"]) .hf-phone-replacement { display:inline; }
.hf-metric-label { font-size:22px; font-weight:550; fill:#30483b; }
.hf-bar { fill:#cbd7c7; transform-box:fill-box; transform-origin:center bottom; }
.hf-bar-c,.hf-accent { fill:#bc916b; }
.hf-metric-path { fill:none; stroke:#7b9680; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.hf-dot { fill:#7b9680; }
.hf-dot.hf-accent { fill:#bc916b; }
.hf-score { font-size:44px; font-weight:500; letter-spacing:-2px; }
.hf-approve-before { opacity:0; }
.hf-approve-after { opacity:1; }
.hf-click { opacity:0; }
.hero-flow .hf-mobile-story { display:none; }
.hf-mobile-story svg { fill:#30483b; }
.hf-m-title { font-size:22px; font-weight:600; letter-spacing:-.6px; }
.hf-m-name { font-size:23px; font-weight:600; letter-spacing:-.4px; }
.hf-m-text { font-size:18px; }
.hf-m-muted { font-size:16px; fill:#5a7062; }
.hf-m-action,.hf-m-success { font-size:18px; font-weight:600; }
.hf-m-action { fill:#263e30; }
.hf-m-success { fill:#47644e; }
.hf-m-project { font-size:16px; font-weight:600; }
.hf-m-phone-note { font-size:16px; fill:#47644e; }
.hf-m-score { font-size:38px; font-weight:550; letter-spacing:-1px; }
.hf-notice-card { fill:#f1f7ee; stroke:#8ca58f; stroke-width:1.4; }
.hf-notice-badge { fill:#f5dfc8; }
.hf-notice-label { font-size:17px; font-weight:500; fill:#607366; }
.hf-notice-body { font-size:22px; font-weight:550; fill:#30483b; }
.hf-notification-compact .hf-notice-label { font-size:14px; }
.hf-notification-compact .hf-notice-body { font-size:17px; }
.hf-push-label { font-size:15px; font-weight:600; fill:#30483b; }
.hf-push-body { font-size:17px; fill:#47644e; }
.hf-push-compact .hf-push-label { font-size:11.5px; }
.hf-push-compact .hf-push-body { font-size:14px; }
.hf-signal { --hf-signal-color:#38634b; --hf-signal-fill:#e1efdf; }
.hf-signal-warning { --hf-signal-color:#a6541e; --hf-signal-fill:#ffe0bb; }
.hf-signal-email { --hf-signal-color:#3d627c; --hf-signal-fill:#dfedf5; }
.hf-signal-calendar { --hf-signal-color:#79572f; --hf-signal-fill:#f5e6d2; }
.hf-signal-ai { --hf-signal-color:#8c512c; --hf-signal-fill:#ffe4ca; }
.hf-signal-surface { fill:var(--hf-signal-fill); stroke:var(--hf-signal-color); stroke-width:1.3; }
.hf-signal-icon { fill:none; stroke:var(--hf-signal-color); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hf-signal-dot { fill:var(--hf-signal-color); stroke:#fffdf8; stroke-width:2; }
.hf-signal-check .hf-signal-dot,.hf-signal-calendar .hf-signal-dot,.hf-signal-ai .hf-signal-dot { display:none; }
.hf-signal-ring { fill:none; stroke:var(--hf-signal-color); stroke-width:1.8; opacity:0; transform-box:fill-box; transform-origin:center; animation:1.5s ease-out calc(var(--hf-delay,0s) + 1s) 2 both; animation-name:var(--hf-pulse,none); }
.hf-signal-bell .hf-signal-icon,.hf-signal-email .hf-signal-icon { transform-box:fill-box; transform-origin:center; animation:.8s ease-in-out calc(var(--hf-delay,0s) + 1s) 2 both; animation-name:var(--hf-nudge,none); }
.hf-signal-check .hf-signal-icon { transform-box:fill-box; transform-origin:center; animation:.7s ease calc(var(--hf-delay,0s) + .4s) both; animation-name:var(--hf-confirm,none); }
.hf-signal-frame { animation:1.5s ease-in-out calc(var(--hf-delay,0s) + 1s) 2; animation-name:var(--hf-frame,none); }
/* Inactive scenes have no animation names. Every reveal starts on scene entry. */
.hero-flow[data-flow-state="playing"][data-flow-stage="0"] :is([data-stage-panel="0"],[data-story-stage="0"]),
.hero-flow[data-flow-state="playing"][data-flow-stage="1"] [data-stage-panel="1"],
.hero-flow[data-flow-state="playing"][data-flow-stage="2"] [data-stage-panel="2"],
.hero-flow[data-flow-state="playing"][data-flow-stage="3"] :is([data-stage-panel="3"],[data-story-stage="3"]),
.hero-flow[data-flow-state="playing"][data-flow-stage="4"] [data-stage-panel="4"],
.hero-flow[data-flow-state="playing"][data-flow-stage="5"] :is([data-stage-panel="5"],[data-story-stage="5"]),
.hero-flow[data-flow-state="playing"][data-flow-stage="6"] [data-stage-panel="6"],
.hero-flow[data-flow-state="playing"][data-flow-stage="7"] [data-stage-panel="7"] {
  --hf-enter:hf-arrive; --hf-before:hf-approve-before; --hf-after:hf-approve-after;
  --hf-cursor:hf-click; --hf-tap:hf-tap; --hf-grow:hf-grow; --hf-draw:hf-draw; --hf-notify:hf-notify;
  --hf-pulse:hf-pulse; --hf-nudge:hf-nudge; --hf-confirm:hf-confirm; --hf-frame:hf-frame;
}
.hf-reveal { animation:1.3s cubic-bezier(.2,.65,.3,1) var(--hf-delay,0s) both; animation-name:var(--hf-enter,none); }
.hf-notification { animation-name:var(--hf-notify,none); }
.hf-approval { animation:.8s ease var(--hf-action-enter,2s) both; animation-name:var(--hf-enter,none); }
.hf-approve-before { animation:.15s linear var(--hf-action-at,6.5s) both; animation-name:var(--hf-before,none); }
.hf-approve-after { animation:.5s ease calc(var(--hf-action-at,6.5s) + .15s) both; animation-name:var(--hf-after,none); }
.hf-approve-after .hf-signal { --hf-delay:calc(var(--hf-action-at,6.5s) - .3s); }
.hf-click { animation:1.3s ease calc(var(--hf-action-at,6.5s) - 1.1s) both; animation-name:var(--hf-cursor,none); }
.hf-tap-ring { animation:.75s ease-out calc(var(--hf-action-at,6.5s) - .15s) both; animation-name:var(--hf-tap,none); }
.hero-flow[data-flow-state="playing"][data-flow-stage="0"] [data-stage-panel="0"] .hf-extend { transform-box:fill-box; transform-origin:left center; animation:hf-extend 1.8s calc(var(--hf-action-at) + .3s) both; }
.hf-bar { animation:2.2s cubic-bezier(.2,.65,.3,1) calc(var(--hf-delay,0s) + .4s) both; animation-name:var(--hf-grow,none); }
.hf-bar-b { animation-delay:calc(var(--hf-delay,0s) + .65s); }
.hf-bar-c { animation-delay:calc(var(--hf-delay,0s) + .9s); }
.hf-metric-path { stroke-dasharray:1; animation:2.6s ease calc(var(--hf-delay,0s) + .3s) both; animation-name:var(--hf-draw,none); }
.hero-flow[data-flow-state="playing"][data-flow-stage="6"] .hf-phone-primary { display:inline; }
.hero-flow[data-flow-state="playing"][data-flow-stage="6"] .hf-mobile { --hf-notify:hf-notify; --hf-pulse:hf-pulse; --hf-nudge:hf-nudge; --hf-confirm:hf-confirm; --hf-frame:hf-frame; }
.hero-flow[data-flow-state="playing"][data-flow-stage="6"] .hf-phone-replacement { animation:hf-phone-change var(--hf-duration) ease both; }
.hero-flow[data-flow-state="playing"][data-flow-stage="6"] .hf-sync-line { opacity:.5; }
.hero-flow[data-flow-state="playing"][data-flow-stage="6"] .hf-sync-first { animation:hf-sync 3.4s 1.3s both; }
.hero-flow[data-flow-state="playing"][data-flow-stage="6"] .hf-sync-second { animation:hf-sync 3.4s 6.4s both; }
.hero-flow[data-flow-paused] * { animation-play-state:paused!important; }
@keyframes hf-arrive { from {opacity:0;transform:translateY(9px)} to {opacity:1;transform:translateY(0)} }
@keyframes hf-notify { from {opacity:0;transform:translateY(-10px)} to {opacity:1;transform:translateY(0)} }
@keyframes hf-pulse { 0% {opacity:0;transform:scale(.75)} 20% {opacity:.65} 100% {opacity:0;transform:scale(1.18)} }
@keyframes hf-nudge { 0%,100% {transform:rotate(0)} 25% {transform:rotate(-10deg)} 65% {transform:rotate(8deg)} }
@keyframes hf-confirm { from {transform:scale(.65)} to {transform:scale(1)} }
@keyframes hf-frame { 0%,100% {stroke-width:1.4} 45% {stroke-width:2.6} }
@keyframes hf-extend { from {transform:scaleX(0);opacity:0} to {transform:scaleX(1);opacity:1} }
@keyframes hf-grow { from {transform:scaleY(.08)} to {transform:scaleY(1)} }
@keyframes hf-draw { from {stroke-dashoffset:1} to {stroke-dashoffset:0} }
@keyframes hf-approve-before { from {opacity:1} to {opacity:0} }
@keyframes hf-approve-after { from {opacity:0;transform:translateY(3px)} to {opacity:1;transform:translateY(0)} }
@keyframes hf-click { 0% {opacity:0;transform:translate(18px,18px)} 35% {opacity:1} 70%,85% {opacity:1;transform:translate(0,0)} 100% {opacity:0;transform:translate(0,2px)} }
@keyframes hf-tap { 0% {opacity:0;transform:scale(.65)} 25% {opacity:.8} 100% {opacity:0;transform:scale(1.3)} }
@keyframes hf-phone-change { 0%,45% {opacity:0} 53%,100% {opacity:1} }
@keyframes hf-sync { 0% {opacity:0;transform:translate(455px,460px)} 10% {opacity:1;transform:translate(455px,460px)} 65% {opacity:1;transform:translate(455px,135px)} 90% {opacity:1;transform:translate(565px,135px)} 100% {opacity:0;transform:translate(565px,135px)} }
@media(max-width:760px) {
  .home-compact .hero-flow { display:block; aspect-ratio:auto; min-height:0; max-width:420px; padding-bottom:0; }
  .home-compact .hero-flow :is(.hero-laptop,.hero-phone,.hf-connection) { display:none; }
  .hero-flow .hf-mobile-story { display:block; overflow:hidden; background:#fafbf8; border:1px solid #cfdbd0; border-radius:0 0 15px 15px; box-shadow:0 16px 38px #07150f26; }
  .hero-flow .hf-story { position:relative; width:100%; margin:0; padding:10px 14px 11px; border-radius:15px 15px 0 0; border-color:#cfdbd0; border-bottom:0; background:#fafbf8; box-shadow:none; }
  .hero-flow .hf-story-symbol { width:20px; height:20px; }
  .hf-story-meta { margin-bottom:5px; font-size:11px; }
  .hf-story-title { margin-bottom:0; font-size:20px; line-height:1.2; }
  .hf-story-body { font-size:15px; line-height:1.35; }
  .hf-story-desktop-copy { display:none; }
  .hf-story-mobile-copy { display:none; }
}
@media(min-width:761px) and (max-width:1280px) {
  .hero-flow .hf-brand { display:none; }
}
@media(min-width:761px) and (max-width:1000px) {
  .hf-story { padding:16px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-flow * { animation:none!important; transition:none!important; }
}