/* ==========================================================================
   REA homepage redesign (2026-10-14)
   Loaded after styles.css on every page (homepage, services, process, pricing, preview).
   Direction: editorial serif headings, translucent navy header, cinematic
   hero, photo-led split sections, thin dividers, restrained blue.
   ========================================================================== */

:root {
  --r-navy:        #0B1120;
  --r-navy-deep:   #071426;
  --r-blue:        #2563EB;
  --r-blue-light:  #60A5FA;
  --r-offwhite:    #F8FAFC;
  --r-charcoal:    #1F2937;
  --r-ink:         #0F172A;
  --r-muted:       #64748B;
  --r-line:        #E2E8F0;
  --r-line-dark:   rgba(255, 255, 255, 0.10);
  --r-serif:       "DM Serif Display", Georgia, "Times New Roman", serif;
  --r-sans:        "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-header-h:    76px;
  --r-max:         1240px;
}

@media (min-width: 768px) {
  :root { --r-header-h: 84px; }
}

body.redesign {
  font-family: var(--r-sans);
  color: var(--r-charcoal);
  background: var(--r-offwhite);
  -webkit-font-smoothing: antialiased;
}

body.redesign .container {
  max-width: var(--r-max);
}

/* ---- Type ---- */
.r-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--r-blue);
  margin-bottom: 1rem;
}

.r-eyebrow--light { color: var(--r-blue-light); }

.r-h1,
.r-h2 {
  font-family: var(--r-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--r-ink);
  margin: 0;
}

.r-h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }

.r-lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--r-muted);
  max-width: 34rem;
}

.r-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--r-blue);
  text-decoration: none;
}

.r-link::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--r-blue);
  transition: width 0.25s ease;
}

.r-link:hover::before { width: 52px; }

.r-link svg { width: 16px; height: 16px; }

/* ---- Buttons ---- */
body.redesign .btn {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.85rem 1.5rem;
  border-radius: 8px;
  letter-spacing: 0.01em;
}

.r-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.r-btn-ghost__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.r-btn-ghost__icon svg { width: 14px; height: 14px; }

.r-btn-ghost:hover .r-btn-ghost__icon {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.r-btn-ghost__label {
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 2px;
}

/* ==========================================================================
   Header: translucent navy over the hero, small tracked navigation
   ========================================================================== */

body.redesign #header-placeholder {
  position: sticky;
  top: 0;
  z-index: 100;
}

body.redesign .site-header {
  background-color: rgba(11, 17, 32, 0.62);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.redesign:not([data-page="index"]) .site-header {
  background-color: rgba(11, 17, 32, 0.96);
}

body.redesign .site-header.is-scrolled {
  background-color: rgba(11, 17, 32, 0.9);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

body.redesign .nav {
  padding-block: 0.75rem;
  min-height: var(--r-header-h);
}

body.redesign .nav__logo-img { height: 44px; }

@media (min-width: 768px) {
  body.redesign .nav__logo-img { height: 54px; }
}

body.redesign .nav__link {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

body.redesign .nav__link:hover { color: #fff; }

body.redesign .nav__link.is-active {
  color: var(--r-blue-light);
  border-bottom-color: var(--r-blue-light);
}

body.redesign .nav__cta {
  font-size: 0.85rem;
  padding: 0.7rem 1.25rem;
  border-radius: 8px;
}

body.redesign .nav__cta::after {
  content: "\2192";
  margin-left: 0.4rem;
}

@media (min-width: 768px) {
  body.redesign .nav__links { gap: 2.25rem; }
}

/* Mobile menu panel over the hero needs a solid backing */
@media (max-width: 767px) {
  body.redesign .nav__menu.is-open {
    background: rgba(11, 17, 32, 0.96);
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.r-hero {
  position: relative;
  margin-top: calc(-1 * var(--r-header-h));
  padding-top: calc(var(--r-header-h) + 2rem);
  padding-bottom: 2rem;
  color: #fff;
  overflow: hidden;
  background-color: var(--r-navy-deep);
}

/* Phones: the devices photo spans the width from the top down to just under
   the headline, under the same dark wash the contact section uses, then fades
   to navy. The copy sits on top of it. */
.r-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Phones only: atmospheric workspace photo (assets/img/hero-mobile.webp),
     devices small on the right, under a layered navy wash: darker on the left
     where the copy sits, darker toward the bottom, soft at the top. */
  background:
    linear-gradient(90deg, rgba(7, 20, 38, 0.78) 0%, rgba(7, 20, 38, 0.45) 55%, rgba(7, 20, 38, 0.15) 100%),
    linear-gradient(180deg, rgba(7, 20, 38, 0.55) 0%, rgba(7, 20, 38, 0.15) 30%, rgba(7, 20, 38, 0.55) 60%, rgba(7, 20, 38, 0.95) 85%, #071426 100%),
    url("../img/hero-mobile.webp") 62% 18% / cover no-repeat;
  pointer-events: none;
}

.r-hero__content { position: relative; z-index: 1; }

.r-hero__content {
  position: relative;
  max-width: 36rem;
}

.r-hero .r-h1 {
  font-size: clamp(2.6rem, 1.9rem + 3.6vw, 4.4rem);
  color: #fff;
  margin-bottom: 1.25rem;
}

.r-hero__accent { color: var(--r-blue-light); }

.r-hero__sub {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(226, 232, 240, 0.86);
  max-width: 30rem;
  margin-bottom: 2rem;
}

.r-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
}

.r-hero__actions .btn--primary::after {
  content: "\2192";
  margin-left: 0.5rem;
}

@media (min-width: 768px) {
  .r-hero {
    padding-top: calc(var(--r-header-h) + 5.5rem);
    padding-bottom: 5.5rem;
    min-height: 620px;
    display: flex;
    align-items: center;
    background-image:
      linear-gradient(90deg, rgba(7, 20, 38, 0.96) 0%, rgba(7, 20, 38, 0.86) 30%, rgba(7, 20, 38, 0.42) 56%, rgba(7, 20, 38, 0.12) 78%, rgba(7, 20, 38, 0.35) 100%),
      url("../img/hero-devices-1672.webp");
    /* Photo scaled to the hero height and pinned right: the devices read smaller,
       the Reach/Engage/Automate block stays in frame, and the navy fill on the
       left disappears under the gradient. */
    background-size: auto 100%;
    background-position: right center;
    background-repeat: no-repeat;
  }

  .r-hero .container { width: 100%; }

  .r-hero::before { display: none; }
}

@media (min-width: 1100px) {
  .r-hero { min-height: 680px; }
}

/* ==========================================================================
   Stats strip: label + five figures with hairline separators
   ========================================================================== */

.r-stats {
  background: #fff;
  border-bottom: 1px solid var(--r-line);
}

.r-stats__inner {
  display: grid;
  gap: 1.25rem;
  padding-block: 1.75rem;
}

.r-stats__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--r-muted);
  line-height: 1.6;
}

.r-stats__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
}

.r-stat {
  padding-left: 1rem;
  border-left: 1px solid var(--r-line);
}

.r-stat__num {
  font-family: var(--r-serif);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--r-ink);
  margin-bottom: 0.35rem;
}

.r-stat__num span {
  font-size: 0.6em;
  color: var(--r-blue);
}

.r-stat__text {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--r-charcoal);
  margin: 0 0 0.35rem;
}

.r-stat__src {
  font-size: 0.68rem;
  color: var(--r-muted);
}

