/* home.css — THE HOME PAGE'S OWN PRESENTATIONS (2026-10-09; home-blocks.mjs). Loaded by the home page
   alone (pages/index.mjs `extraHead`), after site.css: these ~11 KB rode on every page's first view in
   v=64 and took /tour to its 960 KB ceiling (rig/probes/weight.cjs). ⛔ A rule another page needs goes
   in site.css. ⛔ Cached `immutable` like site.css: the same ?V; deploy-marketing's version guard
   checks this file too. */
/* ══ CLOSE-UPS, TILES, EXPLORER, SPREADS (v=64, its own file v=65) — why and how: home-blocks.mjs. ⛔ No fade (Ryan
   2026-10-09). ⛔ Every box sized by CSS, never by a picture. ══ */

/* a close-up: a window filling its box; the phone placed in the window's units (LOOKS) */
.cu { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.cu .cu-phone {
  position: absolute; margin: 0; max-width: none;
  width: calc(var(--z) * 100cqw);
  left: calc(var(--ax) * 100cqw - var(--fx) * var(--z) * 100cqw);
  top: calc(var(--ay) * 100cqh + var(--dy, 0rem) - var(--fy) * var(--z) * 100cqw * var(--r));
}
/* below 48rem: a close-up's `phone` overrides (--zp …) */
@media (max-width: 47.9375rem) {
  .cu .cu-phone {
    width: calc(var(--zp, var(--z)) * 100cqw);
    left: calc(var(--axp, var(--ax)) * 100cqw - var(--fxp, var(--fx)) * var(--zp, var(--z)) * 100cqw);
    top: calc(var(--ayp, var(--ay)) * 100cqh + var(--dyp, var(--dy, 0rem)) - var(--fyp, var(--fy)) * var(--zp, var(--z)) * 100cqw * var(--r));
  }
}
/* bezel and corners scale with the phone */
.cu .phone-frame { padding: calc(var(--zp, var(--z)) * 1.5cqw); border-radius: 13.5% 13.5% 8.3% 8.3% / 6.2% 6.2% 3.8% 3.8%; }
@media (min-width: 48rem) { .cu .phone-frame { padding: calc(var(--z) * 1.5cqw); } }
/* a lens: a rounded, inset window — a crop that reads as meant */
.cu.is-lens { inset: 0 1.25rem 1.25rem; border-radius: 1.25rem; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 24px 48px -24px rgb(0 0 0 / .8); }
.cu.is-lens .cu-phone.is-bare .shot img { border-radius: 0; box-shadow: none; }
.cu .phone-frame .shot img { border-radius: 11% 11% 6% 6% / 5.1% 5.1% 2.8% 2.8%; }
.cu .cu-phone.is-bare .shot img {
  border-radius: 1.25rem;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 30px 60px -24px rgb(0 0 0 / .75);
}

.deck-card-visual.is-close { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 1.5rem; }
/* flipped: the picture hangs from the card's top edge, the words at its foot, the + on top */
.deck-card.is-flip { flex-direction: column-reverse; }
.deck-card.is-flip .deck-card-copy { padding-block: 1.25rem 2.25rem; padding-right: 4.5rem; }
.deck-card.is-flip .deck-card-visual.is-close { margin-top: 0; }
.deck-card.is-flip .deck-more { top: 1.125rem; bottom: auto; }
@media (max-width: 47.9375rem) { .deck-card.is-flip .deck-card-copy { padding-block: 1rem 1.75rem; } }

.hb-head { display: grid; gap: 1.25rem; margin-bottom: 2.5rem; }
.hb-head .chapter-copy { margin-top: 0; }
@media (min-width: 64rem) {
  .hb-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: end; margin-bottom: 3.25rem; }
  .hb-head .chapter-head h2 { margin-top: 0.75rem; }
}

