/* Keep navigation within its column and preserve the supplied logo proportions. */
.app{width:calc(100% - 40px);max-width:1400px;grid-template-columns:280px minmax(0,1fr)}
.sidebar{min-width:0;overflow-x:hidden}
.sidebar .logo{display:block;width:190px;max-width:100%;height:auto;margin:0 auto 30px}
.sidebar .steps{min-width:0;max-width:100%;overflow-x:hidden}
.sidebar .stepnav{min-width:0;max-width:100%;white-space:normal}
.sidebar .stepnav>span:last-child{min-width:0;overflow-wrap:anywhere;text-align:left}
.configuration-intro{max-width:760px;padding:10px 0 0}
.configuration-intro h1{max-width:700px;margin-bottom:28px;line-height:1.12}
.intro-copy{font-size:16px;line-height:1.75;color:#555c68}
.intro-copy p{margin:0 0 20px}.intro-copy strong{color:#202634}
.mesh-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:28px;font-size:15px;color:#202634}
.mesh-info{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #dce1ec;border-radius:50%;background:#f5f7fc;color:#2344b4;font-size:20px;cursor:pointer;flex:none}
.mesh-info:hover{background:#edf1ff}.mesh-info:focus-visible{outline:2px solid #2344b4;outline-offset:3px}
.mesh-popover{position:fixed;inset:auto;margin:0;width:360px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;padding:20px;border:1px solid #dce1ec;border-radius:10px;background:#fff;color:#555c68;box-shadow:0 12px 40px #171d2c26;font-size:14px;line-height:1.6}
.mesh-popover>strong{display:block;color:#202634;font-size:16px}.mesh-popover p{margin:12px 0 0}.mesh-popover::backdrop{background:transparent}
.intro-start{margin:36px 0 0;font-size:17px;color:#202634}
.screen:has(.configuration-intro)>.actions{justify-content:flex-start;margin-top:22px;border-top:0;padding-top:0}
.screen:has(.configuration-intro)>.actions>span{display:none}
.screen:has(.configuration-intro)>.actions .btn{padding:16px 22px;font-size:14px;letter-spacing:.03em;line-height:1.5}
@media(max-width:900px){
 .app{width:calc(100% - 24px);display:block}
 .sidebar .logo{width:140px;margin:0 auto 20px}
 .sidebar .steps{flex-direction:row;flex-wrap:wrap;overflow:visible;gap:6px}
 .sidebar .stepnav{flex:1 1 145px;width:auto;max-width:100%;white-space:normal}
 .configuration-intro{padding-top:0}.configuration-intro h1{margin-bottom:24px}
}
@media(max-width:520px){.app{width:calc(100% - 16px)}.sidebar .stepnav{font-size:13px;padding:8px;gap:7px}.intro-copy{line-height:1.65}.mesh-line{gap:5px}.mesh-line>strong{flex:1;min-width:0}.screen:has(.configuration-intro)>.actions .btn{width:100%}}
/* Disclosure participates in layout: it never covers the introduction or CTA. */
.mesh-line{display:grid;grid-template-columns:auto 32px minmax(0,1fr);align-items:start;gap:10px}
.mesh-line>strong{padding-top:5px}
.mesh-popover{position:static;inset:auto;width:auto;max-width:none;max-height:none;overflow:visible;margin:0;box-shadow:0 5px 18px #171d2c0d;padding:16px}
.mesh-popover[hidden]{display:none}
.appearance-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px;align-items:start}
.appearance-choice{border:1px solid #dce1ec;background:#fff;min-width:0}
.appearance-choice>summary{cursor:pointer;list-style:none;padding:22px;display:grid;gap:12px;min-height:175px}
.appearance-choice>summary::-webkit-details-marker{display:none}
.appearance-choice>summary strong{font-size:20px;color:#202634}
.appearance-choice>summary>span{font-size:14px;line-height:1.5;color:#555c68}
.appearance-choice>summary .appearance-choice-action{color:#2344b4;font-weight:700}
.appearance-choice>summary:hover,.appearance-choice[open]>summary{background:#f4f6ff}
.appearance-choice>summary:focus-visible{outline:2px solid #2344b4;outline-offset:3px}
.appearance-choice-content{padding:0 22px 22px}.equipment-appearance{margin-top:30px}
@media(max-width:1200px){.mesh-line{grid-template-columns:minmax(0,1fr) 32px}.mesh-popover{grid-column:1/-1}}
@media(max-width:640px){.appearance-choice-grid{grid-template-columns:1fr}}

.intro-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.intro-path{position:relative;display:grid;grid-template-rows:auto auto 1fr;gap:10px;min-width:0;min-height:176px;padding:22px 48px 22px 22px;text-align:left;border:1px solid var(--line,#d8d1c4);border-radius:16px;background:rgba(255,255,255,.62);color:var(--ink,#171914);cursor:pointer;transition:border-color .16s,box-shadow .16s,transform .16s}
.intro-path:hover{border-color:var(--olive,#61684c);box-shadow:0 12px 34px rgba(32,33,25,.09);transform:translateY(-2px)}
.intro-path:focus-visible{outline:3px solid var(--olive,#61684c);outline-offset:3px}
.intro-path-number{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--olive,#61684c)}
.intro-path strong{font-family:Georgia,'Times New Roman',serif;font-size:20px;font-weight:500;line-height:1.2}
.intro-path>span:nth-last-child(2){font-size:13px;line-height:1.5;color:var(--muted,#777266)}
.intro-path-arrow{position:absolute;right:20px;top:18px;color:var(--olive,#61684c);font-size:22px}
.configuration-intro-expansion .intro-copy{max-width:760px}
.configuration-intro-expansion .intro-start{margin-top:15px}
@media(max-width:720px){.intro-paths{grid-template-columns:1fr}.intro-path{min-height:132px}}

/* Apply the edge fade to the artwork itself rather than a letterboxed image box. */
.configuration-intro .intro-house-sketch{mask-image:radial-gradient(ellipse closest-side at center,#000 66%,transparent 100%)}
@media(max-width:600px){.configuration-intro .intro-house-sketch{height:auto;max-height:none;aspect-ratio:3/2;margin:0 0 12px}}

/* Keep the question with its choices. The desktop layout retains its boxes;
   the separate phone interface puts the two real actions before the artwork. */
.intro-choices{display:contents}
.intro-mobile-copy,.intro-mobile-details{display:none}
html.tj-mobile-active .configuration-intro{display:flex;flex-direction:column;min-height:0;padding:0;gap:0}
html.tj-mobile-active .configuration-intro h1{order:0;max-width:100%;font-size:clamp(28px,7.6vw,34px);line-height:1.14;margin:0 0 16px}
html.tj-mobile-active .configuration-intro .intro-copy{order:1;max-width:100%;font-size:14px;line-height:1.5}
html.tj-mobile-active .configuration-intro .intro-copy p{margin:0}
html.tj-mobile-active .configuration-intro .intro-copy strong{font-weight:400;color:var(--ink)}
html.tj-mobile-active .configuration-intro .intro-desktop-copy{display:none}
html.tj-mobile-active .configuration-intro .intro-mobile-copy{display:block}
html.tj-mobile-active .configuration-intro .intro-choices{display:block;order:2;margin:22px 0 0}
html.tj-mobile-active .configuration-intro .intro-start{margin:0 0 10px;font-size:15px;line-height:1.4}
html.tj-mobile-active .configuration-intro .intro-paths{display:grid;grid-template-columns:1fr;gap:10px;margin:0}
html.tj-mobile-active .configuration-intro .intro-path{grid-template-rows:auto auto;gap:5px;min-height:84px;padding:15px 44px 15px 16px;border-radius:var(--ui-radius,7px)}
html.tj-mobile-active .configuration-intro .intro-path-number{display:none}
html.tj-mobile-active .configuration-intro .intro-path strong{font-size:19px;line-height:1.2}
html.tj-mobile-active .configuration-intro .intro-path>span:nth-last-child(2){font-size:12px;line-height:1.4}
html.tj-mobile-active .configuration-intro .intro-path-arrow{right:16px;top:16px;font-size:20px}
html.tj-mobile-active .configuration-intro .intro-house-sketch{order:3;float:none;align-self:center;width:100%;max-width:360px;height:auto;max-height:none;aspect-ratio:3/2;margin:18px 0 8px;object-fit:contain}
html.tj-mobile-active .configuration-intro .intro-mobile-details{display:block;order:4;margin:6px 0 0;border:1px solid var(--line);border-radius:var(--ui-radius,7px);background:var(--paper);color:var(--ink)}
html.tj-mobile-active .intro-mobile-details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 14px;font-size:14px;line-height:1.4;cursor:pointer;list-style:none}
html.tj-mobile-active .intro-mobile-details>summary::-webkit-details-marker{display:none}
html.tj-mobile-active .intro-mobile-details>summary:after{content:'+';flex:none;font-size:20px;line-height:1}
html.tj-mobile-active .intro-mobile-details[open]>summary:after{content:'−'}
html.tj-mobile-active .intro-mobile-details>div{padding:0 14px 14px;font-size:13px;line-height:1.6}
html.tj-mobile-active .intro-mobile-details p{margin:0 0 12px}
html.tj-mobile-active .intro-mobile-details p:last-child{margin-bottom:0}
html.tj-mobile-active .configuration-intro .mesh-line{order:5;grid-template-columns:minmax(0,1fr) 32px;margin-top:16px;gap:8px}
html.tj-mobile-active .configuration-intro .mesh-popover{grid-column:1/-1}
html.tj-mobile-active .screen:has(.configuration-intro:not(.configuration-intro-expansion))>.actions{display:none}