/* Phones: one row that drifts right-to-left */
@media (max-width: 767px) {
  .r-stats__inner { padding-block: 1.25rem 1rem; gap: 0.9rem; }
  .r-stats__ticker { overflow: hidden; margin-inline: -1.25rem; padding-inline: 1.25rem; display: flex; }
  /* Once home.js takes over it scrolls the box itself; padding would leave a gap at the loop point */
  .r-stats__ticker.is-running { padding-inline: 0; }
  .r-stats__list { display: flex; gap: 0; flex: 0 0 auto; }
  /* Both copies sit side by side on one track; home.js scrolls the ticker box */
  .r-stats__track { display: flex; flex: 0 0 auto; width: max-content; }
  .r-stat { flex: 0 0 15.5rem; padding: 0 1rem; border-left: 1px solid var(--r-line); }
  .r-stat__num { font-size: 1.6rem; }
  .r-stat__text { font-size: 0.74rem; }
}


@media (min-width: 900px) {
  .r-stats__inner {
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    padding-block: 2rem 1.5rem;
  }

  .r-stats__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 1.25rem;
  }

  .r-stat { padding-left: 1.25rem; }
}

/* ==========================================================================
   Services: photo fading in from the left, editorial heading, thin list
   ========================================================================== */

.r-services {
  position: relative;
  background: var(--r-offwhite);
  overflow: hidden;
}

.r-services__photo {
  position: relative;
  height: 200px;
  margin-bottom: 1.75rem;
  background-image: url("../img/team-laptop-1000.webp");
  background-size: cover;
  background-position: 35% 35%;
  /* Phones: shorter photo that fully fades out before the heading, so the
     eyebrow and title sit on plain off-white */
  -webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.4) 75%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.4) 75%, transparent 100%);
}

.r-services__body {
  position: relative;
  padding: 0 0 4rem;
}

.r-services__intro { margin-bottom: 2.5rem; }

.r-services__intro .r-lead { margin-top: 1rem; margin-bottom: 1.5rem; }

.r-service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--r-line);
}

.r-service {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  gap: 1rem;
  align-items: center;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--r-line);
  color: inherit;
  text-decoration: none;
  transition: padding-left 0.25s ease;
}

.r-service:hover { padding-left: 0.5rem; }

.r-service__icon {
  width: 40px;
  height: 40px;
  color: var(--r-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.r-service__icon svg { width: 26px; height: 26px; }

.r-service__title {
  font-family: var(--r-serif);
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--r-ink);
  margin: 0 0 0.25rem;
  font-weight: 400;
}

.r-service__text {
  font-size: 0.9rem;
  color: var(--r-muted);
  margin: 0;
  line-height: 1.5;
}

.r-service__arrow {
  width: 22px;
  height: 22px;
  color: var(--r-blue);
  transition: transform 0.25s ease;
}

.r-service:hover .r-service__arrow { transform: translateX(4px); }

@media (min-width: 900px) {
  .r-services { min-height: 560px; }

  .r-services__photo {
    position: absolute;
    inset: 0 auto 0 0;
    width: 44%;
    height: auto;
    background-image: url("../img/team-laptop-1672.webp");
    background-position: 30% center;
    -webkit-mask-image: linear-gradient(90deg, #000 45%, rgba(0, 0, 0, 0.6) 70%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 45%, rgba(0, 0, 0, 0.6) 70%, transparent 100%);
  }

  .r-services__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 4rem;
    align-items: center;
    padding: 5.5rem 0 5.5rem 36%;
  }

  .r-services__intro { margin-bottom: 0; }
}

@media (min-width: 1200px) {
  .r-services__body { padding-left: 40%; gap: 5rem; }
}

/* ==========================================================================
   Work: keep the device cards, soften the chrome
   ========================================================================== */

.r-work {
  background: #fff;
  padding-block: 4.5rem;
  border-top: 1px solid var(--r-line);
}

.r-work__head {
  display: grid;
  gap: 1rem;
  margin-bottom: 3rem;
}

.r-work__head .r-lead { margin-top: 0.75rem; }

body.redesign .work__grid { gap: 3rem 3rem; }

.r-work__more { display: none; }

@media (max-width: 767px) {
  body.redesign .work__grid { gap: 2.25rem; }
  body.redesign .work__grid .work-card:not(:first-child) { display: none; }
  body.redesign .work__grid.is-expanded .work-card { display: block; }
  body.redesign .r-work__more { display: inline-flex; width: 100%; margin-top: 1.5rem; }
}

body.redesign .work-card__meta h3 {
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: 1.25rem;
}

body.redesign .work-card__meta p { color: var(--r-muted); }

@media (min-width: 900px) {
  .r-work { padding-block: 6rem; }

  .r-work__head {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
    gap: 3rem;
    margin-bottom: 3.5rem;
  }
}

/* ==========================================================================
   Process: numbered editorial row
   ========================================================================== */

.r-process {
  background: var(--r-offwhite);
  padding-block: 4.5rem;
  border-top: 1px solid var(--r-line);
}

.r-process__head { margin-bottom: 2.5rem; max-width: 30rem; }

.r-process__steps {
  display: grid;
  gap: 2rem;
}

.r-step__num {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--r-serif);
  font-size: 1.5rem;
  color: var(--r-blue);
  margin-bottom: 1rem;
}

.r-step__num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--r-line);
}

.r-step__title {
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--r-ink);
  margin: 0 0 0.5rem;
}

.r-step__text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--r-muted);
  margin: 0;
  max-width: 22rem;
}

@media (min-width: 900px) {
  .r-process { padding-block: 6rem; }

  .r-process__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
    gap: 4rem;
    align-items: start;
  }

  .r-process__head { margin-bottom: 0; }

  .r-process__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

/* ==========================================================================
   Plans: office photograph under a navy wash, translucent cards, the
   Standard plan lifted out in light blue
   ========================================================================== */

.r-plans {
  position: relative;
  color: #fff;
  padding-block: 4.5rem;
  background-color: var(--r-navy-deep);
  background-image:
    linear-gradient(180deg, rgba(7, 20, 38, 0.93) 0%, rgba(7, 20, 38, 0.82) 100%),
    url("../img/office-lounge-1000.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.r-plans__head { max-width: 36rem; margin-bottom: 2.5rem; }

.r-plans .r-h2 { color: #fff; }

.r-plans .r-lead { color: rgba(226, 232, 240, 0.78); }

.r-plans__grid {
  display: grid;
  gap: 1.25rem;
}

.r-plans__swipe, .r-plans__dots { display: none; }

@media (max-width: 767px) {
  .r-plans__swipe {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--r-blue-light);
  }
  .r-plans__swipe svg { width: 18px; height: 18px; }
  .r-plans__grid {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    margin-inline: -1.25rem;
    padding: 0.25rem 1.25rem 0.5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .r-plans__grid::-webkit-scrollbar { display: none; }
  .r-plan { flex: 0 0 82%; scroll-snap-align: start; }
  .r-plans__dots { display: flex; justify-content: center; gap: 0.45rem; margin-top: 0.9rem; }
  .r-plans__dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); transition: width 0.2s ease, background-color 0.2s ease; }
  .r-plans__dot.is-active { width: 20px; background: var(--r-blue-light); }
}

.r-plan {
  position: relative;
  padding: 2rem 1.75rem;
  border-radius: 14px;
  background: rgba(11, 17, 32, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
}

.r-plan__flag {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--r-blue-light);
  margin-bottom: 0.9rem;
  min-height: 1.6em;
}

.r-plan__badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--r-blue);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}

.r-plan__name {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 0.75rem;
}

.r-plan__price {
  font-family: var(--r-serif);
  font-size: 2.9rem;
  line-height: 1;
  color: #fff;
  margin: 0 0 0.35rem;
}

.r-plan__price span {
  font-family: var(--r-sans);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 0.25rem;
}

.r-plan__setup {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.r-plan__setup--free { color: #4ADE80; }

.r-plan__features {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  flex: 1;
}

.r-plan__features li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}

.r-plan__features svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--r-blue-light);
  margin-top: 0.2rem;
}

.r-plan .r-link { color: var(--r-blue-light); }
.r-plan .r-link::before { background: var(--r-blue-light); }

