/* Atlas v2 · "Keep the show running" (V2.md §2.1f, redone 2026-10-28; act5.js). One glass card at a time, full focus:
   Reviews, Social, Referrals; then the three at rest, turning as a triangle round the cycle; a calendar day turning top
   right. Frost carries the light; gold only on stars; warm light only in windows at night; embers rise. Every class is
   prefixed a5-. */
.a5-stage { --a5-ice: #7cc4f6; --a5-hi: #e9f6ff; --a5-gold: #fbbc04; --a5-warm: #ffd896; }

/* the theatre under the title band: every card in the same place; the bottom keeps clear of the page's scroll cue */
.a5-th { position: relative; z-index: 2; align-self: stretch; min-height: 0; }
.a5-card { position: absolute; inset: 0 0 52px; margin: auto; width: min(1060px, 100%); height: min(580px, calc(100% - 52px)); display: flex; flex-direction: column; gap: 14px;
  padding: 20px 26px 22px; border-radius: 22px; visibility: hidden; will-change: transform, opacity; overflow: hidden;
  background: linear-gradient(165deg, rgba(36,49,68,.8), rgba(14,21,30,.92)); border: 1px solid rgba(127,220,255,.36);
  box-shadow: inset 0 1px 0 rgba(237,234,227,.14), 0 0 60px rgba(127,196,246,.12), 0 30px 80px rgba(0,0,0,.5); }
.a5-ch { display: flex; align-items: baseline; gap: 14px; }
.a5-ch h3 { font-size: clamp(22px, 1.8vw, 28px); letter-spacing: -.02em; order: -1; }
.a5-dept { font: 400 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--light); }
.a5-body { position: relative; flex: 1; min-height: 0; }
.a5-ex { position: absolute; z-index: 3; right: 12vw; bottom: calc(3vh + 18px); font: 400 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  padding: 5px 9px; border: 1px solid var(--line-hi); border-radius: 6px; opacity: 0; }
.a5-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }

/* shared pieces */
.a5-av { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--sans); color: #04121e; background: linear-gradient(135deg, #e9f6ff, #7cc4f6); }
.a5-stars { flex: none; display: inline-flex; gap: 1px; font-size: 13px; line-height: 1; }
.a5-stars i { font-style: normal; color: #3b4452; transition: color .25s, transform .35s cubic-bezier(.3,1.6,.5,1), text-shadow .3s; transform: scale(.75); }
.a5-stars i.a5-on, .a5-fr .a5-stars i { color: var(--a5-gold); transform: none; text-shadow: 0 0 8px rgba(251,188,4,.5); }
.a5-ok { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #04121e; background: var(--light); box-shadow: 0 0 12px rgba(127,220,255,.6); }
.a5-ok svg { width: 14px; height: 14px; }
.a5-bub { margin: 0; max-width: 88%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.4; }
.a5-out { justify-self: end; color: #04121e; background: linear-gradient(135deg, #e9f6ff, #a9dcff); border-bottom-right-radius: 5px; }
.a5-inb { justify-self: start; color: #e8eef4; background: #2a323d; border-bottom-left-radius: 5px; }
.a5-ty:empty::before { content: "\200b"; }
.a5-typing .a5-ty::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: var(--a5-hi); }

/* ——— Reviews: the one cycle down the left, your profile and the map pack on the right; then the feed ——— */
.a5-rv { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; }
.a5-flow { position: relative; min-height: 0; }
.a5-one { position: absolute; inset: 0; display: grid; align-content: start; gap: 12px; padding-left: 30px; }
.a5-st { opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .4s cubic-bezier(.2,.8,.2,1); }
.a5-st.a5-in { opacity: 1; transform: none; }
.a5-job { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 13px; background: rgba(11,17,23,.55); border: 1px solid var(--line); }
.a5-job b { display: block; color: var(--head); font-weight: 500; font-size: 15px; }
.a5-job small, .a5-tap small { font: 400 11px/1.3 var(--mono); letter-spacing: .06em; color: var(--muted); }
.a5-one .a5-bub { justify-self: start; }
.a5-tap { display: flex; align-items: center; gap: 14px; padding: 4px 2px; }
.a5-tap .a5-stars { font-size: 30px; gap: 4px; }
.a5-rev { padding: 12px 14px; border-radius: 14px; background: rgba(11,17,23,.6); border: 1px solid rgba(251,188,4,.3); }
.a5-frh { display: flex; align-items: center; gap: 9px; }
.a5-frh b { color: var(--head); font-weight: 500; font-size: 14px; white-space: nowrap; }
.a5-frh small { margin-left: auto; font: 400 10.5px/1 var(--mono); color: var(--dim); }
.a5-rev > p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.4; color: #e3ebf3; }
.a5-reply { margin: 10px 0 0 12px; padding: 8px 12px; border-left: 2px solid var(--a5-ice); border-radius: 0 10px 10px 0; background: rgba(127,196,246,.07); opacity: 0; transition: opacity .3s; }
.a5-reply.a5-in { opacity: 1; }
.a5-reply small { font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--light); }
.a5-reply p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--a5-hi); min-height: 1.4em; }
/* the feed: newest on top, each answered a beat after it lands (act5.js places each row) */
.a5-feed { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; opacity: 0; }
.a5-fr { position: absolute; left: 0; right: 0; top: 0; padding: 9px 12px; border-radius: 12px; background: rgba(11,17,23,.62); border: 1px solid rgba(251,188,4,.22); opacity: 0; }
.a5-fr .a5-stars { font-size: 11px; margin-left: auto; }
.a5-fr > p { margin: 4px 0 0; font-size: 13px; line-height: 1.3; color: #dfe8f1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a5-fr .a5-av { width: 20px; height: 20px; font-size: 10px; }
.a5-fr .a5-frh b { font-size: 12.5px; }
.a5-frr { display: flex; align-items: center; gap: 6px; color: var(--a5-hi) !important; font-size: 12px !important; opacity: 0; transition: opacity .3s; }
.a5-frr svg { flex: none; width: 13px; height: 13px; color: var(--a5-ice); }
.a5-frr span { overflow: hidden; text-overflow: ellipsis; }
.a5-fr.a5-ans .a5-frr { opacity: 1; }
.a5-prof { display: grid; align-content: start; gap: 18px; min-height: 0; }
.a5-me { padding: 16px 18px; border-radius: 16px; background: rgba(11,17,23,.55); border: 1px solid var(--line); }
.a5-me > small, .a5-q span { font: 400 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.a5-score { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; color: var(--muted); font-size: 15px; }
.a5-score > b { font: 600 clamp(40px, 3.6vw, 56px)/1 var(--sans); letter-spacing: -.03em; color: var(--head); transition: text-shadow .3s, color .3s; }
.a5-gs { font-size: 28px; color: var(--a5-gold); text-shadow: 0 0 12px rgba(251,188,4,.55); }
.a5-score span b { font: 600 22px/1 var(--sans); color: var(--head); font-variant-numeric: tabular-nums; transition: text-shadow .3s, color .3s; }
.a5-score.a5-hot > b, .a5-score.a5-hot span b { color: #e9f6ff; text-shadow: 0 0 12px rgba(127,220,255,.9), 0 0 30px rgba(127,220,255,.45); }
.a5-pack { padding: 14px 16px 16px; border-radius: 16px; background: rgba(11,17,23,.55); border: 1px solid var(--line); }
.a5-q { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.a5-rank { font: 600 30px/1 var(--sans); letter-spacing: -.02em; color: #ff7a6b; transition: color .4s, text-shadow .4s; }
.a5-rank.a5-first { color: #e9fbff; text-shadow: 0 0 18px rgba(127,220,255,.85), 0 0 40px rgba(127,220,255,.4); }
.a5-pack ol { position: relative; list-style: none; margin: 0; padding: 0; }
.a5-shop { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 11px; background: rgba(169,205,242,.04); border: 1px solid var(--line);
  transition: transform .55s cubic-bezier(.3,.9,.3,1), border-color .4s, background .4s, box-shadow .4s; }
.a5-shop b { display: block; color: #dfe8f1; font-weight: 500; font-size: 14px; }
.a5-shop small { font: 400 11px/1.4 var(--mono); color: var(--muted); }
.a5-pin { flex: none; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; font: 600 11px/1 var(--sans); color: #c9d3de; background: #3b4452; }
.a5-pin i { font-style: normal; transform: rotate(45deg); }
.a5-us { z-index: 1; border-color: rgba(127,220,255,.5); background: rgba(127,220,255,.08); }
.a5-us b { color: var(--head); }
.a5-us.a5-first { border-color: rgba(169,225,255,.95); box-shadow: 0 0 30px rgba(127,196,246,.35); }
.a5-us .a5-pin { background: var(--a5-ice); }

/* ——— Social: the page on the left (empty, then posting), its reach on the right; then the replies ——— */
.a5-so { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: minmax(0, 1fr) auto; gap: 16px 64px; }
.a5-page { position: relative; min-height: 0; border-radius: 16px; overflow: hidden; background: rgba(11,17,23,.6); border: 1px solid var(--line); display: flex; flex-direction: column; transition: border-color .5s, box-shadow .5s; }
.a5-page.a5-taken { border-color: rgba(127,220,255,.45); box-shadow: 0 0 34px rgba(127,196,246,.14); }
.a5-cover { height: 54px; flex: none; background: linear-gradient(110deg, #1d2c3e, #24405e 60%, #1a2433); }
.a5-pg { display: flex; align-items: center; gap: 12px; padding: 0 14px; margin-top: -20px; }
.a5-av.a5-big { width: 48px; height: 48px; font-size: 20px; border: 3px solid #121a24; }
.a5-pg > div { padding-top: 18px; }
.a5-pg b { color: var(--head); font-weight: 500; font-size: 15px; }
.a5-pg small { display: block; font-size: 12.5px; color: var(--muted); } .a5-pg small b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.a5-grid { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 6px; padding: 12px 14px 14px; }
.a5-tile { position: relative; border-radius: 9px; overflow: hidden; border: 1px dashed rgba(169,205,242,.22); background: rgba(169,205,242,.03); min-height: 0; }
.a5-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--a, 0); transform: scale(calc(1.12 - var(--a, 0) * .12)); filter: blur(calc((1 - var(--a, 0)) * 6px)) saturate(.92); }
.a5-tile.a5-on { border: 1px solid rgba(169,205,242,.18); }
.a5-tv { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 10px; background: rgba(6,10,15,.72); font-size: 11px; color: #e8eef4; opacity: var(--a, 0); }
.a5-tv svg { width: 13px; height: 13px; color: var(--a5-hi); }
.a5-tv b { font-weight: 500; font-variant-numeric: tabular-nums; }
.a5-new { position: absolute; right: 6px; top: 6px; padding: 3px 7px; border-radius: 10px; font: 400 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #04121e; background: var(--a5-hi);
  box-shadow: 0 0 12px rgba(127,220,255,.8); opacity: 0; transition: opacity .3s; }
.a5-fresh .a5-new { opacity: 1; }
.a5-none { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 400 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); pointer-events: none; }
/* the executive taking the page over: one sweep of frost down it */
.a5-scan { position: absolute; left: 0; right: 0; top: calc(var(--s, 0) * 110% - 10%); height: 18%; pointer-events: none; opacity: calc(min(var(--s, 0) * 8, 1) * (1 - var(--s, 0)));
  background: linear-gradient(180deg, rgba(127,220,255,0), rgba(127,220,255,.22) 70%, rgba(233,246,255,.6) 100%); box-shadow: 0 2px 12px rgba(127,220,255,.6); }
.a5-side { position: relative; min-height: 0; }
.a5-lay { position: absolute; inset: 0; }
.a5-l1 { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 14px; opacity: calc(1 - var(--talk, 0)); transform: translateY(calc(var(--talk, 0) * -16px)); }
.a5-meter { padding: 14px 16px; border-radius: 16px; background: rgba(11,17,23,.55); border: 1px solid var(--line); display: grid; gap: 4px; }
.a5-meter span svg { width: 22px; height: 22px; color: var(--light); filter: drop-shadow(0 0 6px rgba(127,220,255,.7)); }
.a5-meter b { font: 600 clamp(28px, 2.5vw, 40px)/1 var(--sans); letter-spacing: -.03em; color: var(--head); font-variant-numeric: tabular-nums; }
.a5-meter small { font: 400 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.a5-plat { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.a5-plat li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(169,205,242,.04); border: 1px solid var(--line); font-size: 14px; color: var(--muted); transition: border-color .4s, color .4s, background .4s; }
.a5-plat i { width: 8px; height: 8px; border-radius: 50%; background: #3b4452; transition: background .3s, box-shadow .3s; }
.a5-plat .a5-pd { margin-left: auto; font: 400 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--light); opacity: 0; transition: opacity .3s; }
.a5-plat li.a5-on { color: var(--head); border-color: rgba(127,220,255,.32); background: rgba(127,220,255,.06); }
.a5-plat li.a5-on i { background: var(--a5-hi); box-shadow: 0 0 10px rgba(127,220,255,.9); }
.a5-plat li.a5-on .a5-pd { opacity: 1; }
.a5-l2 { display: flex; flex-direction: column; gap: 10px; opacity: var(--talk, 0); transform: translateY(calc((1 - var(--talk, 0)) * 16px)); visibility: hidden; }
.a5-talking .a5-l2 { visibility: visible; } .a5-talking .a5-l1 { visibility: hidden; }
.a5-mini-m { display: flex; gap: 18px; font-size: 13px; color: var(--muted); }
.a5-mini-m span { display: inline-flex; align-items: center; gap: 6px; } .a5-mini-m svg { width: 16px; height: 16px; color: var(--light); }
.a5-mini-m b { color: var(--head); font-weight: 600; font-variant-numeric: tabular-nums; }
.a5-inbox { position: relative; flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22px, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22px, #000 85%, transparent); }
.a5-inbox ol { padding-top: 6px; }
.a5-inbox ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.a5-chat { display: grid; gap: 7px; padding: 12px 14px; border-radius: 14px; background: rgba(11,17,23,.6); border: 1px solid var(--line); opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .4s cubic-bezier(.2,.8,.2,1); }
.a5-chat.a5-in { opacity: 1; transform: none; }
.a5-chat > small { font: 400 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.a5-cq { margin: 0; font-size: 14px; line-height: 1.4; color: #e3ebf3; } .a5-cq b { color: var(--head); font-weight: 600; margin-right: 3px; }
.a5-ca { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 0 14px; font-size: 14px; line-height: 1.4; color: var(--a5-hi); opacity: 0; transition: opacity .3s; }
.a5-ca .a5-av { width: 22px; height: 22px; font-size: 10px; margin-top: 1px; }
.a5-ansd .a5-ca { opacity: 1; }
.a5-bk { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px; border-radius: 20px; font: 600 12.5px/1 var(--sans); color: var(--a5-hi);
  background: rgba(127,220,255,.12); border: 1px solid rgba(127,220,255,.55); box-shadow: 0 0 16px rgba(127,220,255,.3); opacity: 0; transform: scale(.85); transition: opacity .3s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.a5-bk svg { width: 14px; height: 14px; }
.a5-booked .a5-bk { opacity: 1; transform: none; }
.a5-impact { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-radius: 14px; background: rgba(11,17,23,.6);
  border: 1px solid var(--line); font-size: 15px; color: var(--head); opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s, border-color .4s, box-shadow .4s; }
.a5-impact.a5-in { opacity: 1; transform: none; }
.a5-impact b { font: 600 34px/1 var(--sans); letter-spacing: -.03em; color: var(--head); font-variant-numeric: tabular-nums; transition: text-shadow .3s; }
.a5-impact.a5-hot { border-color: rgba(169,225,255,.8); box-shadow: 0 0 40px rgba(127,196,246,.25); }
.a5-impact.a5-hot b { color: #e9fbff; text-shadow: 0 0 14px rgba(127,220,255,.9), 0 0 36px rgba(127,220,255,.4); }

/* ——— Referrals: the text exchange and the booking it brings; then the street at night, the hero's rendered film ——— */
.a5-card.a5-k2::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--night, 0); background: radial-gradient(120% 80% at 50% 0%, #0e1d33 0%, #070c14 70%); }
.a5-card.a5-k2 > * { position: relative; }
.a5-day { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: center; opacity: calc(1 - var(--night, 0)); }
.a5-dark .a5-day { visibility: hidden; }
.a5-thread { display: grid; gap: 10px; padding: 14px 16px 16px; border-radius: 18px; background: rgba(11,17,23,.55); border: 1px solid var(--line); align-self: center; }
.a5-th { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.a5-th b { color: var(--head); font-weight: 500; font-size: 14.5px; } .a5-th small { margin-left: auto; font: 400 10.5px/1 var(--mono); color: var(--muted); }
.a5-thread .a5-bub { opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.a5-thread .a5-bub.a5-in { opacity: 1; transform: none; }
.a5-link { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid rgba(127,220,255,.35); }
.a5-link svg { flex: none; width: 22px; height: 22px; color: var(--a5-ice); }
.a5-link b { display: block; color: var(--head); font-weight: 500; font-size: 13.5px; } .a5-link small { font: 400 10.5px/1.3 var(--mono); color: var(--muted); }
.a5-book { position: relative; display: grid; gap: 6px; padding: 18px 20px; border-radius: 16px; background: rgba(10,18,26,.92); border: 1.5px solid rgba(127,220,255,.55);
  box-shadow: 0 0 36px rgba(127,196,246,.2); opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .4s cubic-bezier(.2,.8,.2,1); }
.a5-book.a5-in { opacity: 1; transform: none; }
.a5-book small { font: 400 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--light); }
.a5-book b { color: var(--head); font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
.a5-book > span { font-size: 14.5px; color: #dfe8f1; } .a5-book .a5-by { font-size: 13px; color: var(--muted); }
.a5-plus { justify-self: start; margin-top: 8px; font: 600 15px/1 var(--sans); color: var(--a5-hi); padding: 8px 14px; border-radius: 20px; background: rgba(127,220,255,.14); border: 1px solid rgba(127,220,255,.6);
  box-shadow: 0 0 20px rgba(127,220,255,.4); opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .3s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.a5-plus.a5-in { opacity: 1; transform: none; }
.a5-night { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: var(--night, 0); }
.a5-five { margin: 6px 0 0; text-align: center; font: 500 clamp(24px, 2.3vw, 36px)/1.15 var(--sans); letter-spacing: -.025em; color: var(--head); opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s;
  text-shadow: 0 0 22px rgba(127,220,255,.35); }
.a5-five.a5-in { opacity: 1; transform: none; }
/* the street film, framed by a light channel (act5.js draws the groove round it); the hold frame until the film is ready */
.a5-film { flex: 1; min-height: 0; display: grid; place-items: center; padding: 22px 12px 14px; }
.a5-vid { position: relative; height: 100%; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #05080d; box-shadow: 0 0 50px rgba(127,196,246,.16); }
.a5-vid video, .a5-vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 51% 57%; }
.a5-vid img { transition: opacity .3s; } .a5-vid.a5-ready img { opacity: 0; }

/* ——— the finale: the three at rest, then turning as a triangle round the cycle ——— */
.a5-mini { position: absolute; left: 0; top: 0; z-index: 6; display: flex; align-items: center; gap: 12px; width: 236px; padding: 14px 16px; border-radius: 16px; visibility: hidden; opacity: 0; will-change: transform;
  background: linear-gradient(165deg, rgba(30,42,58,.98), rgba(13,20,29,.98)); border: 1px solid rgba(127,220,255,.5); box-shadow: 0 0 34px rgba(127,196,246,.2), 0 20px 50px rgba(0,0,0,.5); transform-origin: 50% 50%; }
.a5-mi { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; color: var(--a5-hi); background: rgba(127,220,255,.12); border: 1px solid rgba(127,220,255,.4); }
.a5-m0 .a5-mi { color: var(--a5-gold); }
.a5-mi svg { width: 22px; height: 22px; }
.a5-mini small { display: block; font: 400 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--light); }
.a5-mini b { display: block; margin-top: 6px; color: var(--head); font-weight: 600; font-size: 15.5px; white-space: nowrap; }
.a5-loop { position: absolute; left: 0; top: 0; z-index: 6; margin: 0; text-align: center; font: 400 12.5px/1.35 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--a5-hi); opacity: 0;
  text-shadow: 0 0 12px rgba(127,220,255,.7); pointer-events: none; white-space: nowrap; }

/* the calendar, top right: a day that keeps turning */
.a5-cal { position: absolute; z-index: 6; top: calc(var(--head-h, 88px) + 1vh + 18px); right: 12vw; width: 74px; border-radius: 12px; overflow: visible; text-align: center;
  background: linear-gradient(180deg, rgba(30,42,58,.95), rgba(13,20,29,.95)); border: 1px solid rgba(127,220,255,.4); box-shadow: 0 0 26px rgba(127,196,246,.16); }
.a5-mo { display: block; padding: 6px 0 5px; border-radius: 11px 11px 0 0; font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #04121e; background: linear-gradient(135deg, #e9f6ff, #7cc4f6); }
.a5-cal { padding-bottom: 66px; position: absolute; }
.a5-lf { position: absolute; left: 0; right: 0; top: 21px; height: 66px; display: grid; align-content: center; gap: 2px; transform-origin: 50% 0; backface-visibility: hidden;
  background: linear-gradient(180deg, rgba(24,34,48,1), rgba(13,20,29,1)); border-radius: 0 0 11px 11px; }
.a5-lf b { font: 400 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--light); }
.a5-lf span { font: 600 28px/1 var(--sans); letter-spacing: -.02em; color: var(--head); }

/* shorter laptop screens (1536 × 864, 1366 × 768): tighter, the small print giving way first */
@media (max-height: 820px) and (min-width: 721px) {
  .a5-card { padding: 16px 22px 18px; gap: 10px; }
  .a5-one { gap: 9px; } .a5-tap .a5-stars { font-size: 24px; }
  .a5-rev > p { font-size: 13.5px; } .a5-me { padding: 12px 16px; } .a5-prof { gap: 12px; }
  .a5-score > b { font-size: 40px; } .a5-shop { padding: 6px 12px; }
  .a5-plat { gap: 5px; } .a5-plat li { padding: 6px 12px; }
  .a5-chat { padding: 10px 12px; gap: 5px; }
}

/* phones: the same story in one column; each card's two halves take turns where both won't fit */
@media (max-width: 720px) {
  #leads .act-cap { height: auto; align-content: start; padding: 22px 64px 12px 0; justify-items: start; text-align: left; }
  .a5-th { margin-top: 4px; }
  .a5-card { inset: 0; width: 100%; height: 100%; padding: 14px 14px 16px; border-radius: 18px; gap: 10px; }
  .a5-ch { flex-wrap: wrap; gap: 4px 10px; }
  .a5-ex { right: 14px; bottom: 16px; }
  .a5-cal { top: 116px; right: 14px; width: 56px; padding-bottom: 50px; }
  .a5-lf { top: 21px; height: 50px; } .a5-lf span { font-size: 21px; } .a5-lf b { font-size: 9.5px; }
  /* reviews: the cycle, then the feed, on top; your score and the map pack below */
  .a5-rv { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 12px; }
  .a5-one { padding-left: 24px; gap: 8px; } .a5-bub { font-size: 13px; padding: 8px 11px; }
  .a5-job { padding: 8px 11px; } .a5-tap .a5-stars { font-size: 22px; } .a5-rev { padding: 9px 11px; } .a5-rev > p { font-size: 13px; } .a5-reply { margin-top: 7px; }
  .a5-prof { grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
  .a5-me { padding: 10px 12px; } .a5-me > small { display: none; } .a5-score { margin-top: 0; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; } .a5-score > b { font-size: 30px; } .a5-gs { font-size: 20px; } .a5-score span b { font-size: 16px; }
  .a5-pack { padding: 9px 10px; } .a5-q { margin-bottom: 7px; } .a5-q span { font-size: 9px; letter-spacing: .08em; } .a5-rank { font-size: 20px; }
  .a5-shop { padding: 4px 8px; gap: 8px; } .a5-shop b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .a5-shop small { font-size: 10px; } .a5-pin { width: 18px; height: 18px; }
  .a5-shop > div { min-width: 0; }
  /* social: the page on top, then its reach or its replies */
  .a5-so { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; }
  .a5-cover { height: 34px; } .a5-av.a5-big { width: 38px; height: 38px; font-size: 16px; } .a5-pg { margin-top: -16px; } .a5-pg > div { padding-top: 14px; }
  .a5-grid { padding: 8px 10px 10px; gap: 5px; }
  .a5-l1 { gap: 8px; } .a5-meter { padding: 8px 10px; gap: 2px; } .a5-meter b { font-size: 24px; } .a5-meter span svg { width: 17px; height: 17px; }
  .a5-plat { grid-template-columns: 1fr 1fr; gap: 5px; } .a5-plat li { padding: 5px 9px; font-size: 12px; } .a5-plat .a5-pd { display: none; }
  .a5-chat { padding: 9px 11px; gap: 5px; } .a5-cq, .a5-ca { font-size: 13px; }
  .a5-talking .a5-page { display: none; } .a5-talking.a5-so, .a5-talking .a5-so { grid-template-rows: minmax(0, 1fr) auto; }
  .a5-impact { padding: 9px 12px; font-size: 13px; } .a5-impact b { font-size: 26px; }
  /* referrals: the thread, then the booking under it */
  .a5-day { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; }
  .a5-thread { padding: 10px 12px 12px; gap: 7px; } .a5-th small { display: none; }
  .a5-book { padding: 12px 14px; gap: 4px; } .a5-book b { font-size: 16px; } .a5-book > span { font-size: 13px; } .a5-plus { position: absolute; right: 12px; top: 12px; margin: 0; font-size: 13px; }
  .a5-five { font-size: 22px; padding: 0 10px; }
  .a5-film { padding: 18px 8px 10px; } .a5-vid { height: auto; width: 100%; max-height: 100%; aspect-ratio: 4 / 5; }
  .a5-mini { width: 150px; padding: 9px 10px; gap: 8px; border-radius: 13px; }
  .a5-mi { width: 28px; height: 28px; border-radius: 9px; font-size: 15px; } .a5-mi svg { width: 16px; height: 16px; }
  .a5-mini small { font-size: 9px; letter-spacing: .1em; } .a5-mini b { font-size: 12px; margin-top: 4px; white-space: normal; }
  .a5-loop { font-size: 8.5px; letter-spacing: .1em; }
  .a5-mini { width: 118px; flex-direction: column; align-items: flex-start; gap: 6px; }
  /* (while the one cycle plays, only your score shows under it; the map pack comes with the feed) */
  .a5-k0:not(.a5-b) .a5-pack { display: none; }
  .a5-k0:not(.a5-b) .a5-prof { grid-template-columns: minmax(0, 1fr); }
}