/* ============================================================================
   Landing page — what version 10 added.

   The three "readings" are shown with the product's REAL circles rather than an
   illustration of them, for the same reason the rest of this page does: a
   drawing of a feature is a promise, and the actual element is evidence.
   ========================================================================== */

/* ------------------------------------------------------- the three readings */
.reads{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,28px);margin-top:clamp(30px,4vw,48px);
}
.read{
  background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:24px;
  padding:clamp(20px,2.4vw,28px);box-shadow:var(--lift);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}
.read-stage{
  position:relative;height:186px;display:flex;align-items:center;justify-content:center;
  gap:18px;margin-bottom:20px;
}
/* The .pnode rules on this page are written for a container-query stage, so the
   demo circles here are given explicit sizes and taken out of absolute flow. */
.read .pnode{position:relative;left:auto;top:auto;translate:none;flex:0 0 auto}
.read .pnode .title{font-size:calc(var(--s) * .14)}
.read .pnode .status{font-size:calc(var(--s) * .072)}

.read-b{opacity:.92}
/* the warm bloom, exactly as the app draws it: underneath, never on top */
.read-heat{
  /* Centred with transform ONLY. The `translate` property and a transform in the
     keyframes both apply, so having both moved this a full 100% off. */
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:210px;height:210px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,
    rgba(237,15,104,.26) 0%, rgba(240,120,60,.12) 42%, transparent 68%);
  filter:blur(10px);
  animation:read-breathe 5.5s ease-in-out infinite;
}
@keyframes read-breathe{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.85}
  50%    {transform:translate(-50%,-50%) scale(1.07);opacity:1}
}
.read-fade{filter:saturate(.42);opacity:.62}
.read-fade::after{
  content:'';position:absolute;inset:-7px;border-radius:50%;
  border:1.5px dashed color-mix(in srgb,var(--node) 34%,transparent);
}
/* Sits clear of the circle rather than across its foot. */
.read-days{
  position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:650;letter-spacing:.04em;
  color:var(--ink-faint);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:3px 11px;
}
.read h3{margin:0;font-size:clamp(17px,1.5vw,20px);font-weight:640;letter-spacing:-.022em;line-height:1.25}
.read p{margin:9px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-soft);font-weight:350}

/* ------------------------------------------------------------ what else --- */
.newgrid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);margin-top:clamp(22px,2.6vw,34px);
}
.newcard{
  position:relative;overflow:hidden;border-radius:24px;
  padding:clamp(22px,2.6vw,32px);
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--nc) 11%,#fff),
    color-mix(in srgb,var(--nc) 3%,#fff));
  border:1px solid color-mix(in srgb,var(--nc) 22%,var(--line));
  box-shadow:var(--lift);
}
.newcard::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--nc)}
.newcard-tag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:color-mix(in srgb,var(--nc) 76%,var(--ink));
  margin-bottom:11px;
}
.newcard h3{margin:0;font-size:clamp(19px,1.8vw,24px);font-weight:650;letter-spacing:-.028em;line-height:1.2}
.newcard p{margin:10px 0 0;font-size:15px;line-height:1.58;color:var(--ink-soft);font-weight:350;max-width:44ch}
.newcard p em{font-style:normal;font-weight:600;color:var(--ink-2)}
.newcard-demo{
  margin-top:16px;padding:12px 15px;border-radius:13px;
  background:rgba(255,255,255,.8);border:1px solid color-mix(in srgb,var(--nc) 18%,transparent);
  font-size:13.5px;line-height:1.45;font-weight:520;color:var(--ink-2);
}

/* ---------------------------------------------------------------- narrower */
@media(max-width:980px){
  .reads{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .read-stage{height:150px}
  .newgrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){ .read-heat{animation:none} }