/* Standard: light card with a soft blue glow */
.r-plan--featured {
  background: #F3F7FF;
  border-color: rgba(96, 165, 250, 0.9);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.35), 0 24px 60px rgba(37, 99, 235, 0.35);
}

.r-plan--featured .r-plan__name { color: var(--r-charcoal); }
.r-plan--featured .r-plan__price { color: var(--r-ink); }
.r-plan--featured .r-plan__price span { color: var(--r-muted); }
.r-plan--featured .r-plan__setup { color: var(--r-charcoal); border-bottom-color: var(--r-line); }
.r-plan--featured .r-plan__features li { color: var(--r-ink); }
.r-plan--featured .r-plan__features svg { color: var(--r-blue); }
.r-plan--featured .r-link { color: var(--r-blue); }
.r-plan--featured .r-link::before { background: var(--r-blue); }

.r-plans__foot {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.r-plans__once {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-size: 1rem;
  color: rgba(226, 232, 240, 0.85);
}

.r-plans__once strong { color: #fff; font-weight: 700; }

.r-plans__once-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

.r-plans__once-icon svg { width: 22px; height: 22px; }

.r-plans__btn::after {
  content: "\2192";
  margin-left: 0.5rem;
}

@media (min-width: 900px) {
  .r-plans {
    padding-block: 6rem;
    background-image:
      linear-gradient(90deg, rgba(7, 20, 38, 0.94) 0%, rgba(7, 20, 38, 0.82) 42%, rgba(7, 20, 38, 0.46) 100%),
      url("../img/office-lounge-1672.webp");
  }

  .r-plans__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    align-items: stretch;
  }

  .r-plan { padding: 2.25rem 2rem; }

  .r-plan--featured { transform: translateY(-10px); }
}

/* ==========================================================================
   Preview tool call-out: quiet text band with a hairline frame
   ========================================================================== */

.r-preview {
  background: #fff;
  padding-block: 4.5rem;
  border-bottom: 1px solid var(--r-line);
}

.r-preview__inner {
  display: grid;
  gap: 1.5rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--r-line);
  border-bottom: 1px solid var(--r-line);
}

.r-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .r-preview { padding-block: 5rem; }

  .r-preview__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: 4rem;
    padding: 3rem 0;
  }
}

/* ==========================================================================
   Contact: photograph across the section, copy on the dark left, the form
   floating in a white card on the right
   ========================================================================== */

.r-contact {
  position: relative;
  color: #fff;
  padding-block: 3.5rem 2.5rem;
  background-color: var(--r-navy-deep);
  background-image:
    linear-gradient(180deg, rgba(7, 20, 38, 0.88) 0px, rgba(7, 20, 38, 0.72) 60px, rgba(7, 20, 38, 0.6) 110px, rgba(7, 20, 38, 0.88) 160px, rgba(7, 20, 38, 1) 205px, rgba(7, 20, 38, 1) 100%),
    url("../img/contact-pair-1000.webp");
  /* Phones: the whole photo fits the width, pinned to the top, so both people
     and the laptop show instead of one zoomed-in face */
  background-size: 100% 100%, 100% auto;
  background-position: 0 0, center top;
  background-repeat: no-repeat;
}

.r-contact__grid {
  display: grid;
  gap: 2.5rem;
}

.r-contact__title {
  color: #fff;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
}

.r-contact__lead {
  margin: 1.25rem 0 1.75rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(226, 232, 240, 0.86);
  max-width: 30rem;
}

.r-contact__points {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 28rem;
}

.r-contact__points li {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.95rem;
  color: rgba(241, 245, 249, 0.92);
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.r-contact__points svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--r-blue-light);
  margin-top: 0.05rem;
}

/* Floating white form card */
.r-contact__card {
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(2, 8, 23, 0.45);
  padding: 1.5rem;
  color: var(--r-charcoal);
}

body.redesign .r-form {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  gap: 1rem;
}

/* Grid children default to min-width:auto, so a <select> with long options
   would stretch the form past the card. Pin everything to the column. */
body.redesign .r-form,
body.redesign .r-form .form-group,
body.redesign .r-form .form-row > * { min-width: 0; }

body.redesign .r-form .form-group { gap: 0.35rem; }

body.redesign .r-form .form-group label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--r-charcoal);
}

body.redesign .r-form .form-group input:not([type="checkbox"]),
body.redesign .r-form .form-group select,
body.redesign .r-form .form-group textarea {
  background: #fff;
  border: 1px solid #DCE4EF;
  border-radius: 9px;
  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;
  color: var(--r-ink);
  width: 100%;
  max-width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.redesign .r-form .form-group input::placeholder,
body.redesign .r-form .form-group textarea::placeholder { color: #94A3B8; }

body.redesign .r-form .form-group input:not([type="checkbox"]):focus,
body.redesign .r-form .form-group select:focus,
body.redesign .r-form .form-group textarea:focus {
  outline: none;
  border-color: var(--r-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

body.redesign .r-form .form-group textarea { min-height: 96px; resize: vertical; }

body.redesign .r-form .form-row {
  display: grid;
  gap: 1rem;
}

.r-form__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--r-muted);
}

body.redesign .r-form .form-group .r-form__checkbox {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  width: auto;
}

body.redesign .r-form .form-group .r-form__checkbox input {
  accent-color: var(--r-blue);
  width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

body.redesign .r-form__submit {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.95rem 1.5rem;
  background: var(--r-blue);
  border-color: var(--r-blue);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

body.redesign .r-form__submit::after {
  content: "\2192";
  margin-left: 0.6rem;
}

body.redesign .r-form__submit:hover,
body.redesign .r-form__submit:focus-visible {
  background: #1D4ED8;
  border-color: #1D4ED8;
}

body.redesign .r-contact__card .contact-success {
  background: #F8FAFC;
  border-color: var(--r-line);
}

body.redesign .r-contact__card .contact-form__error { color: #DC2626; font-size: 0.85rem; }

@media (min-width: 640px) {
  body.redesign .r-form .form-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .r-contact {
    padding-block: 5.5rem;
    min-height: 720px;
    display: flex;
    align-items: center;
    background-image:
      linear-gradient(90deg, rgba(7, 20, 38, 0.96) 0%, rgba(7, 20, 38, 0.86) 28%, rgba(7, 20, 38, 0.42) 52%, rgba(7, 20, 38, 0.18) 70%, rgba(7, 20, 38, 0.38) 100%),
      url("../img/contact-pair-1672.webp");
    background-position: center;
  }

  .r-contact .container { width: 100%; }

  .r-contact__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: center;
  }

  .r-contact__intro { max-width: 32rem; }

  .r-contact__card { padding: 2rem 2rem 1.75rem; }
}

@media (min-width: 1200px) {
  .r-contact__grid { gap: 6rem; }
}

/* ==========================================================================
   Footer: lighter touch
   ========================================================================== */

body.redesign .site-footer {
  background: var(--r-navy-deep);
  border-top: 1px solid var(--r-line-dark);
}

body.redesign .footer__heading {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

body.redesign .footer__links a,
body.redesign .footer__tagline,
body.redesign .footer__contact a {
  font-size: 0.9rem;
  color: rgba(226, 232, 240, 0.78);
}

body.redesign .footer__bottom {
  border-top: 1px solid var(--r-line-dark);
  font-size: 0.78rem;
  color: rgba(226, 232, 240, 0.5);
}

/* ==========================================================================
   Reveal on scroll (subtle)
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* The chat bubble should stay out of the hero text on small screens */
body.redesign .faq-widget { bottom: 1.25rem; right: 1.25rem; }

/* ==========================================================================
   Services page: selector + showcase (approved reference, 2026-10-14)
   ========================================================================== */

body.services-page { background: #fff; }

.sv-intro {
  padding: 3rem 0 1.5rem;
}

.sv-intro__title { margin: 0 0 0.75rem; }

.sv {
  padding: 1.5rem 0 4rem;
}

.sv__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--r-line);
}

.sv__label,
.sv__counter {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--r-muted);
}

.sv__counter { display: inline-flex; align-items: center; gap: 0.5rem; }
.sv__counter #sv-count { color: var(--r-blue); }
.sv__dash { margin: 0 -0.15rem; }
.sv__slash,
.sv__counter-text { display: none; }
.sv__slash { color: var(--r-line); }

.sv__grid {
  display: grid;
  gap: 1.5rem;
}

/* ---- Selector ---- */
.sv__tabs {
  display: grid;
  gap: 0.5rem;
}

.sv__tab {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  text-align: left;
  padding: 0.8rem 1rem;
  background: #fff;
  border: 1px solid var(--r-line);
  border-left: 3px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  color: var(--r-muted);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sv__tab:hover { color: var(--r-ink); }

.sv__tab:focus-visible {
  outline: 2px solid var(--r-blue);
  outline-offset: 2px;
}

.sv__tab.is-active {
  background: #EEF4FF;
  border-color: #DCE8FF;
  border-left-color: var(--r-blue);
  color: var(--r-ink);
}

.sv__num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--r-blue);
}

.sv__tab-body { display: grid; gap: 0.15rem; }

.sv__tab-title {
  font-family: var(--r-serif);
  font-size: 1.25rem;
  line-height: 1.15;
  color: inherit;
}

.sv__tab-sub {
  font-size: 0.8rem;
  color: var(--r-muted);
  display: none;
}

.sv__tab-arrow {
  width: 16px;
  height: 16px;
  color: var(--r-blue);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sv__tab.is-active .sv__tab-arrow { opacity: 1; }

.sv__aside { display: none; }

/* ---- Showcase ---- */
.sv__stage {
  display: grid;
  background: var(--r-navy-deep);
  background-image:
    radial-gradient(ellipse 60% 70% at 85% 50%, rgba(37, 99, 235, 0.32), transparent 70%),
    linear-gradient(135deg, #0B1120 0%, #071426 60%, #0A1A3A 100%);
  border-radius: 14px;
  color: #fff;
  overflow: hidden;
}

.sv__panel {
  grid-area: 1 / 1;
  display: grid;
  gap: 1.5rem;
  padding: 2rem 1.5rem 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.sv__panel.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease;
}

.sv__panel[inert] { pointer-events: none; }

.sv__eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--r-blue-light);
  margin-bottom: 1rem;
}

.sv__title {
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: clamp(2rem, 1rem + 2.2vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 1.1rem;
}

.sv__title em {
  font-style: italic;
  color: var(--r-blue-light);
}

.sv__desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(226, 232, 240, 0.86);
  margin: 0 0 1.4rem;
  max-width: 24rem;
}

.sv__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--r-blue-light);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sv__cta svg { width: 14px; height: 14px; color: var(--r-blue-light); }
.sv__cta:hover { color: var(--r-blue-light); }

.sv__tagline {
  display: block;
  margin-top: 2rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.8);
}

