/* ============================================================================
   review.html — the walkthrough page for the SFC+ validation session.

   This is the wrapper, not the product: every annotation lives out here in
   the page, never inside the phone. An explanatory note drawn on the screen
   itself gets read as part of the app, so the devices stay clean and the
   commentary sits beside them.
   ========================================================================= */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-txt);
  background: #EEF0F3;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ── masthead ───────────────────────────────────────────────────────────── */
.mast { padding: 54px 0 34px; background: var(--c-white); border-bottom: 1px solid #E2E5E9; }
.mast__kicker {
  display: inline-block; margin: 0 0 14px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--c-prim-bg); color: #A30002;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.mast h1 { margin: 0 0 10px; font-size: 38px; line-height: 1.15; font-weight: 700; letter-spacing: -0.6px; }
.mast h1 em { font-style: normal; color: var(--c-prim); }
.mast__meta { margin: 0 0 22px; font-size: 14px; color: var(--c-txt-2); }

/* ── sticky jump rail ───────────────────────────────────────────────────── */
.rail {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #E2E5E9;
}
.rail__in { display: flex; align-items: center; gap: 8px; height: 56px; overflow-x: auto; scrollbar-width: none; }
.rail__in::-webkit-scrollbar { width: 0; height: 0; }
.rail a {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--c-txt-2); text-decoration: none;
}
.rail a:hover { background: #F1F3F5; color: var(--c-txt); }

/* ── shared blocks ──────────────────────────────────────────────────────── */
.block { padding: 46px 0; }
.block--tint { background: var(--c-white); border-block: 1px solid #E2E5E9; }
.block h2 { margin: 0 0 8px; font-size: 26px; font-weight: 700; letter-spacing: -0.3px; }

/* ── status chips ───────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip--new      { background: #E4F3E6; color: #1B6B24; }
.chip--reworked { background: #FDE7E7; color: #A30002; }
.chip--ref      { background: #ECEEF1; color: #5B636D; }
.chip--none     { background: #FFF3DF; color: #8A5A00; }

/* ── tables ─────────────────────────────────────────────────────────────── */
table {
  width: 100%; border-collapse: collapse;
  background: var(--c-white); border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .07);
}
.block--tint table { box-shadow: 0 0 0 1px #E6E9ED; }
th, td {
  padding: 13px 18px; text-align: left; vertical-align: top;
  font-size: 14.5px; line-height: 1.55; border-bottom: 1px solid #EDEFF2;
}
th {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-txt-2); background: #FAFBFC;
}
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 600; }
.t-scope td:nth-child(2) { width: 160px; }

/* ── a screen: frames over a before/after table ─────────────────────────── */
.screen { padding: 50px 0; border-top: 1px solid #E2E5E9; }
.screen:first-of-type { border-top: 0; }
.screen__hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.screen__hd h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.3px; }

.frames { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 30px; }
.frame { flex: 0 0 auto; }
.frame__cap { display: flex; align-items: baseline; gap: 9px; margin: 0 0 10px 6px; }
.frame__when { font-size: 14px; font-weight: 700; }
.frame__what { font-size: 13px; color: var(--c-txt-2); }
.frame--today .frame__when { color: var(--c-txt-2); }
.frame--new   .frame__when { color: var(--c-prim); }
.frame iframe {
  display: block; width: 486px; height: 1000px; border: 0;
  border-radius: 18px; background: #E9EAEC;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .10);
}

/* ── the before/after table ─────────────────────────────────────────────────
   Three columns: what, today, proposed. The two comparison columns are
   coloured the way the frame captions above them are, so the eye carries
   the pairing down from the phones into the rows. */
.t-cmp { margin-top: 4px; }
.t-cmp th:first-child, .t-cmp td:first-child { width: 22%; }
.t-cmp th:nth-child(2), .t-cmp td:nth-child(2) { width: 39%; }
.t-cmp td:nth-child(2) { color: var(--c-txt-2); }
.t-cmp td:nth-child(3) { color: var(--c-txt); background: #FFFAFA; }
.t-cmp th:nth-child(3) { color: var(--c-prim); background: #FFF3F3; }

@media (max-width: 1120px) {
  .frame iframe { width: 448px; height: 960px; }
}
@media (max-width: 980px) {
  .mast h1 { font-size: 30px; }
}