/* Reviso payoff walkthrough. Vanilla CSS, no fonts, no external requests.
   The site sets html{font-size:62.5%} so 1rem = 10px, matching the free-tools
   engine. Brand indigo is the site's OWN token --color-primary (#5452ff); the
   Bricks global --bricks-color-primary is the decorative yellow, NOT the brand,
   so it is never referenced here. */

.rv-payoff{
  --rv-fg: var(--bricks-color-text, #1d2129);
  --rv-muted: #5c6672;
  --rv-bg: var(--bricks-color-bg, #ffffff);
  --rv-panel: #f6f7f9;
  --rv-panel-2: #eef0f5;
  --rv-border: #d8dde4;
  --rv-accent: var(--color-primary, #5452ff);
  --rv-accent-dark: var(--color-secondary, #413edd);
  --rv-accent-fg: #ffffff;
  --rv-ok: #1f9d55;
  --rv-radius: 1.2rem;
  font-family: var(--bricks-font-base, inherit);
  color: var(--rv-fg);
  font-size: 1.6rem;
  line-height: 1.6;
  max-width: 86rem;
  /* Aligned with the page H1, which the default page template renders
     full-width and left. Centring the block under a left-aligned title left a
     visible 210px step between the two. */
  margin: 1.6rem auto 0 0;
  box-sizing: border-box;
}
.rv-payoff *,.rv-payoff *::before,.rv-payoff *::after{ box-sizing: border-box; }
.rv-payoff p{ margin: 0 0 1.4rem; }
.rv-payoff strong{ color: var(--rv-fg); font-weight: 700; }

/* Keyboard focus is never removed and never invisible. */
.rv-payoff a:focus-visible,
.rv-payoff button:focus-visible{ outline: 3px solid var(--rv-accent); outline-offset: 3px; border-radius: .4rem; }

/* Page lede — the one paragraph that sets up why this page exists, directly
   under the theme's H1. */
.rv-po-intro{ font-size: 2rem; line-height: 1.5; color: var(--rv-muted); max-width: 64rem; margin: 0 0 4.8rem; }
.rv-po-intro strong{ color: var(--rv-fg); font-weight: 600; }

/* Page gutter on small screens.
   This page has no Bricks template, so it renders through WordPress's default
   page template: at desktop widths the theme gives the <article> an 80px
   gutter, but below ~820px that collapses to 0 and both the H1 and this block
   run into the screen edge. Bricks-built pages on this site keep a 5% gutter
   at that width, so match them. This stylesheet is enqueued only by the
   [reviso_payoff] shortcode, so scoping a rule to `article.wordpress` here
   cannot reach any other page on the site. */
@media (max-width: 820px){
  article.wordpress{ padding-left: 5%; padding-right: 5%; }
}

/* ---------------- Chapters ---------------- */

.rv-po-chapters{ list-style: none; margin: 0; padding: 0; counter-reset: none; }
.rv-po-chapter{ margin: 0 0 6rem; padding: 0 0 5rem; border-bottom: 1px solid var(--rv-border); }
.rv-po-chapter:last-child{ border-bottom: 0; padding-bottom: 2rem; }

.rv-po-head{ margin: 0 0 2.4rem; }
.rv-po-kicker{
  display: inline-flex; align-items: center; gap: .9rem;
  margin: 0 0 1.2rem; font-size: 1.3rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--rv-accent);
}
.rv-po-num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--rv-accent); color: var(--rv-accent-fg);
  font-size: 1.4rem; font-weight: 700; letter-spacing: 0;
}
.rv-payoff h2{ font-size: 2.8rem; line-height: 1.22; margin: 0 0 1.2rem; }
.rv-po-lede{ font-size: 1.8rem; color: var(--rv-muted); max-width: 62rem; }

/* ---------------- Screenshots ---------------- */

.rv-po-shot{ margin: 0 0 2.4rem; }
.rv-po-shot img{
  display: block; width: 100%; height: auto; border-radius: var(--rv-radius);
  border: 1px solid var(--rv-border); box-shadow: 0 1.2rem 3.6rem rgba(20,22,28,.12);
}
.rv-po-shot figcaption{ margin: 1.2rem 0 0; font-size: 1.4rem; color: var(--rv-muted); }

/* ---------------- Fact lists ---------------- */

.rv-po-facts{ list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 1.2rem; }
.rv-po-facts li{
  position: relative; padding: 1.4rem 1.8rem 1.4rem 4.4rem;
  background: var(--rv-panel); border: 1px solid var(--rv-border); border-radius: .8rem;
  font-size: 1.55rem;
}
.rv-po-facts li::before{
  content: ""; position: absolute; left: 1.8rem; top: 2.1rem;
  width: .9rem; height: .9rem; border-radius: 50%; background: var(--rv-accent);
}

/* ---------------- Example email ---------------- */

.rv-po-email{ margin: 2.4rem 0 0; }
.rv-po-email-label{
  margin: 0 0 .8rem; font-size: 1.3rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--rv-muted);
}
.rv-po-email-card{
  background: var(--rv-bg); border: 1px solid var(--rv-border);
  border-left: .4rem solid var(--rv-accent); border-radius: .8rem; padding: 1.6rem 1.8rem;
}
.rv-po-email-subject{ margin: 0 0 .6rem; font-size: 1.6rem; font-weight: 700; }
.rv-po-email-body{ margin: 0; font-size: 1.5rem; color: var(--rv-muted); }
.rv-po-email-sub{ display: inline-block; margin-top: .4rem; font-size: 1.4rem; }

