/* /products/calendar */
.product-hero { padding: 88px 0 56px; }
  .product-hero h1 { margin-top: 24px; }
  .product-hero h1 .accent { color: var(--primary-strong);  }
  [data-theme="dark"] .product-hero h1 .accent { color: var(--primary); }
  .product-hero .lede { margin-top: 24px; max-width: 56ch; }
  .product-hero .cta-row { margin-top: 32px; }

  /* Lifted out of .container in the markup so it can run wider than the text
     column without negative margins or 100vw (which overshoots by the
     scrollbar width). Capped at 1600 rather than bled to the viewport edge:
     the source render is 1448px, and a UI screenshot upscaled much past that
     goes visibly soft on the small text inside it. */
  .cal-frame {
    width: calc(100% - var(--space-16));
    max-width: 1600px;
    margin: var(--space-16) auto 0;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    line-height: 0;
  }
  @media (max-width: 600px) {
    /* Match the narrower gutter .container switches to at this width. */
    .cal-frame { width: calc(100% - var(--space-10)); }
  }
  .cal-frame img { width: 100%; height: auto; display: block; }
  .preview-cap { margin-top: 14px; font-size: var(--text-sm); color: var(--muted); text-align: center; }

  /* ===== Day rhythm timeline (replaces generic icon-grid) ===== */
  .rhythm-head { margin-top: 128px; max-width: 60ch; }
  .rhythm-head h2 { margin-top: 12px; }
  .rhythm-head p { color: var(--muted); font-size: var(--text-lg); margin-top: 14px; }
  .rhythm-line { position: relative; margin-top: 56px; display: flex; gap: 32px; }
  .rhythm-line::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 1px; background: var(--border-strong); }
  .stop { flex: 1; position: relative; padding-top: 32px; }
  .stop .dot { position: absolute; top: 0; left: 0; width: 18px; height: 18px; border-radius: 999px; background: var(--surface); border: 2px solid var(--primary-strong); }
  [data-theme="dark"] .stop .dot { border-color: var(--primary); }
  .stop .time { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-strong); margin-bottom: 10px; }
  [data-theme="dark"] .stop .time { color: var(--primary); }
  .stop h3 { font-size: var(--text-lg); margin-bottom: 8px; }
  .stop p { color: var(--muted); font-size: var(--text-base); line-height: 1.55; }
  @media (max-width: 860px) {
    .rhythm-line { flex-direction: column; gap: 28px; }
    .rhythm-line::before { top: 0; bottom: 0; left: 9px; right: auto; width: 1px; height: auto; }
    .stop { padding-top: 0; padding-left: 32px; }
    .stop .dot { top: 2px; }
  }

  /* ===== Invite-link feature row ===== */
  .cal-invite { margin-top: 128px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .invite-copy h2 { margin-top: 14px; max-width: 16ch; }
  .invite-copy .lede { margin-top: 18px; font-size: 1.0625rem; max-width: 44ch; }
  .invite-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 28px; }
  .invite-card .who { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
  .invite-card .avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--primary-soft); color: var(--on-primary-soft); display: grid; place-items: center; font-weight: 600; font-size: var(--text-base); }
  .invite-card .who .mock-title { font-size: var(--text-md); margin: 0; }
  .invite-card .who span { display: block; font-size: var(--text-sm); color: var(--muted); margin-top: 2px; }
  .invite-card .slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .invite-card .slot { border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 0; text-align: center; font-size: var(--text-sm); font-family: var(--font-mono); color: var(--text-soft); }
  .invite-card .slot.picked { background: var(--primary-strong); color: var(--primary-fg); border-color: var(--primary-strong); }
  [data-theme="dark"] .invite-card .slot.picked { background: var(--primary); color: #10160f; border-color: var(--primary); }
  .invite-card .link-row { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
  @media (max-width: 860px) { .cal-invite { grid-template-columns: 1fr; gap: 36px; } }

  /* ===== CTA: two-column with mini confirmation card ===== */
  .cal-cta { margin-top: 128px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding: 64px; background: var(--primary-soft); border-radius: var(--radius-xl); }
  [data-theme="dark"] .cal-cta { background: var(--surface-2); border: 1px solid var(--border); }
  .cal-cta h2 { color: var(--on-primary-soft); }
  [data-theme="dark"] .cal-cta h2 { color: var(--text); }
  .cal-cta .lede { color: var(--on-primary-soft); opacity: 0.85; margin-top: 14px; }
  [data-theme="dark"] .cal-cta .lede { color: var(--muted); opacity: 1; }
  .cal-cta .cta-row { margin-top: 28px; }
  .confirm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 22px 24px; display: flex; align-items: flex-start; gap: 14px; }
  .confirm-card .tick { width: 30px; height: 30px; border-radius: 999px; background: var(--primary-strong); color: var(--primary-fg); display: grid; place-items: center; flex-shrink: 0; }
  [data-theme="dark"] .confirm-card .tick { background: var(--primary); color: #10160f; }
  .confirm-card .mock-title { font-size: var(--text-base); margin: 0 0 4px; }
  .confirm-card p { font-size: var(--text-sm); color: var(--muted); margin: 0; font-family: var(--font-mono); }
  @media (max-width: 860px) { .cal-cta { grid-template-columns: 1fr; padding: 40px 32px; } }