.sv__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sv__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 560px;
  object-fit: contain;
}

/* Real Insights dashboard in a slim CSS laptop */
.sv__laptop {
  display: block;
  width: 100%;
  max-width: 620px;
  filter: drop-shadow(0 30px 50px rgba(2, 8, 23, 0.55));
}

.sv__laptop .work-laptop__screen {
  background: #0f172a;
  border-radius: 12px 12px 3px 3px;
  padding: 6px 6px 7px;
  box-shadow: none;
}

.sv__laptop .work-laptop__screen img {
  aspect-ratio: 16 / 10;
  object-position: top;
}

.sv__laptop .work-laptop__base {
  height: 9px;
  margin: 0 -3%;
  box-shadow: none;
}

/* Phone frame (mobile only) with the real mobile dashboard */
.sv__phone {
  width: 46%;
  max-width: 210px;
  margin: 0 auto;
  padding: 3px;
  background: #1a1a2e;
  border-radius: 26px;
  box-shadow: 0 0 0 1.5px #2d2d40, 0 22px 40px rgba(2, 8, 23, 0.55);
  position: relative;
}

.sv__phone::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 28%;
  height: 6px;
  transform: translateX(-50%);
  background: #1a1a2e;
  border-radius: 999px;
  z-index: 1;
}

.sv__phone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top;
  border-radius: 23px;
  background: #fff;
}

.sv__laptop { display: none; }

/* ---- Benefits row ---- */
.sv__benefits {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--r-line);
}

.sv__benefits[hidden] { display: none; }

.sv__benefits li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--r-line);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--r-ink);
}

.sv__benefits svg {
  width: 16px;
  height: 16px;
  color: var(--r-blue);
  flex-shrink: 0;
}

.sv-close { border-top: 1px solid var(--r-line); }

/* ---- Tablet and up ---- */
@media (min-width: 768px) {
  .sv-intro { padding: 4rem 0 2rem; }

  .sv__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    padding: 2.5rem 2rem;
  }

  .sv__laptop { display: block; }
  .sv__phone { display: none; }

  .sv__benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 0;
    margin-top: 1.5rem;
  }

  .sv__benefits li {
    justify-content: center;
    border-bottom: 0;
    padding: 0.5rem 1rem;
  }

  .sv__benefits li + li { border-left: 1px solid var(--r-line); }
}

/* ---- Desktop: 24 / 76 split, vertical selector ---- */
@media (min-width: 1024px) {
  .sv { padding: 1.5rem 0 5rem; }

  .sv__slash,
  .sv__counter-text { display: inline; }

  .sv__grid {
    grid-template-columns: minmax(0, 24fr) minmax(0, 76fr);
    gap: 2rem;
    align-items: stretch;
  }

  .sv__side {
    display: flex;
    flex-direction: column;
  }

  .sv__tabs {
    display: block;
    gap: 0;
  }

  .sv__tab {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: start;
    padding: 1.1rem 1rem 1.1rem 0.9rem;
    border: 0;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--r-line);
    border-radius: 0;
    background: transparent;
  }

  .sv__tab:first-child { border-top: 1px solid var(--r-line); }

  .sv__tab.is-active {
    background: #EEF4FF;
    border-bottom-color: var(--r-line);
    border-left-color: var(--r-blue);
  }

  .sv__tab-title { font-size: 1.5rem; }

  .sv__tab-sub { display: block; font-size: 0.85rem; margin-top: 0.25rem; }

  .sv__num { padding-top: 0.5rem; }

  .sv__tab-arrow { width: 18px; height: 18px; opacity: 0.35; margin-top: 0.7rem; }

  .sv__aside {
    display: block;
    margin-top: 2.25rem;
  }

  .sv__aside-line {
    display: block;
    width: 44px;
    height: 2px;
    background: var(--r-blue);
    margin-bottom: 1.25rem;
  }

  .sv__aside-title {
    font-family: var(--r-serif);
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--r-ink);
    margin: 0 0 0.6rem;
  }

  .sv__aside-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--r-muted);
    margin: 0;
    max-width: 18rem;
  }

  .sv__stage { border-radius: 16px; }

  .sv__panel {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: 1.5rem;
    padding: 2.75rem 0 2.5rem 2.75rem;
    align-items: stretch;
  }

  /* Text starts at the top, tagline sits at the bottom edge */
  .sv__text {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    padding-bottom: 0.25rem;
  }

  .sv__tagline { margin-top: auto; padding-top: 2.5rem; white-space: nowrap; }

  /* Four-line headline: a touch smaller so this state matches the others */
  #insights .sv__title { font-size: clamp(2rem, 0.9rem + 2vw, 2.6rem); }

  /* Artwork fills the right side and runs toward the panel edge */
  .sv__media { justify-content: flex-end; align-items: center; min-height: 380px; }

  .sv__media img { max-width: none; width: 100%; }

  .sv__media--devices img { width: 108%; margin-right: -2%; }

  .sv__media--flow img { width: 92%; margin-right: 1.5rem; }

  .sv__media--insights { padding-right: 2.25rem; }

  .sv__laptop { max-width: none; width: 96%; transform: perspective(1600px) rotateY(-6deg) rotateX(1.5deg); transform-origin: 60% 50%; }

  .sv__benefits { margin-top: 1.75rem; }
}