/* ---------------- Simulated panels ---------------- */

.rv-po-sim{
  margin: 0 0 2.4rem; border: 1px solid var(--rv-border); border-radius: var(--rv-radius);
  overflow: hidden; background: var(--rv-bg); box-shadow: 0 1.2rem 3.6rem rgba(20,22,28,.10);
}
.rv-po-sim-bar{
  display: flex; align-items: center; gap: .6rem;
  background: var(--rv-panel-2); border-bottom: 1px solid var(--rv-border); padding: 1rem 1.6rem;
}
.rv-po-sim-dot{ width: 1rem; height: 1rem; border-radius: 50%; background: #c6ccd6; flex: 0 0 auto; }
.rv-po-sim-title{ margin-left: 1rem; font-size: 1.3rem; color: var(--rv-muted); }
.rv-po-sim-note{ margin: 1.6rem 0 0; font-size: 1.3rem; color: var(--rv-muted); font-style: italic; }

.rv-po-comment{ display: flex; gap: 1.4rem; padding: 2rem; }
.rv-po-avatar{
  flex: 0 0 auto; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: var(--rv-accent); color: var(--rv-accent-fg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 700;
}
.rv-po-comment-main{ min-width: 0; flex: 1 1 auto; }
.rv-po-comment-meta{ margin: 0 0 1.2rem; font-size: 1.4rem; }
.rv-po-comment-meta span{ color: var(--rv-muted); }

.rv-po-suggestion{
  background: var(--rv-panel); border: 1px solid var(--rv-border); border-radius: .8rem;
  padding: 1.4rem 1.6rem; margin: 0 0 1.4rem;
}
.rv-po-sg-tag{
  display: inline-block; margin: 0 0 1rem; padding: .3rem .9rem; border-radius: 999px;
  background: rgba(84,82,255,.12); color: var(--rv-accent);
  font-size: 1.2rem; font-weight: 700; letter-spacing: .03em;
}
.rv-po-sg-row{ display: flex; gap: 1.2rem; align-items: baseline; padding: .5rem 0; font-size: 1.5rem; }
.rv-po-sg-label{
  flex: 0 0 5.4rem; font-size: 1.2rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--rv-muted);
}
.rv-po-sg-text{ flex: 1 1 auto; }
.rv-po-sg-row:not(.rv-po-sg-after) .rv-po-sg-text{ color: var(--rv-muted); text-decoration: line-through; }
.rv-po-sg-after .rv-po-sg-text{ color: var(--rv-fg); font-weight: 600; }

.rv-po-sg-actions{ display: flex; flex-wrap: wrap; gap: .8rem; }
.rv-po-sg-btn{
  font: inherit; font-size: 1.4rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--rv-border); background: var(--rv-bg); color: var(--rv-fg);
  border-radius: .7rem; padding: .9rem 1.6rem;
}
.rv-po-sg-accept{ background: var(--rv-accent); border-color: var(--rv-accent); color: var(--rv-accent-fg); }
.rv-po-sg-accept:hover{ background: var(--rv-accent-dark); border-color: var(--rv-accent-dark); }
.rv-po-sg-accept.is-applied{ background: var(--rv-ok); border-color: var(--rv-ok); }
.rv-po-sg-reject:hover{ border-color: var(--rv-accent); color: var(--rv-accent); }
.rv-po-sg-btn[disabled]{ cursor: default; opacity: 1; }

