/*
  Desktop layout — Figma 244:136 "Coming soon — Desktop 1440 (Hive bleed)".
  All values are design units inside the 1440×900 stage. The stage can be wider
  than 1440 (see stage.js); the hive is anchored right so it always bleeds.
*/
.d-topbar { position: absolute; left: 16px; top: 16px; right: 16px; height: 68px; display: flex; align-items: center; padding: 12px 24px; }

.d-panel { position: absolute; left: 16px; top: 96px; right: 16px; height: 741px; background: var(--ink); border-radius: 28px; }

.d-copy {
  position: absolute; left: 112px; top: 192.5px; width: 568px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 28px; color: var(--cream);
}
.d-h1 { font-size: 72px; font-weight: 500; line-height: 1.04; letter-spacing: -1.44px; white-space: nowrap; }
.d-lede { width: 560px; font-size: 24px; font-weight: 500; line-height: 1.4; opacity: 0.9; }

.d-footer { position: absolute; left: 16px; right: 16px; top: 849px; height: 35px; padding: 8px 24px 4px; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* ---- Hive bleed (863×900, right-anchored) ---------------------------------- */
.hive { position: absolute; top: 0; right: 0; width: 863px; height: 900px; }
/* Ink gutters: top / bottom / right strips only — the panel shows through the middle so the
   hero copy can run under the honeycomb the way it does in Figma. */
.hive__ink { position: absolute; left: 87px; top: 0; right: 0; height: 150px; background: var(--ink); }
.hive__ink::before { content: ""; position: absolute; left: -1px; top: 790px; right: 0; height: 110px; background: var(--ink); }
.hive__ink::after { content: ""; position: absolute; left: 706px; top: 0; right: 0; height: 900px; background: var(--ink); }
.fillet { position: absolute; width: 28px; height: 28px; }
.fillet--top { left: 59px; top: 68px; }
.fillet--bottom { left: 58px; top: 837px; }
.hive__comb { position: absolute; left: 0; top: 0; overflow: visible; }
.hive__zee { position: absolute; left: 383px; top: 341px; width: 320px; height: 320px; }
.hive__chip { position: absolute; left: 681px; top: 36px; }

/* ---- Module cells (480 box on the hex grid) --------------------------------- */
.cell { position: absolute; width: 480px; height: 480px; pointer-events: none; }
.cell__hit {
  position: absolute; inset: 4px 32px; pointer-events: auto; cursor: pointer; outline: none;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.hint {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8.4px;
  text-align: center; color: var(--ink); white-space: nowrap;
  transition: opacity 0.18s var(--ease);
}
.hint svg { width: 44.8px; height: 44.8px; }
.hint__name { font-size: 18.2px; font-weight: 600; line-height: 22px; }
.hint__promise { font-size: 11.2px; font-weight: 500; line-height: 14px; opacity: 0.8; }
.cell--top .hint { top: 226.5px; }
.cell--bottom .hint { top: 143px; }

/* "Product peeks" — mini UI cards floating in the cell. */
.peek {
  position: absolute; height: 37px; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15, 59, 43, 0.12); font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--ink);
  transition: opacity 0.18s var(--ease);
}
.cell--top .peek { top: 347px; }
.cell--bottom .peek { top: 79px; }
.peek--w220 { left: 130px; width: 220px; }
.peek--w200 { left: 147px; width: 200px; }
.peek__dots { display: flex; gap: 4px; }
.peek__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--stone); }
.peek__url { flex: 1; padding: 3px 8px; border-radius: 25px; background: var(--stone); color: var(--muted); font-size: 11px; }
.badge { margin-left: auto; padding: 3px 8px; border-radius: 25px; font-size: 11px; font-weight: 600; background: var(--instock-bg); color: var(--instock-fg); }
.badge--low { background: var(--low-bg); color: var(--low-fg); }

/* Preview slot: the 400×400 hover cell centred in the 480 box. */
.preview { position: absolute; left: 40px; top: 40px; width: 400px; height: 400px; display: none; }

/* Active state: hover on pointer devices, .is-active from previews.js (tap / keyboard). */
.cell.is-active .hint, .cell.is-active .peek { opacity: 0; }
.cell.is-active .preview { display: block; }
@media (hover: hover) {
  .cell:hover .hint, .cell:hover .peek { opacity: 0; }
  .cell:hover .preview { display: block; }
}
.cell__hit:focus-visible { outline: 3px solid var(--cream); outline-offset: -3px; }