/* Launch kit page. Layers on top of program.css. */

.kitlist{ list-style:none; margin:0; padding:0; counter-reset:none; }
.kitlist li{
  display:grid; grid-template-columns:38px 1fr auto; gap:16px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid oklch(0.965 0.008 85 / 0.16);
}
.kitlist li:last-child{ border-bottom:0; }
.kitlist .mono{ font-size:12px; color:oklch(0.78 0.09 132); letter-spacing:0.1em; }
.kitlist a{ color:oklch(0.975 0.006 85); text-decoration:none; font-size:16px; border-bottom:1px solid transparent; }
.kitlist a:hover{ border-bottom-color:oklch(0.78 0.09 132); }
.kitlist-d{ font-size:12.5px; color:oklch(0.965 0.008 85 / 0.5); text-align:right; }

/* ---- emails ---- */

.em{
  border:1px solid var(--rule-firm); border-radius:2px;
  padding:22px 24px; margin:22px 0;
  background:var(--card);
}
.em-h{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.em-n{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--moss-deep); }
.em-tag{
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:oklch(0.985 0.006 85); background:var(--moss);
  padding:3px 8px; border-radius:2px;
}
.em-meta{ margin:0 0 18px; padding:0 0 16px; border-bottom:1px solid var(--rule); }
.em-meta > div{ display:grid; grid-template-columns:78px 1fr; gap:12px; padding:4px 0; }
.em-meta dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-mute); padding-top:3px; }
.em-meta dd{ margin:0; font-size:15.5px; color:var(--ink); font-weight:500; }
.em-body p{ font-size:14.5px; line-height:1.62; max-width:66ch; }
.em-body blockquote{
  margin:14px 0; padding:16px 18px;
  background:var(--moss-wash); border:1px solid var(--rule);
  font-family:var(--display); font-size:19px; line-height:1.35; color:var(--ink);
}
.em-ul{ margin:0 0 1em; padding-left:18px; }
.em-ul li{ font-size:14.5px; color:var(--ink); margin-bottom:6px; }
.em-cta{
  font-family:var(--mono); font-size:13px; letter-spacing:0.04em;
  color:var(--moss-deep); font-weight:500;
  padding:12px 0; margin:6px 0 !important;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}

/* ---- scripts ---- */

.sc{ padding:24px 0; border-bottom:1px solid var(--rule); }
.sc:last-of-type{ border-bottom:0; }
.sc-h{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.sc-n{ font-size:20px; color:var(--moss-deep); font-weight:700; letter-spacing:0.02em; }
.sc-h h3{ margin:0; font-family:var(--display); font-weight:400; font-size:24px; letter-spacing:-0.01em; }
.sc-tag{
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--moss-deep); border:1px solid var(--rule-firm);
  padding:3px 8px; border-radius:2px; margin-left:auto;
}
.sc-goal{ font-size:14px; color:var(--ink-mute); margin-bottom:14px !important; }
.sc-hook{
  display:grid; grid-template-columns:52px 1fr; gap:14px; align-items:baseline;
  background:var(--ink); border-radius:2px; padding:14px 16px; margin-bottom:14px;
}
.sc-hook .mono{ font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:oklch(0.78 0.09 132); }
.sc-hook p{ margin:0; font-family:var(--display); font-size:19px; line-height:1.32; color:oklch(0.975 0.006 85); }
.sc-fmt{ font-size:14px; max-width:70ch; margin-bottom:14px !important; }
.sc-body{
  border-left:1px solid var(--rule-firm);
  padding:2px 0 2px 18px; margin-bottom:14px;
}
.sc-body p{ font-size:14.5px; line-height:1.6; max-width:64ch; margin-bottom:0.7em; }
.sc-body p:last-child{ margin-bottom:0; }
.sc-osd{
  font-size:13px; color:var(--ink); margin-bottom:10px !important;
}
.sc-osd .mono{
  font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-mute); margin-right:10px;
}
.sc-why{ font-size:13.5px; color:var(--ink-soft); max-width:70ch; margin:0 !important; }

@media (max-width:760px){
  .kitlist li{ grid-template-columns:30px 1fr; }
  .kitlist-d{ grid-column:2; text-align:left; }
  .em{ padding:18px 16px; }
  .em-meta > div{ grid-template-columns:1fr; gap:2px; }
  .sc-hook{ grid-template-columns:1fr; gap:8px; }
  .sc-tag{ margin-left:0; }
}

@media print{
  .em,.sc{ break-inside:avoid; page-break-inside:avoid; }
  .sc-hook,.em-body blockquote{ background:#f2f2ee; }
  .sc-hook p{ color:#000; }
  .sc-hook .mono{ color:#3b5f2a; }
  .kitlist a{ color:#000; }
}