/* builder.css — a custom builder's page (vita-homes.html, Oct 2026), on top of /assets/calculators/vx.css: a photo header,
   section tabs, the street plan with a lot panel beside it, the designed homes, a photo row, what comes standard, the
   builder's home styles. Phone first; on a computer every block shares the page's one column. */

/* ---- the header: a finished home's photo, the facts on it ---- */
.bh{position:relative;min-height:min(74vh,640px);display:flex;align-items:flex-end;isolation:isolate;overflow:hidden;background:#15140E;}
.bh-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
.bh::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.08) 22%,rgba(0,0,0,.5) 46%,rgba(0,0,0,.9) 72%,rgba(0,0,0,.94));}
.bh-in{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 26px;color:#F4F2EB;}
.bh .crumbs{color:#F4F2EB;opacity:.9;}
/* "Back" at the top of the photo, where it sits on every page — the words stay at its foot (Fadi, Oct 11; assets/theme.css .sn-back) */
.bh-top{position:absolute;top:0;left:0;right:0;z-index:1;max-width:var(--maxw);margin:0 auto;padding:16px var(--pad) 0;box-sizing:border-box;}
.bh-top .sn-back{margin:0;}
.bh .eyebrow{color:#E6DCBB;}
body.vx .bh h1{font-weight:300;font-size:clamp(38px,9vw,78px);line-height:1;color:#F4F2EB;}
.bh h1 em{font-style:italic;color:#E6DCBB;}
.bh-facts{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:18px 0 0;padding:0;}
.bh-facts li{display:flex;flex-direction:column;}
@media (max-width:640px){.bh-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;}}
.bh-facts b{font:400 26px/1.1 var(--serif);}
.bh-facts span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.8;}
.bh-sub{margin:14px 0 0;font-size:13px;line-height:1.5;opacity:.86;max-width:70ch;}
.bh-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.vx .bh-cta .btn{flex:0 1 auto;}
.vx .bh-ghost{color:#F4F2EB;border-color:rgba(244,242,235,.45);}
.bh-cap{position:absolute;top:calc(var(--navh) + 6px);right:12px;margin:0;font-size:10.5px;color:#F4F2EB;opacity:.75;text-shadow:0 1px 2px rgba(0,0,0,.6);max-width:58%;text-align:right;}
@media (max-width:640px){.bh-cap{display:none;}}
html:not(.sar-dark) body.vx .bh-in p,html:not(.sar-dark) body.vx .bh-in li,html:not(.sar-dark) body.vx .bh-in span,html:not(.sar-dark) body.vx .bh-in b,html:not(.sar-dark) body.vx .bh h1{color:#F4F2EB!important;}
html:not(.sar-dark) body.vx .bh .eyebrow,html:not(.sar-dark) body.vx .bh h1 em{color:#E6DCBB!important;}
html:not(.sar-dark) body.vx .bh-cap{color:#F4F2EB!important;}
html:not(.sar-dark) body.vx .bh .crumbs a,html:not(.sar-dark) body.vx .bh .crumbs span{color:#F4F2EB!important;}

/* ---- section tabs that stick under the header ---- */
.btabs{position:sticky;top:var(--navh);z-index:30;background:var(--veil);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--line);}
.btabs-in{display:flex;max-width:var(--maxw);margin:0 auto;padding:0 calc(var(--pad) - 10px);overflow-x:auto;scrollbar-width:none;}
/* the tab bar holds still while the page scrolls (Fadi, Oct 12, on his iPhone: "wobbles weirdly and is not smooth"): on a
   touch screen it is solid — a see-through bar with a live blur re-paints on every frame of the scroll and lagged it — and
   its row is a sideways scroller only while its tabs don't fit (.scrolls, measured by the page's script) */
@media (hover:none),(pointer:coarse){.btabs{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;} .btabs:not(.scrolls) .btabs-in{overflow-x:visible;touch-action:pan-y;}}

.btabs-in::-webkit-scrollbar{display:none;}
.btabs a{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:46px;padding:0 10px;border-bottom:2px solid transparent;font-size:13.5px;color:var(--ink3);text-decoration:none;}
.btabs a[aria-current]{color:var(--ink);border-bottom-color:var(--gold);}
@media (max-width:400px){.btabs a{padding:0 7px;font-size:13px;} .btabs-in{padding:0 calc(var(--pad) - 7px);}} /* "Lots" on the column (was 3 px left of it) */
.bld .sec{scroll-margin-top:calc(var(--navh) + 56px);}

/* ---- pick a lot ---- */
.ctabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;}
/* a phone: the plan, then the lot's panel, then the list, one under the other (the panel opens in place under the plan).
   A computer (Oct 25, audit C M4 — "1 Sorel Avenue" picked from the list left the panel 755 px above the screen): the plan and
   the list share the left half, the lot's panel the right half, and the panel sticks under the tab bar as the list scrolls —
   so whichever lot is picked, on the plan or in the list, its answer stands beside it, within the page's one column */
.lots-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);grid-template-areas:"plan" "panel" "list";}
.lots-grid>.plan{grid-area:plan;} .lots-grid>.lot-panel{grid-area:panel;} .lots-grid>.lot-list{grid-area:list;}
@media (min-width:980px){
  .lots-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 24px;align-items:start;grid-template-areas:"plan panel" "list panel";}
  .lots-grid>.lot-panel{position:sticky;top:calc(var(--navh) + 48px + 16px);align-self:start;max-height:calc(100vh - var(--navh) - 48px - 32px);overflow-y:auto;scrollbar-width:thin;}
  .lots-grid>.lot-list{margin-top:0;}
}
.plan{margin:0;padding:12px;border-radius:20px;background:var(--card);border:1px solid var(--line);}
.plan-svg{overflow-x:auto;}
.vx svg.site{display:block;width:100%;height:auto;max-height:620px;stroke:none;}
.site .street{fill:var(--bg2);}
.site .st-name{font:500 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;fill:var(--ink3);}
.site .blk{font:500 10.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;fill:var(--ink3);}
.site .lt{cursor:pointer;outline:none;}
.site .lt .lo{fill:var(--bg2);stroke:var(--olive);stroke-width:1.4;transition:fill .2s;}
:where(html.sar-dark) .site .lt .lo{fill:#24221A;} /* :where — never outranks a status, hover or the chosen lot */
.site .lt.st-design .lo,.site .lt.st-building .lo{fill:color-mix(in srgb,var(--gold) 26%,var(--bg));}
.site .lt.st-notstarted .lo{fill:color-mix(in srgb,#7E95A3 22%,var(--bg));}
.site .lt.st-listed .lo{fill:color-mix(in srgb,var(--ok) 24%,var(--bg));}
.site .lt:hover .lo{fill:color-mix(in srgb,var(--gold) 40%,var(--bg));}
/* chosen or focused: the fill and a ring INSIDE the outline (.ring is the outline clipped to itself, so half its stroke
   shows) — the outline itself never changes, so the chosen lot never stands proud of its neighbours (Oct 23, 2026) */
.site .lt .ring{fill:none;stroke:none;stroke-width:5;pointer-events:none;}
.site .lt[aria-pressed="true"] .lo{fill:var(--fill);}
.site .lt[aria-pressed="true"] .ring{stroke:var(--olive);}
.site .lt[aria-pressed="true"] .dot{fill:var(--fill-ink);} /* a designed home's dot stays seen on the chosen lot, light and dark */
.site .lt[aria-pressed="true"] text{fill:var(--fill-ink);}
.site .lt[aria-pressed="true"] .pk{stroke:var(--fill-ink);}
.site .lt:focus-visible .ring{stroke:var(--gold);}
.site .pk{fill:none;stroke:var(--olive);stroke-width:1;stroke-dasharray:3 3;opacity:.6;}
.site .num{font:400 22px var(--serif);fill:var(--ink);}
.site .num.sm{font-size:14px;}
.site .pkt{font:500 11px var(--sans);fill:var(--ink3);}
.site .dot{fill:var(--gold);}
/* a phone draws the street at 0.6–0.9 of its size: the pockets, block and street names stay 11 px or more (Oct 11 review) */
@media (max-width:979px){.site .pkt,.site .blk,.site .st-name{font-size:14.5px;} .site--row .pkt{font-size:16px;letter-spacing:-.02em;} .site--row .st-name,.site--row .num.sm{font-size:18.5px;}}
.plan figcaption{margin:10px 2px 0;font-size:12px;line-height:1.6;color:var(--ink3);}
.plan .key{display:inline-flex;align-items:center;gap:6px;margin-right:14px;font-size:12.5px;color:var(--ink2);}
/* the key's marks are small lots, filled as the plan fills them, with the plan's dot for a designed home — not boxes that
   read as checkboxes (Oct 11 review) */
.plan .key i{flex:none;width:11px;height:16px;border-radius:1px;border:1.4px solid var(--olive);}
.plan .k-av{background:var(--bg2);} :where(html.sar-dark) .plan .k-av{background:#24221A;}
.plan .k-des{background:color-mix(in srgb,var(--gold) 26%,var(--bg));} .plan .k-ns{background:color-mix(in srgb,#7E95A3 22%,var(--bg));}
.plan .k-dot{background:radial-gradient(circle,var(--gold) 0 2.4px,transparent 2.9px) center/100% 100% no-repeat,color-mix(in srgb,var(--gold) 26%,var(--bg));}
.vx .linkish{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:transparent;color:var(--gold);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.linkish svg{width:15px;height:15px;}
/* "Our original map" ends the caption's last line: its 44 px target no longer makes that line twice as tall */
.vx .plan figcaption .linkish{margin-block:-12px;vertical-align:middle;}
.lot-panel{padding:18px;border-radius:20px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);scroll-margin-top:calc(var(--navh) + 60px);}
.lot-panel h3{font-size:clamp(26px,6vw,34px);line-height:1.1;}
.lp-hint{margin:0;color:var(--ink3);}
.lp-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;}
.lp-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0 0;}
.lp-k.lp-grp{margin:18px 0 -6px;}   /* "The lot · surveyed" / "Price and availability · can change" (review #9, Oct 23) */
.lp-k.lp-grp small{font:inherit;letter-spacing:.06em;text-transform:none;}
.lp-facts div{padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line);}
.lp-facts dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);}
.lp-facts dd{margin:3px 0 0;font:400 18px/1.25 var(--serif);color:var(--ink);}
.lp-facts dd small{display:block;font:400 12px/1.4 var(--sans);color:var(--ink3);}
.lp-fit{display:grid;gap:12px;grid-template-columns:104px minmax(0,1fr);margin-top:14px;align-items:start;}
@media (min-width:560px){.lp-fit{grid-template-columns:140px minmax(0,1fr);gap:14px;}}
.lp-fit .chips{flex-direction:column;align-items:stretch;}
.lp-fit .chip{justify-content:flex-start;text-align:left;min-height:44px;line-height:1.25;padding:6px 12px;}
.lp-svg{display:flex;justify-content:center;padding:6px;border-radius:14px;background:var(--bg);border:1px solid var(--line);}
/* the drawing's words: on a phone the drawing is ~90 px wide and its labels would be 5–6 px, so they move into a key under
   it (assets/vita/footprint.mjs lotKey) at 11.5 px; a computer keeps the labels in the drawing */
.fp-key{display:none;margin:0;font-size:11.5px;line-height:1.35;color:var(--ink3);}
.fp-key span{display:block;margin-top:4px;}
.fp-key .k-pk::before,.fp-key .k-h::before{content:"";display:inline-block;width:9px;height:9px;margin-right:5px;vertical-align:-1px;border-radius:1px;}
.fp-key .k-pk::before{border:1px dashed var(--olive);}
.fp-key .k-h::before{background:var(--fill);opacity:.85;}
.fp-key .k-h.no::before{background:var(--warn);opacity:.7;}
.fp-key .k-no{color:var(--warn);}
.lp-cap{margin:8px 2px 0;}
@media (max-width:979px){.lp-cap{display:block;} .lp-svg .fp-t{display:none;}}
.nw{white-space:nowrap;}
.vx svg.fp{width:100%;max-width:170px;height:auto;stroke:none;}
.fp .fp-lot{fill:color-mix(in srgb,var(--gold) 10%,transparent);stroke:var(--olive);stroke-width:1.4;}
.fp .fp-lot.unk{stroke-dasharray:6 4;}
.fp .fp-pk{fill:none;stroke:var(--olive);stroke-width:1;stroke-dasharray:3 3;}
.fp .fp-h{fill:var(--fill);opacity:.85;}
.fp .fp-h.no{fill:var(--warn);opacity:.7;}
.fp .fp-st{stroke:var(--ink3);stroke-width:1;}
.fp .fp-t{font:500 10px var(--sans);fill:var(--ink3);}
.fp .fp-ht{fill:var(--fill-ink);}
.fp .fp-no{fill:var(--warn);}
.lp-k{margin:0 0 8px;font:500 10.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);}
.lp-ch .chip{font-size:13px;}
.lp-say{margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--ink2);}
.lp-say b{color:var(--ink);font-weight:500;}
.lp-no b{color:var(--warn);}
.lp-money{margin-top:10px;}
.vx .lp-money .linkish{font-size:13px;min-height:44px;text-align:left;}
.lp-money .m-row{align-items:center;}
.lp-money .m-row span small{display:block;font-size:11.5px;color:var(--ink3);}
/* a Vita home listed on the MLS® System: its photo, its list price, whose listing it is */
.lp-list{margin-top:12px;}
.lp-ph{display:block;border-radius:14px;overflow:hidden;background:var(--bg2);aspect-ratio:4/3;}
.lp-ph img{display:block;width:100%;height:100%;object-fit:cover;}
.lp-lf{margin:8px 0 0;font-size:14px;color:var(--ink2);}
.lp-court{margin:4px 0 0;font-size:12px;color:var(--ink3);}
.lp-say a{color:var(--gold);}
.vb-disc{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;line-height:1.6;color:var(--ink3);}
.vb-disc p{margin:0 0 6px;}
.plan .k-ls{background:color-mix(in srgb,var(--ok) 24%,var(--bg));}
.lc-f b small{font-weight:400;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-right:2px;}
.lp-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.lp-a .btn{flex:1 1 170px;}
/* a phone: two buttons side by side only when both labels fit on one line, else each takes the full width — never
   "Ask about this / lot" beside a one-line "Talk to us"; an odd last fact spans the row instead of standing alone */
/* an odd last fact spans the row, on a computer too (Fadi, Oct 11: the lone "Area" tile) */
.lp-facts>div:last-child:nth-child(odd){grid-column:1/-1;}
@media (max-width:979px){.lp-a .btn{flex:1 1 0;min-width:max-content;}
  .lp-tags .tag{line-height:1.35;}}
.lot-list{margin-top:14px;}
.lot-list>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;color:var(--gold);font-size:14px;list-style:none;}
.lot-list>summary::-webkit-details-marker{display:none;}
.lot-list>summary::after{content:"+";font:300 20px/1 var(--sans);}
.lot-list[open]>summary::after{content:"–";}
.lots{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:minmax(0,1fr);}
@media (min-width:700px){.lots{grid-template-columns:repeat(2,minmax(0,1fr));}}   /* two a row; on a computer the list has the left half of the column (above) */
.vx .lotc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card);text-align:left;cursor:pointer;transition:border-color .2s;}
.vx .lotc:hover{border-color:var(--gold);}
.vx .lotc[aria-pressed="true"]{border-color:var(--fill);box-shadow:inset 0 0 0 1px var(--fill);}
.lc-t{display:flex;flex-direction:column;min-width:0;}
.lc-t b{font:400 18px/1.2 var(--serif);color:var(--ink);}
.lc-t span{font-size:12px;color:var(--ink3);}
.lc-f{display:flex;flex-direction:column;align-items:flex-end;font-size:12.5px;color:var(--ink3);}
.lc-f b{font:500 15px/1.2 var(--sans);color:var(--ink);}
.lc-f b.ask{font-weight:400;color:var(--ink3);}
.lc-s{grid-column:1/-1;font-size:12px;color:var(--gold);}

