/* A shared, quiet rhythm for editorial pages and interactive tools. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-short:220ms;--motion-long:520ms}
.hero-em{isolation:isolate}
.hero-em::after{content:"";position:absolute;z-index:-1;left:-.03em;right:-.03em;bottom:.13em;height:.18em;border-radius:70% 20% 60% 30%;background:#dbe7a5;transform-origin:left center;transform:rotate(-2deg)}
.room-frame{box-shadow:0 18px 44px -28px #294b3955}
.motion-ready .hero-em::after{animation:ink-arrive 800ms var(--motion-ease)}
@keyframes ink-arrive{from{transform:scaleX(.05) rotate(-2deg)}to{transform:scaleX(1) rotate(-2deg)}}
.button{position:relative;transition:background var(--motion-short),transform var(--motion-short) var(--motion-ease),box-shadow var(--motion-short);box-shadow:0 3px 0 #25382e0c}
.button>span,.need-links a>span,.image-arrow,.category-links>a>span:last-child{transition:transform 320ms var(--motion-ease),background var(--motion-short),color var(--motion-short)}
.guide-image img{transition:transform 650ms var(--motion-ease)}
.guide-card{transition:transform 360ms var(--motion-ease)}
.need-links a,.category-links>a{transition:background var(--motion-short),border-color var(--motion-short),transform 320ms var(--motion-ease),box-shadow var(--motion-short)}
.desktop-nav>a:not(.nav-circle)::after{width:100%;transform:scaleX(0);transform-origin:left center;transition:transform 320ms var(--motion-ease)}
.desktop-nav>a:not(.nav-circle):is(:hover,:focus-visible,[aria-current])::after{transform:scaleX(1)}
.text-link{transition:color var(--motion-short),border-color var(--motion-short)}
.chip{transition:background 180ms,border-color 180ms,color 180ms,transform 180ms var(--motion-ease),box-shadow 180ms}
.chip[aria-pressed=true]{box-shadow:0 3px 8px #294b391c}
.search-field,.cost-input-row input,.bp-input-unit{transition:border-color 180ms,box-shadow 180ms,background 180ms}
.search-field:focus-within,.bp-input-unit:focus-within{border-color:var(--green);box-shadow:0 0 0 3px #dbe7a580}
.cost-input-row input:focus{box-shadow:0 0 0 4px #dbe7a566}
.bp-choice,.bp-owner-card,.bp-progress li{transition:background 180ms,border-color 180ms,box-shadow 180ms}
.bp-choice:has(input:checked),.bp-owner-card:has(input:checked){border-color:#6c8859;box-shadow:inset 3px 0 #6c8859;background:#edf2df}
.bp-progress li{position:relative}
.bp-progress li::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--motion-ease)}
.bp-progress li[aria-current=step]::after{transform:scaleX(1)}
.buy-check>summary,.bp-example>summary,.bp-extra>summary,.bp-confirmed>summary,.article-toc details>summary{position:relative;list-style:none;padding-right:36px;transition:color 180ms}
.buy-check>summary::-webkit-details-marker,.bp-example>summary::-webkit-details-marker,.bp-extra>summary::-webkit-details-marker,.bp-confirmed>summary::-webkit-details-marker,.article-toc summary::-webkit-details-marker{display:none}
.buy-check>summary::after,.bp-example>summary::after,.bp-extra>summary::after,.bp-confirmed>summary::after,.article-toc details>summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;position:absolute;right:14px;top:calc(50% - 6px);transform:rotate(45deg);transition:transform 240ms var(--motion-ease)}
:is(.buy-check,.bp-example,.bp-extra,.bp-confirmed,.article-toc details)[open]>summary::after{transform:translateY(4px) rotate(225deg)}
.mobile-menu summary span{display:inline-block;transition:transform 240ms var(--motion-ease)}
.motion-ready :is(.buy-check,.bp-example,.bp-extra,.bp-confirmed,.article-toc details)[open]>:not(summary){animation:detail-arrive 220ms var(--motion-ease)}
.motion-ready .mobile-menu[open]>nav{animation:detail-arrive 220ms var(--motion-ease);transform-origin:top}
.motion-ready .mobile-menu[open]>nav a{animation:detail-arrive 300ms var(--motion-ease)}
.motion-ready .mobile-menu[open]>nav a:nth-child(2){animation-duration:380ms}.motion-ready .mobile-menu[open]>nav a:nth-child(3){animation-duration:460ms}
@keyframes detail-arrive{from{opacity:.7;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.motion-ready .bp-step:not([hidden])>legend,.motion-ready .bp-step:not([hidden])>.bp-step-lede,.motion-ready .bp-result-header,.motion-ready .bp-verdict,.motion-ready .cost-results:not([hidden]){animation:result-arrive 260ms var(--motion-ease)}
.motion-ready .share-status:not(:empty),.motion-ready .copy-status:not(:empty),.motion-ready .empty-state{animation:result-arrive 200ms var(--motion-ease)}
@keyframes result-arrive{from{opacity:.82;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.article-toc nav a{position:relative;transition:color 180ms,background 180ms; border-radius:4px}
.article-toc nav a[aria-current=location]{color:var(--green);background:#e7edda;font-weight:700}
.reading-progress{height:3px;position:fixed;inset:0 0 auto;z-index:30;background:var(--green);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.footer-preferences{border-top:1px solid #cdd3c1;padding:12px 0;display:flex;justify-content:flex-end}
.motion-toggle{min-height:44px;display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #aebba2;border-radius:30px;background:transparent;color:var(--ink);font-size:12px}
.motion-toggle::before{content:"";width:26px;height:16px;border-radius:12px;background:#bcc6b0;box-shadow:inset 0 0 0 1px #a0ad93;transition:background 180ms}
.motion-toggle::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--white);left:16px;transition:transform 200ms var(--motion-ease)}
.motion-toggle{position:relative}.motion-toggle[aria-pressed=true]::before{background:var(--green)}.motion-toggle[aria-pressed=true]::after{transform:translateX(10px)}
.motion-toggle:disabled{cursor:default}.motion-toggle [data-motion-state]{font-size:11px;color:#526149;min-width:2em}
.footer-preferences:has([hidden]){display:none}
@media(hover:hover) and (pointer:fine){
 .guide-card:hover{transform:translateY(-4px)}.guide-card:hover .guide-image img{transform:scale(1.035)}
 .guide-card:hover .image-arrow{transform:rotate(45deg);background:var(--green);color:var(--white)}
 .button:hover{transform:translateY(-3px);box-shadow:0 8px 18px -10px #294b3970}.button:hover>span{transform:translateX(4px)}
 .hero-actions .button:hover>span{transform:translateY(4px)}
 .need-links a:hover{transform:translateY(-3px);box-shadow:0 8px 18px -12px #294b3955}
 .need-links a:hover>span,.category-links>a:hover>span:last-child{transform:translateX(4px)}
 .chip:hover{transform:translateY(-2px)}
}
.button:active,.chip:active,.need-links a:active{transform:translateY(1px) scale(.985)}
.button:focus-visible>span{transform:translateX(3px)}
.checks-toggle,.article-check-link,.mobile-menu summary,.article-toc nav a{transition:background 180ms,color 180ms,box-shadow 180ms,transform 180ms var(--motion-ease)}
@media(hover:none){
 .button:hover:not(:active),.guide-image:hover img{transform:none}
 .button:active,.checks-toggle:active,.article-check-link:active{transform:scale(.98)}
 .mobile-menu summary:active,.article-toc nav a:active,.category-links>a:active{background:#e7edda;border-radius:6px}
}
@media(max-width:760px){.footer-preferences{justify-content:flex-start}.motion-toggle{font-size:13px}.reading-progress{height:2px}}
.motion-ready :is(.bp-step>legend,.bp-result-header,.cost-results,.buy-check>div,.bp-example>div,.bp-extra>div,.bp-confirmed>ul,.article-toc nav,.mobile-menu nav):focus-within{animation:none!important}
.motion-ready .mobile-menu nav:focus-within a{animation:none!important}
/* Stop both CSS and JS effects while retaining visible content and native actions. */
html[data-motion=reduced]{scroll-behavior:auto}
html[data-motion=reduced] *,html[data-motion=reduced] *::before,html[data-motion=reduced] *::after{animation:none!important;transition:none!important}
html[data-motion=reduced] :is(.guide-card,.guide-image img,.button,.button>span,.chip,.need-links a,.need-links a>span,.image-arrow,.checks-toggle,.article-check-link){transform:none!important}
html[data-motion=reduced] .reading-progress{display:none}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 :is(.guide-card,.guide-image img,.button,.button>span,.chip,.need-links a,.need-links a>span,.image-arrow,.checks-toggle,.article-check-link){transform:none!important}
 .reading-progress{display:none}
}
@media print{
 *,*::before,*::after{animation:none!important;transition:none!important}
 .reading-progress,.footer-preferences{display:none!important}
}