/* Lights Back On: visual guide components (SEO pages). Loads after tokens.css + style.css.
   Palette pairs only from brand-brief.md (Ink/Lamp/Daylight/Dim). No blue, no shadows, no gradients. */
.vg .lede{font-size:1.2rem;line-height:1.5;margin:0 0 var(--s4)}
.vg .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:var(--s3);margin:var(--s4) 0}
.vg .tile{background:var(--daylight);border-radius:var(--r-field);padding:var(--s4)}
.vg .tile b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.1rem);line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.vg .tile span{display:block;margin-top:6px;font-size:1rem;line-height:1.35}
.vg .tile small{display:block;margin-top:6px;font-size:var(--small);color:var(--dim)}
.vg .tile.ink{background:var(--ink);color:var(--daylight)}
.vg .tile.ink small,.vg .tile.ink a{color:var(--ash)}
.vg figure.diagram{margin:var(--s4) 0;background:var(--daylight);border-radius:var(--r-card);padding:var(--s4)}
.vg figure.diagram svg{display:block;width:100%;height:auto}
.vg figure.diagram figcaption{font-size:var(--small);color:var(--dim);margin-top:var(--s2)}
.vg .fit{display:grid;grid-template-columns:1fr;gap:var(--s3);margin:var(--s4) 0}
@media(min-width:640px){.vg .fit{grid-template-columns:1fr 1fr}}
.vg .fit>div{border-radius:var(--r-card);padding:var(--s4)}
.vg .fit .yes{background:var(--daylight)}
.vg .fit .no{background:transparent;border:var(--line) solid var(--ink)}
.vg .fit h3{margin:0 0 var(--s2);font-size:1.15rem}
.vg .fit ul{list-style:none;padding:0;margin:0}
.vg .fit li{position:relative;padding-left:1.6rem;margin:0 0 8px}
.vg .fit .yes li::before{content:"";position:absolute;left:0;top:.35em;width:1rem;height:1rem;border-radius:50%;background:var(--ink)}
.vg .fit .yes li::after{content:"";position:absolute;left:.3rem;top:.52em;width:.38rem;height:.22rem;border-left:2px solid var(--lamp);border-bottom:2px solid var(--lamp);transform:rotate(-45deg)}
.vg .fit .no li::before{content:"";position:absolute;left:0;top:.82em;width:.9rem;height:2px;background:var(--ink)}
.vg ol.steps{list-style:none;counter-reset:st;padding:0;margin:var(--s4) 0;display:grid;gap:var(--s2)}
.vg ol.steps li{counter-increment:st;position:relative;background:var(--daylight);border-radius:var(--r-field);padding:var(--s3) var(--s3) var(--s3) 3.6rem;min-height:3rem}
.vg ol.steps li::before{content:counter(st);position:absolute;left:var(--s3);top:50%;transform:translateY(-50%);width:2.1rem;height:2.1rem;border-radius:50%;background:var(--ink);color:var(--lamp);font:700 1.05rem/2.1rem var(--font-body);text-align:center}
.vg ol.steps li b{display:block}
.vg .bars{margin:var(--s4) 0;display:grid;gap:10px}
.vg .bar{display:grid;grid-template-columns:8.5rem 1fr 4.5rem;align-items:center;gap:var(--s2);font-size:1rem}
.vg .bar i{display:block;height:14px;border-radius:7px;background:var(--lamp-deep);position:relative;overflow:hidden}
.vg .bar i em{position:absolute;inset:0 auto 0 0;background:var(--ink);border-radius:7px}
.vg .bar b{font-variant-numeric:tabular-nums;text-align:right}
@media(max-width:420px){.vg .bar{grid-template-columns:6.5rem 1fr 3.8rem;font-size:.92rem}}
.vg .compare{width:100%}
.vg .compare th:first-child{width:34%}
.vg details{background:var(--daylight);border-radius:var(--r-field);padding:var(--s3) var(--s4);margin:var(--s3) 0}
.vg details summary{cursor:pointer;font-weight:700;min-height:var(--tap,48px);display:flex;align-items:center}
.vg details[open] summary{margin-bottom:var(--s2)}
.vg .cite{font-size:var(--small);color:var(--dim)}
.vg .related{margin:var(--s5) 0;padding:0;list-style:none;display:grid;gap:8px}
.vg .related a{display:flex;align-items:center;min-height:48px;padding:0 var(--s3);background:var(--daylight);border-radius:var(--r-field);color:var(--ink);text-decoration:none;font-weight:500}
.vg .related a::after{content:"\203A";margin-left:auto;font-size:1.4rem}
.vg .cta .btn{min-height:52px}
.vg .cta small{display:block;margin-top:var(--s2);color:var(--ash)}
.vg .note-small{font-size:var(--small);color:var(--dim)}
.related-guides{margin:var(--s5) 0}
.related-guides ul{list-style:none;padding:0;display:grid;gap:8px}
.related-guides a{display:flex;align-items:center;min-height:48px;padding:0 var(--s3);background:var(--daylight);border-radius:var(--r-field);color:var(--ink);text-decoration:none}
.err404{min-height:60vh;display:grid;place-content:center;text-align:center;padding:var(--s6) var(--s3)}
.vg .flow{list-style:none;padding:0;margin:var(--s4) 0;display:grid;grid-template-columns:1fr;gap:var(--s2)}
@media(min-width:640px){.vg .flow{grid-template-columns:repeat(var(--n,4),1fr)}}
.vg .flow li{background:var(--daylight);border-radius:var(--r-field);padding:var(--s3);display:flex;gap:var(--s3);align-items:center;position:relative}
@media(min-width:640px){.vg .flow li{flex-direction:column;text-align:center;align-items:center}}
.vg .flow svg{flex:0 0 auto;width:56px;height:56px}
.vg .flow b{display:block;line-height:1.2}
.vg .flow span{display:block;font-size:.95rem;color:var(--dim);line-height:1.3;margin-top:2px}
.vg .flow li:not(:last-child)::after{content:"";position:absolute;background:var(--ink)}
@media(max-width:639px){.vg .flow li:not(:last-child)::after{left:calc(var(--s3) + 27px);bottom:-10px;width:2px;height:10px}}
@media(min-width:640px){.vg .flow li:not(:last-child)::after{right:-10px;top:50%;width:10px;height:2px}}
.vg .cards4{display:grid;grid-template-columns:1fr;gap:var(--s3);margin:var(--s4) 0}
@media(min-width:640px){.vg .cards4{grid-template-columns:1fr 1fr}}
.vg .cards4>div{background:var(--daylight);border-radius:var(--r-card);padding:var(--s4)}
.vg .cards4 h3{margin:0 0 6px;font-size:1.2rem}
.vg .cards4 .price{text-align:left;display:block;font-weight:700;font-variant-numeric:tabular-nums;margin:0 0 var(--s2)}
.vg .cards4 ul{list-style:none;padding:0;margin:0;font-size:1rem}
.vg .cards4 li{margin:0 0 6px;padding-left:1.4rem;position:relative}
.vg .cards4 li.p::before{content:"+";position:absolute;left:0;font-weight:700}
.vg .cards4 li.m::before{content:"\2013";position:absolute;left:0;font-weight:700}
.vg .medical{border:var(--line) solid var(--ink);border-radius:var(--r-field);padding:var(--s3) var(--s4);margin:var(--s4) 0}
.vg .hub h2{margin-top:var(--s5)}