/* ==========================================================================
   pum.me home: the demo machinery, over the shared grammar in /css/pum.css
   (type, colour, nav, call to action, device, pool, circle film, FAQ,
   footer). Ported from the lab 2026-09-28.
   ========================================================================== */

/* ---------- chapters: text left, one device right (desktop) ---------- */
.chapters { position: relative; }
.chapter {
  padding-block: clamp(64px, 12vw, 120px);
}
.chapter-copy { display: grid; gap: 18px; }
.chapter-copy .h2 { max-width: 13ch; text-wrap: balance; }
.chapter-media {
  margin-top: 40px;
  display: flex; justify-content: center;
  position: relative;
}
.chapter-media .device { --w: min(74vw, 320px); }
@media (max-width: 959px) {
  .chapter-media {            /* the fold cuts the device, as in the hero */
    height: min(118vw, 520px); overflow: hidden; align-items: flex-start;
    margin-inline: calc(var(--gutter) * -1);
    padding-top: 8px;
  }
  .chapter { padding-bottom: 0; }
}

@media (min-width: 960px) {
  .chapters { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; }
  .chapter { min-height: 92vh; display: flex; align-items: center; }
  .chapter-media { display: none; }
  .stage {
    position: sticky; top: 0; height: 100vh;
    display: flex; align-items: center; justify-content: center;
  }
  .stage .device { --w: 340px; }
}
@media (max-width: 959px) { .stage { display: none; } }

.stage .device-screen > .layer { opacity: 0; transition: opacity .7s var(--ease); }
.stage .device-screen > .layer.on { opacity: 1; }
.stage-caption {
  position: absolute; bottom: 7vh; left: 0; right: 0; text-align: center;
}

/* the stage leaves room under the phone for a chapter's controls */
/* The phone centres in the viewport below the nav and never moves between
   chapters (Lewis, 2026-09-27). */
@media (min-width: 960px) {
  .stage { padding-top: 76px; }
  .stage-rig { position: relative; }
  .stage .device { --w: min(340px, calc((100vh - 76px - 48px) / 2.1)); }
}

/* ---------- sets: one phone, several real stills ----------
   A chapter with data-set shows a set of captures instead of one screen:
   the regimes crossfade on a timer (tap to step), the patterns swap on the
   controls. Every instance (inline on mobile, the stage on desktop) renders
   from one state, so the two can't disagree. Stills only, never an SVG
   redraw of the app: a redraw drifts the moment the app changes. */
.set-frame { position: absolute; inset: 0; }
.set-frame > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .6s var(--ease);
}
.set-frame > img.on { opacity: 1; }

/* ---------- scroll-told sections: one beat of text per frame ----------
   The phone follows whichever beat has crossed the line (lab.js). The
   inactive beats dim, so the words beside the phone are always the ones
   it is showing. */
.beat .h3 { font-size: clamp(21px, 2vw, 26px); font-weight: 500; letter-spacing: -0.015em; }
.beat p { color: var(--ink-2); margin-top: 8px; max-width: var(--measure); }
@media (min-width: 960px) {
  .chapter.seq { display: block; min-height: 0; padding-block: 0; }
  .seq-intro { min-height: 70vh; align-content: center; padding-top: 10vh; }
  .seq-phone { display: none; }
  .beat { min-height: 78vh; display: flex; align-items: center; }
  .beat-inner { transition: opacity .5s var(--ease); opacity: .28; }
  .beat.on .beat-inner { opacity: 1; }
}
@media (max-width: 959px) {
  .chapter.seq { padding-bottom: 0; }
  .seq-body { position: relative; margin-top: 36px; }
  .seq-body .seq-phone {
    position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 1;
    margin-top: 0;
    background: var(--ground);
  }
  /* the beats slide up over the phone's lower half, as glass cards */
  .beat { position: relative; z-index: 2; min-height: 72svh; display: flex; align-items: flex-end; padding-bottom: 6svh; }
  .beat:first-of-type { margin-top: -30svh; }
  .beat-inner {
    width: 100%;
    padding: 18px 20px 20px; border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 18px 40px -18px rgba(38,36,63,.28);
  }
}

