/* Atlas v2 · "What makes it CGM" (#cgm, act6.js): the CRM vs CGM comparison as glass tiles at their own depths (Act 4's
   family): the CRM side dim and grey, the CGM side lit with Atlas blue. Every class is prefixed a6-. */
.a6-body { position: relative; z-index: 1; align-self: stretch; min-height: 0; display: grid; }
.a6-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* (the bottom padding keeps the board clear of the page's sticky scroll cue) */
.a6-dock { position: relative; display: grid; grid-template-rows: 1fr auto; place-items: center; min-height: 0; padding-bottom: 46px; }
.a6-scene { position: relative; width: min(1040px, 100%); perspective: 1600px; perspective-origin: 50% 40%; }
.a6-board { position: relative; transform-style: preserve-3d; will-change: transform; display: grid; gap: clamp(8px, 1.3vh, 14px); visibility: hidden; }
.a6-row { display: grid; grid-template-columns: minmax(0, 1fr) clamp(70px, 9vw, 140px) minmax(0, 1fr); align-items: stretch; transform-style: preserve-3d; }

.a6-tile { position: relative; display: flex; align-items: center; gap: 14px; min-height: clamp(52px, 7.4vh, 72px); padding: 12px 20px; border-radius: 16px; opacity: 0; will-change: transform, opacity;
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.a6-tile span { font: 400 clamp(14px, 1.15vw, 17px)/1.3 var(--sans); letter-spacing: -.005em; }
.a6-tile i { flex: none; width: 8px; height: 8px; border-radius: 50%; }

/* the CRM side: glass gone cold, the words grey */
.a6-crm { background: linear-gradient(165deg, rgba(36,42,52,.62), rgba(16,20,26,.72)); border: 1px solid rgba(154,166,178,.16);
  box-shadow: inset 0 1px 0 rgba(237,234,227,.06), 0 16px 36px rgba(0,0,0,.45); }
.a6-crm span { color: #7f8a96; } .a6-crm i { background: #4a5462; }

/* the CGM side: lit from within once it lands (--lit, act6.js), its edge glowing Atlas blue */
.a6-cgm { --lit: 0; background: linear-gradient(165deg, rgba(36,58,86,.74), rgba(14,26,40,.8)); border: 1px solid rgba(124,196,246, calc(.2 + var(--lit) * .4));
  box-shadow: inset 0 1px 0 rgba(233,246,255, calc(.08 + var(--lit) * .14)), inset 0 0 40px rgba(63,157,255, calc(var(--lit) * .16)), 0 18px 40px rgba(0,0,0,.45), 0 0 calc(var(--lit) * 34px) rgba(63,157,255, calc(var(--lit) * .35)); }
.a6-cgm span { color: #dceefd; text-shadow: 0 0 calc(var(--lit) * 14px) rgba(124,196,246,.5); }
.a6-cgm i { background: #7cc4f6; box-shadow: 0 0 calc(4px + var(--lit) * 10px) rgba(124,196,246,.9); }

/* the header pair: just the two names, set like labels */
.a6-head .a6-tile { min-height: 0; padding: 10px 20px; justify-content: center; }
.a6-head .a6-tile span { font: 500 clamp(13px, 1vw, 15px)/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; }
.a6-head .a6-cgm span { color: #e9f6ff; }
.a6-head .a6-tile i { display: none; }

.a6-caveat { margin: clamp(10px, 1.6vh, 18px) 0 0; font: 400 12.5px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); text-align: center; opacity: 0; }

@media (max-width: 720px) {
  .a6-row { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); }
  .a6-tile { min-height: 0; padding: 8px 10px; gap: 8px; border-radius: 11px; }
  .a6-tile span { font-size: 11.5px; line-height: 1.25; }
  .a6-tile i { display: none; }
  .a6-head .a6-tile { padding: 7px 8px; } .a6-head .a6-tile span { font-size: 11px; letter-spacing: .2em; }
  .a6-caveat { font-size: 10.5px; }
  /* (the phone stage already keeps the Book bar's room at its foot) */
  .a6-dock { padding-bottom: 0; }
  /* (the title starts below the spine's small title, so a three-line title never touches it) */
  #cgm .act-cap { height: auto; align-content: start; padding: 22px 0 12px; }
}
@media (max-width: 720px) and (max-height: 760px) { .a6-board { gap: 6px; } .a6-tile { padding: 6px 8px; } .a6-tile span { font-size: 10.5px; } }