.feature-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.feature-heading h2{font-size:1.4rem;letter-spacing:-.035em}.feature-heading p{font-size:.875rem;color:var(--muted);margin-top:4px}.replay-features{display:flex;align-items:center;gap:7px;background:transparent;border:1px solid #d8dedb;border-radius:100px;padding:9px 14px;font:inherit;font-size:.875rem;color:#344e40;cursor:pointer}.replay-features span{font-size:1.25rem;line-height:1}.replay-features:hover{background:#eaf0ed}.replay-features:focus-visible{outline:3px solid #657ce5;outline-offset:3px}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.feature-card{min-width:0;border:1px solid #dce5df;background:#fff;border-radius:20px;overflow:hidden}.feature-art{height:310px;position:relative;overflow:hidden;color:#e9f3e6}.feature-copy{padding:22px 23px 25px}.feature-copy h3{font-size:1.15rem;font-weight:600;letter-spacing:-.03em}.feature-copy p{font-size:1rem;color:var(--muted);margin-top:7px;line-height:1.5}.task-art{background:radial-gradient(ellipse at 90% 0,#405b42,transparent 65%),#1c3027;padding:26px 23px}.day-heading{display:flex;align-items:center;justify-content:space-between;font-size:1.65rem;font-weight:500;letter-spacing:-.045em}.day-dot{font-size:1.3rem;color:#c0e7aa}.task-sheet{margin-top:19px}.task-row{display:flex;align-items:center;gap:11px;border-bottom:1px solid #bdd3b820;padding:13px 0;font-size:.875rem}.task-check{width:21px;height:21px;border:1px solid #9ab596;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:.875rem;background:#bddba9;color:#233c26}.empty-check{background:none}.completed-label{color:#d1e6c8}.progress-caption{display:flex;justify-content:space-between;margin:19px 0 8px;font-size:.75rem;color:#c0d2bf}.demo-progress{height:5px;border-radius:10px;background:#d0e8c51c;overflow:hidden}.demo-progress span{display:block;width:66.66%;height:100%;background:#bddba9;transform-origin:left}.notes-art{background:radial-gradient(ellipse at 50% 48%,#e0ebdd,#f1f5ee);color:#314a38}.note-lines{position:absolute;width:100%;height:100%;inset:0}.note-lines path{fill:none;stroke:#87a181;stroke-width:1.5;stroke-dasharray:600;stroke-dashoffset:0}.note-node{position:absolute;display:flex;align-items:center;gap:7px;padding:9px 12px;background:#fbfdf9;border:1px solid #cfdbca;border-radius:10px;font-size:.875rem;box-shadow:0 5px 16px #2d4c2610;z-index:2}.node-idea{left:6%;top:55px}.node-people{right:5%;top:55px}.node-tasks{left:5%;bottom:39px}.node-notes{right:6%;bottom:39px}.center-note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:130px;padding:17px;background:#233d2e;border:1px solid #506d48;border-radius:14px;color:#ebf4e6;box-shadow:0 13px 22px #203d3220;z-index:3}.note-symbol{color:#c6e5b7;font-size:1.3rem;display:block;margin-bottom:7px}.center-note strong{display:block;font-size:.9375rem;font-weight:500}.note-rule{display:block;margin-top:11px;height:3px;width:94%;background:#c3d3ba65;border-radius:4px}.note-rule.short{width:60%;margin-top:7px}.recording-art{background:radial-gradient(ellipse at 0 0,#344637,transparent 65%),#17291f;padding:27px 22px}.recording-label{display:flex;align-items:center;gap:9px;color:#cfddca;font-size:.8125rem}.record-dot{width:7px;height:7px;background:#c3e2af;border-radius:50%;box-shadow:0 0 0 4px #b3d59e12}.audio-wave{display:flex;align-items:center;justify-content:center;height:92px;gap:6px;margin-top:6px}.audio-wave i{display:block;width:4px;height:var(--bar);background:#bfdea9;border-radius:8px;transform:scaleY(.5);opacity:.8}.summary-slip{background:#eff5e9;color:#2c4231;border:1px solid #c9ddbd;border-radius:13px;padding:16px 18px;box-shadow:0 10px 22px #0002;transform:translateY(0);opacity:1}.summary-slip>div{display:flex;gap:8px;align-items:center;font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;color:#56724c}.summary-slip p{font-size:.9375rem;line-height:1.65;margin:8px 0 10px}.summary-line{display:block;width:58%;height:3px;border-radius:5px;background:#a7bf9a55}
.feature-card.is-running .animated-check{animation:check-task 3.6s both}.feature-card.is-running .demo-progress span{animation:task-progress 3.6s both}.feature-card.is-running .note-lines path{animation:connect-notes 3.6s both}.feature-card.is-running .note-node{animation:reveal-node 3.6s both}.feature-card.is-running .audio-wave i{animation:record-wave .65s var(--delay) 4 alternate ease-in-out}.feature-card.is-running .summary-slip{animation:reveal-summary 3.6s both}
@keyframes check-task{0%,25%{background:transparent;color:transparent;transform:scale(1)}40%{transform:scale(1.15);background:#bddba9;color:#233c26}55%,100%{transform:scale(1)}}
@keyframes task-progress{0%,28%{transform:scaleX(.5)}65%,100%{transform:scaleX(1)}}
@keyframes connect-notes{0%,12%{stroke-dashoffset:600;opacity:.2}75%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes reveal-node{0%,15%{opacity:.25;transform:translateY(5px)}65%,100%{opacity:1;transform:translateY(0)}}
@keyframes record-wave{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
@keyframes reveal-summary{0%,45%{opacity:0;transform:translateY(15px)}75%,100%{opacity:1;transform:translateY(0)}}
@media(max-width:1000px) and (min-width:761px){.feature-grid{gap:13px}.task-art,.recording-art{padding-inline:15px}.task-row{font-size:.8125rem;gap:8px}.feature-copy{padding:20px 15px}.note-node{font-size:.75rem;padding:8px}.center-note{width:116px}.node-tasks{left:2%}.node-people{right:2%}}
@media(max-width:760px){.feature-grid{grid-template-columns:1fr;gap:20px}.feature-art{height:310px}.feature-card{max-width:500px;width:100%;margin-inline:auto}.feature-copy{padding:20px 23px}.task-art,.recording-art{padding-inline:27px}.feature-heading h2{font-size:1.3rem}}
@media(prefers-reduced-motion:reduce){.feature-card *{animation:none!important;transition:none!important}.replay-features{display:none}}