/* ---------- the report: a paper sheet and one floating card ----------
   B's floating-card grammar, used once on the page. The sheet is page 1 of
   the seed's report, too small to read, linked to nothing. */
.over { position: absolute; z-index: 4; pointer-events: none; }
.paper {
  width: calc(var(--w, 300px) * 0.45);
  aspect-ratio: 210 / 297;
  left: calc(var(--w, 300px) * -0.2);
  bottom: 12%;
  transform: rotate(-7deg);
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(38,36,63,.08),
    0 8px 16px -6px rgba(38,36,63,.22),
    0 28px 50px -20px rgba(38,36,63,.35);
}
.paper img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.float {
  width: min(62vw, 250px);
  display: grid; gap: 3px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 18px 40px -16px rgba(38,36,63,.28);
  font-size: 13.5px; line-height: 1.35; color: var(--ink-2);
}
.float b { color: var(--ink); font-weight: 560; font-size: 15px; }
.f-chips { display: flex; gap: 6px; margin-top: 8px; }
.f-chips i { white-space: nowrap; font-style: normal; font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: rgba(20,175,195,.12); color: var(--ink); }
.f-chips i:last-child { background: var(--aqua); color: #fff; }
/* below the report's heading and its FROM YOUR LOG label, over the summary
   rows' values (Lewis, 2026-09-27: it hid the heading) */
.float-relief { top: 33%; right: calc(var(--w, 300px) * -0.26); }
/* on the stage the overlays show only while their chapter is on */
.stage .over { opacity: 0; transform-origin: center; transition: opacity .6s var(--ease), translate .8s var(--ease); translate: 0 14px; }
.stage[data-on="report"] .over { opacity: 1; translate: 0 0; }
.stage .device { position: relative; }
@media (max-width: 959px) {
  /* the fold cuts the phone at about 69% of its height: keep both inside */
  .chapter-media .paper { bottom: auto; top: 40%; left: -9%; }
  .chapter-media .float-relief { top: 24%; right: -5%; width: min(60vw, 244px); }
}

/* ---------- band: privacy, demoted to a strip of facts ---------- */
.facts {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
}
.fact { padding: 22px 0; border-top: 1px solid var(--hair); display: grid; gap: 6px; }
.fact:first-child { border-top: 0; }
.fact b { font-weight: 560; font-size: 17px; }
.fact span { color: var(--ink-2); font-size: 15px; line-height: 1.45; }
@media (min-width: 760px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
  .fact { border-top: 0; border-left: 1px solid var(--hair); padding: 26px 28px; }
  .fact:first-child { border-left: 0; padding-left: 0; }
}


/* ==========================================================================
   the home page's own composition (hero A, specimen)
   ========================================================================== */

.hero { position: relative; overflow: hidden; isolation: isolate; }
.chapter-copy .h2, .band .h2 { text-wrap: balance; }

/* ================= hero · specimen =================
   Daylight ground, centred type, the glass device rising out of a pool of
   caustic light and cut by the fold like a specimen in a vitrine. */
.hero-a {
  padding-top: calc(128px + env(safe-area-inset-top, 0px));
  text-align: center;
  background:
    radial-gradient(80% 50% at 50% 0%, #FFFFFF 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--ground) 0%, #EEF6F8 100%);
}
/* experiment: the circle card's material, across the whole hero and wider.
   Seafoam from the lower left, lavender from the upper right, a pearl note,
   the sunlit glare behind the headline; the caustic film and the turning
   soap-film sheen span the hero. Shares @property --film and @keyframes
   film with the circle card (above).
   html:not(.hero-plain) is the lab's A/B toggle, kept so the cascade is
   unchanged; nothing sets .hero-plain in production. */
html:not(.hero-plain) .hero-a {
  background:
    radial-gradient(60% 42% at 50% 16%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 72%),
    radial-gradient(70% 60% at 104% 0%, rgba(190, 176, 245, .62), transparent 64%),
    radial-gradient(80% 70% at -6% 96%, rgba(96, 222, 206, .55), transparent 66%),
    radial-gradient(40% 40% at 96% 92%, rgba(255, 190, 222, .38), transparent 64%),
    linear-gradient(135deg, #DDFBF4 0%, #D8F3FA 48%, #E7E2FB 100%);
}
.hero-water, .hero-sheen { display: none; }
html:not(.hero-plain) .hero-water {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
  opacity: .7; mix-blend-mode: overlay;
  -webkit-mask: radial-gradient(90% 80% at 50% 45%, #000 30%, transparent 92%);
  mask: radial-gradient(90% 80% at 50% 45%, #000 30%, transparent 92%);
}
html:not(.hero-plain) .hero-sheen {
  display: block; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--film) at 55% 42%,
    rgba(159, 231, 240, 0), rgba(185, 245, 218, .5), rgba(255, 241, 201, .32),
    rgba(255, 198, 221, .38), rgba(201, 190, 240, .5), rgba(159, 231, 240, 0));
  mix-blend-mode: overlay; opacity: .85; filter: blur(60px);
  animation: film 26s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .hero-sheen { animation: none !important; } }
/* the hero settles into the page ground at its foot */
html:not(.hero-plain) .hero-a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 1; pointer-events: none;
  background: linear-gradient(transparent, var(--ground));
}
.hero-a-copy { display: grid; justify-items: center; gap: 20px; }
.hero-a-copy .display { max-width: 11ch; }
.hero-a-copy .lede { max-width: 26rem; }
/* the badge, then "see it work" alone on its own line, quiet (Lewis, 2026-09-25) */
.hero-cta { display: grid; justify-items: center; gap: 16px; margin-top: 8px; }
.link-soft {
  /* the lede's size, weight and colour: one voice under the headline, not a
     third (Lewis, 2026-09-28) */
  font-size: clamp(18px, 2.1vw, 21px); color: var(--ink-2); text-decoration: none;
  padding: 6px 10px; transition: color .2s;
}
.link-soft:hover { color: var(--ink); }
.hero-a-stage {
  position: relative; isolation: isolate;
  display: flex; justify-content: center; align-items: flex-start;
  margin-top: clamp(40px, 6vw, 64px);
  height: min(126vw, 640px);          /* the fold cuts the device */
  overflow: hidden;
}
.hero-a-stage .pool { bottom: auto; top: 8%; width: 250%; max-width: 1700px; opacity: 1; }
@media (min-width: 960px) {
  .hero-a-stage { height: 600px; }
}

/* ================= scenes: a section that owns the screen =================
   A statement or a self-contained block gets the whole viewport, content
   centred, so it arrives as its own moment instead of trailing the last
   one. min-height, never height: the FAQ opens, and a phone's text can
   outgrow a screen; the section grows rather than clipping. */
.scene {
  min-height: 100svh;
  display: grid; align-content: center;
  padding-block: clamp(88px, 12vh, 140px);
}

/* ================= the story, directly under the hero ================= */
.story-pull {
  max-width: 44rem; margin-inline: auto;
  padding-left: clamp(18px, 3vw, 28px);
  border-left: 2.5px solid var(--signal);
}
.story-pull p {
  font-size: clamp(24px, 3.6vw, 38px);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
}
.story-pull footer { margin-top: 28px; }
.story-pull footer a {
  font-weight: 520; font-size: clamp(17px, 1.6vw, 20px); color: var(--aqua-deep); text-decoration: none;
  display: inline-flex; gap: 8px; align-items: center;
  border-bottom: 1.5px solid rgba(14, 133, 151, .28); padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}
.story-pull footer a:hover { color: var(--ink); border-color: var(--ink); }
.story-pull footer a:hover { color: var(--ink); }

/* ================= why a jellyfish ================= */
.jelly-beat { overflow-x: clip; }
.jelly-grid { display: grid; gap: 32px; align-items: center; }
.jelly-figure { position: relative; isolation: isolate; display: grid; place-items: center; min-height: min(80vw, 520px); }
.jelly-figure .pool { width: 150%; bottom: auto; top: 50%; translate: 0 -50%; aspect-ratio: 1.2; opacity: 1; }
/* the shipped app tile, iOS corner radius, lying in the water */
.app-tile {
  width: min(56vw, 300px); aspect-ratio: 1; border-radius: 22.4%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .6),
    0 2px 6px rgba(14, 133, 151, .18),
    0 30px 60px -18px rgba(14, 133, 151, .55),
    0 60px 90px -40px rgba(38, 36, 63, .35);
}
.jelly-copy .prose p { font-size: clamp(19px, 1.9vw, 23px); line-height: 1.5; color: var(--ink); max-width: 30rem; }
.jelly-copy { display: grid; gap: 18px; }
@media (min-width: 900px) { .jelly-grid { grid-template-columns: 1.05fr 1fr; gap: 64px; } }

/* ================= shared bands ================= */
.band { padding-block: clamp(72px, 12vw, 132px); }
.band.scene { padding-block: clamp(88px, 12vh, 140px); }
.band .h2 { margin-top: 0; }

.band-method { background: var(--paper); }
.band-method .h2 { max-width: 16ch; }
.method {
  display: grid; gap: 0; margin: 44px 0 36px;
  border-top: 1px solid var(--hair-2);
}
.method > div { padding: 22px 0; border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: 6.5rem 1fr; gap: 18px; }
.method p { color: var(--ink-2); max-width: 30rem; }
.m-idx { font-size: 17px; font-weight: 600; color: var(--aqua-deep); letter-spacing: -0.005em; font-variant-numeric: tabular-nums; }
.m-dots { display: flex; gap: 5px; align-items: center; height: 1.55em; }
.m-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); }
.m-dots i.off { background: none; box-shadow: inset 0 0 0 1.5px var(--aqua); }
@media (min-width: 860px) {
  .method { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--hair); }
  .method > div { grid-template-columns: 1fr; border-bottom: 0; border-left: 1px solid var(--hair); padding: 26px 28px 30px; }
  .method > div:first-child { border-left: 0; padding-left: 0; }
}

