/* Everyday scenes: stable photography, light UI and one purposeful sequence. */
.routine-section{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:clamp(36px,5vw,72px);background:var(--ivory)}
.routine-visual,.routine-copy{min-width:0}
.routine-room{position:relative;isolation:isolate;aspect-ratio:6/5;overflow:hidden;border:1px solid #d1d9cc;border-radius:var(--home-radius);background:var(--forest-deep)}
.routine-room>img{width:100%;height:100%;object-fit:cover;object-position:53% center;transform:none}
.routine-dimmer,.routine-warmth,.routine-scrim{position:absolute;inset:0;pointer-events:none}
.routine-dimmer{background:#0b1715;opacity:.04;transition:opacity 1.1s var(--ease)}
.routine-warmth{background:#cd8b40;mix-blend-mode:soft-light;opacity:.18;transition:opacity 1.1s var(--ease)}
.routine-scrim{background:linear-gradient(180deg,#0d201b66,transparent 25%,transparent 54%,#0d201b9c)}
[data-scene="movie"] .routine-dimmer{opacity:.37}
[data-scene="movie"] .routine-warmth{opacity:.08}
[data-scene="night"] .routine-dimmer{opacity:.7}
[data-scene="night"] .routine-warmth{opacity:0}
.routine-room figcaption{position:absolute;inset:24px 24px auto;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fafbf3;font-size:.875rem;font-weight:500}
.routine-room figcaption>span:last-child{padding:5px 10px;background:#18382bc9;border:1px solid #ebf1e233;border-radius:6px;font-size:.75rem}
.routine-readouts{position:absolute;bottom:24px;left:24px;right:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.routine-readouts>div{min-width:0;padding:16px 14px;border:1px solid #e8eddf59;border-radius:8px;background:#f8f8efed;display:grid;grid-template-columns:1fr;gap:5px;align-content:start;color:var(--home-ink)}
.routine-readouts [data-icon]{margin-bottom:6px;color:#69794f}
.routine-readouts .ui-icon{width:22px;height:22px}
.routine-readouts div>span:not([data-icon]){font-size:.75rem;color:#5a695b;line-height:1.4}
.routine-readouts strong{font:500 clamp(.875rem,1.3vw,1.125rem)/1.4 Manrope,Inter,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.02em}
.routine-caption{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:.75rem;line-height:1.6;color:var(--home-muted)}
.routine-caption p{margin:0}
.routine-caption>span{text-align:right;flex:none}
.routine-copy h2{font-size:clamp(2.25rem,3.7vw,3.375rem);line-height:1.14;letter-spacing:-.045em}
.routine-intro{max-width:330px;margin:22px 0 24px;font-size:1.0625rem;color:var(--home-muted)}
.routine-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:5px;border:1px solid #dce2d7;border-radius:9px;background:#edf1e8;margin-bottom:28px}
.routine-tabs button{min-width:0;min-height:46px;padding:10px 4px;border:1px solid transparent;border-radius:6px;background:transparent;color:#5c695e;font-size:.875rem;line-height:1.45;transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.routine-tabs button[aria-selected="true"]{background:var(--forest);color:var(--ivory);border-color:var(--forest)}
.routine-example{border-radius:8px}
.routine-example:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
.routine-flow{position:relative;display:grid;gap:20px;padding-left:28px}
.routine-connection{position:absolute;top:37px;bottom:30px;left:4px;width:1px;background:#cfd9c7;overflow:hidden}
.routine-connection>span{display:block;width:100%;height:100%;background:#718966;transform:scaleY(1);transform-origin:top;transition:transform .5s var(--ease)}
.routine-step{position:relative;min-width:0;display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center}
.routine-node{position:absolute;left:-28px;top:calc(50% - 4px);width:9px;height:9px;border:2px solid #96ad84;background:var(--ivory);border-radius:50%;transition:background .35s ease,border-color .35s ease}
.routine-kicker{display:block;font-size:.75rem;letter-spacing:.07em;color:#66805a;font-weight:500;margin-bottom:3px}
.routine-step h3{font:500 .9375rem/1.45 Manrope,Inter,sans-serif;letter-spacing:-.015em}
.routine-trigger{min-height:80px}
.routine-scene>div>p{min-height:40px}
.routine-step p{margin:3px 0 0;font-size:.8125rem;line-height:1.5;color:var(--home-muted)}
.routine-product{position:relative;width:56px;height:68px;border:1px solid #e2e6dc;border-radius:8px;background:#fff;display:grid;place-items:center;overflow:hidden}
.routine-product img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5px;opacity:0;transition:opacity .22s ease;pointer-events:none}
.routine-product img[data-active="true"][data-loaded="true"]{opacity:1}
.routine-product-placeholder{display:grid;place-items:center;color:#a8b3a3;opacity:.55;transition:opacity .22s ease;pointer-events:none}
.routine-product-placeholder .ui-icon{width:22px;height:22px}
.routine-product[data-ready="true"] .routine-product-placeholder{opacity:0}
.routine-scene{padding:16px;background:#eef2e8;border:1px solid #dde5d4;border-radius:9px;grid-template-columns:24px minmax(0,1fr);transition:background .4s ease,border-color .4s ease}
.routine-scene .routine-node{left:-29px}
.routine-scene-icon{color:#688252}
.routine-scene-icon .ui-icon{width:24px;height:24px}
.routine-result{grid-template-columns:24px minmax(0,1fr);padding-left:4px;min-height:44px}
.routine-result>span[data-icon]{color:#527044}
.routine-result p{font-size:.875rem;color:var(--home-ink);margin:0;max-width:330px;min-height:42px;display:flex;align-items:center}
.routine-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;margin-top:26px}
.routine-actions .button{padding-inline:24px;font-size:.875rem}
.routine-replay{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:0;background:none;padding:8px 0;font-size:.8125rem;color:var(--forest)}
.routine-play-icon{display:block;width:14px;height:14px;border:1px solid #91a582;border-radius:50%;position:relative}
.routine-play-icon::after{content:'';position:absolute;left:5px;top:3px;width:0;height:0;border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:4px solid currentColor}
.routine-replay[data-playing="true"] .routine-play-icon::after{left:4px;top:3px;width:4px;height:6px;border:0;border-inline:1px solid currentColor}
.routine-note{margin-top:13px;font-size:.75rem;color:var(--home-muted);line-height:1.6;max-width:380px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
[data-phase="trigger"] .routine-connection>span{transform:scaleY(0)}
[data-phase="scene"] .routine-connection>span{transform:scaleY(.5)}
[data-phase="result"] .routine-connection>span,[data-phase="complete"] .routine-connection>span{transform:scaleY(1)}
[data-phase="trigger"] .routine-trigger .routine-node,[data-phase="scene"] .routine-scene .routine-node,[data-phase="result"] .routine-result .routine-node{background:#64854c;border-color:#64854c}
[data-phase="scene"] .routine-scene{background:#e3ebd9;border-color:#afc19d}
[data-phase="result"] .routine-readouts>div{animation:routine-confirm .65s var(--ease) both}
[data-phase="result"] .routine-readouts>div:nth-child(2){animation-delay:90ms}
[data-phase="result"] .routine-readouts>div:nth-child(3){animation-delay:180ms}
@keyframes routine-confirm{from{transform:translateY(5px);opacity:.6}to{transform:translateY(0);opacity:1}}
@media(hover:hover) and (pointer:fine){.routine-tabs button:not([aria-selected="true"]):hover{background:#e0e8d7;color:var(--home-ink)}.routine-replay:hover{text-decoration:underline;text-underline-offset:5px}}
@media(max-width:1100px){.routine-section{gap:36px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.routine-room{aspect-ratio:4/5}.routine-room figcaption{inset:18px 18px auto}.routine-readouts{left:16px;right:16px;bottom:18px;gap:6px}.routine-readouts>div{padding:14px 10px}.routine-caption{flex-wrap:wrap;gap:4px}.routine-caption>span{text-align:left}.routine-tabs button{font-size:.875rem}.routine-actions{gap:6px 16px}}
@media(max-width:800px){.routine-section{grid-template-columns:1fr;gap:30px;position:relative}.routine-copy{display:contents}.routine-copy>.eyebrow{grid-row:1;margin:0}.routine-copy>h2{grid-row:2;margin-top:-16px;font-size:2.5rem}.routine-copy>.routine-intro{grid-row:3;max-width:460px;margin:-10px 0 0}.routine-tabs{grid-row:4;margin:-8px 0 -8px;width:100%;max-width:480px}.routine-visual{grid-row:5}.routine-room{aspect-ratio:3/2}.routine-example{grid-row:6}.routine-actions{grid-row:7;margin:0}.routine-note{grid-row:8;margin:-18px 0 0;max-width:none}.routine-readouts{left:20px;right:20px;bottom:20px}.routine-readouts>div{padding:12px 14px;grid-template-columns:24px minmax(0,1fr);column-gap:8px;row-gap:3px}.routine-readouts [data-icon]{grid-row:1/3;margin:0;align-self:center}.routine-readouts strong{font-size:1rem}.routine-caption{justify-content:space-between}.routine-flow{gap:16px;max-width:540px}.routine-trigger{min-height:68px}.routine-result p{min-height:42px}.routine-tabs button{font-size:.875rem}.routine-actions .button{min-height:50px}}
@media(max-width:480px){.routine-copy>h2{font-size:2.25rem}.routine-intro{font-size:1rem}.routine-room{aspect-ratio:1/1}.routine-room>img{object-position:53% center}.routine-readouts{left:12px;right:12px;bottom:14px;gap:6px}.routine-readouts>div{grid-template-columns:1fr;padding:12px 10px;gap:3px}.routine-readouts [data-icon]{grid-row:auto;margin-bottom:4px}.routine-readouts div>span:not([data-icon]){font-size:.75rem}.routine-readouts strong{font-size:.9375rem}.routine-room figcaption{inset:18px 16px auto}.routine-caption{font-size:.75rem}.routine-caption>span{display:none}.routine-tabs{gap:3px;padding:4px}.routine-tabs button{font-size:.875rem;padding-inline:3px}.routine-step{gap:12px}.routine-flow{padding-left:24px}.routine-node{left:-24px}.routine-scene .routine-node{left:-25px}.routine-result p{font-size:.875rem}.routine-actions{gap:8px 18px}.routine-actions .button{padding-inline:20px}}
@media(prefers-reduced-motion:reduce){.routine-dimmer,.routine-warmth,.routine-connection>span,.routine-node,.routine-scene,.routine-tabs button{transition:none}.routine-readouts>div{animation:none!important}}