/* ---- the designed homes ---- */
/* a row you swipe on a phone (three cards would be three screens), three side by side on a computer */
/* a phone or a touch screen: a row runs to the screen's edges, its first card on the page's column, so the next card
   clearly peeks (the Rohit pages' rows; before, the row stopped at the gutter and the next card showed ~3 px — Oct 11) */
.bld .rail{margin-inline:calc(-1*var(--pad));padding-inline:var(--pad);scroll-padding-inline:var(--pad);}
@media (min-width:1100px) and (hover:hover) and (pointer:fine){.bld .rail{margin-inline:0;padding-inline:0;scroll-padding-inline:0;}}
.des-list{gap:14px;align-items:stretch;}
.des-list>.des{width:min(82vw,420px);}
@media (min-width:1100px){.des-list.rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;overflow:visible;padding:0;margin-inline:0;} .des-list>.des{width:auto;}}
.des{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--card);border:1px solid var(--line);}
.des-m{position:relative;background:var(--bg2);}
.vx .des-img{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;}
.des-img img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 40%;}
.des-fp{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;padding:10px;}
.des-fp svg.fp{max-width:150px;max-height:100%;}
/* Safari doesn't hold the drawing to the box's height (max-height:100% of a box sized by aspect-ratio), so the box grew
   to 331 px beside the 229–269 px renderings and left blank gaps in the other cards (Oct 11, measured in WebKit): the
   drawing is placed in the box instead — the same size and place as before in Chrome */
