/* Graphics for the residential guides (guide_graphics.py). Visible without JavaScript;
   .gg-armed (guides.js) arms the reveal states. Loops run only with prefers-reduced-motion: no-preference. */
.gg{--gg-ease:cubic-bezier(.32,.72,0,1);--gg-spring:cubic-bezier(.34,1.56,.64,1);--gg-paper2:#e9e7dc;margin:56px auto;padding:32px;border:1px solid var(--ink);background:var(--paper)}
.legacy-reading>figure.gg.gg-wide{max-width:1120px}
.gg .gg-title{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.035em;line-height:1.1;margin:0 0 24px;text-wrap:balance}
.gg figcaption{font-size:13px;line-height:1.6;color:var(--muted);margin-top:16px;text-wrap:pretty}
.gg svg{display:block;width:100%;height:auto;overflow:visible}
.gg svg text{font-family:var(--display);fill:var(--ink)}
.gg svg path,.gg svg rect,.gg svg circle,.gg svg ellipse,.gg svg line{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gg .gg-soft{stroke-opacity:.35}
.gg .gg-acc{fill:var(--acid)}
.gg .gg-fill{fill:var(--paper)}
.gg .gg-ink{fill:var(--ink)}

/* Price chart */
.gg-chart .gg-grid{stroke:var(--line);stroke-width:1}
.gg-chart .gg-tick{font-size:12px;fill:var(--muted)}
.gg-chart .gg-co{font-size:15px;font-weight:700}
.gg-chart .gg-pkg{font-size:12px;fill:var(--muted)}
.gg-chart .gg-bar{fill:var(--ink);stroke:none;transform-box:fill-box;transform-origin:0 50%}
.gg-chart .gg-ours .gg-bar{fill:var(--acid);stroke:var(--ink);stroke-width:1.4}
.gg-chart .gg-val{font-size:14px;font-weight:700}
.gg-chart .gg-hit{fill:transparent;stroke:none}
.gg-chart .gg-row:hover .gg-hit{fill:var(--gg-paper2)}
html.gg-armed .gg:not(.is-in) .gg-chart .gg-bar{transform:scaleX(0)}
html.gg-armed .gg .gg-chart .gg-bar{transition:transform 1.2s var(--gg-ease) calc(.15s + var(--i) * .1s)}
html.gg-armed .gg .gg-chart .gg-val{transition:opacity .6s var(--gg-ease) calc(.9s + var(--i) * .1s)}
html.gg-armed .gg:not(.is-in) .gg-chart .gg-val{opacity:0}

/* Exploded package stack */
.gg-stack-art .gg-face{fill:var(--paper)}
.gg-stack-art .gg-side{fill:var(--gg-paper2)}
.gg-stack-art .gg-design .gg-face{fill:var(--acid)}
.gg-stack-art .gg-lead{stroke-opacity:.5;stroke-dasharray:3 4}
.gg-stack-art .gg-dot{fill:var(--ink)}
.gg-stack-art .gg-label{font-size:18px;font-weight:600}
.gg-stack-art .gg-bracket text{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.gg-stack-art .gg-layer{transition:transform 1.4s var(--gg-ease) calc(var(--i) * .07s)}
.gg-stack-art .gg-layer .gg-lead,.gg-stack-art .gg-layer .gg-label,.gg-stack-art .gg-layer .gg-dot,.gg-stack-art .gg-bracket{transition:opacity .8s var(--gg-ease) calc(.9s + var(--i,0) * .07s)}
html.gg-armed .gg-stack:not(.is-in) .gg-layer{transform:translateY(var(--c))}
html.gg-armed .gg-stack:not(.is-in) .gg-lead,html.gg-armed .gg-stack:not(.is-in) .gg-label,html.gg-armed .gg-stack:not(.is-in) .gg-dot,html.gg-armed .gg-stack:not(.is-in) .gg-bracket{opacity:0}
@media(prefers-reduced-motion:no-preference){.gg-stack.is-in .gg-design .gg-face{animation:gg-pulse 3.6s ease-in-out 2.4s infinite}}
@keyframes gg-pulse{50%{fill:#eef3b8}}

/* Tiles */
.gg-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--ink)}
.gg-three .gg-tiles{grid-template-columns:repeat(3,1fr)}
.gg-tile{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);display:flex;flex-direction:column}
.gg-drivers .gg-tile:nth-child(2n),.gg-three .gg-tile:nth-child(3n){border-right:0}
.gg-drivers .gg-tile:nth-last-child(-n+2),.gg-three .gg-tile{border-bottom:0}
.gg-tile svg{background:var(--gg-paper2);aspect-ratio:3/2}
.gg-tile svg text{font-size:10px;font-weight:700;letter-spacing:.12em}
.gg-tile p{margin:0;padding:16px 20px 24px;font-size:14px;line-height:1.6;color:var(--muted)}
.gg-tile p strong{display:block;font-family:var(--display);font-size:20px;letter-spacing:-.03em;color:var(--ink);margin-bottom:8px}
html.gg-armed .gg:not(.is-in) .gg-tile{opacity:0;transform:translateY(32px);filter:blur(6px)}
html.gg-armed .gg .gg-tile{transition:opacity .9s var(--gg-ease) calc(var(--i) * .12s),transform .9s var(--gg-ease) calc(var(--i) * .12s),filter .9s var(--gg-ease) calc(var(--i) * .12s)}
.gg-drivers .gg-rooms rect{fill:var(--paper)}
.gg-drivers .gg-soft-fill{fill:var(--paper);stroke-opacity:.35}
.gg-drivers .gg-scan-fill{transform-box:fill-box;transform-origin:0 50%}
.gg-drivers .gg-sky{fill:var(--gg-paper2);stroke:none}
.gg-drivers .gg-sun{fill:var(--acid)}
.gg-drivers .gg-hill{fill:var(--paper);stroke-opacity:.4}
.gg-drivers .gg-house{fill:var(--paper)}
.gg-drivers .gg-win{fill:var(--paper)}
.gg-drivers .gg-ground{stroke-width:2}
.gg-drivers .gg-ring{fill:var(--acid);fill-opacity:.18;stroke-dasharray:4 5}
.gg-drivers .gg-ring-in{fill-opacity:.3}
.gg-drivers .gg-runway{stroke-width:5}
.gg-drivers .gg-drone path,.gg-drivers .gg-drone ellipse{stroke-width:1.4}
.gg-drivers .gg-auth rect{fill:var(--ink)}
.gg-drivers .gg-auth text{fill:var(--paper);font-size:9px}
.gg-drivers .gg-strip rect{fill:var(--paper)}
.gg-drivers .gg-clip{fill:var(--paper);transform-box:fill-box;transform-origin:0 50%}
.gg-drivers .gg-playhead{stroke-width:2.4}
@media(prefers-reduced-motion:no-preference){
 .gg-drivers.is-in .gg-rooms rect{animation:gg-room 6s var(--gg-ease) calc(var(--i,0) * .5s) infinite}
 .gg-drivers.is-in .gg-scan-fill{animation:gg-scan 6s var(--gg-ease) infinite}
 .gg-drivers.is-in .gg-sun{animation:gg-set 7s var(--gg-ease) infinite}
 .gg-drivers.is-in .gg-sky{animation:gg-sky 7s var(--gg-ease) infinite}
 .gg-drivers.is-in .gg-win{animation:gg-win 7s var(--gg-ease) infinite}
 .gg-drivers.is-in .gg-auth{animation:gg-auth 6s var(--gg-ease) infinite}
 .gg-drivers.is-in .gg-strip{animation:gg-film 8s linear infinite}
 .gg-drivers.is-in .gg-clip{animation:gg-clip 6s var(--gg-ease) calc(var(--i,0) * .3s) infinite}
 .gg-drivers.is-in .gg-playhead{animation:gg-play 6s linear infinite}
}
@keyframes gg-room{0%,8%{opacity:0;transform:scale(.9)}20%,86%{opacity:1;transform:none}100%{opacity:0}}
.gg-drivers .gg-rooms rect{transform-box:fill-box;transform-origin:center}
@keyframes gg-scan{0%,10%{transform:scaleX(.15)}80%,100%{transform:scaleX(1)}}
@keyframes gg-set{0%,20%{transform:none}60%,85%{transform:translateY(110px)}100%{transform:none}}
@keyframes gg-sky{0%,35%{fill:#e9e7dc}60%,85%{fill:#181a17}100%{fill:#e9e7dc}}
@keyframes gg-win{0%,45%{fill:#f2f0e7}62%,85%{fill:#dce87a}100%{fill:#f2f0e7}}
@keyframes gg-auth{0%,40%{opacity:0;transform:translateY(6px)}50%,90%{opacity:1;transform:none}100%{opacity:0}}
.gg-drivers .gg-auth{transform-box:fill-box}
@keyframes gg-film{to{transform:translateX(-248px)}}
@keyframes gg-clip{0%,5%{transform:scaleX(0)}25%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes gg-play{from{transform:translateX(0)}to{transform:translateX(260px)}}

/* Hub */
.gg-hub .gg-link{stroke-opacity:.45;stroke-dasharray:2 6}
.gg-hub .gg-flow{fill:var(--acid);stroke:var(--ink);stroke-width:1.4}
.gg-hub .gg-node circle{fill:var(--paper)}
.gg-hub .gg-icon{stroke-width:2}
.gg-hub .gg-node-label{font-size:15px;font-weight:600}
.gg-hub .gg-site>rect:first-child{fill:var(--paper);stroke-width:2}
.gg-hub .gg-center-label{font-size:12px;font-weight:700;letter-spacing:.14em}
.gg-hub .gg-dash{stroke-dasharray:5 6;stroke-opacity:.6}
.gg-hub .gg-mls rect{fill:var(--gg-paper2)}
.gg-hub .gg-mls text{font-size:13px;font-weight:600}
.gg-hub .gg-node{transition:transform .9s var(--gg-spring) calc(.2s + var(--i) * .1s),opacity .6s var(--gg-ease) calc(.2s + var(--i) * .1s)}
html.gg-armed .gg-hub:not(.is-in) .gg-node{opacity:0}
.gg-hub circle.gg-flow{visibility:hidden}
.gg-hub.is-in circle.gg-flow,html:not(.gg-armed) .gg-hub circle.gg-flow{visibility:visible}

/* Anatomy */
.gg-anatomy-art .gg-frame{fill:var(--paper);stroke-width:2}
.gg-anatomy-art .gg-block{fill:var(--gg-paper2);transition:fill .5s var(--gg-ease)}
.gg-anatomy-art .gg-pin{fill:var(--ink)}
.gg-anatomy-art .gg-pin-n{fill:var(--paper);font-size:13px;font-weight:700}
.gg-anatomy-art .gg-lead{stroke-opacity:.4}
.gg-anatomy-art .gg-label{font-size:17px;font-weight:600}
.gg-anatomy-art .gg-callout{transition:opacity .7s var(--gg-ease) calc(.2s + var(--i) * .12s)}
html.gg-armed .gg-anatomy:not(.is-in) .gg-callout{opacity:0}
@media(prefers-reduced-motion:no-preference){.gg-anatomy.is-in .gg-block{animation:gg-hl 14s steps(1) calc(var(--i) * 2s - 2s) infinite}}
@keyframes gg-hl{0%{fill:#dce87a}14.3%,100%{fill:#e9e7dc}}

/* Compliance */
.gg-compliance .gg-photo,.gg-compliance .gg-card{fill:var(--paper)}
.gg-compliance .gg-tag rect{fill:var(--ink)}
.gg-compliance .gg-tag text{fill:var(--paper);font-size:9px;letter-spacing:.08em}
.gg-compliance .gg-tag-b{opacity:0}
.gg-compliance .gg-old,.gg-compliance .gg-new{font-size:15px;font-weight:600;letter-spacing:0}
.gg-compliance .gg-old{fill:var(--muted)}
.gg-compliance .gg-strike{stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:0}
.gg-compliance .gg-digit{fill:var(--paper)}
.gg-compliance svg text{font-size:12px}
@media(prefers-reduced-motion:no-preference){
 .gg-compliance.is-in .gg-staged{animation:gg-toggle 6s steps(1) infinite}
 .gg-compliance.is-in .gg-tag-a{animation:gg-toggle 6s steps(1) infinite}
 .gg-compliance.is-in .gg-tag-b{animation:gg-toggle-b 6s steps(1) infinite}
 .gg-compliance.is-in .gg-strike{animation:gg-strike 5s var(--gg-ease) infinite}
 .gg-compliance.is-in .gg-new{animation:gg-new 5s var(--gg-ease) infinite}
 .gg-compliance.is-in .gg-digit{animation:gg-digit 5s var(--gg-ease) calc(var(--i) * .15s) infinite}
}
@keyframes gg-toggle{0%{opacity:1}50%{opacity:0}}
@keyframes gg-toggle-b{0%{opacity:0}50%{opacity:1}}
@keyframes gg-strike{0%,15%{stroke-dashoffset:1}40%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes gg-new{0%,35%{opacity:0;transform:translateY(6px)}50%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes gg-digit{0%,20%{fill:#f2f0e7}35%,85%{fill:#dce87a}100%{fill:#f2f0e7}}

/* After-sale timeline */
.gg-timeline .gg-line{stroke-width:3}
.gg-timeline .gg-branch{stroke-width:2;stroke-opacity:.7}
.gg-timeline .gg-step circle{fill:var(--paper);stroke-width:2.4}
.gg-timeline .gg-sold circle{fill:var(--acid)}
.gg-timeline text{font-size:16px;font-weight:600}
.gg-timeline .gg-end rect{fill:var(--paper)}
.gg-timeline .gg-flow{fill:var(--acid);stroke:var(--ink);stroke-width:1.4;visibility:hidden}
.gg-after.is-in .gg-timeline .gg-flow,html:not(.gg-armed) .gg-timeline .gg-flow{visibility:visible}
html.gg-armed .gg-after .gg-line,html.gg-armed .gg-after .gg-branch{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--gg-ease)}
html.gg-armed .gg-after .gg-branch{transition-delay:calc(1.2s + var(--i) * .15s)}
html.gg-armed .gg-after.is-in .gg-line,html.gg-armed .gg-after.is-in .gg-branch{stroke-dashoffset:0}
html.gg-armed .gg-after .gg-end{transition:opacity .7s var(--gg-ease) calc(1.8s + var(--i) * .15s)}
html.gg-armed .gg-after:not(.is-in) .gg-end{opacity:0}

/* Stat callouts */
.gg-stat{display:grid;grid-template-columns:auto 1fr;gap:8px 32px;align-items:center;background:var(--acid)}
.gg-stat .gg-stat-value{font-family:var(--display);font-weight:900;font-size:clamp(56px,7vw,96px);letter-spacing:-.06em;line-height:.9;margin:0;grid-row:span 2}
.gg-stat .gg-stat-label{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.8vw,22px);line-height:1.3;letter-spacing:-.02em;margin:0;text-wrap:balance}
.gg-stat figcaption{margin:0;color:var(--ink)}
.gg-stat figcaption a{color:var(--ink)}

/* Reveal the whole figure */
html.gg-armed .gg{transition:opacity 1s var(--gg-ease),transform 1s var(--gg-ease)}
html.gg-armed .gg:not(.is-in){opacity:.001;transform:translateY(40px)}

.gg-legend{display:none}
@media(max-width:760px){
 .gg{padding:20px 16px;margin:40px auto}
 .gg-has-legend svg text{display:none}
 .gg-has-legend svg .gg-pin-n{display:block;font-size:24px}
 .gg-anatomy-art .gg-pin{r:20px}
 .gg-legend{display:block;margin:16px 0 0;padding:0 0 0 24px;font-size:14px;line-height:1.5}
 .gg-legend li{padding:2px 0;margin:0;line-height:1.45}
 ul.gg-legend{list-style:square}
 .gg-legend li span{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-left:8px}
 .gg-chart .gg-tick{font-size:22px}
 .gg-chart .gg-val{font-size:28px}
 .gg-tiles,.gg-three .gg-tiles{grid-template-columns:1fr}
 .gg-tile{border-right:0!important;border-bottom:1px solid var(--ink)!important}
 .gg-tile:last-child{border-bottom:0!important}
 .gg-stat{grid-template-columns:1fr}
 .gg-stat .gg-stat-value{grid-row:auto}
 .gg-chart .gg-pkg{display:none}
 .gg-chart .gg-co{font-size:32px}
}
@media(prefers-reduced-motion:reduce){html.gg-armed .gg,html.gg-armed .gg *{transition:none!important}}