/* Show the work: tactile process examples, warm colour and finite motion. */
.calm-hero.live-hero { text-align:left; padding:50px 0 62px; background:#fcf8f4; }
.live-hero__grid { display:grid; grid-template-columns:1fr 1.08fr; gap:56px; align-items:center; }
.live-hero .eyebrow { justify-content:flex-start; font-size:10px; margin-bottom:25px; }
.live-hero h1 { font-size:clamp(43px,4.4vw,62px); line-height:1.08; letter-spacing:-.055em; }
.live-hero .calm-lead { margin:24px 0 27px; max-width:460px; font-size:16px; line-height:1.85; }
.live-hero .calm-next { display:flex; width:fit-content; margin-top:23px; font-size:12px; }
.live-demo { min-width:0; }
.live-demo__heading { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:10px; margin-bottom:16px; color:#66574c; }
.live-demo__heading > span:first-child { display:flex; align-items:center; gap:7px; }
.live-demo__heading i { width:6px; height:6px; background:#8b543d; border-radius:50%; }
.live-demo__heading > span:last-child { font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.live-tabs { display:flex; gap:3px; padding:5px; border:1px solid #e2d2c6; background:#f4ece5; border-radius:13px; margin-bottom:12px; }
.live-tabs button { flex:1; min-width:0; min-height:40px; border:0; background:transparent; font:inherit; font-size:12px; color:#62574e; border-radius:9px; cursor:pointer; }
.live-tabs button[aria-pressed="true"] { background:#fff; color:#2c2c29; box-shadow:0 2px 5px #53402b12; font-weight:600; }
.live-tabs button:hover { color:#8d432c; }
.live-scene { position:relative; background-color:#f1d9ca; background-image:radial-gradient(#ae775e30 .8px,transparent .8px); background-size:16px 16px; border:1px solid #e5bea7; padding:22px 24px 25px; border-radius:20px; }
.live-scene__top { display:flex; justify-content:space-between; gap:10px; font-size:10px; color:#644b3e; margin-bottom:24px; }
.live-scene__top > span:last-child { font-size:9px; white-space:nowrap; letter-spacing:.04em; }
.live-card { position:relative; border-radius:12px; border:1px solid #d4c5b8; padding:19px; background:#fffdfa; box-shadow:0 12px 24px #5b3c2510; }
.live-card--in { margin-right:40px; transform:rotate(-2deg); }
.live-card--out { margin-left:40px; background:#fff; transform:rotate(1.2deg); }
.live-card__meta { display:flex; align-items:center; gap:8px; font-size:10px; line-height:1.4; margin-bottom:14px; }
.live-icon { display:grid; place-items:center; width:27px; height:27px; background:#f7e9df; border-radius:8px; color:#91472e; flex:none; }
.live-time { margin-left:auto; color:#6d655f; font-size:9px; }
.live-card .live-card__title { font-size:17px; font-weight:600; letter-spacing:-.03em; line-height:1.45; margin:0 0 7px; }
.live-card .live-card__sub { font-size:10px; color:#6a6159; line-height:1.7; margin:0; }
.live-check { width:23px; height:23px; border-radius:50%; background:#e8eee2; color:#3f5837; display:grid; place-items:center; flex:none; }
.live-tag { font-size:8px; padding:4px 7px; border:1px solid #c9d4c1; color:#405037; background:#eff3e9; border-radius:20px; margin-left:auto; }
.live-result-row { display:flex; align-items:center; gap:8px; border-top:1px solid #e8e7e1; padding-top:12px; margin-top:12px; color:#5d635e; font-size:9px; }
.live-result-row > span:last-child { margin-left:auto; }
.live-avatar { display:grid; place-items:center; width:23px; height:23px; background:#f4e7dd; color:#604936; font-size:8px; border-radius:50%; flex:none; }
.live-connection { display:flex; justify-content:center; align-items:center; gap:10px; height:68px; position:relative; }
.live-connection::before { content:""; position:absolute; height:1px; left:14%; right:14%; top:50%; border-top:1px dashed #af7e61; }
.live-wire { position:absolute; left:14%; height:34px; top:0; width:1px; border-left:1px dashed #af7e61; }
.live-wire--out { left:auto; right:14%; top:34px; }
.live-hub { display:grid; place-content:center; grid-auto-flow:column; position:relative; z-index:1; width:39px; height:39px; color:#fff; background:#2b3029; border-radius:11px; font-size:22px; font-family:var(--font-merk); box-shadow:0 4px 10px #3a241b22; }
.live-hub span { color:#e4a581; }
.live-connection__label { z-index:1; font-size:9px; color:#5f4436; background:#f1d9ca; padding:4px; max-width:150px; }
.live-packet { position:absolute; width:6px; height:6px; border-radius:50%; background:#8c432b; left:14%; top:calc(50% - 3px); opacity:0; }
.live-demo__bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.live-progress { display:flex; gap:10px; list-style:none; margin:0; padding:0; color:#65574b; }
.live-progress li { font-size:9px; display:flex; gap:5px; align-items:center; }
.live-progress li::before { content:""; width:5px; height:5px; border-radius:50%; background:#a2a695; flex:none; }
.live-progress .is-current { color:#88412b; font-weight:600; }
.live-progress .is-current::before { background:#9b4c31; box-shadow:0 0 0 3px #edcbb8; }
.live-progress .is-done::before { background:#506743; }
.live-play { border:1px solid #d4c7bb; border-radius:20px; padding:7px 11px; min-height:44px; display:inline-flex; align-items:center; gap:6px; background:#fffdfa; font:inherit; font-size:10px; color:#4f493f; white-space:nowrap; cursor:pointer; }
.live-play:hover { background:#f4dfcf; border-color:#b68e72; }
.live-caption { margin:12px 0 0; font-size:9px; color:#6d6257; text-align:center; min-height:15px; }
.live-demo[data-phase="in"] .live-card--in,.live-demo[data-phase="out"] .live-card--out { border-color:#a25837; }
.live-demo[data-phase="done"] .live-card--out { border-color:#acb99c; }
.flow-story { padding:64px 0; }
.flow-story__grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:center; }
.flow-story h2 { font-size:clamp(31px,3.1vw,43px); letter-spacing:-.045em; line-height:1.17; }
.flow-story h2 span { color:var(--terra-d); }
.flow-story__copy > p:not(.eyebrow) { color:var(--muted); font-size:15px; line-height:1.8; margin:22px 0; max-width:360px; }
.flow-switch { display:inline-flex; border:1px solid #dcded5; padding:4px; border-radius:25px; background:#f7f7f3; gap:3px; }
.flow-switch button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:0 12px; border-radius:21px; border:0; color:#5d635e; background:transparent; font:inherit; font-size:11px; cursor:pointer; }
.flow-switch button[aria-pressed="true"] { background:#2b3029; color:#fff; }
.flow-switch button:hover:not([aria-pressed="true"]) { background:#e7ece2; color:#313b2b; }
.flow-board { background:#2c332b; color:#fff; border:1px solid #414b3c; border-radius:20px; padding:24px; }
.flow-board__label { display:flex; justify-content:space-between; color:#e0e5db; font-size:10px; gap:12px; margin-bottom:27px; }
.flow-board__label > span:last-child { color:#bfc9b6; font-size:9px; }
.flow-nodes { display:grid; grid-template-columns:1fr 20px 1fr 20px 1fr; align-items:center; gap:3px; }
.flow-node { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:#3b4339; border:1px solid #616c58; border-radius:11px; padding:17px 8px; min-width:0; min-height:145px; }
.flow-node__icon { display:grid; place-items:center; width:40px; height:40px; background:#4a5445; border-radius:11px; margin-bottom:12px; color:#e8c4ab; }
.flow-node strong { font-size:11px; font-weight:600; }
.flow-node small { color:#d0d6c9; font-size:8px; line-height:1.6; margin-top:7px; max-width:105px; }
.flow-between { color:#c9baa7; text-align:center; font-size:18px; }
.flow-summary { display:flex; gap:12px; align-items:center; margin-top:23px; padding-top:19px; border-top:1px solid #53614a; }
.flow-summary p { color:#e6e9e0; margin:0; font-size:11px; line-height:1.7; }
.flow-summary__symbol { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#4f5948; color:#fff; flex:none; font-size:12px; }
.flow-board__foot { margin:16px 0 0; color:#c7d1be; font-size:9px; }
.flow-board[data-mode="loose"] .flow-node:first-child { transform:rotate(-4deg) translateY(-5px); }
.flow-board[data-mode="loose"] .flow-node:last-child { transform:rotate(4deg) translateY(5px); }
.flow-board[data-mode="joined"] .flow-node { background:#3a4b34; border-color:#9aaf87; }
.flow-board[data-mode="joined"] .flow-between { color:#f0bd99; }
.flow-board[data-mode="joined"] .flow-summary__symbol { background:#c8d6b6; color:#263320; }
.flow-fallback { margin-top:15px; color:#fff; font-size:12px; }
.calm-home .calm-help { background:#f7f5f1; padding:64px 0; }
.visual-services { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.visual-services > article { border:1px solid #e1ddd3; border-radius:15px; background:white; overflow:hidden; display:flex; flex-direction:column; }
.visual-services__copy { padding:24px; display:flex; flex-direction:column; flex:1; }
.visual-services__copy h3 { font-size:23px; letter-spacing:-.035em; line-height:1.3; margin-bottom:15px; }
.visual-services__copy p { font-size:14px; line-height:1.8; color:var(--muted); margin-bottom:23px; }
.visual-services__copy .link-arrow { font-size:12px; margin-top:auto; }
.visual-services .calm-number { font-size:10px; margin-bottom:13px; }
.example-mini { position:relative; height:200px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.example-mini--tidy { background:#efd9c9; }
.mini-sheet { display:block; background:#fffcf8; width:170px; border-radius:9px; border:1px solid #d4b79e; padding:18px; }
.mini-sheet--back { position:absolute; height:121px; transform:translate(-20px,-3px) rotate(-13deg); background:#e7c4aa; }
.mini-sheet--front { transform:translate(14px,6px) rotate(3deg); z-index:1; box-shadow:0 9px 18px #583b2012; }
.mini-sheet b { font-size:11px; display:block; margin-bottom:13px; }
.mini-sheet i { display:block; width:83%; height:5px; border-radius:4px; background:#e2d9ce; margin-bottom:8px; }
.mini-sheet i:nth-child(3) { width:63%; }
.mini-stamp { display:block; font-size:9px; color:#47583c; background:#e9eedf; padding:3px 7px; border-radius:4px; width:fit-content; margin-top:14px; }
.mini-orbit { position:absolute; right:26px; top:24px; width:31px; height:31px; border:1px solid #c39d7b; color:#795434; display:grid; place-items:center; border-radius:50%; font-size:18px; }
.example-mini--connect { background:#e9ede2; padding:28px 20px; }
.mini-app { min-width:50px; height:66px; border-radius:10px; border:1px solid #c6d0bc; background:#fff; color:#46503c; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; padding:10px; }
.mini-app small { font-size:8px; }
.mini-app--g { min-width:47px; height:47px; background:#333b2f; color:#fff; border:0; font-family:var(--font-merk); font-size:26px; }
.mini-bridge { position:relative; height:1px; width:27px; border-top:1px dashed #80946c; }
.mini-bridge i { position:absolute; top:-3px; left:0; width:5px; height:5px; background:#788b68; border-radius:50%; }
.example-mini--system { background:#efece6; padding:26px; }
.mini-overview { width:100%; max-width:250px; background:#fff; border:1px solid #d3d3c6; border-radius:9px; box-shadow:0 8px 19px #2d2d1b0a; transform:rotate(-2deg); }
.mini-overview__head { display:flex; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #e5e6dc; font-size:10px; }
.mini-overview__head > span { font-size:5px; color:#626e57; }
.mini-overview__body { display:grid; grid-template-columns:26px 1fr; gap:10px; padding:12px; }
.mini-sidebar { border-right:1px solid #e5e6dc; padding-right:10px; }
.mini-sidebar i { display:block; background:#ddded3; width:12px; height:5px; margin:4px 0 12px; }
.mini-overview__row { display:flex; align-items:center; gap:7px; min-height:28px; border-bottom:1px solid #e8eae2; font-size:9px; }
.mini-overview__row:last-child { border:0; }
.mini-overview__row b { font-weight:400; }
.mini-overview__row i { width:5px; height:5px; background:#d19f7f; border-radius:2px; }
.mini-overview__row em { margin-left:auto; font-style:normal; color:#617451; }
.calm-services .calm-area { align-items:center; }
.calm-area .example-mini { max-width:330px; height:172px; border-radius:13px; margin-top:24px; }
@media(prefers-reduced-motion:no-preference) {
 .live-tabs button,.flow-switch button { transition:background .22s,color .22s,box-shadow .22s; }
 .live-card { transition:border-color .3s,box-shadow .3s; }
 .live-hub { transition:transform .4s,box-shadow .4s; }
 .live-demo[data-phase="connect"] .live-hub { transform:scale(1.1) rotate(-6deg); box-shadow:0 0 0 7px #ad704a22; }
 .live-demo[data-phase="connect"] .live-packet { animation:carry-message 2.6s ease-in-out both; }
 .flow-node { transition:transform .65s cubic-bezier(.2,.7,.2,1),background .4s,border-color .4s; }
 .flow-between { transition:color .4s; }
 .flow-board.is-changing .flow-between span { display:block; animation:flow-arrow .7s both; }
 .flow-board.is-changing .flow-between:nth-child(4) span { animation-delay:.15s; }
 .mini-sheet,.mini-overview,.mini-overview__row { transition:transform .55s cubic-bezier(.2,.7,.2,1); }
 .visual-services article:hover .mini-sheet--back,.calm-area:hover .mini-sheet--back { transform:translate(-7px,0) rotate(-5deg); }
 .visual-services article:hover .mini-sheet--front,.calm-area:hover .mini-sheet--front { transform:translate(7px,-4px) rotate(0); }
 .visual-services article:hover .mini-overview,.calm-area:hover .mini-overview { transform:rotate(0) translateY(-4px); }
 .visual-services article:hover .mini-bridge i,.calm-area:hover .mini-bridge i { animation:mini-transfer .9s ease-in-out 2; }
 .visual-services article:focus-within .mini-overview { transform:rotate(0) translateY(-4px); }
 .example-mini.is-arriving .mini-overview__row { animation:row-appear .7s both; }
 .example-mini.is-arriving .mini-overview__row:nth-child(2) { animation-delay:.1s; }
 .example-mini.is-arriving .mini-overview__row:nth-child(3) { animation-delay:.2s; }
 .example-mini.is-arriving .mini-bridge i { animation:mini-transfer .9s ease-in-out 2; }
 .example-mini.is-arriving .mini-sheet--front { animation:sheet-arrive 1s both; }
}
@keyframes carry-message { 0% { left:14%; opacity:0; } 10% { opacity:1; } 85% { opacity:1; } 100% { left:86%; opacity:0; } }
@keyframes flow-arrow { from { opacity:.2; transform:translateX(-6px); } to { opacity:1; transform:translateX(0); } }
@keyframes mini-transfer { from { left:0; } to { left:100%; } }
@keyframes row-appear { from { opacity:.25; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
@keyframes sheet-arrive { from { transform:translate(28px,14px) rotate(8deg); } to { transform:translate(14px,6px) rotate(3deg); } }
@media(max-width:1050px) {
 .live-hero__grid { gap:30px; }
 .live-hero h1 { font-size:45px; }
 .live-scene { padding:18px; }
 .live-card { padding:16px; }
 .live-card--in { margin-right:20px; }
 .live-card--out { margin-left:20px; }
 .flow-story__grid { gap:35px; }
 .visual-services { gap:15px; }
 .visual-services__copy { padding:20px; }
 .visual-services__copy h3 { font-size:21px; }
 .mini-orbit { right:15px; top:15px; }
 .example-mini--connect { padding:20px 12px; }
}
@media(max-width:800px) {
 .live-hero__grid { grid-template-columns:1fr; gap:38px; max-width:640px!important; }
 .live-hero__copy { text-align:center; }
 .live-hero .eyebrow { justify-content:center; }
 .live-hero h1 { font-size:clamp(40px,7.5vw,59px); }
 .live-hero .calm-lead { margin-left:auto; margin-right:auto; max-width:480px; }
 .live-hero .calm-next { margin-left:auto; margin-right:auto; }
 .flow-story__grid { grid-template-columns:1fr; gap:30px; }
 .flow-story__copy > p:not(.eyebrow) { max-width:500px; }
 .flow-board { max-width:620px; width:100%; }
 .visual-services { grid-template-columns:1fr; gap:20px; }
 .visual-services > article { display:grid; grid-template-columns:.9fr 1.1fr; }
 .visual-services .example-mini { height:100%; min-height:250px; }
 .visual-services__copy h3 { font-size:24px; }
}
@media(max-width:480px) {
 .calm-hero.live-hero { padding:32px 0 40px; }
 .live-hero h1 { font-size:clamp(33px,9.3vw,43px); }
 .live-hero .calm-lead { font-size:15px; line-height:1.8; }
 .live-hero .eyebrow { font-size:9px; margin-bottom:22px; }
 .live-hero .calm-next { margin-top:17px; }
 .live-demo__heading { font-size:9px; }
 .live-tabs button { font-size:11px; }
 .live-scene { padding:17px 14px 20px; border-radius:15px; }
 .live-scene__top { font-size:9px; margin-bottom:20px; }
 .live-scene__top > span:last-child { display:none; }
 .live-card--in { margin-right:14px; }
 .live-card--out { margin-left:14px; }
 .live-card { padding:14px; }
 .live-card .live-card__title { font-size:15px; }
 .live-card__meta { font-size:9px; gap:5px; margin-bottom:10px; }
 .live-card__sub { font-size:10px; }
 .live-tag { font-size:8px; padding:3px 5px; }
 .live-result-row { font-size:8px; gap:6px; }
 .live-demo__bottom { gap:8px; }
 .live-progress { gap:7px; flex-wrap:wrap; }
 .live-progress li { font-size:8px; gap:4px; }
 .live-play { font-size:9px; padding:7px 8px; min-height:44px; }
 .live-caption { font-size:9px; }
 .flow-story { padding:43px 0; }
 .flow-story h2 { font-size:33px; }
 .flow-story__copy > p:not(.eyebrow) { font-size:14px; }
 .flow-board { padding:20px 14px; border-radius:15px; }
 .flow-nodes { grid-template-columns:1fr 13px 1fr 13px 1fr; gap:2px; }
 .flow-node { padding:13px 5px; min-height:133px; }
 .flow-node strong { font-size:9px; }
 .flow-node small { font-size:8px; }
 .flow-node__icon { width:32px; height:32px; }
 .flow-node__icon svg { width:21px; }
 .flow-summary p { font-size:10px; }
 .flow-board__foot { font-size:8px; }
 .calm-home .calm-help { padding:44px 0; }
 .visual-services > article { display:flex; }
 .visual-services .example-mini { min-height:0; height:180px; }
 .visual-services__copy { padding:24px; }
 .visual-services__copy h3 { font-size:24px; }
 .visual-services__copy p { font-size:14px; }
 .calm-area .example-mini { max-width:100%; height:160px; margin:20px 0 10px; }
}
@media(prefers-reduced-motion:reduce) {
 .live-demo *, .flow-board *, .example-mini * { animation:none!important; transition:none!important; }
 /* Only the example explicitly started by its Play button may move. */
 .live-demo[data-manual-motion="true"][data-phase="connect"] .live-packet { animation:carry-message 2.6s ease-in-out both!important; }
}