/* The free 30-minute booking review (/review/) and the shared "Book a free booking review" block (.rv-cta).
   Direction B: white, blue #1747D4, ink #0E1A2B, green #12804A; Schibsted Grotesk, Atkinson Hyperlegible Next,
   IBM Plex Mono. Tokens from site.css, with the same values as fallbacks. Everything is scoped under .rv-*. */

.rv-hero, .rv-plan, .rv-who, .rv-faq, .rv-cta {
  --r-paper: var(--paper, #FFFFFF);
  --r-surface: var(--surface, #F3F6FB);
  --r-line: var(--line, #DCE3EE);
  --r-line-2: var(--line-2, #C8D2E1);
  --r-ink: var(--ink, #0E1A2B);
  --r-body: var(--body, #2F3A4A);
  --r-muted: var(--muted, #5A6577);
  --r-blue: var(--blue, #1747D4);
  --r-blue-dk: var(--blue-dk, #1238AB);
  --r-blue-tint: var(--blue-tint, #E8EEFD);
  --r-green: var(--booked, #12804A);
  --r-head: var(--head, "Schibsted Grotesk", "Arial", sans-serif);
  --r-mono: var(--mono, "IBM Plex Mono", ui-monospace, "Consolas", monospace);
}

/* ---------- hero with the 30-minute clock ---------- */
.rv-hero { background: var(--r-paper); border-bottom: 1px solid var(--r-line); }
.rv-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 72px; }
.rv-hero h1 { font-size: 56px; line-height: 1.03; letter-spacing: -.025em; font-weight: 800; max-width: 14ch; text-wrap: balance; margin: 0 0 22px; }
.rv-hero .lede { max-width: 32em; }

.rv-clock { margin: 0; background: #fff; border: 2px solid var(--r-blue); border-radius: 16px; padding: 24px 24px 22px; box-shadow: 0 2px 4px rgba(14, 26, 43, .06), 0 40px 80px -30px rgba(14, 26, 43, .35); }
.rv-clock-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.rv-clock-l { font-weight: 700; color: var(--r-blue); font-size: 17px; }
.rv-clock-n { font-size: 40px; font-weight: 600; color: var(--r-ink); letter-spacing: -.02em; line-height: 1; }
.rv-nw { white-space: nowrap; }
.rv-bar { display: flex; gap: 6px; margin-bottom: 18px; }
.rv-seg { flex: 0 0 calc(var(--w) - 4px); height: 16px; border-radius: 4px; background: var(--r-blue); }
.rv-seg--1 { background: #8FA9F2; }
.rv-seg--2 { background: var(--r-blue); }
.rv-seg--3 { background: var(--r-ink); }
.rv-key { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rv-key-i { display: grid; grid-template-columns: 14px 104px minmax(0, 1fr); gap: 12px; align-items: center; }
.rv-key-sw { width: 14px; height: 14px; border-radius: 4px; }
.rv-key-t { font-size: 15px; font-weight: 600; color: var(--r-muted); white-space: nowrap; }
.rv-key-n { font-size: 18px; font-weight: 700; color: var(--r-ink); line-height: 1.3; }
.rv-clock-cap { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--r-line-2); font-size: 16px; color: var(--r-body); }

/* ---------- the three parts ---------- */
.rv-plan { background: var(--r-surface); border-bottom: 1px solid var(--r-line); }
.rv-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rv-step { background: #fff; border: 1px solid var(--r-line-2); border-radius: 14px; padding: 26px 26px 24px; box-shadow: 0 1px 2px rgba(14, 26, 43, .06), 0 1px 1px rgba(14, 26, 43, .04); }
.rv-step:nth-child(2) { border: 2px solid var(--r-blue); box-shadow: 0 1px 2px rgba(14, 26, 43, .06), 0 18px 40px -18px rgba(14, 26, 43, .28); }
.rv-step-t { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--r-blue); margin: 0 0 14px; }
.rv-step-i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--r-blue); color: #fff; font-size: 15px; }
.rv-step h3 { font-size: 26px; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 12px; }
.rv-step p { color: var(--r-body); font-size: 18px; }
.rv-step p + p { margin-top: 10px; }
.rv-sum { margin-top: 14px !important; padding: 12px 14px; border: 1.5px dashed var(--r-line-2); border-radius: 10px; font-size: 15.5px !important; color: var(--r-ink) !important; line-height: 1.45; }

/* ---------- who it's for ---------- */
.rv-who { background: var(--r-paper); }
.rv-who-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.rv-who h2 { font-size: 46px; line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.rv-who-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.rv-who-list li { position: relative; padding: 16px 18px 16px 46px; border: 1px solid var(--r-line-2); border-radius: 12px; color: var(--r-ink); font-size: 19px; background: #fff; }
.rv-who-list li::before { content: ""; position: absolute; left: 18px; top: 50%; margin-top: -6px; width: 6px; height: 11px; border: solid var(--r-green); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.rv-bring { background: var(--r-surface); border-radius: 12px; padding: 20px 22px; }
.rv-bring h3 { font-size: 21px; margin: 0 0 6px; }

/* ---------- the shared call to action ---------- */
.rv-cta { background: var(--r-surface); border-top: 1px solid var(--r-line); border-bottom: 1px solid var(--r-line); padding: 56px 0; }
.rv-cta-box { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.rv-cta-box { background: #fff; border: 2px solid var(--r-blue); border-radius: 16px; padding: 32px 36px; max-width: 1240px; box-shadow: 0 1px 2px rgba(14, 26, 43, .06), 0 18px 40px -18px rgba(14, 26, 43, .28); }
.rv-cta h2 { font-size: 34px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 10px; max-width: 24ch; text-wrap: balance; }
.rv-cta p:not(.kicker) { color: var(--r-body); max-width: 40em; }
.rv-cta-btn { flex: none; }

/* ---------- smaller screens ---------- */
@media (max-width: 1120px) {
  .rv-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 40px; }
  .rv-hero h1 { font-size: 48px; }
  .rv-steps { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .rv-hero-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; padding-bottom: 44px; }
  .rv-hero h1 { font-size: clamp(32px, 8.4vw, 46px); max-width: none; letter-spacing: -.03em; margin-bottom: 16px; }
  .rv-who-grid { grid-template-columns: 1fr; gap: 24px; }
  .rv-who h2 { font-size: 34px; }
  .rv-cta-box { flex-direction: column; align-items: flex-start; padding: 26px 24px; margin: 0 20px; }
  .rv-cta h2 { font-size: 28px; }
  .rv-cta { padding: 40px 0; }
}
@media (max-width: 560px) {
  .rv-clock { padding: 18px 16px; }
  .rv-clock-n { font-size: 32px; }
  .rv-key-i { grid-template-columns: 14px minmax(0, 1fr); row-gap: 0; }
  .rv-key-t { grid-column: 2; }
  .rv-key-n { grid-column: 2; font-size: 17px; }
  .rv-key-sw { grid-row: 1 / span 2; align-self: start; margin-top: 4px; }
  .rv-step { padding: 20px 18px; }
  .rv-step h3 { font-size: 23px; }
  .rv-who-list li { font-size: 18px; }
  .rv-cta-box { margin: 0 16px; padding: 22px 18px; }
  .rv-cta-btn { width: 100%; }
}