@media (min-width: 1280px) {
  .sv__panel { padding: 3rem 0 2.75rem 3.25rem; gap: 2rem; }
  .sv__media { min-height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .sv__panel, .sv__tab, .sv__tab-arrow, .sv__cta { transition: none; }
}

/* Insights state: the pricing-page device renders (laptop + phone overlap) */
.sv__insights {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding-right: 12%;
  padding-bottom: 6%;
}

.sv__insights .sv__insights-laptop { width: 100%; max-width: none; height: auto; display: block; margin: 0; }

.sv__insights .sv__insights-phone {
  position: absolute;
  max-width: none;
  margin: 0;
  right: 0;
  bottom: 0;
  width: 31%;
  height: auto;
  filter: drop-shadow(0 16px 28px rgba(2, 8, 23, 0.55));
}

@media (min-width: 1024px) {
  .sv__media--insights { padding-right: 1.5rem; }
  .sv__insights { max-width: none; width: 100%; }
}

/* ==========================================================================
   Process page: hero, timeline, UI-first statistics, impact columns, CTA
   ========================================================================== */

body.process-page { background: var(--r-offwhite); }

/* ---- Hero ---- */
.pr-hero {
  position: relative;
  margin-top: calc(-1 * var(--r-header-h));
  padding: calc(var(--r-header-h) + 3.5rem) 0 3.5rem;
  color: #fff;
  background:
    radial-gradient(ellipse 55% 70% at 85% 40%, rgba(37, 99, 235, 0.22), transparent 70%),
    linear-gradient(160deg, #0B1120 0%, #071426 55%, #0A1A3A 100%);
}

.pr-hero__grid { display: grid; }

.pr-hero__content { max-width: 34rem; }

.pr-hero__title {
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 1.25rem;
}

.pr-hero__title em,
.pr-ui__title em {
  font-style: italic;
  color: var(--r-blue-light);
}

.pr-hero__sub {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(226, 232, 240, 0.86);
  max-width: 30rem;
  margin: 0 0 2rem;
}

.pr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.pr-btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.pr-btn-outline:hover,
.pr-btn-outline:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
}

@media (min-width: 900px) {
  .pr-hero { padding: calc(var(--r-header-h) + 6rem) 0 6rem; }

  /* The right half is intentionally empty */
  .pr-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* ---- Timeline ---- */
.pr-steps { padding: 4rem 0 4.5rem; }

.pr-steps__head { max-width: 38rem; margin-bottom: 2.5rem; }

.pr-steps__head .r-lead { margin-top: 1rem; }

.pr-steps__count { color: var(--r-muted); font-weight: 500; margin-left: 0.4rem; }

.r-h2 em { font-style: italic; color: var(--r-blue); }

/* Italic serif overhangs the left margin when it starts a line */
.r-h2 em, .pr-hero__title em, .pr-ui__title em { margin-left: 0.04em; }

.pr-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #DCE4EF;
}

.pr-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "num title" "num text";
  column-gap: 1.25rem;
  row-gap: 0.4rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid #DCE4EF;
  transition: background-color 0.2s ease;
}

.pr-step__num {
  grid-area: num;
  font-family: var(--r-serif);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--r-blue);
  padding-top: 0.15rem;
  transition: color 0.2s ease;
}

.pr-step__title {
  grid-area: title;
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--r-ink);
  margin: 0;
  transition: color 0.2s ease;
}

.pr-step__text {
  grid-area: text;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--r-muted);
  margin: 0;
}

.pr-step:hover .pr-step__title { color: var(--r-blue); }

@media (min-width: 900px) {
  .pr-steps { padding: 6rem 0; }

  .pr-steps__head { margin-bottom: 3rem; }

  .pr-step {
    grid-template-columns: 7rem minmax(0, 1.1fr) minmax(0, 1.6fr);
    grid-template-areas: "num title text";
    column-gap: 2.5rem;
    align-items: start;
    padding: 2rem 0;
  }

  .pr-step__num { font-size: 2.25rem; padding-top: 0.1rem; }

  .pr-step__title { font-size: 1.7rem; padding-right: 1rem; }

  .pr-step__text { font-size: 1rem; padding-top: 0.35rem; }
}

/* ---- UI-first statistics ---- */
.pr-ui {
  padding: 4rem 0;
  color: #fff;
  background:
    radial-gradient(ellipse 50% 60% at 10% 90%, rgba(37, 99, 235, 0.18), transparent 70%),
    var(--r-navy);
}

.pr-ui__grid { display: grid; gap: 2.5rem; }

.pr-ui__title {
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 1.25rem;
}

.pr-ui__text {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(226, 232, 240, 0.84);
  max-width: 28rem;
  margin: 0 0 1.75rem;
}

.pr-ui__rule {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--r-blue);
}

.pr-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.pr-stat {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.pr-stat__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--r-blue-light);
  margin-bottom: 0.6rem;
}

.pr-stat__num {
  display: block;
  font-family: var(--r-serif);
  font-size: 3rem;
  line-height: 1;
  color: #fff;
  margin-bottom: 0.5rem;
}

.pr-stat__num span { font-size: 0.55em; color: var(--r-blue-light); margin-left: 0.1em; }

.pr-stat__text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(226, 232, 240, 0.86);
  margin: 0 0 0.5rem;
  max-width: 30rem;
}

.pr-stat__src {
  display: inline-block;
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.pr-stat__src:hover,
.pr-stat__src:focus-visible { color: var(--r-blue-light); border-bottom-color: var(--r-blue-light); }

@media (min-width: 900px) {
  .pr-ui { padding: 6rem 0; }

  .pr-ui__grid {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    gap: 5rem;
    align-items: start;
  }

  .pr-ui__intro { position: sticky; top: calc(var(--r-header-h) + 2rem); }

  .pr-stat {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: 1.5rem;
    padding: 1.75rem 0;
  }

  .pr-stat__label { padding-top: 0.9rem; margin: 0; }

  .pr-stat__num { font-size: 3.4rem; }
}

/* ---- Impact columns ---- */
.pr-impact { padding: 4rem 0; background: var(--r-offwhite); }

.pr-impact__head { max-width: 36rem; margin-bottom: 2.5rem; }

.pr-impact__cols {
  display: grid;
  border-top: 1px solid #DCE4EF;
}

.pr-impact__col {
  padding: 1.5rem 0;
  border-bottom: 1px solid #DCE4EF;
}

.pr-impact__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--r-blue);
  margin-bottom: 0.6rem;
}

.pr-impact__title {
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--r-ink);
  margin: 0 0 0.6rem;
}

.pr-impact__text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--r-muted);
  margin: 0;
  max-width: 22rem;
}

@media (min-width: 900px) {
  .pr-impact { padding: 6rem 0; }

  .pr-impact__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 0;
  }

  .pr-impact__col { padding: 0.5rem 2rem 0.5rem 0; border-bottom: 0; }

  .pr-impact__col + .pr-impact__col { padding-left: 2rem; border-left: 1px solid #DCE4EF; }
}

/* ---- Closing CTA ---- */
.pr-cta {
  padding: 4rem 0;
  background: #EEF2F8;
  border-top: 1px solid #DCE4EF;
  text-align: center;
}

.pr-cta .r-eyebrow { display: block; }

.pr-cta__title { max-width: 30rem; margin: 0 auto 1rem; }

