/* /products/mail */
.product-hero { padding: 80px 0 0; }
  .product-hero h1 { margin-top: 22px; max-width: 18ch; }
  .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: 54ch; }
  .product-hero .cta-row { margin-top: 32px; }

  /* Big product preview — live render, scaled to fit width */
  .preview-frame {
    margin-top: 60px;
    width: 100%;
    aspect-ratio: 1917 / 910;
    background: #0b0e13;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
  }
  .preview-frame iframe { position: absolute; top: 0; left: 0; width: 1917px; height: 910px; border: 0; transform-origin: top left; }
  .preview-cap { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; }

  /* ===== Feature rows ===== */
  .features { margin-top: 130px; display: flex; flex-direction: column; gap: 132px; }
  .feature { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; }
  .feature.rev .f-copy { order: 2; }
  .f-copy .eyebrow { margin-bottom: 20px; }
  .f-copy h2 { max-width: 16ch; }
  .f-copy h2 .accent { color: var(--primary-strong); }
  [data-theme="dark"] .f-copy h2 .accent { color: var(--primary); }
  .f-copy .lede { margin-top: 18px; font-size: 17px; max-width: 46ch; }
  .f-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
  .f-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: var(--text-soft); font-size: 15px; line-height: 1.5; }
  .f-list li i { color: var(--primary-strong); font-size: 18px; margin-top: 1px; }
  [data-theme="dark"] .f-list li i { color: var(--primary); }
  .f-list li strong { color: var(--text); font-weight: 600; }

  /* Dark stage that frames each UI render */
  .ui-shot {
    height: 520px;
    border-radius: var(--radius-xl);
    border: 1px solid #1c2330;
    overflow: hidden;
    position: relative;
    display: grid;
    place-items: center;
    background:
      radial-gradient(120% 130% at 18% 0%, rgba(67,183,83,0.16), transparent 52%),
      radial-gradient(120% 120% at 100% 100%, rgba(74,138,255,0.10), transparent 55%),
      linear-gradient(160deg, #0d131d 0%, #090d12 100%);
    box-shadow: var(--shadow-lg);
  }
  .ui-shot iframe { border: 0; transform-origin: center center; }
  @media (max-width: 860px) {
    .feature { grid-template-columns: 1fr; gap: 36px; }
    .feature.rev .f-copy { order: 0; }
    .ui-shot { height: 440px; }
  }

  /* ===== Capabilities ===== */
  .cap-head { margin-top: 140px; text-align: center; max-width: 60ch; margin-left: auto; margin-right: auto; }
  .cap-head h2 { margin-bottom: 14px; }
  .cap-head p { color: var(--muted); font-size: 16px; }
  .capabilities {
    margin-top: 44px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: var(--border);
    border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  }
  .cap { background: var(--surface); padding: 32px 28px; }
  .cap .ico { width: 42px; height: 42px; border-radius: 11px; background: var(--primary-soft); color: var(--on-primary-soft); display: grid; place-items: center; margin-bottom: 18px; }
  .cap .ico i { font-size: 21px; }
  .cap h3 { margin-bottom: 8px; font-size: 17px; }
  .cap p { color: var(--muted); font-size: 14px; line-height: 1.55; }
  @media (max-width: 980px) { .capabilities { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .capabilities { grid-template-columns: 1fr; } }

  /* ===== Comparison table (replaces generic icon-grid) ===== */
  .compare-head { margin-top: 140px; text-align: center; max-width: 60ch; margin-left: auto; margin-right: auto; }
  .compare-head h2 { margin-bottom: 14px; }
  .compare-head p { color: var(--muted); font-size: 16px; }
  .compare { margin-top: 44px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
  .compare-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; }
  .compare-row + .compare-row { border-top: 1px solid var(--border); }
  .compare-row.head { background: var(--surface-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .compare-row > div { padding: 20px 24px; font-size: 14.5px; color: var(--text-soft); display: flex; align-items: center; gap: 10px; }
  .compare-row.head > div { padding: 14px 24px; }
  .compare-row > div:first-child { color: var(--text); font-weight: 600; }
  .compare-row > div:not(:first-child) { border-left: 1px solid var(--border); }
  .compare-row i.yes { color: var(--primary-strong); font-size: 17px; }
  [data-theme="dark"] .compare-row i.yes { color: var(--primary); }
  .compare-row i.no { color: var(--muted); font-size: 17px; opacity: 0.5; }
  @media (max-width: 700px) { .compare-row { grid-template-columns: 1.1fr 1fr 1fr; } .compare-row > div { padding: 16px; font-size: 13px; } }

  /* ===== CTA: two-column with mini confirmation card ===== */
  .mail-cta { margin-top: 120px; 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"] .mail-cta { background: var(--surface-2); border: 1px solid var(--border); }
  .mail-cta h2 { color: var(--on-primary-soft); }
  [data-theme="dark"] .mail-cta h2 { color: var(--text); }
  .mail-cta .lede { color: var(--on-primary-soft); opacity: 0.85; margin-top: 14px; }
  [data-theme="dark"] .mail-cta .lede { color: var(--muted); opacity: 1; }
  .mail-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 h4 { font-size: 14.5px; margin: 0 0 4px; }
  .confirm-card p { font-size: 13px; color: var(--muted); margin: 0; font-family: var(--font-mono); }
  @media (max-width: 860px) { .mail-cta { grid-template-columns: 1fr; padding: 40px 32px; } }