/* ============================================================
   MICHIGAN METAL ROOFING — site styles
   Deliberately plain: navy + steel from the logo, Inter only,
   generous whitespace, no textures, no display fonts, no red.
   ============================================================ */
:root {
  --navy: #0d1b2a;
  --navy-soft: #1b2d40;
  --steel: #5b6b78;
  --silver: #aab2ba;
  --line: #dde1e5;
  --bg: #ffffff;
  --bg-alt: #f5f6f8;
  --text: #1c2732;
  --text-soft: #55616c;
  --max: 1080px;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: Inter, -apple-system, "Segoe UI", Arial, sans-serif; color: var(--text);
       background: var(--bg); line-height: 1.6; font-size: 16.5px; }
img { max-width: 100%; display: block; }
a { color: var(--navy); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* header */
.top { border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 50; }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 12px; }
.top .logo img { height: 60px; width: auto; }   /* cropped art: ~1.6x larger than the old padded file */
.nav { display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; flex: 1; justify-content: center; }
.nav a { text-decoration: none; color: var(--text-soft); font-weight: 600; font-size: 0.95rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--navy); }


/* buttons */
.btn { display: inline-block; padding: 0.75em 1.5em; border-radius: 4px; text-decoration: none;
       font-weight: 600; font-size: 0.98rem; border: 1.5px solid var(--navy); }
.btn-solid { background: var(--navy); color: #fff; }
.btn-solid:hover { background: var(--navy-soft); }
.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--bg-alt); }

/* hero */
.hero { background: var(--navy); color: #fff; padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
/* homepage hero: real roof photo under a navy scrim, darker on the text side */
.hero.photo {
  background:
    linear-gradient(100deg, rgba(13,27,42,0.94) 0%, rgba(13,27,42,0.82) 42%, rgba(13,27,42,0.45) 78%, rgba(13,27,42,0.30) 100%),
    url("img/hero.jpg") center 62% / cover no-repeat;
  padding: clamp(4rem, 2.5rem + 6vw, 7.5rem) 0;
  min-height: min(78vh, 780px);
  display: flex;
  align-items: center;
  border-bottom: 4px solid var(--navy);
}
.hero.photo .wrap { width: 100%; }
.hero.photo h1 { text-shadow: 0 1px 12px rgba(6, 13, 21, 0.5); }
.hero.photo p { color: #dae2e9; text-shadow: 0 1px 8px rgba(6, 13, 21, 0.5); }
@media (max-width: 700px) {
  .hero.photo { background:
    linear-gradient(rgba(13,27,42,0.88), rgba(13,27,42,0.78)),
    url("img/hero.jpg") center / cover no-repeat; }
}
.hero-logo { height: clamp(84px, 60px + 5vw, 132px); width: auto; margin-bottom: 1.4rem;
             filter: drop-shadow(0 1px 10px rgba(6, 13, 21, 0.45)); }
.hero h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); line-height: 1.15; font-weight: 800;
           letter-spacing: -0.015em; max-width: 21ch; }