/* tiles (ref 4) */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 56rem) {
  .tiles-3 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
  .tiles-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.tile { min-width: 0; display: flex; flex-direction: column; gap: 1.125rem; }
.tile-visual {
  position: relative; height: 34rem; overflow: hidden; isolation: isolate;
  border-radius: 1.75rem; background: #050505; border: 1px solid rgb(255 255 255 / .08);
}
.tile-cap { margin: 0 0.25rem; font-size: 1rem; line-height: 1.5; max-width: 42ch; }
.tile-cap b { color: var(--on-brand); font-weight: 600; }
.tone-ink .tile-cap, .tone-black .tile-cap { color: rgb(250 249 246 / .6); }
@media (max-width: 55.9375rem) {
  .tiles {
    grid-auto-flow: column; grid-auto-columns: min(82vw, 24rem);
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter, 1.25rem) * -1); padding-inline: var(--gutter, 1.25rem);
    scroll-padding-inline: var(--gutter, 1.25rem);
  }
  .tiles::-webkit-scrollbar { display: none; }
  .tile { scroll-snap-align: start; }
  .tile-visual { height: 28rem; }
}
.tile-bubble {
  position: absolute; left: 1rem; right: 1rem; top: 1rem; z-index: 5;
  display: grid; gap: 0.3rem; padding: 0.875rem 1.125rem 1rem;
  border-radius: 1.25rem; background: rgb(250 249 246 / .94); color: #1B1A18;
  box-shadow: 0 22px 44px -18px rgb(0 0 0 / .8);
}
.tile-bubble-from { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 600; color: #57534E; }
.tile-bubble-from .icon { width: 0.95rem; height: 0.95rem; }
.tile-bubble-text { font-size: 1.0625rem; line-height: 1.4; }
.tile-pills {
  list-style: none; margin: 0; padding: 0; position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
}
.tile-pill {
  display: inline-flex; align-items: center; gap: 0.75rem; white-space: nowrap;
  padding: 0.5rem 1.375rem 0.5rem 0.5rem; border-radius: 999px;
  background: rgb(250 249 246 / .08); border: 1px solid rgb(250 249 246 / .1);
  color: var(--on-brand); font-size: 1.125rem; font-weight: 500;
}
.tile-pill-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; display: grid; place-items: center; color: #fff; flex: none; }
.tile-pill-icon .icon { width: 1.125rem; height: 1.125rem; }
.tile-pill.is-amber .tile-pill-icon { background: #C2410C; }
.tile-pill.is-rose .tile-pill-icon { background: #BE123C; }
.tile-pill.is-sky .tile-pill-icon { background: #0369A1; }
.tile-pill.is-green .tile-pill-icon { background: #15803D; }
.tile-pill.is-teal .tile-pill-icon { background: #0F766E; }
.tile-pill.is-violet .tile-pill-icon { background: #6D28D9; }

/* explorer (ref 3) */
.ex-panel {
  position: relative; display: grid; gap: 1.25rem; overflow: hidden;
  border-radius: 2rem; background: #0C0C0C; border: 1px solid rgb(255 255 255 / .08); padding: 1rem;
}
@media (min-width: 56rem) {
  .ex-panel { grid-template-columns: 2.75rem minmax(15rem, 22rem) minmax(0, 1fr); align-items: center; height: 40rem; padding: 0 0 0 2rem; gap: 1.75rem; }
}
.ex-steps { display: none; }
@media (min-width: 56rem) { .ex-steps { display: grid; gap: 0.625rem; } }
.ex-step {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: none; display: grid; place-items: center;
  background: rgb(250 249 246 / .1); color: rgb(250 249 246 / .85); visibility: hidden;
}
.ex-panel.is-live .ex-step { visibility: visible; }
.ex-step:hover:not(:disabled) { background: rgb(250 249 246 / .18); }
.ex-step:disabled { opacity: 0.35; }
.ex-step .icon { width: 1.25rem; height: 1.25rem; }
.ex-list { display: grid; gap: 0.625rem; align-content: center; justify-items: start; min-width: 0; }
.ex-item { min-width: 0; max-width: 100%; }
.ex-pill {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 1.375rem 0.5rem 0.5rem; border-radius: 999px;
  background: rgb(250 249 246 / .1); color: var(--on-brand); font-weight: 500; font-size: 1.0625rem;
  transition: background 150ms var(--ease);
}
.ex-pill::-webkit-details-marker { display: none; }
.ex-pill:hover { background: rgb(250 249 246 / .16); }
.ex-pill:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
.ex-dot { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid rgb(250 249 246 / .7); display: grid; place-items: center; flex: none; }
.ex-dot .icon { width: 0.95rem; height: 0.95rem; }
.ex-item[open] { background: rgb(250 249 246 / .1); border-radius: 1.5rem; padding: 1.125rem 1.375rem 1.25rem; }
.ex-item[open] .ex-pill { background: none; padding: 0; font-weight: 600; cursor: default; }
.ex-item[open] .ex-dot { display: none; }
.ex-card { margin: 0.5rem 0 0; font-size: 1rem; line-height: 1.5; max-width: 40ch; }
.tone-black .ex-card, .tone-ink .ex-card { color: rgb(250 249 246 / .72); }
/* the open item's screen, by CSS alone (script off too); the first when none is open */
.ex-stage { position: relative; height: 26rem; border-radius: 1.25rem; overflow: hidden; }
@media (min-width: 56rem) { .ex-stage { height: 100%; border-radius: 0; } }
@media (max-width: 55.9375rem) {
  .ex-stage { order: -1; }
  .ex-list { min-height: var(--ex-reserve); align-content: start; }
}
.ex-view { display: none; position: absolute; inset: 0; }
.ex-view:first-child { display: block; }
.ex-panel:has(.ex-item[open]) .ex-view:first-child { display: none; }
.ex-panel:has(.ex-item:nth-child(1)[open]) .ex-view:nth-child(1),
.ex-panel:has(.ex-item:nth-child(2)[open]) .ex-view:nth-child(2),
.ex-panel:has(.ex-item:nth-child(3)[open]) .ex-view:nth-child(3),
.ex-panel:has(.ex-item:nth-child(4)[open]) .ex-view:nth-child(4),
.ex-panel:has(.ex-item:nth-child(5)[open]) .ex-view:nth-child(5),
.ex-panel:has(.ex-item:nth-child(6)[open]) .ex-view:nth-child(6),
.ex-panel:has(.ex-item:nth-child(7)[open]) .ex-view:nth-child(7),
.ex-panel:has(.ex-item:nth-child(8)[open]) .ex-view:nth-child(8) { display: block; }
@keyframes exIn { from { transform: translateY(1.75rem); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) { .ex-panel.is-live .ex-view { animation: exIn 420ms var(--ease) both; } }
/* the office's screens: a desk crop in a laptop lid, placed like a phone; a phone gets the phone twin */
.cu .cu-desk { position: absolute; margin: 0; width: calc(var(--z) * 100cqw);
  left: calc(var(--ax) * 100cqw - var(--fx) * var(--z) * 100cqw);
  top: calc(var(--ay) * 100cqh + var(--dy, 0rem) - var(--fy) * var(--z) * 100cqw * var(--r));
  padding: 0.625rem 0.625rem 0.75rem; }
.cu .cu-desk .shot img { border-radius: 0.375rem; }
@media (max-width: 47.9375rem) { .cu .cu-desk { display: none; } }
@media (min-width: 48rem) { .cu .cu-phone.is-alt { display: none; } }
/* spread: the words beside one or two large windows */
.hb-head.is-column { margin-bottom: 0; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.25rem; }
.sp-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 56rem) {
  .sp-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; }
  .sp-section.side-left .sp-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .sp-section.side-left .sp-media { order: -1; }
}
.sp-media { min-width: 0; display: grid; gap: 1.125rem; }
.sp-panes { position: relative; display: grid; gap: 1rem; }
.sp-pane { position: relative; height: 36rem; overflow: hidden; isolation: isolate; border-radius: 1.75rem; background: #050505; border: 1px solid rgb(255 255 255 / .08); }
.sp-2 .sp-pane { height: 30rem; }
@media (min-width: 40rem) { .sp-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 47.9375rem) { .sp-pane { height: 28rem; } .sp-2 .sp-pane { height: 20rem; } }
.sp-arrow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--cta); color: var(--cta-ink); box-shadow: 0 10px 24px -8px rgb(0 0 0 / .7);
}
.sp-arrow .icon { width: 1.25rem; height: 1.25rem; }
@media (max-width: 39.9375rem) { .sp-arrow .icon { transform: rotate(90deg); } }
.sp-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .sp-caps-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cu .cu-desk.is-bare { padding: 0; }
.cu .cu-desk.is-bare .shot img { border-radius: 1rem; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 30px 60px -24px rgb(0 0 0 / .75); }
@media (max-width: 47.9375rem) {
  .cu.is-lens-phone { inset: 0 1.25rem 1.25rem; border-radius: 1.25rem; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 24px 48px -24px rgb(0 0 0 / .8); }
  .cu.is-lens-phone .cu-phone.is-bare .shot img { border-radius: 0; box-shadow: none; }
}