.rv-po-apply-result,.rv-po-review-result{
  border-top: 1px solid var(--rv-border); background: var(--rv-panel); padding: 2rem;
}
.rv-po-applied{
  display: flex; align-items: center; gap: .9rem; margin: 0 0 1.2rem;
  font-size: 1.7rem; font-weight: 700; color: var(--rv-ok);
}
.rv-po-tick{
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--rv-ok); color: #fff; font-size: 1.4rem;
}
.rv-po-steps{ margin: 0; padding: 0 0 0 2.2rem; font-size: 1.55rem; }
.rv-po-steps li{ margin: 0 0 .8rem; }
.rv-po-steps li:last-child{ margin-bottom: 0; }
.rv-po-after{ margin: 1.4rem 0 0; font-size: 1.5rem; color: var(--rv-muted); }

/* ---------------- Whole-site review ---------------- */

.rv-po-review{ padding: 2rem; }
.rv-po-progress{ margin: 0 0 1rem; font-size: 1.5rem; color: var(--rv-muted); }
.rv-po-progress strong{ color: var(--rv-fg); }
.rv-po-bar{
  height: .8rem; background: var(--rv-panel-2); border: 1px solid var(--rv-border);
  border-radius: 999px; overflow: hidden; margin: 0 0 2rem;
}
.rv-po-bar span{ display: block; height: 100%; background: var(--rv-accent); transition: width .25s ease; }

.rv-po-pages{ list-style: none; margin: 0; padding: 0; }
.rv-po-page{
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: 1.2rem 0; border-top: 1px solid var(--rv-border);
}
.rv-po-page:last-child{ border-bottom: 1px solid var(--rv-border); }
.rv-po-page-name{ flex: 1 1 14rem; font-size: 1.6rem; font-weight: 600; }
.rv-po-page-state{
  flex: 0 0 auto; font-size: 1.25rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--rv-muted); background: var(--rv-panel-2); border-radius: 999px; padding: .4rem 1rem;
}
.rv-po-page.is-reviewed .rv-po-page-state{ color: var(--rv-ok); background: rgba(31,157,85,.12); }
.rv-po-page-btn{
  flex: 0 0 auto; font: inherit; font-size: 1.35rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--rv-border); background: var(--rv-bg); color: var(--rv-fg);
  border-radius: .7rem; padding: .7rem 1.4rem;
}
.rv-po-page-btn:hover:not([disabled]){ border-color: var(--rv-accent); color: var(--rv-accent); }
.rv-po-page-btn[disabled]{ cursor: default; color: var(--rv-muted); border-style: dashed; }
.rv-po-sr{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------------- Next step ---------------- */

.rv-po-next{
  margin: 4rem 0 0; padding: 3.2rem; border-radius: var(--rv-radius);
  background: var(--rv-panel); border: 1px solid var(--rv-border);
}
.rv-po-next h2{ margin: 0 0 1.2rem; font-size: 2.4rem; }
.rv-po-next-actions{ display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 2rem 0 1.6rem; }
.rv-po-btn{
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 600; text-decoration: none;
  padding: 1.3rem 2.4rem; border-radius: .9rem; border: 1px solid transparent;
}
.rv-po-btn-primary{ background: var(--rv-accent); color: var(--rv-accent-fg); }
.rv-po-btn-primary:hover{ background: var(--rv-accent-dark); color: var(--rv-accent-fg); }
.rv-po-btn-ghost{ background: var(--rv-bg); color: var(--rv-fg); border-color: var(--rv-border); }
.rv-po-btn-ghost:hover{ border-color: var(--rv-accent); color: var(--rv-accent); }
.rv-po-next-note{ margin: 0; font-size: 1.4rem; color: var(--rv-muted); }

/* ---------------- Narrow screens ---------------- */

@media (max-width: 600px){
  .rv-payoff{ font-size: 1.6rem; }
  .rv-payoff h2{ font-size: 2.3rem; }
  .rv-po-lede{ font-size: 1.7rem; }
  .rv-po-intro{ font-size: 1.8rem; margin-bottom: 3.6rem; }
  .rv-po-chapter{ margin-bottom: 4.4rem; padding-bottom: 3.6rem; }
  .rv-po-comment{ padding: 1.6rem; gap: 1rem; }
  .rv-po-review,.rv-po-apply-result,.rv-po-review-result{ padding: 1.6rem; }
  .rv-po-sg-row{ flex-direction: column; gap: .2rem; }
  .rv-po-sg-label{ flex: none; }
  .rv-po-page{ align-items: flex-start; }
  .rv-po-page-name{ flex: 1 1 100%; }
  .rv-po-next{ padding: 2.2rem; }
  .rv-po-btn{ width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .rv-payoff *{ transition: none !important; animation: none !important; }
}