.des-fp{position:relative;}
.vx .des-fp svg.fp{position:absolute;top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px);max-width:none;max-height:none;}
.illu{position:absolute;left:10px;bottom:10px;padding:5px 9px;border-radius:999px;background:rgba(14,13,9,.7);color:#F4F2EB;font:500 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;}
.des-b{display:flex;flex-direction:column;gap:8px;padding:16px 16px 18px;flex:1;}
.des-b .eyebrow{margin:0;}
.des-b h3{font-size:clamp(21px,5vw,25px);line-height:1.15;}
.des-f{margin:0;font-size:14px;color:var(--ink2);}
.des-f b{color:var(--ink);font-weight:500;}
.des-h{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px;}
.des-h li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink2);}
.des-h svg{color:var(--ok);width:16px;height:16px;margin-top:2px;}
.des-r>summary{min-height:40px;display:inline-flex;align-items:center;cursor:pointer;color:var(--gold);font-size:13.5px;}
.des-r p{margin:4px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink2);}
.des-p{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);}
.des-p .est{display:flex;flex-direction:column;}
.des-p .est span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);}
.des-p .est b{font:400 28px/1.1 var(--serif);color:var(--ink);}
.des-p .mo{font-size:13px;color:var(--ink3);white-space:nowrap;}
.des-p .mo b{color:var(--gold);font-weight:500;}
.des-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.des-a .btn{flex:1 1 150px;min-height:46px;padding:0 14px;}
/* the swiped cards: one full-width button a row, each label on one line (was "Ask for the full / plans" beside a
   one-line "See it on the lot"); the footprint drawing (8 Sorel) on the left half, its words beside it at 11.5 px —
   in the drawing they were 7–8 px */
