/* Palette is a context-led design hypothesis, not a conversion guarantee. */
:root{color-scheme:only light;--paper:#f7f4ee;--ink:#23343b;--muted:#526168;--line:#bac7cc;--green:#183b43;--accent:#f0bd75;--mist:#e7eef0;--action-ink:#182f37}
body{background:var(--paper);color:var(--ink)}
.site-header{background:#152e38d9}.site-header.scrolled{background:var(--paper)}
.nav-cta,.scrolled .nav-cta{background:var(--accent);color:var(--action-ink);border-color:#81613b}
.nav-cta:hover{background:#f5cc93}
.button-primary,.review-section .button-light{background:var(--accent);color:var(--action-ink);border-color:#81613b}
.button-primary:hover,.review-section .button-light:hover{background:#f5cc93}
.button-dark:hover{background:#25535f}
/* The photo's left side is already dark: the shade keeps the text side dark and lets the pipe metal and the lamp show */
.hero-shade{background:linear-gradient(90deg,rgba(12,28,35,.74) 0,rgba(12,28,35,.56) 36%,rgba(12,28,35,.16) 60%,rgba(12,28,35,0) 76%),linear-gradient(0deg,rgba(12,28,35,.6),rgba(12,28,35,0) 34%)}
.hero-deck{max-width:520px}.hero-secondary{display:inline-flex;align-items:center;gap:14px;font-size:14px;text-underline-offset:6px}
.hero-foot p,.photo-note{color:#fff;background:#152e38e6;padding:4px 8px;border-radius:2px}
.scene,.mech-more-section{background:var(--mist)}
.stage .poster,.stage canvas{mix-blend-mode:normal}
.stage-tag{background:#e7eef0f0;padding:4px 7px;border-radius:2px}
.steps li{opacity:1;color:var(--muted);padding-left:12px;border-left:2px solid transparent}
.steps li.active{color:var(--ink);font-weight:500;border-left-color:var(--green)}
.building-story{background:var(--green)}
/* v5: the left-to-right shade is for desktop only. In v4 it sat outside @media and overrode the phone shade (text contrast then depended on the photo). */
@media(min-width:761px){.building-shade{background:linear-gradient(90deg,#142f38e6 0,#142f38bd 34%,#142f3833 60%,#142f3800 80%)}}
@media(max-width:760px){.building-shade{background:linear-gradient(0deg,#142f38f2 0%,#142f38e0 40%,#142f3880 58%,#142f3800 76%)}html:not(.motion) .building-content{background:linear-gradient(180deg,#142f3800 0,#142f38d6 56px,#142f38d6 100%);margin-inline:0;width:100%;padding-inline:20px}}
.feature-list{list-style:none;padding:0;margin:28px 0 16px;border-top:1px solid var(--line)}
.feature-list li{display:grid;grid-template-columns:11.5em 1fr;gap:18px;border-bottom:1px solid var(--line);padding:14px 0;font-size:14px;line-height:1.6;position:relative}
.feature-list strong{font-weight:500;color:var(--ink)}.feature-list span{color:var(--muted)}
.source-note{font-size:11px!important;line-height:1.55}
.source-note a,.credits a{text-decoration:underline}
input[type=range]{accent-color:var(--green)}
#progress{appearance:none;-webkit-appearance:none;background:transparent;height:28px}
#progress::-webkit-slider-runnable-track{height:4px;background:#738991;border-radius:2px}
#progress::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;border:2px solid var(--paper);background:var(--green);box-shadow:0 0 0 1px var(--green)}
#progress::-moz-range-track{height:4px;background:#738991;border-radius:2px}
#progress::-moz-range-thumb{width:15px;height:15px;border-radius:50%;border:2px solid var(--paper);background:var(--green)}
dialog select,dialog textarea{border-color:#738991}dialog textarea::placeholder{color:#526168;opacity:1}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px #76511f}
.review-grid>div>p:not(.eyebrow){color:var(--paper)}
@media(max-width:760px){.hero-shade{background:linear-gradient(0deg,#142c35eb 0,#142c35c7 42%,#142c3566 60%,#142c3500 76%)}.hero-secondary{display:flex;width:max-content;margin:0;font-size:13px}.feature-list li{grid-template-columns:120px 1fr;gap:14px}.steps li{padding-left:7px}}
@media(max-width:360px){.hero-deck{font-size:14px}}
/* short phones: the hero text reaches the pipes, so the shade climbs higher */
@media(max-width:760px) and (max-height:700px){.hero-shade{background:linear-gradient(0deg,#142c35f0 0,#142c35d6 55%,#142c35b3 78%,#142c3566 100%)}}