.band-facts { padding-block: clamp(40px, 7vw, 72px); }

.band-circle .soon .h2 { max-width: 14ch; margin: 18px 0 16px; }
.band-circle .prose { margin-bottom: 22px; }

.road-teaser { display: grid; gap: 40px; align-items: center; }
.road-teaser .lede { margin: 14px 0 20px; }
.mini-road { list-style: none; position: relative; display: grid; gap: 0; }
.mini-road::before {
  content: ''; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px;
  background: linear-gradient(var(--signal) 0 45%, var(--hair-2) 45%);
  border-radius: 2px;
}
.mini-road li { position: relative; display: flex; align-items: center; gap: 18px; padding: 10px 0; font-size: 16px; }
.mini-road i { position: relative; z-index: 1; flex: none; width: 16px; height: 16px; border-radius: 50%; }
.mini-road .done i { background: var(--signal); box-shadow: 0 0 0 4px var(--ground); }
.mini-road .now i { background: var(--ground); border: 2px solid var(--signal); box-shadow: 0 0 0 4px var(--ground); }
.mini-road .now i::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--signal); opacity: .5; animation: ping 2.4s var(--ease) infinite; }
.mini-road .next i { background: var(--ground); border: 1.5px dashed var(--ink-3); box-shadow: 0 0 0 4px var(--ground); }
.mini-road .next { color: var(--ink-2); }
@keyframes ping { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
@media (min-width: 860px) { .road-teaser { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .mini-road .now i::after { animation: none; } }


/* ================= closer: the whole viewport (Lewis, 2026-09-25) ================= */
.closer {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh;
  display: grid; place-items: center;
  padding-block: 96px;
  text-align: center;
}
.closer .pool {
  top: 50%; bottom: auto; transform: translate(-50%, -50%);
  width: max(160%, 1400px); max-width: none; aspect-ratio: auto; height: 100%;
  opacity: .85;
}
.closer-inner { display: grid; justify-items: center; gap: 18px; }
.closer-icon { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 16px 40px -12px rgba(14,133,151,.5), 0 0 0 1px rgba(255,255,255,.6); }
.closer-h { font-size: clamp(56px, 12vw, 128px); }