/* 5680 pass 7: hero video loop + "Watch the full video", video tile and lightbox video, showings card,
   costs and coverage rows, monthly total breakdown. */

/* ===== Hero: muted loop over the poster; both open with the CSS iris ===== */
.hero-vid{display:block;opacity:0;transition:opacity .8s var(--ease)}
html.has-vid .hero-vid{opacity:1}
html.vid-off .hero-vid{display:none}
html.js.hero-css .hero-vid{animation:iris 1.4s var(--ease) forwards}
.hero-media{cursor:pointer}
.hero-play .hp-ic{width:22px;height:22px}
.hero-play .hp-ring{fill:none;stroke:var(--paper);stroke-width:1.5}
.hero-play .hp-tri{fill:var(--acid);stroke:none}
.hero-play:hover .hp-ring{stroke:var(--acid)}
.hero-play .snd-t{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.hero-ns{position:absolute;z-index:3;left:var(--pad);bottom:24px;font-size:14px}
.hero-ns a{color:var(--paper)}

/* ===== Gallery: video tile (first, wide 16:9) ===== */
.gv .gt::after{height:60%}
.gv-play{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:clamp(64px,9vw,92px);aspect-ratio:1;margin:0;border-radius:50%;
  background:rgba(29,32,33,.5);border:1px solid rgba(233,240,86,.7);transform:translate(-50%,-50%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .4s var(--ease),background-color .3s}
.gv-play svg{width:42%;height:42%;margin-left:6%;fill:var(--acid)}
.gv .gt:hover .gv-play,.gv .gt:focus-visible .gv-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(29,32,33,.7)}
.gv-dur{position:absolute;top:12px;right:12px;z-index:1;padding:4px 9px;border-radius:999px;background:rgba(29,32,33,.72);font:500 11px/1 var(--sans);letter-spacing:.06em;color:var(--paper);font-variant-numeric:tabular-nums}

/* ===== Lightbox: the tour video sits over the poster in the current slide ===== */
.lb-pic .tour-vid{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;background:#000;border-radius:2px}
.lb-isvid .lb-dots,.lb-isvid .lb-tour{display:none}
.lb-isvid .lb-cur .lb-pic img{animation:none}
.lb-strip button.lb-sv::before{content:"";position:absolute;left:50%;top:50%;z-index:1;width:0;height:0;margin:-6px 0 0 -4px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--acid)}

/* ===== Showings ===== */
.oh-time{max-width:34ch;line-height:1.55}
.oh-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.cal-btns{display:flex;flex-wrap:wrap;gap:10px}
.cal-d.past{color:rgba(154,168,140,.35);background:none;cursor:default}
.icon-btn:disabled,.btn:disabled{opacity:.4;cursor:default}

/* ===== Community source line ===== */
.comm-src,.cost-src,.calc-src{margin-top:18px;font-size:12px;line-height:1.5;color:var(--muted)}

/* ===== Costs and coverage: hairline rows, no boxes ===== */
.costs{margin:0 0 48px}
.cost-l{margin-top:14px}
.cost-l>div{display:grid;grid-template-columns:minmax(120px,.32fr) 1fr;gap:4px 24px;padding:12px 0;border-top:1px solid var(--line)}
.cost-l>div:last-child{border-bottom:1px solid var(--line)}
.cost-l dt{font-size:12px;letter-spacing:.06em;color:var(--muted)}
.cost-l dd{font-size:15px;line-height:1.5;color:var(--paper)}
@media (max-width:560px){.cost-l>div{grid-template-columns:1fr}}

/* ===== Calculator: monthly total + breakdown ===== */
.mt{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.mt-l{font-size:12px;letter-spacing:.06em;color:var(--muted)}
.mt-v{margin-top:6px;font:clamp(44px,6vw,72px)/1 var(--serif);color:var(--paper);font-variant-numeric:tabular-nums}
.mt-bar{display:flex;height:10px;margin-top:18px;border-radius:999px;overflow:hidden;background:rgba(215,232,188,.06)}
.mt-bar b{display:block;height:100%;flex:0 0 0;transition:flex-basis .6s var(--ease)}
.mt-bar b+b{box-shadow:inset 2px 0 0 var(--ink)}
.mt-pi{background:var(--acid)}
.mt-tax{background:var(--paper)}
.mt-ins{background:rgba(215,232,188,.55)}
.mt-hoa{background:rgba(154,168,140,.6)}
.mt-rows{margin-top:14px}
.mt-rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.mt-rows dt{display:flex;align-items:center;gap:10px;color:var(--muted)}
.mt-rows dt i{display:inline-block;width:10px;height:10px;border-radius:2px}
.mt-rows dd{color:var(--paper);font-variant-numeric:tabular-nums}
.calc-info{margin-top:22px;padding-left:12px;border-left:2px solid var(--acid);font-size:14px;color:var(--paper)}

/* ===== Desk: one column now that the side list is gone ===== */
.dk-grid{grid-template-columns:minmax(0,1fr);max-width:880px}
.dk-field input[type=date]{color-scheme:dark}

@media (prefers-reduced-motion:reduce){
  .hero-vid{transition:none}
  html.js .hero-vid{clip-path:none!important}
  .gv-play,.mt-bar b{transition:none}
}