@media (max-width:1099px),(pointer:coarse){.des-r>summary{min-height:44px;}}
@media (max-width:1099px){.des-a .btn{flex-basis:100%;}
  .vx .des-fp svg.fp{width:calc(50% - 15px);} .des-fp .fp-t{display:none;}
  .des-cap{display:block;position:absolute;left:50%;right:14px;top:50%;transform:translateY(-50%);}}

/* ---- photos ---- */
.gal{gap:12px;}
.vx .gal .ph{position:relative;width:min(78vw,420px);padding:0;border:0;border-radius:16px;overflow:hidden;cursor:zoom-in;background:var(--bg2);}
.gal .ph img{width:100%;aspect-ratio:3/2;object-fit:cover;}
.gal .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font-size:12px;line-height:1.4;color:#F4F2EB;text-align:left;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));}
@media (min-width:1100px) and (hover:hover) and (pointer:fine){.vx .gal .ph{width:calc((100% - 2*12px)/3);}}
.rail-wrap .rail-nav.prev{left:6px;} .rail-wrap .rail-nav.next{right:6px;}

/* ---- what comes standard ---- */
.spec-g{display:grid;gap:0 24px;grid-template-columns:minmax(0,1fr);}
@media (min-width:760px){.spec-g{grid-template-columns:repeat(2,minmax(0,1fr));}}
.spec-d{border-bottom:1px solid var(--line);}
.spec-d>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;cursor:pointer;list-style:none;position:relative;padding-right:30px;}
.spec-d>summary::-webkit-details-marker{display:none;}
.spec-d>summary::after{content:"+";position:absolute;right:2px;top:50%;margin-top:-13px;font:300 24px/1 var(--sans);color:var(--gold);transition:transform .3s var(--ease);}
.spec-d[open]>summary::after{transform:rotate(45deg);}
.spec-d>summary h3{font-size:20px;}
.spec-d>summary span{font-size:12.5px;color:var(--ink3);}
.spec-d ul{list-style:none;margin:0 0 12px;padding:0;}
.spec-d li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:14px;color:var(--ink2);}
.spec-d li svg{color:var(--ok);margin-top:3px;width:16px;height:16px;}

