/* Calm uses the shared site palette and leaves the app capture untouched. */
.calm-section { border-bottom:1px solid var(--line); }
.calm-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,7vw,100px); align-items:center; }
.calm-grid h2 { max-width:480px; }
.calm-copy { margin-top:28px; }
.calm-copy .intro { margin-top:0; color:var(--ink); font-size:clamp(1.15rem,1.6vw,1.4rem); }
.calm-copy > p + p { margin-top:20px; color:var(--muted); max-width:48ch; }
.calm-copy .text-link { margin-top:28px; }
/* The calm kit's night window, drawn the way the app draws it: a glow and a thin ring
   swell around one star over 18 seconds. Decoration, never a breathing count. Under
   Reduce Motion the picture swaps to a still file held halfway through the swell. The
   theme classes sit on the pictures, so nothing here may set their display. */
.calm-window { margin:0; justify-self:center; width:min(100%,340px); }
.calm-window img { display:block; width:100%; height:auto; }
@media(max-width:760px) {
  .calm-grid { grid-template-columns:1fr; gap:36px; }
  .calm-grid h2 br { display:none; }
  .calm-copy { margin-top:22px; }
  .calm-copy > p + p { margin-top:16px; }
  .calm-copy .text-link { margin-top:20px; }
  .calm-window { width:min(72%,280px); }
}