.hero p { margin-top: 1rem; max-width: 58ch; color: #c9d2da; font-size: 1.05rem; }
.hero .cta-row { margin-top: 1.8rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.hero .btn-solid { background: #fff; color: var(--navy); border-color: #fff; }
.hero .btn-solid:hover { background: #e8ebee; }
.hero .btn-ghost { color: #fff; border-color: #6b7a88; }
.hero .btn-ghost:hover { background: rgba(255,255,255,0.06); }

/* sections */
/* tightened 30% on 10/31 (Keaton): was clamp(2.6rem, 1.8rem + 3vw, 4.2rem), ~141px between sections on desktop */
section { padding: clamp(1.82rem, 1.26rem + 2.1vw, 2.94rem) 0; }
section > .wrap > :first-child { margin-top: 0; }   /* the section padding is the gap; no stacked margin on top */
section.alt { background: var(--bg-alt); }
.kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); }
h2, section h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.01em;
     margin-top: 0.5rem; color: var(--navy); }
.sec-head p, p.sec-head { margin-top: 0.8rem; color: var(--text-soft); max-width: 62ch; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.card { border: 1px solid var(--line); border-radius: 6px; padding: 1.6rem; background: #fff; }
.card h3 { color: var(--navy); font-size: 1.15rem; margin-bottom: 0.5rem; }
.card p { color: var(--text-soft); font-size: 0.97rem; }
.card .btn { margin-top: 1.1rem; }
.card ul { margin: 0.8rem 0 0 1.1rem; color: var(--text-soft); font-size: 0.95rem; }
.card li { margin-bottom: 0.35rem; }

/* fact strip */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border: 1px solid var(--line);
         border-radius: 6px; overflow: hidden; margin-top: 2rem; background: #fff; }
.strip > div { padding: 1.1rem 1.3rem; border-left: 1px solid var(--line); }
.strip > div:first-child { border-left: 0; }
.strip b { color: var(--navy); display: block; font-size: 1.02rem; }
.strip span { color: var(--text-soft); font-size: 0.88rem; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px;
         background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-top: 2rem; }
.step { background: #fff; padding: 1.3rem 1.2rem; }
.step .n { font-size: 0.78rem; font-weight: 700; color: var(--steel); letter-spacing: 0.08em; }
.step h4 { color: var(--navy); margin: 0.4rem 0 0.3rem; font-size: 1rem; }
.step p { color: var(--text-soft); font-size: 0.9rem; }

/* photo row */
.photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 2rem; }
.photos img { border-radius: 6px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* gallery grid */
.gal-filters { display: flex; gap: 0.6rem; margin-top: 1.6rem; flex-wrap: wrap; }
.gal-filters button { border: 1.5px solid var(--line); background: #fff; border-radius: 4px; padding: 0.5em 1.1em;
                      font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.gal-filters button.on { border-color: var(--navy); color: var(--navy); }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.gal-grid img { border-radius: 5px; aspect-ratio: 4/3; object-fit: cover; width: 100%; cursor: pointer; }

/* lightbox */
.lb { position: fixed; inset: 0; background: rgba(10, 18, 28, 0.92); display: none;
      align-items: center; justify-content: center; z-index: 100; padding: 4vmin; }
.lb.open { display: flex; }
.lb img { max-width: 92vw; max-height: 88vh; border-radius: 4px; }

/* forms */
form.quote { max-width: 640px; margin-top: 2rem; display: grid; gap: 0.9rem; }
form.quote label { font-weight: 600; font-size: 0.92rem; color: var(--navy); display: block; margin-bottom: 0.25rem; }
form.quote input, form.quote select, form.quote textarea {
  width: 100%; padding: 0.65em 0.8em; border: 1.5px solid var(--line); border-radius: 4px;
  font: inherit; font-size: 0.97rem; background: #fff; }
form.quote input:focus, form.quote select:focus, form.quote textarea:focus { outline: 2px solid var(--steel); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } }

/* placeholder contact info — obvious on purpose, remove class when real info lands */
.tbd { background: #fff8e0; outline: 1.5px dashed #d0a900; padding: 0 0.3em; border-radius: 3px; white-space: nowrap; }

/* footer */
footer { background: var(--navy); color: #b9c3cd; margin-top: 2rem; padding: 2.6rem 0 2rem; font-size: 0.93rem; }
footer .foot-inner { display: grid; gap: 1.6rem; grid-template-columns: 1fr auto; align-items: start; }
@media (max-width: 700px) { footer .foot-inner { grid-template-columns: 1fr; } }
footer img { height: 70px; width: auto; margin-bottom: 1rem; }
footer a { color: #d7dee5; }
footer .links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
footer .fine { margin-top: 1.6rem; font-size: 0.8rem; color: #7d8b98; }


/* top-right contact: phone + button on every page */
.top-contact { display: flex; align-items: center; gap: 0.9rem; flex: none; }
.top-contact .phone { color: var(--navy); font-weight: 700; text-decoration: none; white-space: nowrap; }
.top-contact .phone:hover { text-decoration: underline; }
.top-contact .btn { padding: 0.6em 1.3em; }
@media (max-width: 1100px) {
  .top-inner { display: grid; grid-template-columns: auto 1fr; row-gap: 0.4rem; }
  .top-contact { grid-row: 1; grid-column: 2; justify-self: end; }
  .nav { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto;
         gap: 1.2rem; padding-bottom: 4px; }
  .nav a { white-space: nowrap; }
}
@media (max-width: 520px) {
  .top .logo img { height: 46px; }
  .top-contact { gap: 0.6rem; }
  .top-contact .phone { font-size: 0.9rem; }
  .top-contact .btn { padding: 0.5em 0.9em; font-size: 0.9rem; }
}

/* clickable cards */
a.card.link { text-decoration: none; display: block; transition: border-color .15s; }
a.card.link:hover { border-color: var(--navy); }
.card .more { display: inline-block; margin-top: 1rem; font-weight: 600; color: var(--navy); font-size: 0.95rem; }

/* product cards */
.card.prod { padding: 0; overflow: hidden; }
.card.prod > img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.card.prod h3, .card.prod > p, .card.prod dl { margin-left: 1.4rem; margin-right: 1.4rem; }
.card.prod h3 { margin-top: 1.2rem; }
.card.prod dl { margin-bottom: 1.4rem; }
.card.prod.wide { display: grid; grid-template-columns: 1fr 1fr; grid-column: 1 / -1; }
.card.prod.wide > img { height: 100%; aspect-ratio: auto; }
.card.prod.wide > div { padding: 0 0 0.2rem; }
@media (max-width: 700px) { .card.prod.wide { grid-template-columns: 1fr; } .card.prod.wide > img { aspect-ratio: 16/10; } }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin-top: 1rem; padding-top: 0.9rem;
         border-top: 1px solid var(--line); font-size: 0.92rem; }
.specs dt { color: var(--steel); font-weight: 600; }
.specs dd { color: var(--text); margin: 0; }

/* downloads */
.docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.doc { display: flex; gap: 1rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 6px; background: #fff;
       padding: 1.1rem 1.2rem; text-decoration: none; transition: border-color .15s; }
.doc:hover { border-color: var(--navy); }
.doc .ico { flex: none; background: var(--navy); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
            border-radius: 4px; padding: 0.9em 0.6em; }
.doc b { display: block; color: var(--navy); }
.doc em { display: block; font-style: normal; color: var(--text-soft); font-size: 0.9rem; margin-top: 0.15rem; }
.doc small { display: block; color: var(--steel); font-size: 0.8rem; margin-top: 0.35rem; }

/* warranty cards */
.card.warr .big { display: block; font-size: 2.6rem; font-weight: 800; color: var(--navy); line-height: 1; margin-bottom: 0.6rem; }
.card.warr .big small { font-size: 0.8rem; letter-spacing: 0.12em; color: var(--steel); margin-left: 0.4rem; }
.card.warr .meta { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--steel); }
.note { margin-top: 1.6rem; color: var(--text-soft); font-size: 0.92rem; max-width: 70ch; }

/* colors */
.gauge-bar { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: 0.9rem 0; color: var(--text-soft); font-size: 0.95rem; }
.gauge-bar b { color: var(--navy); }
.tier { margin-top: 2.4rem; }
.tier:first-child { margin-top: 0; }
.tier h3 { color: var(--navy); font-size: 1.25rem; border-bottom: 1px solid var(--line); padding-bottom: 0.5rem; }
.tier h3 small { font-size: 0.85rem; font-weight: 400; color: var(--steel); margin-left: 0.7rem; }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 1.1rem 0.9rem; margin-top: 1rem; }
/* buttons center their content vertically - pin to the top so chips line up when labels wrap */
.sw { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font: inherit; display: flex; flex-direction: column; justify-content: flex-start; align-self: start; }
.sw img, .sw .chip { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; border: 1px solid rgba(0,0,0,.1); }
.sw:hover img, .sw:hover .chip { outline: 2px solid var(--navy); outline-offset: 2px; }
.sw span { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text); margin-top: 0.35rem; }
.sw .dia { display: inline; color: var(--steel); font-size: 0.7rem; margin-left: 0.3rem; }
.sw small { display: block; font-size: 0.75rem; font-weight: 400; color: var(--steel); margin-top: 0.1rem; }
.sw-flat { cursor: default; }
.sw-flat:hover .chip { outline: 0; }
.pvdf-p { color: var(--text-soft); font-size: 0.95rem; margin-top: 0.7rem; max-width: 70ch; }
.pvdf-h { color: var(--steel); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1.4rem; }

/* sign-up checkboxes */
fieldset.checks { border: 0; padding: 0; display: flex; gap: 1.4rem; flex-wrap: wrap; }
fieldset.checks legend { font-weight: 600; font-size: 0.92rem; color: var(--navy); margin-bottom: 0.4rem; }
form.quote fieldset.checks label { display: flex; align-items: center; gap: 0.45rem; font-weight: 400; color: var(--text); margin: 0; }
form.quote fieldset.checks input { width: auto; }

footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

section[id], .tier[id] { scroll-margin-top: 100px; }
@media (max-width: 1100px) { section[id], .tier[id] { scroll-margin-top: 130px; } }

/* ============================================================
   2026-09-24 build-out: profile explorer, brochure cards,
   warranty badges, footnotes
   ============================================================ */

/* profile explorer — clickable list left, detail panel right */
.pex { display: grid; grid-template-columns: 290px 1fr; gap: 1.5rem; margin-top: 2rem; align-items: start; }
.plist { display: flex; flex-direction: column; gap: 8px; }
.plist button { text-align: left; font: inherit; font-weight: 700; color: var(--text-soft); background: #fff;
  border: 1px solid var(--line); border-radius: 6px; padding: 0.95rem 1.15rem; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s; }
.plist button small { display: block; font-weight: 400; font-size: 0.82rem; color: var(--steel); margin-top: 2px; }
.plist button:hover { border-color: var(--navy); color: var(--navy); }
.plist button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.plist button.on small { color: #b9c3cd; }
.pdetail { border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; }
.pdetail .ph { aspect-ratio: 16 / 7; background: var(--bg-alt); display: flex; align-items: center;
  justify-content: center; border-bottom: 1px solid var(--line); padding: 1.2rem; }
.pdetail .ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.ph-tbd { border: 2px dashed var(--silver); color: var(--steel); padding: 1.1rem 1.6rem; border-radius: 6px;
  font-size: 0.9rem; font-weight: 600; text-align: center; max-width: 46ch; line-height: 1.45; }
.pdetail .pd-body { padding: 1.4rem 1.6rem 1.6rem; }
.pdetail .pd-body h3 { color: var(--navy); font-size: 1.3rem; margin-bottom: 0.4rem; }
.pdetail .pd-body > p { color: var(--text-soft); max-width: 64ch; }
@media (max-width: 860px) {
  .pex { grid-template-columns: 1fr; }
  .plist { flex-direction: row; flex-wrap: wrap; }
  .plist button { flex: 1 1 150px; }
}

/* brochures — large cover cards, Lifetime-style */
.bro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.4rem; margin-top: 2rem; }
.bro { border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden;
  display: flex; flex-direction: column; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.bro:hover { border-color: var(--navy); box-shadow: 0 6px 18px rgba(13, 27, 42, 0.10); }
.bro .cover { aspect-ratio: 8.5 / 11; background: var(--bg-alt); display: flex; align-items: center;
  justify-content: center; border-bottom: 1px solid var(--line); overflow: hidden; }
.bro .cover img { width: 100%; height: 100%; object-fit: cover; }
.bro .cover .ph-tbd { margin: 1rem; }
.bro .bro-body { padding: 1.1rem 1.2rem 1.3rem; text-align: center; display: flex; flex-direction: column;
  gap: 0.3rem; align-items: center; flex: 1; }
.bro b { color: var(--navy); font-size: 1.02rem; }
.bro em { font-style: normal; color: var(--text-soft); font-size: 0.88rem; margin-bottom: 0.45rem; }
.bro .btn { margin-top: auto; padding: 0.55em 1.4em; font-size: 0.92rem; }
.bro.soon { opacity: 0.85; }
.soon-tag { display: inline-block; background: var(--bg-alt); border: 1px solid var(--line); color: var(--steel);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 3px; padding: 0.35em 0.9em; margin-top: auto; }

/* ------------------------------------------------------------
   9/24: Platinum-style bottom — CTA band + 4-column footer
   ------------------------------------------------------------ */
.cta-band { background: var(--steel); color: #fff; padding: 1.7rem 0; }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.cta-band b { display: block; font-size: 1.28rem; font-weight: 800; letter-spacing: -0.01em; }
.cta-band p { color: #e6eaee; font-size: 0.96rem; margin-top: 0.3rem; max-width: 62ch; }
.cta-band .btn { background: #fff; color: var(--navy); border-color: #fff; flex: none; white-space: nowrap; }
.cta-band .btn:hover { background: #e8ebee; }

footer { margin-top: 0; }
.cta-band + footer { margin-top: 0; }
footer .foot-grid { display: grid; grid-template-columns: 1.5fr 0.75fr 1.2fr 1fr; gap: 2.4rem; align-items: start; }
footer .fhead { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 0.9rem; }
footer .fblurb { font-size: 0.92rem; max-width: 40ch; }
footer .flinks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
footer .flinks a::before { content: "\203A\00a0\00a0"; color: var(--silver); font-weight: 700; }
footer .fmeta p { margin-bottom: 0.5rem; font-size: 0.92rem; }
footer .fmeta b { color: #fff; font-weight: 700; }
footer .fbar { border-top: 1px solid #24374b; margin-top: 2.4rem; padding-top: 1.1rem; text-align: center; font-size: 0.88rem; }
footer .fine { border-top: 1px solid #24374b; margin-top: 1.1rem; padding-top: 1rem; display: flex;
  justify-content: space-between; gap: 0.6rem 1.5rem; flex-wrap: wrap; }
@media (max-width: 940px) { footer .foot-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem; } }
@media (max-width: 560px) { footer .foot-grid { grid-template-columns: 1fr; } }

/* PVDF color-name chips (24ga chart — swatch photos pending) */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }
.chips span { border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 0.5em 1em;
  font-size: 0.9rem; font-weight: 600; color: var(--text); }

/* warranty badges */
.badges { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.6rem; align-items: center; }
.badges img, .badges svg { height: 118px; width: auto; }
.card.warr .badge { height: 96px; width: 96px; margin-bottom: 0.9rem; }

/* warranty detail rows */
.wdetail { margin-top: 1.2rem; border-top: 1px solid var(--line); }
.wdetail details { border-bottom: 1px solid var(--line); }
.wdetail summary { cursor: pointer; font-weight: 600; color: var(--navy); padding: 0.85rem 0.2rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.wdetail summary::-webkit-details-marker { display: none; }
.wdetail summary::after { content: "+"; color: var(--steel); font-weight: 700; font-size: 1.1rem; }
.wdetail details[open] summary::after { content: "\2212"; }
.wdetail .dbody { padding: 0 0.2rem 1rem; color: var(--text-soft); font-size: 0.95rem; max-width: 72ch; }
.wdetail .dbody ul { margin: 0.3rem 0 0 1.1rem; }
.wdetail .dbody li { margin-bottom: 0.3rem; }

/* footnote */
.fn { font-size: 0.85rem; color: var(--text-soft); margin-top: 1.2rem; }

/* ============================================================
   2026-10-31 See it on a roof (roof.html)
   ============================================================ */
.hero-viz { padding: clamp(2rem, 1.5rem + 2vw, 3.2rem) 0; }
.viz-sec { padding-top: 1.6rem; }
.viz-stage { position: relative; border-radius: 6px; overflow: hidden; background: var(--bg-alt); box-shadow: 0 6px 24px rgba(13, 27, 42, 0.12); }
.viz-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 819; }
.viz-tag { position: absolute; left: 0.8rem; top: 0.8rem; background: rgba(13, 27, 42, 0.72); color: #fff; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.3rem 0.6rem; border-radius: 3px; }
.viz-orig { position: absolute; right: 0.8rem; top: 0.8rem; background: #fff; color: var(--navy); border: 1px solid var(--line); font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.35rem 0.75rem; border-radius: 3px; cursor: pointer; }
.viz-orig[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.viz-now { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0 0.4rem; font-size: 1.1rem; color: var(--navy); }
.viz-now span:last-child { color: var(--steel); font-size: 0.9rem; }
.viz-dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex: none; }
.vc-group { margin-top: 1.4rem; }
.vc-group h3 { color: var(--navy); font-size: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 0.4rem; }
.vc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0.8rem 0.7rem; margin-top: 0.8rem; }
.vc { border: 0; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; align-self: start; }
.vc img, .vc i { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; border: 1px solid rgba(0,0,0,.1); }
.vc span { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text); margin-top: 0.3rem; line-height: 1.25; }
.vc .dia { display: inline; color: var(--steel); font-size: 0.65rem; margin-left: 0.25rem; }
.vc small { display: block; font-size: 0.7rem; font-weight: 400; color: var(--steel); margin-top: 0.05rem; }
.vc:hover img, .vc:hover i { outline: 2px solid var(--steel); outline-offset: 2px; }
.vc[aria-pressed="true"] img, .vc[aria-pressed="true"] i { outline: 3px solid var(--navy); outline-offset: 2px; }
.viz-sec .cta-row { margin-top: 1.4rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.lb-go { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); background: #fff; color: var(--navy); font-weight: 700; padding: 0.7rem 1.2rem; border-radius: 4px; text-decoration: none; white-space: nowrap; }
@media (max-width: 600px) { .vc-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); } .viz-tag, .viz-orig { font-size: 0.7rem; } }