/* Phone Report Card page — layers on shared.css + demo.css */

.rc-steps { display: grid; gap: 20px; max-width: 680px; margin: 8px 0 0; }
.rc-step {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 16px;
  padding: 20px 22px;
}
.rc-step-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.rc-step h3 { margin: 2px 0 6px; font-size: 17px; }
.rc-step p { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-2); }

.grade-card {
  margin-top: 28px; max-width: 680px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 16px;
  padding: 26px;
}
.rc-grade-title { margin: 0 0 16px; font-size: 22px; }
.rc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rc-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--hair);
}
.rc-table td { padding: 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.rc-table td:first-child { font-weight: 600; white-space: nowrap; }
.rc-bad { color: #A04A3A; }
.rc-good { color: #1E7F4D; font-weight: 500; }
.rc-neutral { color: var(--muted); }

.rc-calculator { margin-top: 22px; }
/* .mcc* widget styles are injected by calculator.js (self-contained embed) */

.rc-email-gate {
  margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--hair);
}
.rc-email-gate h3 { margin: 0 0 4px; font-size: 17px; }
.rc-email-gate p { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.rc-email-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-email-row input {
  flex: 1; min-width: 220px; border: 1px solid var(--hair); border-radius: 999px;
  padding: 10px 16px; font: inherit; font-size: 14px; background: var(--bg-elev, #faf9f6);
}
.rc-email-row input:focus { outline: none; border-color: var(--accent); }

.rc-claim { margin-top: 20px; text-align: center; }
.rc-claim-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }