/* The result page, bold style (design A: THE MOVEMENT impact report, picked by Martins 27 Oct 2026).
   Full-width blocks, big Aeonik Bold type, huge numbers.
   Premium and quiet, like Apple: orange appears once, on Fix this first. Everything else is
   black, greys, off-white and white (Martins, 27 Oct 2026). On orange, text is white, never black. */

#result.rp {
  max-width: none; padding: 0; background: var(--white);
  --g-line: #D9D9D6;   /* hairlines */
  --g-soft: #EBEBE9;   /* quiet tiles */
  --g-mid: #8E8E93;    /* labels on dark */
  --g-ink: #6E6E73;    /* secondary text */
}

.rp-inner { max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter); }

.rp-block { padding: 72px 0; }
.rp-orange { background: var(--orange); color: var(--white); }
.rp-black { background: var(--dark); color: var(--off-white); }
.rp-paper { background: var(--off-white); color: var(--black); }
.rp-white { background: var(--white); color: var(--black); }

/* Small caps label above every block. */
.rp-kicker {
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--g-ink);
}
.rp-orange .rp-kicker { color: var(--white); opacity: 0.9; }
.rp-black .rp-kicker { color: var(--g-mid); }

.rp-h {
  font-size: 34px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
}
.rp-sub { font-size: 17px; line-height: 26px; max-width: 60ch; opacity: 0.85; margin-bottom: 28px; }
.rp-body { font-size: 17px; line-height: 26px; max-width: 62ch; }
.rp-lead { font-size: 20px; line-height: 30px; font-weight: 400; max-width: 56ch; }
.rp-orange .rp-lead { color: var(--white); }

/* Header: plain black, the first fix as a huge headline. */
.rp-hero { background: var(--dark); color: var(--off-white); padding: 48px 0 52px; }
.rp-hero .rp-kicker { color: var(--g-mid); }
.rp-title {
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.045em;
  max-width: 16ch;
  margin-bottom: 28px;
}

/* Fix this first: big numbered steps. */
.rp-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: step; }
.rp-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: start;
  padding: 18px 0;
  border-top: 2px solid rgba(255, 255, 255, 0.35);
  font-size: 19px;
  line-height: 28px;
  font-weight: 700;
  color: var(--white);
}
.rp-steps li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--off-white);
}

/* Five resources: solid colour tiles with big numbers. */
.rp-tiles { display: grid; gap: 12px; }
.rp-tile {
  border-radius: 20px;
  padding: 22px 22px 24px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.rp-tile:nth-child(1) { background: var(--dark); color: var(--off-white); }
.rp-tile:nth-child(2) { background: var(--white); color: var(--black); }
.rp-tile:nth-child(3) { background: var(--white); color: var(--black); }
.rp-tile:nth-child(4) { background: var(--white); color: var(--black); }
.rp-tile:nth-child(5) { background: var(--white); color: var(--black); }
.rp-tile-n { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: var(--g-mid); }
.rp-tile-name { font-size: 28px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }
.rp-tile-text { font-size: 16px; line-height: 24px; }

/* Two-week plan on black: two week columns, tick boxes. */
.rp-num { color: var(--g-mid); }
.rp-plan { display: grid; gap: 28px; }
.rp-week-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--g-mid); }
.rp-day {
  display: grid;
  grid-template-columns: 24px 58px 1fr;
  gap: 12px;
  align-items: start;
  min-height: 44px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(245, 245, 244, 0.18);
  cursor: pointer;
}
.rp-day input {
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  border: 2px solid rgba(245, 245, 244, 0.6);
  border-radius: 6px;
  display: grid;
  place-items: center;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.rp-day input::after {
  content: "";
  width: 10px;
  height: 6px;
  margin-top: -2px;
  border: solid var(--white);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) scale(0.6);
  opacity: 0;
  transition: transform 160ms var(--ease-out), opacity 160ms ease;
}
.rp-day input:checked { background: var(--orange); border-color: var(--orange); }
.rp-day input:checked::after { opacity: 1; transform: rotate(-45deg); }
.rp-day-n { font-size: 14px; line-height: 26px; font-weight: 700; color: var(--g-mid); }
.rp-day-t { font-size: 16px; line-height: 26px; color: var(--off-white); transition: opacity 160ms ease; }
.rp-day input:checked ~ .rp-day-t { opacity: 0.45; text-decoration: line-through; }