.pr-cta__text { margin: 0 auto 2rem; }

.pr-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
}

@media (min-width: 900px) {
  .pr-cta { padding: 6rem 0; }
}

/* ==========================================================================
   Pricing page: hero, plans carousel, after-12-months, pay once, Insights,
   automations, comparison table with synced scrollbar, values, CTA
   ========================================================================== */

body.pricing-page { background: var(--r-offwhite); }

.pp-h2 {
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--r-ink);
  margin: 0;
}

.pp-h2--light { color: #fff; }

.pp-h3 {
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--r-ink);
  margin: 0;
}

.pp-sub {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--r-muted);
  margin: 0.6rem 0 0;
}

.pp-note { font-size: 0.85rem; color: var(--r-muted); margin: 0; }

.pp-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.pp-section-head--tight { margin-bottom: 1.25rem; }

@media (min-width: 768px) {
  .pp-section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }
}

/* ---- Hero ---- */
.pp-hero {
  margin-top: calc(-1 * var(--r-header-h));
  padding: calc(var(--r-header-h) + 3.5rem) 0 3.5rem;
  color: #fff;
  background:
    radial-gradient(ellipse 50% 70% at 88% 45%, rgba(37, 99, 235, 0.2), transparent 70%),
    linear-gradient(160deg, #0B1120 0%, #071426 60%, #0A1A3A 100%);
}

.pp-hero__grid { display: grid; gap: 1.5rem; }

.pp-hero__title {
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}

.pp-hero__title em { font-style: italic; color: var(--r-blue-light); margin-left: 0.04em; }

.pp-hero__tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.75);
}

.pp-hero__sep { color: rgba(148, 163, 184, 0.6); }

@media (min-width: 900px) {
  .pp-hero { padding: calc(var(--r-header-h) + 5.5rem) 0 5.5rem; }
  .pp-hero__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3rem; }
  .pp-hero__tagline { padding-bottom: 0.6rem; }
}

/* ---- Monthly plans ---- */
.pp-monthly { padding: 3.5rem 0 3rem; }

.pp-perk {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: #07883E;
  font-weight: 600;
  font-size: 0.95rem;
}

.pp-perk svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pp-carousel { position: relative; }

/* Small screens: one plan at a time with the next one peeking in */
.pp-plans {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1.25rem;
  padding: 0.75rem 1.25rem 0.5rem;
  margin-inline: -1.25rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pp-plans::-webkit-scrollbar { display: none; }

.pp-plans:focus-visible { outline: 2px solid var(--r-blue); outline-offset: -2px; }

.pp-plan {
  position: relative;
  flex: 0 0 82%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--r-line);
  border-top: 2px solid transparent;
  border-radius: 10px;
  padding: 1.5rem 1.35rem 1.35rem;
}

.pp-plan--featured {
  background: #F3F7FF;
  border-top-color: var(--r-blue);
}

.pp-plan__flag {
  display: block;
  min-height: 1.1em;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--r-blue);
  text-align: right;
  margin-bottom: 0.6rem;
}

.pp-plan__name {
  font-family: var(--r-sans);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--r-ink);
  margin: 0 0 0.6rem;
}

.pp-plan__price { display: flex; align-items: baseline; gap: 0.3rem; margin: 0 0 0.35rem; }

.pp-plan__amount {
  font-family: var(--r-serif);
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--r-ink);
}

.pp-plan__per { font-size: 1rem; color: var(--r-muted); }

.pp-plan__setup {
  font-size: 0.9rem;
  color: var(--r-muted);
  margin: 0 0 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--r-line);
}

.pp-plan__setup--free { color: #07883E; font-weight: 600; }

.pp-plan__features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  flex: 1;
}

.pp-plan__features li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--r-ink);
}

.pp-plan__features svg,
.pp-once__features svg,
.pp-auto__list svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 0.2rem;
  fill: none;
  stroke: var(--r-blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.redesign .pp-plan__cta { width: 100%; margin-top: auto; }
body.redesign .pp-plan__cta::after { content: "\2192"; margin-left: 0.5rem; }

/* Carousel controls (small screens only) */
.pp-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.pp-carousel__btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--r-line);
  background: #fff;
  color: var(--r-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pp-carousel__btn:disabled { opacity: 0.35; cursor: default; }
.pp-carousel__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-carousel__btn:focus-visible { outline: 2px solid var(--r-blue); outline-offset: 2px; }

.pp-dots { display: flex; gap: 0.5rem; }

.pp-dots__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: #CBD5E1;
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.pp-dots__dot.is-active { width: 22px; border-radius: 4px; background: var(--r-blue); }
.pp-dots__dot:focus-visible { outline: 2px solid var(--r-blue); outline-offset: 2px; }

@media (min-width: 900px) {
  .pp-monthly { padding: 5rem 0 4rem; }

  .pp-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--r-line);
    border-bottom: 1px solid var(--r-line);
  }

  .pp-plan {
    flex: none;
    border: 0;
    border-top: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    padding: 2rem 2rem 2.25rem;
  }

  .pp-plan + .pp-plan { border-left: 1px solid var(--r-line); }

  .pp-plan--featured { background: #F3F7FF; border-top-color: var(--r-blue); }

  .pp-plan__amount { font-size: 3.4rem; }

  .pp-carousel__nav { display: none; }
}

/* ---- Every plan strip ---- */
.pp-every {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 0;
  margin-top: 1rem;
  border-bottom: 1px solid var(--r-line);
}

.pp-every__label { font-weight: 700; font-size: 0.9rem; color: var(--r-ink); }

.pp-every__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1rem;
}

.pp-every__list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--r-ink); }

.pp-every__list svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: var(--r-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 900px) {
  .pp-every { flex-direction: row; align-items: center; gap: 2rem; margin-top: 0; border-bottom: 1px solid var(--r-line); }
  .pp-every__list { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
}

/* ---- After 12 months ---- */
.pp-after { padding-top: 3rem; }

.pp-after__options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--r-line);
}

.pp-after__options li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--r-line);
}

.pp-after__num { font-family: var(--r-serif); font-size: 1.4rem; line-height: 1.2; color: var(--r-blue); }

.pp-after__options strong { display: block; font-size: 1rem; font-weight: 700; color: var(--r-ink); margin-bottom: 0.3rem; }

.pp-after__price { color: var(--r-blue); }

.pp-after__options p { font-size: 0.92rem; line-height: 1.6; color: var(--r-muted); margin: 0; }

@media (min-width: 900px) {
  .pp-after { padding-top: 4rem; }

  .pp-after__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .pp-after__options li { padding: 1.75rem 2rem 1.75rem 0; border-bottom: 1px solid var(--r-line); }

  .pp-after__options li + li { padding-left: 2rem; border-left: 1px solid var(--r-line); }
}

/* ---- Pay once (navy) ---- */
.pp-once {
  padding: 3.5rem 0;
  color: #fff;
  background:
    radial-gradient(ellipse 45% 60% at 90% 50%, rgba(37, 99, 235, 0.18), transparent 70%),
    var(--r-navy);
}

.pp-once__row {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.pp-once__price { display: flex; flex-direction: column; }

.pp-once__amount { font-family: var(--r-serif); font-size: 3.6rem; line-height: 1; color: #fff; }

.pp-once__sub { font-size: 0.9rem; color: rgba(226, 232, 240, 0.7); margin-top: 0.4rem; }

.pp-once__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.pp-once__features li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; color: rgba(255, 255, 255, 0.92); line-height: 1.45; }

.pp-once__features svg { stroke: var(--r-blue-light); }

body.redesign .pp-once__cta { justify-self: start; }
body.redesign .pp-once__cta::after { content: "\2192"; margin-left: 0.5rem; }

@media (min-width: 900px) {
  .pp-once { padding: 5rem 0; }

  .pp-once__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 2.5rem;
    padding: 2rem 0;
  }

  .pp-once__price { padding-right: 2.5rem; border-right: 1px solid rgba(255, 255, 255, 0.14); }

  .pp-once__features { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }

  .pp-once__features li + li { padding-left: 1.25rem; border-left: 1px solid rgba(255, 255, 255, 0.14); }
}