/* ---- home styles ---- */
.sty-f{margin:0 0 14px;}
.sty-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:860px){.sty-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}}
@media (min-width:1300px){.sty-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}
.sty{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line);}
.sty[hidden]{display:none;}
.sty-m{position:relative;background:#1A1912;}
.sty-m img{width:100%;aspect-ratio:5/3;object-fit:contain;padding:8px;}
.sty-b{display:flex;flex-direction:column;gap:6px;padding:12px;flex:1;}
.sty-b h3{font-size:19px;line-height:1.15;}
.sty-b p{margin:0;font-size:12.5px;color:var(--ink3);}
.sty .bar{display:block;height:5px;margin-top:6px;border-radius:999px;background:var(--line);overflow:hidden;}
.sty .bar i{display:block;height:100%;width:var(--w);background:var(--olive);border-radius:inherit;}
.sty-a{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:6px;}
.vx .sty-a .btn{min-height:44px;padding:0 10px;font-size:11px;letter-spacing:.1em;}
/* two cards a row (a phone): the size sits beside its bar (it read as a loading bar on its own), and a one-line name
   leaves its space under the name, so the specs, bars and buttons of a row line up (Oct 11 review: Mirage beside
   "Venetian — Dog Wash" had a blank gap inside) */
@media (max-width:859px){
  .sty-s{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px 8px;}
  .sty-s .bb{grid-column:1/-1;} .sty-s .sep{display:none;} .sty .sty-s .bar{margin:0;}
  body.vx .sty-b h3{margin-bottom:auto;} .sty-a{margin-top:0;}
}

/* ---- the picture viewer ---- */
dialog.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#060504;color:#F4F2EB;}
dialog.lb[open]{display:flex;flex-direction:column;}
dialog.lb::backdrop{background:#060504;}
.lb-top{display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;}
.lb-n{flex:1;font-size:13px;opacity:.8;}
.vx .lb .x{border-color:rgba(255,255,255,.3);color:#F4F2EB;}
.lb-track{flex:1;min-height:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.lb-track::-webkit-scrollbar{display:none;}
.lb-s{flex:0 0 100%;height:100%;overflow:auto;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;touch-action:pan-x pan-y pinch-zoom;}
.lb-s img{max-width:100%;max-height:100%;object-fit:contain;}
.lb-cap{margin:0;padding:10px 16px calc(14px + env(safe-area-inset-bottom));font-size:12.5px;opacity:.85;text-align:center;}
.seg{border:0;margin:0 0 18px;padding:0;}
.seg legend{padding:0;margin:0 0 10px;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);}