/* Goal and gap: their picture as a big quote, then huge numbers. */
.rp-quote { font-size: 28px; line-height: 1.15; max-width: 26ch; }
.rp-quote::before { content: "\201C"; color: #BDBDBD; }
.rp-quote::after { content: "\201D"; color: #BDBDBD; }
.rp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0 24px; }
.rp-stat { border-radius: 20px; padding: 20px; }
.rp-stat:nth-child(1) { background: var(--off-white); }
.rp-stat:nth-child(2) { background: var(--dark); color: var(--off-white); }
.rp-stat:nth-child(3) { grid-column: 1 / -1; background: var(--g-soft); color: var(--black); }
.rp-stat-n { font-size: 52px; line-height: 1; font-weight: 700; letter-spacing: -0.05em; }
.rp-stat-l { font-size: 14px; line-height: 20px; font-weight: 700; margin-top: 8px; }

/* You said vs your answers show. */
.rp-versus { display: grid; gap: 12px; }
.rp-side { border-radius: 20px; padding: 24px 22px; background: var(--white); }
.rp-side-hot { background: var(--dark); color: var(--off-white); }
.rp-tag { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; opacity: 0.85; }
.rp-big { font-size: 20px; line-height: 29px; font-weight: 700; letter-spacing: -0.01em; }

/* Working and not yet. */
.rp-pair { display: grid; gap: 36px; }
.rp-list { list-style: none; margin: 0; padding: 0; }
.rp-list li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-top: 1px solid var(--g-line);
  font-size: 17px;
  line-height: 25px;
  font-weight: 700;
}
.rp-list li::before { content: ""; position: absolute; left: 0; top: 21px; width: 10px; height: 10px; border-radius: 50%; background: var(--black); }
.rp-list-muted li { font-weight: 400; }
.rp-list-muted li::before { background: #BDBDBD; }
.rp-list li span { display: block; font-weight: 400; color: var(--grey); }

/* Then: huge numerals. */
.rp-numbered { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: then; }
.rp-numbered li {
  counter-increment: then;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--g-line);
}
.rp-numbered li::before {
  content: counter(then, decimal-leading-zero);
  font-size: 44px;
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #C7C7CC;
}
.rp-numbered strong { display: block; font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.rp-numbered span { display: block; font-size: 16px; line-height: 24px; color: var(--grey); }

/* Stage: three blocks, theirs lit in off-white. */
.rp-stages { list-style: none; margin: 8px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rp-stage {
  border-radius: 16px;
  padding: 16px 12px;
  min-height: 92px;
  display: flex;
  align-items: flex-end;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  background: rgba(245, 245, 244, 0.08);
  color: rgba(245, 245, 244, 0.55);
}
.rp-stage.done { background: rgba(245, 245, 244, 0.16); color: var(--off-white); }
.rp-stage.now { background: var(--off-white); color: var(--black); }

/* Track: the number as a statement, six empty week boxes. */
.rp-weeks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0 28px; }
.rp-weeks span {
  border: 1px solid var(--g-line);
  border-radius: 12px;
  color: var(--g-ink);
  height: 64px;
  padding: 6px;
  font-size: 12px;
  font-weight: 700;
}
.rp-weeks span:first-child { background: var(--dark); border-color: var(--dark); color: var(--off-white); }
.rp-two { display: grid; gap: 20px; }
.rp-two .rp-tag { color: var(--g-ink); opacity: 1; }

/* Your choice: on black, an off-white main button and an outlined WhatsApp button. */
.rp-cta .rp-h { color: var(--orange); }

/* Key words in a heading, picked by Claude from the heading itself. */
.rp-hl { color: var(--orange); }
.rp-actions { display: grid; gap: 12px; margin-top: 28px; }
.rp-actions .btn { width: 100%; }
.btn-light { background: var(--off-white); color: var(--black); }
.btn-orange { background: var(--orange); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn-orange:hover { background: #E0611A; } }
.btn-line { background: transparent; color: var(--off-white); box-shadow: inset 0 0 0 1px rgba(245, 245, 244, 0.45); }
@media (hover: hover) and (pointer: fine) { .btn-line:hover { background: rgba(245, 245, 244, 0.08); } }
@media (hover: hover) and (pointer: fine) { .btn-light:hover { background: var(--white); } }

#result .again { margin: 0; padding: 32px 0 48px; background: var(--white); }

/* ---------- Bigger screens ---------- */
@media (min-width: 768px) {
  .rp-block { padding: 128px 0; }
  .rp-hero { padding: 88px 0 96px; }
  .rp-title { font-size: 80px; }
  .rp-h { font-size: 56px; }
  .rp-quote { font-size: 44px; }
  .rp-lead { font-size: 24px; line-height: 34px; }
  .rp-steps li { grid-template-columns: 96px 1fr; font-size: 24px; line-height: 32px; padding: 24px 0; }
  .rp-steps li::before { font-size: 56px; }
  .rp-tiles { grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .rp-tile { grid-column: span 2; padding: 28px; min-height: 240px; }
  .rp-tile:nth-child(4), .rp-tile:nth-child(5) { grid-column: span 3; }
  .rp-tile-name { font-size: 34px; }
  .rp-plan { grid-template-columns: 1fr 1fr; gap: 48px; }
  .rp-stats { grid-template-columns: repeat(3, 1fr); }
  .rp-stat:nth-child(3) { grid-column: auto; }
  .rp-stat { padding: 28px; }
  .rp-stat-n { font-size: 80px; }
  .rp-versus, .rp-pair, .rp-two { grid-template-columns: 1fr 1fr; gap: 24px; }
  .rp-side { padding: 32px; }
  .rp-big { font-size: 24px; line-height: 33px; }
  .rp-numbered li { grid-template-columns: 110px 1fr; padding: 28px 0; }
  .rp-numbered li::before { font-size: 64px; }
  .rp-numbered strong { font-size: 26px; }
  .rp-stage { min-height: 140px; font-size: 18px; line-height: 22px; padding: 20px; }
  .rp-weeks span { height: 96px; }
  .rp-actions { display: flex; flex-wrap: wrap; }
  .rp-actions .btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-day input, .rp-day input::after, .rp-day-t { transition: none; }
}

/* Download full report: outlined in orange on the black header. */
.rp-hero .btn-ghost { border-color: var(--orange); }

/* WhatsApp button in WhatsApp's own green (Martins, 27 Oct 2026). */
.btn-whatsapp { background: #25D366; color: var(--white); }
.btn-whatsapp .fa-whatsapp { color: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn-whatsapp:hover { background: #1EBE5A; } }

/* Day 1 is the first move: highlighted in orange. */
.rp-day-first .rp-day-n { color: var(--orange); }
.rp-day-first .rp-day-t { color: var(--orange); font-weight: 700; }
.rp-start {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* Martins' line on growth, set large between the plan and the numbers. */
.rp-saying {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.035em;
  max-width: 24ch;
}
.rp-saying-by { margin-top: 20px; font-size: 15px; font-weight: 700; color: var(--g-ink); }
@media (min-width: 768px) {
  .rp-saying { font-size: 52px; }
}

/* Quote signature: Martins' photo and name, so the line feels personal. */
.rp-by { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.rp-by-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--g-line); }
.rp-by-name { font-size: 17px; line-height: 22px; font-weight: 700; }
.rp-by-role { font-size: 14px; line-height: 20px; color: var(--g-ink); }
@media (min-width: 768px) { .rp-by-photo { width: 76px; height: 76px; } }