/* Compact, interactive product story. */
.routine-section{display:grid;grid-template-columns:1fr 1.1fr;gap:90px;align-items:center}
.routine-copy h2{font-size:clamp(34px,3.7vw,48px)}
.routine-steps{margin-top:30px;display:grid}
.routine-steps button{font:inherit;text-align:left;display:flex;align-items:center;gap:18px;border:0;border-top:1px solid var(--line);background:transparent;padding:20px 0;color:var(--muted);cursor:pointer}
.routine-steps button>span:first-child{font-size:12px;align-self:flex-start;padding-top:3px}
.routine-steps button>span:last-child{margin-left:auto;font-size:21px}
.routine-steps strong{display:block;font-size:18px;font-weight:500;letter-spacing:-.02em}
.routine-steps small{display:block;font-size:13px;margin-top:5px}
.routine-steps button[aria-pressed=true]{color:var(--deep)}
.routine-steps button[aria-pressed=true]>span:first-child{background:var(--soft);border-radius:3px;padding:3px 6px;margin-left:-6px;margin-right:-6px}
.routine-steps button:hover,.source-buttons button:hover{color:var(--blue)}
.routine-steps button:focus-visible,.source-buttons button:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.routine-preview{border:1px solid var(--line);border-radius:7px;background:var(--surface);overflow:hidden;min-width:0}
.preview-bar{display:flex;align-items:center;gap:8px;background:white;border-bottom:1px solid var(--line);padding:16px 22px;font-size:12px;color:var(--deep)}
.preview-bar>span:last-child{margin-left:auto;font-size:10px;color:var(--muted)}
.preview-dot{width:6px;height:6px;background:var(--blue);border-radius:50%}
.routine-scene{min-height:390px;animation:scene-enter .3s ease-out}
.routine-scene[hidden],.source-detail[hidden]{display:none}
.mini-map{position:relative}.mini-map svg{width:100%;height:195px;display:block;object-fit:cover}.mini-map>span{position:absolute;bottom:16px;left:24px;background:white;border:1px solid var(--line);padding:5px 10px;font-size:11px;color:var(--deep)}
.scene-body{padding:26px}.scene-label{font-size:11px;color:var(--blue)}.scene-body h3{font-size:26px;letter-spacing:-.03em;line-height:1.2;margin:9px 0 20px}
.focus-labels{display:flex;gap:8px;flex-wrap:wrap}.focus-labels span{background:white;padding:5px 9px;font-size:11px;border:1px solid var(--line);border-radius:3px}
.call-row{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding:17px 0}.call-row>span:first-child{font-size:11px;color:var(--muted)}.call-row strong{font-size:14px;font-weight:500}.call-row p{font-size:12px;color:var(--muted);margin-top:4px}.call-row>span:last-child{font-size:10px;color:var(--deep);margin-left:auto}.scene-body .text-link{font-size:12px;margin-top:14px}
.sample-note{background:white;padding:24px;border:1px solid var(--line);border-radius:4px;margin-top:30px;transform:rotate(-1deg)}.sample-note>span{font-size:11px;color:var(--muted)}.sample-note p{font-size:21px;line-height:1.5;letter-spacing:-.02em;margin:14px 0 20px}.sample-note .note-saved{color:var(--deep)}
.note-result{display:flex;gap:15px;padding:25px 5px 0;color:var(--deep)}.note-result>span{font-size:25px}.note-result strong{font-size:14px;font-weight:500}.note-result p{font-size:12px;color:var(--muted);margin-top:5px}
.routine-caption{padding:12px 26px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}
.source-section{padding-bottom:28px}.source-section .connected-grid{align-items:center}.source-network{min-width:0}.source-diagram{position:relative;display:flex;align-items:center;justify-content:space-between;gap:35px;height:260px}.source-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.source-wires path{fill:none;stroke:#b2c6dc;stroke-width:1.5}
.source-buttons{display:grid;gap:24px;position:relative;z-index:1;width:54%;max-width:240px}.source-buttons button{display:flex;align-items:center;gap:14px;font:inherit;font-size:14px;min-height:62px;text-align:left;padding:12px 18px;background:white;border:1px solid var(--line);border-radius:5px;color:var(--muted);cursor:pointer}.source-buttons button>span{font-size:22px;color:var(--blue)}.source-buttons button[aria-pressed=true]{border-color:var(--blue);color:var(--deep);background:#f8fbff}
.source-hub{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:white;border-radius:50%;width:136px;height:136px;flex-shrink:0}.source-hub strong{font-size:20px;font-weight:500;letter-spacing:-.03em}.source-hub>span{font-size:10px;color:var(--muted)}
.source-detail{min-height:112px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);animation:scene-enter .3s ease-out}.source-detail h3{font-size:19px;letter-spacing:-.02em}.source-detail p{font-size:13px;color:var(--muted);line-height:1.8;margin-top:9px}
.source-assurance{display:flex;flex-wrap:wrap;align-items:center;gap:15px 24px;margin-top:50px;padding-top:23px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.source-assurance>p{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.source-assurance strong{color:var(--deep);font-weight:500}.source-assurance svg{width:17px;height:17px;fill:none;stroke:var(--deep);stroke-width:1.4}.source-assurance>a{color:var(--deep)}.source-assurance details{margin-left:auto;max-width:340px}.source-assurance summary{cursor:pointer;color:var(--deep);min-height:44px;display:flex;align-items:center;gap:10px}.source-assurance summary::after{content:'+';font-size:18px}.source-assurance details[open] summary::after{content:'−'}.source-assurance details p{margin:8px 0 12px;line-height:1.7}
@keyframes scene-enter{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.routine-section{gap:40px}.routine-copy h2{font-size:36px}.routine-steps strong{font-size:17px}.source-buttons button{padding:12px;font-size:12px;gap:8px}.source-hub{width:110px;height:110px}.source-hub img{width:28px;height:28px}.source-assurance details{margin-left:0}}
@media(max-width:700px){.routine-section{grid-template-columns:1fr;gap:28px}.routine-steps{margin-top:24px}.routine-scene{min-height:380px}.source-section .connected-grid{grid-template-columns:1fr;gap:26px}.source-section .connected-copy,.source-section .connected-tools{grid-column:auto;grid-row:auto}.source-diagram{max-width:480px}.source-buttons{width:54%}.source-buttons button{font-size:14px}.source-hub{width:124px;height:124px}.source-assurance{margin-top:25px;gap:10px 20px}.source-assurance>p{width:100%}.source-assurance details{margin-left:auto;max-width:100%}.source-detail{min-height:110px}.routine-section .routine-copy h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){.routine-scene,.source-detail{animation:none}.sample-note{transform:none}}
@media(min-width:701px){.routine-copy{grid-column:2;grid-row:1}.routine-preview{grid-column:1;grid-row:1}.source-section .connected-copy{grid-column:1;grid-row:1}.source-section .connected-tools{grid-column:2;grid-row:1}}

/* Keep the final invitation and its action together. */
.closing-content{justify-content:flex-start;gap:56px;padding-top:44px;padding-bottom:44px}
.closing-content h2{font-size:clamp(28px,3vw,38px);line-height:1.2}
.closing-content p{margin-bottom:12px;font-size:12px}
.closing-content>.button{flex-shrink:0;align-self:flex-end;margin-bottom:1px}
@media(max-width:850px){.closing-content{gap:30px}.closing-content h2{max-width:400px}}
@media(max-width:600px){.closing-content{display:block;padding-top:36px;padding-bottom:36px}.closing-content h2{font-size:32px;max-width:320px}.closing-content>.button{margin-top:22px}}