/* ---- REA Insights showcase ---- */
.pp-insights {
  padding: 3.5rem 0;
  background:
    radial-gradient(ellipse 70% 60% at 85% 60%, rgba(96, 165, 250, 0.16), transparent 70%),
    linear-gradient(180deg, #F8FAFC 0%, #EEF4FF 100%);
  overflow: hidden;
}

.pp-insights__grid { display: grid; gap: 2.5rem; }

.pp-new {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--r-blue);
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--r-blue);
  margin-bottom: 1.25rem;
}

.pp-insights__title {
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.6rem + 2.8vw, 3.6rem);
  line-height: 1.05;
  color: var(--r-ink);
  margin: 0 0 0.6rem;
}

.pp-insights__sub { font-size: 1.1rem; color: var(--r-muted); margin: 0 0 1.75rem; }

.pp-insights__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid #D7E0EE; }

.pp-insights__rows li {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid #D7E0EE;
}

.pp-insights__desc { font-size: 0.95rem; line-height: 1.5; color: var(--r-charcoal); }
.pp-insights__desc strong { color: var(--r-ink); font-weight: 700; }
.pp-insights__price { font-weight: 700; color: var(--r-ink); white-space: nowrap; }

/* Transparent device renders, phone over the laptop's lower right corner */
.pp-insights__devices {
  position: relative;
  width: min(100%, 440px);
  margin: 0 auto;
  padding: 0 12% 7% 0;
}

.pp-insights__laptop { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 38px rgba(15, 23, 42, 0.22)); }

.pp-insights__phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 31%;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(15, 23, 42, 0.3));
}

@media (min-width: 900px) {
  .pp-insights { padding: 5.5rem 0; }

  .pp-insights__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 3.5rem; }

  .pp-insights__devices { width: 100%; max-width: 640px; margin: 0 0 0 auto; }
}

/* ---- Automations ---- */
.pp-auto { padding: 3.5rem 0; background: var(--r-offwhite); border-top: 1px solid var(--r-line); }

.pp-auto__call {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0;
  max-width: 22rem;
  color: var(--r-blue);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.45;
}

.pp-auto__call svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pp-auto__list {
  list-style: none;
  margin: 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--r-line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

.pp-auto__list li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.95rem; color: var(--r-ink); }

@media (min-width: 900px) {
  .pp-auto { padding: 5rem 0; }
  .pp-auto__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; padding-top: 2rem; }
}

/* ---- Comparison ---- */
.pp-compare { padding: 3.5rem 0 3rem; background: #fff; border-top: 1px solid var(--r-line); }

.pp-compare__intro { max-width: 44rem; margin-bottom: 1.5rem; }

.pp-swipe-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--r-blue);
}

.pp-swipe-hint svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* The custom bar below the table replaces the native one, so only one shows */
  scrollbar-width: none;
}

.pp-table-wrap::-webkit-scrollbar { display: none; }

.pp-table-wrap:focus-visible { outline: 2px solid var(--r-blue); outline-offset: 2px; }

.pp-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 820px;
  font-size: 0.9rem;
}

.pp-table th,
.pp-table td {
  padding: 1rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--r-line);
  color: var(--r-charcoal);
  line-height: 1.5;
  min-width: 11rem;
}

.pp-table thead th { vertical-align: bottom; border-bottom: 1px solid var(--r-ink); padding-bottom: 0.75rem; }

.pp-table__col { display: block; font-weight: 700; color: var(--r-ink); }
.pp-table__colsub { display: block; font-weight: 400; font-size: 0.78rem; color: var(--r-muted); margin-top: 0.1rem; }

.pp-table tbody th,
.pp-table thead .pp-table__label {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  font-weight: 700;
  color: var(--r-ink);
  min-width: 7.5rem;
  max-width: 8.5rem;
  box-shadow: 1px 0 0 var(--r-line);
}

.pp-table__rea {
  background: #EEF4FF;
  border-left: 2px solid var(--r-blue);
  min-width: 13rem;
}

.pp-table tbody .pp-table__rea { color: var(--r-ink); font-weight: 600; }
.pp-table thead .pp-table__rea .pp-table__col { color: var(--r-blue); }

/* Custom, synced scrollbar under the table (hidden by JS when nothing overflows) */
.pp-scrollbar {
  position: relative;
  height: 8px;
  margin: 0.9rem 0 0;
  border-radius: 999px;
  background: #DBEAFE;
  cursor: pointer;
  touch-action: none;
}

.pp-scrollbar[hidden] { display: none; }

.pp-scrollbar:focus-visible { outline: 2px solid var(--r-blue); outline-offset: 3px; }

.pp-scrollbar__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: var(--r-blue);
}


@media (min-width: 1024px) {
  .pp-compare { padding: 5rem 0 3.5rem; }
  .pp-swipe-hint { display: none; }
  .pp-table { min-width: 0; font-size: 0.95rem; }
  .pp-table th, .pp-table td { min-width: 0; }
  .pp-table tbody th { width: 15%; max-width: none; }
  .pp-table__rea { width: 24%; }
}

.pp-values {
  display: grid;
  margin-top: 2.5rem;
  border-top: 1px solid var(--r-line);
}

.pp-values__col { padding: 1.25rem 0; border-bottom: 1px solid var(--r-line); }

.pp-values__title {
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--r-ink);
  margin: 0 0 0.5rem;
}

.pp-values__col p { font-size: 0.92rem; line-height: 1.6; color: var(--r-muted); margin: 0; }

@media (min-width: 900px) {
  .pp-values { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3.5rem; }
  .pp-values__col { padding: 1.75rem 2rem 1.75rem 0; }
  .pp-values__col + .pp-values__col { padding-left: 2rem; border-left: 1px solid var(--r-line); }
}

.pp-footnote { margin: 1.5rem 0 0; font-size: 0.75rem; line-height: 1.5; color: #8A97AB; }

/* ---- CTA ---- */
.pp-cta { padding: 3.5rem 0; background: #EEF2F8; border-top: 1px solid var(--r-line); }

.pp-cta__grid { display: grid; gap: 2rem; }

.pp-cta__title {
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem);
  line-height: 1.1;
  color: var(--r-ink);
  margin: 0 0 0.75rem;
  max-width: 30rem;
}

.pp-cta__sub { font-size: 1rem; color: var(--r-muted); margin: 0 0 1.5rem; }

body.redesign .pp-cta__btn::after { content: "\2192"; margin-left: 0.5rem; }

.pp-cta__contact { display: flex; flex-direction: column; gap: 0.6rem; }

.pp-cta__contact a { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--r-blue); text-decoration: none; }

.pp-cta__contact svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 900px) {
  .pp-cta { padding: 5rem 0; }
  .pp-cta__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3rem; }
}

/* ---- Cancellation footnote ---- */
.pp-cancel { padding: 1.25rem 0 1.5rem; background: #fff; }

.pp-cancel p { font-size: 0.75rem; line-height: 1.6; color: var(--r-muted); text-align: center; max-width: 48rem; margin: 0 auto; }

/* ==========================================================================
   Preview page: navy hero + editorial tool layout (same IDs as before)
   ========================================================================== */

body.preview-page { background: var(--r-offwhite); }

.pv-hero {
  margin-top: calc(-1 * var(--r-header-h));
  padding: calc(var(--r-header-h) + 3.5rem) 0 3.5rem;
  color: #fff;
  background:
    radial-gradient(ellipse 50% 70% at 88% 45%, rgba(37, 99, 235, 0.2), transparent 70%),
    linear-gradient(160deg, #0B1120 0%, #071426 60%, #0A1A3A 100%);
}

.pv-hero__grid { display: grid; gap: 1.5rem; }

.pv-hero__title {
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 1.25rem;
  max-width: 14em;
}

.pv-hero__title em { font-style: italic; color: var(--r-blue-light); margin-left: 0.04em; }

.pv-hero__sub { font-size: 1.05rem; line-height: 1.7; color: rgba(226, 232, 240, 0.86); max-width: 40rem; margin: 0; }

.pv-hero__tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.75);
}

.pv-hero__sep { color: rgba(148, 163, 184, 0.6); }

@media (min-width: 900px) {
  .pv-hero { padding: calc(var(--r-header-h) + 5rem) 0 5rem; }
  .pv-hero__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3rem; }
  .pv-hero__tagline { padding-bottom: 0.4rem; }
}

/* Section head */
body.redesign .pv-tool { padding: 3.5rem 0 4rem; }

@media (min-width: 900px) {
  body.redesign .tool-layout { grid-template-columns: 380px minmax(0, 1fr); gap: 3rem; }
}

.pv-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--r-line);
}

.pv-head__sep { color: var(--r-muted); margin: 0 0.35rem; }

.pv-head__title {
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem);
  line-height: 1.1;
  color: var(--r-ink);
  margin: 0;
}

.pv-head__note { font-size: 0.9rem; color: var(--r-muted); margin: 0; max-width: 24rem; }

@media (min-width: 900px) {
  .pv-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2rem; }
  .pv-head__note { text-align: right; }
}

.pv-step {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--r-blue);
  margin-bottom: 0.9rem;
}

.pv-step__right { color: var(--r-muted); }

/* Input panel: flat, no card */
body.redesign .tool-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

body.redesign .tool-drop {
  border: 1px dashed #BFCBDD;
  border-radius: 10px;
  background: #fff;
  padding: 1.75rem 1rem;
}

body.redesign .tool-drop:hover,
body.redesign .tool-drop.is-drag { border-color: var(--r-blue); background: #F8FAFF; }

body.redesign .tool-drop__icon { color: var(--r-blue); }

body.redesign .tool-drop__title { font-weight: 700; color: var(--r-ink); }

body.redesign .tool-panel .form-group label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--r-ink);
  text-transform: none;
  letter-spacing: 0;
}

/* Underlined business-name field */
body.redesign .tool-panel input#tool-name {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #CBD5E1;
  border-radius: 0;
  padding: 0.5rem 0 0.75rem;
  font-size: 1.1rem;
  color: var(--r-ink);
  box-shadow: none;
}

body.redesign .tool-panel input#tool-name:focus { outline: none; border-bottom-color: var(--r-blue); box-shadow: none; }

body.redesign .tool-panel input#tool-name::placeholder { color: #A3AEC2; }

/* Numbered industry cards */
body.redesign .industry-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }

body.redesign .industry-picker__card {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  padding: 1.1rem 0.9rem;
  background: #fff;
  border: 1px solid var(--r-line);
  border-radius: 8px;
  text-align: left;
  min-height: 0;
}

body.redesign .industry-picker__card:hover { border-color: #BFD3F8; }

body.redesign .industry-picker__card.is-selected { background: #EEF4FF; border-color: var(--r-blue); }

body.redesign .industry-picker__card span { font-size: 0.85rem; font-weight: 500; color: var(--r-charcoal); }

body.redesign .industry-picker__card.is-selected span { color: var(--r-ink); }

body.redesign .pv-card__num {
  font-family: var(--r-serif);
  font-size: 1.1rem;
  color: var(--r-muted);
  flex-shrink: 0;
  line-height: 1;
}

body.redesign .industry-picker__card.is-selected .pv-card__num { color: var(--r-blue); }

body.redesign .tool-generate {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 1.05rem 1.25rem;
  border-radius: 6px;
  font-size: 0.95rem;
}

.pv-fine { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--r-muted); }

/* Preview frame */
body.redesign .tool-frame { border-radius: 8px; border-color: var(--r-line); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04); }

body.redesign .tool-frame__bar { background: #F1F5F9; }

body.redesign .tool-view-btn { border-radius: 6px; }

body.redesign .tool-mobile-hint { display: none; }

body.redesign .tool-placeholder {
  height: 600px;
  background: linear-gradient(180deg, #FBFCFE 0%, #F4F7FB 100%);
  position: relative;
  overflow: hidden;
  padding: 2rem;
}

.pv-placeholder { position: relative; width: min(100%, 520px); }

.pv-placeholder__sheet {
  position: absolute;
  inset: -6% -4% -8% -4%;
  background: #fff;
  border: 1px solid #E6ECF5;
  border-radius: 6px;
  transform: rotate(3.5deg);
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.06);
}

.pv-placeholder__sheet--back { transform: rotate(7deg) translate(3%, 3%); opacity: 0.6; }

.pv-placeholder__body { position: relative; text-align: center; padding: 3rem 2rem; }

.pv-placeholder__rule { display: block; width: 32px; height: 1px; background: var(--r-blue); margin: 0 auto 1.25rem; }

body.redesign .tool-placeholder .pv-placeholder__title {
  font-family: var(--r-serif);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.15;
  color: var(--r-ink);
  margin: 0 0 0.9rem;
}

body.redesign .tool-placeholder .pv-placeholder__text { font-size: 0.95rem; line-height: 1.6; color: var(--r-muted); margin: 0; max-width: 26rem; margin-inline: auto; }

.pv-frame-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--r-muted);
}

.pv-frame-foot__right { color: var(--r-blue); }

body.redesign .tool-gate { border-radius: 10px; box-shadow: none; }

@media (max-width: 480px) {
  body.redesign .tool-placeholder { height: 460px; padding: 1.25rem; }
}

.pv-frame-tag {
  display: none;
  margin-left: auto;
  margin-right: 0.75rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--r-muted);
  white-space: nowrap;
}

@media (min-width: 900px) { .pv-frame-tag { display: inline; } }

/* Below the frame: gate on the left, "what the finished site adds" on the right */
.pv-frame-foot__link { color: var(--r-blue); font-weight: 600; text-decoration: none; }
.pv-frame-foot__link:hover { text-decoration: underline; }

.pv-gate-row { display: grid; gap: 1.25rem; margin-top: 1.25rem; }

body.redesign .pv-gate-row .tool-gate { margin-top: 0; text-align: left; }
body.redesign .pv-gate-row .tool-gate__text { margin-inline: 0; }
body.redesign .pv-gate-row .tool-gate__form { margin-inline: 0; }

.pv-adds {
  padding: 1.5rem;
  border: 1px solid var(--r-line);
  border-radius: 10px;
  background: #F8FAFF;
}

.pv-adds[hidden] { display: none; }

.pv-adds .r-eyebrow { margin-bottom: 0.75rem; }

.pv-adds__list { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--r-line); }

.pv-adds__list li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.4rem;
  border-bottom: 1px solid var(--r-line);
  font-size: 0.88rem;
  color: var(--r-ink);
}

.pv-adds__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--r-blue);
  border-bottom: 2px solid var(--r-blue);
  transform: rotate(-45deg);
}

.pv-adds__link { font-size: 0.85rem; font-weight: 600; color: var(--r-blue); text-decoration: none; }
.pv-adds__link:hover { text-decoration: underline; }

@media (min-width: 900px) {
  .pv-gate-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
}

/* Perk line highlighted when a visitor arrives from the annual offer modal */
.pp-perk.is-spotlight {
  background: #ECFDF3;
  border: 1px solid #A7E3BE;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  animation: pp-spot 1.6s ease 2;
}

@keyframes pp-spot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(7, 136, 62, 0); }
  50% { box-shadow: 0 0 0 8px rgba(7, 136, 62, 0.18); }
}