@import "https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&family=Dongle:wght@300;400;700&display=swap";
:root {
  --red-deep: #bb0016;
  --red-bright: #e1272b;
  --orange: #fea121;
  --orange-deep: #f9a316;
  --ink: #1c1917;
  --paper: #fcf9f8;
  --cream: #fbe9e5;
  --stone: #78716c;
  --line: #e2d9d4;
  --white: #fff;
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-display: "Dongle", sans-serif;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--ink);
}
a {
  color: inherit;
}
.suite-loading {
  min-height: 100vh;
  color: var(--stone);
  justify-content: center;
  align-items: center;
  font-size: 14px;
  display: flex;
}
.rf-auth-wrap {
  flex-direction: row;
  min-height: 100vh;
  font-family: inherit;
  display: flex;
}
.rf-auth-left {
  box-sizing: border-box;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  min-height: 100vh;
  padding: 160px 64px 65px 15%;
  display: flex;
  background: var(--paper);
  border-bottom-right-radius: 32px;
  overflow: hidden;
  border-right: 1px solid var(--cream);
}
.rf-auth-logo {
  visibility: hidden;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
  display: none;
}
.rf-auth-logo-icon {
  background: linear-gradient(135deg, var(--red-deep), var(--orange));
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}
.rf-auth-logo-text {
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
}
.rf-auth-headline {
  margin-bottom: 48px;
}
.rf-auth-h1 {
  font-family: var(--font-display);
  color: var(--red-bright);
  max-width: 520px;
  margin: 0 0 16px;
  font-size: clamp(3rem, 3.5vw, 4rem);
  font-weight: 700;
  line-height: 0.5;
}
.rf-auth-sub {
  color: var(--stone);
  max-width: 440px;
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}
.rf-auth-hub {
  width: 100%;
  max-width: 600px;
  margin-top: 24px;
}
@keyframes rf-auth-hub-float {
  0%,
  to {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -7px, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .rf-auth-hub-float {
    animation: 4.5s ease-in-out infinite rf-auth-hub-float;
    will-change: transform;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}
@keyframes rf-chip-float-a {
  0% {
    transform: translate3d(0px, 3px, 0);
  }
  2.500% {
    transform: translate3d(0.7px, 2.96px, 0);
  }
  5.000% {
    transform: translate3d(1.39px, 2.85px, 0);
  }
  7.500% {
    transform: translate3d(2.04px, 2.67px, 0);
  }
  10.000% {
    transform: translate3d(2.65px, 2.43px, 0);
  }
  12.500% {
    transform: translate3d(3.18px, 2.12px, 0);
  }
  15.000% {
    transform: translate3d(3.64px, 1.77px, 0);
  }
  17.500% {
    transform: translate3d(4.01px, 1.36px, 0);
  }
  20.000% {
    transform: translate3d(4.28px, 0.93px, 0);
  }
  22.500% {
    transform: translate3d(4.44px, 0.47px, 0);
  }
  25.000% {
    transform: translate3d(4.5px, 0px, 0);
  }
  27.500% {
    transform: translate3d(4.44px, -0.47px, 0);
  }
  30.000% {
    transform: translate3d(4.28px, -0.92px, 0);
  }
  32.500% {
    transform: translate3d(4.01px, -1.36px, 0);
  }
  35.000% {
    transform: translate3d(3.64px, -1.76px, 0);
  }
  37.500% {
    transform: translate3d(3.18px, -2.12px, 0);
  }
  40.000% {
    transform: translate3d(2.65px, -2.43px, 0);
  }
  42.500% {
    transform: translate3d(2.04px, -2.67px, 0);
  }
  45.000% {
    transform: translate3d(1.39px, -2.85px, 0);
  }
  47.500% {
    transform: translate3d(0.7px, -2.96px, 0);
  }
  50.000% {
    transform: translate3d(0px, -3px, 0);
  }
  52.500% {
    transform: translate3d(-0.7px, -2.96px, 0);
  }
  55.000% {
    transform: translate3d(-1.39px, -2.85px, 0);
  }
  57.500% {
    transform: translate3d(-2.04px, -2.67px, 0);
  }
  60.000% {
    transform: translate3d(-2.65px, -2.43px, 0);
  }
  62.500% {
    transform: translate3d(-3.18px, -2.12px, 0);
  }
  65.000% {
    transform: translate3d(-3.64px, -1.77px, 0);
  }
  67.500% {
    transform: translate3d(-4.01px, -1.36px, 0);
  }
  70.000% {
    transform: translate3d(-4.28px, -0.93px, 0);
  }
  72.500% {
    transform: translate3d(-4.44px, -0.47px, 0);
  }
  75.000% {
    transform: translate3d(-4.5px, -0px, 0);
  }
  77.500% {
    transform: translate3d(-4.44px, 0.47px, 0);
  }
  80.000% {
    transform: translate3d(-4.28px, 0.92px, 0);
  }
  82.500% {
    transform: translate3d(-4.01px, 1.36px, 0);
  }
  85.000% {
    transform: translate3d(-3.64px, 1.76px, 0);
  }
  87.500% {
    transform: translate3d(-3.18px, 2.12px, 0);
  }
  90.000% {
    transform: translate3d(-2.65px, 2.43px, 0);
  }
  92.500% {
    transform: translate3d(-2.04px, 2.67px, 0);
  }
  95.000% {
    transform: translate3d(-1.39px, 2.85px, 0);
  }
  97.500% {
    transform: translate3d(-0.7px, 2.96px, 0);
  }
  to {
    transform: translate3d(-0px, 3px, 0);
  }
}
@keyframes rf-chip-float-b {
  0% {
    transform: translate3d(1.36px, 0px, 0);
  }
  2.500% {
    transform: translate3d(1.85px, 1.08px, 0);
  }
  5.000% {
    transform: translate3d(2.29px, 2.06px, 0);
  }
  7.500% {
    transform: translate3d(2.68px, 2.83px, 0);
  }
  10.000% {
    transform: translate3d(3px, 3.33px, 0);
  }
  12.500% {
    transform: translate3d(3.24px, 3.5px, 0);
  }
  15.000% {
    transform: translate3d(3.41px, 3.33px, 0);
  }
  17.500% {
    transform: translate3d(3.49px, 2.83px, 0);
  }
  20.000% {
    transform: translate3d(3.49px, 2.06px, 0);
  }
  22.500% {
    transform: translate3d(3.4px, 1.08px, 0);
  }
  25.000% {
    transform: translate3d(3.22px, 0px, 0);
  }
  27.500% {
    transform: translate3d(2.97px, -1.08px, 0);
  }
  30.000% {
    transform: translate3d(2.64px, -2.06px, 0);
  }
  32.500% {
    transform: translate3d(2.25px, -2.83px, 0);
  }
  35.000% {
    transform: translate3d(1.81px, -3.33px, 0);
  }
  37.500% {
    transform: translate3d(1.32px, -3.5px, 0);
  }
  40.000% {
    transform: translate3d(0.79px, -3.33px, 0);
  }
  42.500% {
    transform: translate3d(0.25px, -2.83px, 0);
  }
  45.000% {
    transform: translate3d(-0.3px, -2.06px, 0);
  }
  47.500% {
    transform: translate3d(-0.84px, -1.08px, 0);
  }
  50.000% {
    transform: translate3d(-1.36px, -0px, 0);
  }
  52.500% {
    transform: translate3d(-1.85px, 1.08px, 0);
  }
  55.000% {
    transform: translate3d(-2.29px, 2.06px, 0);
  }
  57.500% {
    transform: translate3d(-2.68px, 2.83px, 0);
  }
  60.000% {
    transform: translate3d(-3px, 3.33px, 0);
  }
  62.500% {
    transform: translate3d(-3.24px, 3.5px, 0);
  }
  65.000% {
    transform: translate3d(-3.41px, 3.33px, 0);
  }
  67.500% {
    transform: translate3d(-3.49px, 2.83px, 0);
  }
  70.000% {
    transform: translate3d(-3.49px, 2.06px, 0);
  }
  72.500% {
    transform: translate3d(-3.4px, 1.08px, 0);
  }
  75.000% {
    transform: translate3d(-3.22px, 0px, 0);
  }
  77.500% {
    transform: translate3d(-2.97px, -1.08px, 0);
  }
  80.000% {
    transform: translate3d(-2.64px, -2.06px, 0);
  }
  82.500% {
    transform: translate3d(-2.25px, -2.83px, 0);
  }
  85.000% {
    transform: translate3d(-1.81px, -3.33px, 0);
  }
  87.500% {
    transform: translate3d(-1.32px, -3.5px, 0);
  }
  90.000% {
    transform: translate3d(-0.79px, -3.33px, 0);
  }
  92.500% {
    transform: translate3d(-0.25px, -2.83px, 0);
  }
  95.000% {
    transform: translate3d(0.3px, -2.06px, 0);
  }
  97.500% {
    transform: translate3d(0.84px, -1.08px, 0);
  }
  to {
    transform: translate3d(1.36px, -0px, 0);
  }
}
@keyframes rf-chip-float-c {
  0% {
    transform: translate3d(2.8px, 1.92px, 0);
  }
  2.500% {
    transform: translate3d(3px, 2.44px, 0);
  }
  5.000% {
    transform: translate3d(2.9px, 2.91px, 0);
  }
  7.500% {
    transform: translate3d(2.52px, 3.3px, 0);
  }
  10.000% {
    transform: translate3d(1.9px, 3.61px, 0);
  }
  12.500% {
    transform: translate3d(1.09px, 3.84px, 0);
  }
  15.000% {
    transform: translate3d(0.17px, 3.97px, 0);
  }
  17.500% {
    transform: translate3d(-0.76px, 4px, 0);
  }
  20.000% {
    transform: translate3d(-1.62px, 3.93px, 0);
  }
  22.500% {
    transform: translate3d(-2.32px, 3.77px, 0);
  }
  25.000% {
    transform: translate3d(-2.8px, 3.51px, 0);
  }
  27.500% {
    transform: translate3d(-3px, 3.17px, 0);
  }
  30.000% {
    transform: translate3d(-2.9px, 2.75px, 0);
  }
  32.500% {
    transform: translate3d(-2.52px, 2.26px, 0);
  }
  35.000% {
    transform: translate3d(-1.9px, 1.71px, 0);
  }
  37.500% {
    transform: translate3d(-1.09px, 1.13px, 0);
  }
  40.000% {
    transform: translate3d(-0.17px, 0.51px, 0);
  }
  42.500% {
    transform: translate3d(0.76px, -0.12px, 0);
  }
  45.000% {
    transform: translate3d(1.62px, -0.74px, 0);
  }
  47.500% {
    transform: translate3d(2.32px, -1.34px, 0);
  }
  50.000% {
    transform: translate3d(2.8px, -1.92px, 0);
  }
  52.500% {
    transform: translate3d(3px, -2.44px, 0);
  }
  55.000% {
    transform: translate3d(2.9px, -2.91px, 0);
  }
  57.500% {
    transform: translate3d(2.52px, -3.3px, 0);
  }
  60.000% {
    transform: translate3d(1.9px, -3.61px, 0);
  }
  62.500% {
    transform: translate3d(1.09px, -3.84px, 0);
  }
  65.000% {
    transform: translate3d(0.17px, -3.97px, 0);
  }
  67.500% {
    transform: translate3d(-0.76px, -4px, 0);
  }
  70.000% {
    transform: translate3d(-1.62px, -3.93px, 0);
  }
  72.500% {
    transform: translate3d(-2.32px, -3.77px, 0);
  }
  75.000% {
    transform: translate3d(-2.8px, -3.51px, 0);
  }
  77.500% {
    transform: translate3d(-3px, -3.17px, 0);
  }
  80.000% {
    transform: translate3d(-2.9px, -2.75px, 0);
  }
  82.500% {
    transform: translate3d(-2.52px, -2.26px, 0);
  }
  85.000% {
    transform: translate3d(-1.9px, -1.71px, 0);
  }
  87.500% {
    transform: translate3d(-1.09px, -1.13px, 0);
  }
  90.000% {
    transform: translate3d(-0.17px, -0.51px, 0);
  }
  92.500% {
    transform: translate3d(0.76px, 0.12px, 0);
  }
  95.000% {
    transform: translate3d(1.62px, 0.74px, 0);
  }
  97.500% {
    transform: translate3d(2.32px, 1.34px, 0);
  }
  to {
    transform: translate3d(2.8px, 1.92px, 0);
  }
}
@keyframes rf-chip-float-d {
  0% {
    transform: translate3d(4.32px, 0px, 0);
  }
  2.500% {
    transform: translate3d(3.87px, 0.39px, 0);
  }
  5.000% {
    transform: translate3d(3.32px, 0.77px, 0);
  }
  7.500% {
    transform: translate3d(2.7px, 1.13px, 0);
  }
  10.000% {
    transform: translate3d(2.01px, 1.47px, 0);
  }
  12.500% {
    transform: translate3d(1.27px, 1.77px, 0);
  }
  15.000% {
    transform: translate3d(0.49px, 2.02px, 0);
  }
  17.500% {
    transform: translate3d(-0.29px, 2.23px, 0);
  }
  20.000% {
    transform: translate3d(-1.07px, 2.38px, 0);
  }
  22.500% {
    transform: translate3d(-1.82px, 2.47px, 0);
  }
  25.000% {
    transform: translate3d(-2.52px, 2.5px, 0);
  }
  27.500% {
    transform: translate3d(-3.17px, 2.47px, 0);
  }
  30.000% {
    transform: translate3d(-3.73px, 2.38px, 0);
  }
  32.500% {
    transform: translate3d(-4.21px, 2.23px, 0);
  }
  35.000% {
    transform: translate3d(-4.58px, 2.02px, 0);
  }
  37.500% {
    transform: translate3d(-4.84px, 1.77px, 0);
  }
  40.000% {
    transform: translate3d(-4.98px, 1.47px, 0);
  }
  42.500% {
    transform: translate3d(-4.99px, 1.13px, 0);
  }
  45.000% {
    transform: translate3d(-4.88px, 0.77px, 0);
  }
  47.500% {
    transform: translate3d(-4.66px, 0.39px, 0);
  }
  50.000% {
    transform: translate3d(-4.32px, 0px, 0);
  }
  52.500% {
    transform: translate3d(-3.87px, -0.39px, 0);
  }
  55.000% {
    transform: translate3d(-3.32px, -0.77px, 0);
  }
  57.500% {
    transform: translate3d(-2.7px, -1.13px, 0);
  }
  60.000% {
    transform: translate3d(-2.01px, -1.47px, 0);
  }
  62.500% {
    transform: translate3d(-1.27px, -1.77px, 0);
  }
  65.000% {
    transform: translate3d(-0.49px, -2.02px, 0);
  }
  67.500% {
    transform: translate3d(0.29px, -2.23px, 0);
  }
  70.000% {
    transform: translate3d(1.07px, -2.38px, 0);
  }
  72.500% {
    transform: translate3d(1.82px, -2.47px, 0);
  }
  75.000% {
    transform: translate3d(2.52px, -2.5px, 0);
  }
  77.500% {
    transform: translate3d(3.17px, -2.47px, 0);
  }
  80.000% {
    transform: translate3d(3.73px, -2.38px, 0);
  }
  82.500% {
    transform: translate3d(4.21px, -2.23px, 0);
  }
  85.000% {
    transform: translate3d(4.58px, -2.02px, 0);
  }
  87.500% {
    transform: translate3d(4.84px, -1.77px, 0);
  }
  90.000% {
    transform: translate3d(4.98px, -1.47px, 0);
  }
  92.500% {
    transform: translate3d(4.99px, -1.13px, 0);
  }
  95.000% {
    transform: translate3d(4.88px, -0.77px, 0);
  }
  97.500% {
    transform: translate3d(4.66px, -0.39px, 0);
  }
  to {
    transform: translate3d(4.32px, -0px, 0);
  }
}
@keyframes rf-chip-float-e {
  0% {
    transform: translate3d(2.44px, 1.94px, 0);
  }
  2.500% {
    transform: translate3d(2.78px, 1.64px, 0);
  }
  5.000% {
    transform: translate3d(3.05px, 1.31px, 0);
  }
  7.500% {
    transform: translate3d(3.25px, 0.94px, 0);
  }
  10.000% {
    transform: translate3d(3.37px, 0.55px, 0);
  }
  12.500% {
    transform: translate3d(3.4px, 0.15px, 0);
  }
  15.000% {
    transform: translate3d(3.35px, -0.26px, 0);
  }
  17.500% {
    transform: translate3d(3.22px, -0.66px, 0);
  }
  20.000% {
    transform: translate3d(3.01px, -1.05px, 0);
  }
  22.500% {
    transform: translate3d(2.72px, -1.41px, 0);
  }
  25.000% {
    transform: translate3d(2.37px, -1.73px, 0);
  }
  27.500% {
    transform: translate3d(1.96px, -2.01px, 0);
  }
  30.000% {
    transform: translate3d(1.5px, -2.25px, 0);
  }
  32.500% {
    transform: translate3d(1px, -2.42px, 0);
  }
  35.000% {
    transform: translate3d(0.48px, -2.54px, 0);
  }
  37.500% {
    transform: translate3d(-0.05px, -2.6px, 0);
  }
  40.000% {
    transform: translate3d(-0.58px, -2.59px, 0);
  }
  42.500% {
    transform: translate3d(-1.1px, -2.51px, 0);
  }
  45.000% {
    transform: translate3d(-1.59px, -2.38px, 0);
  }
  47.500% {
    transform: translate3d(-2.04px, -2.19px, 0);
  }
  50.000% {
    transform: translate3d(-2.44px, -1.94px, 0);
  }
  52.500% {
    transform: translate3d(-2.78px, -1.64px, 0);
  }
  55.000% {
    transform: translate3d(-3.05px, -1.31px, 0);
  }
  57.500% {
    transform: translate3d(-3.25px, -0.94px, 0);
  }
  60.000% {
    transform: translate3d(-3.37px, -0.55px, 0);
  }
  62.500% {
    transform: translate3d(-3.4px, -0.15px, 0);
  }
  65.000% {
    transform: translate3d(-3.35px, 0.26px, 0);
  }
  67.500% {
    transform: translate3d(-3.22px, 0.66px, 0);
  }
  70.000% {
    transform: translate3d(-3.01px, 1.05px, 0);
  }
  72.500% {
    transform: translate3d(-2.72px, 1.41px, 0);
  }
  75.000% {
    transform: translate3d(-2.37px, 1.73px, 0);
  }
  77.500% {
    transform: translate3d(-1.96px, 2.01px, 0);
  }
  80.000% {
    transform: translate3d(-1.5px, 2.25px, 0);
  }
  82.500% {
    transform: translate3d(-1px, 2.42px, 0);
  }
  85.000% {
    transform: translate3d(-0.48px, 2.54px, 0);
  }
  87.500% {
    transform: translate3d(0.05px, 2.6px, 0);
  }
  90.000% {
    transform: translate3d(0.58px, 2.59px, 0);
  }
  92.500% {
    transform: translate3d(1.1px, 2.51px, 0);
  }
  95.000% {
    transform: translate3d(1.59px, 2.38px, 0);
  }
  97.500% {
    transform: translate3d(2.04px, 2.19px, 0);
  }
  to {
    transform: translate3d(2.44px, 1.94px, 0);
  }
}
@keyframes rf-chip-float-f {
  0% {
    transform: translate3d(1.62px, 1.86px, 0);
  }
  2.500% {
    transform: translate3d(1.26px, 2.27px, 0);
  }
  5.000% {
    transform: translate3d(0.87px, 2.61px, 0);
  }
  7.500% {
    transform: translate3d(0.46px, 2.9px, 0);
  }
  10.000% {
    transform: translate3d(0.04px, 3.11px, 0);
  }
  12.500% {
    transform: translate3d(-0.39px, 3.24px, 0);
  }
  15.000% {
    transform: translate3d(-0.8px, 3.3px, 0);
  }
  17.500% {
    transform: translate3d(-1.19px, 3.27px, 0);
  }
  20.000% {
    transform: translate3d(-1.56px, 3.17px, 0);
  }
  22.500% {
    transform: translate3d(-1.88px, 2.98px, 0);
  }
  25.000% {
    transform: translate3d(-2.16px, 2.72px, 0);
  }
  27.500% {
    transform: translate3d(-2.39px, 2.4px, 0);
  }
  30.000% {
    transform: translate3d(-2.56px, 2.01px, 0);
  }
  32.500% {
    transform: translate3d(-2.66px, 1.58px, 0);
  }
  35.000% {
    transform: translate3d(-2.7px, 1.11px, 0);
  }
  37.500% {
    transform: translate3d(-2.67px, 0.61px, 0);
  }
  40.000% {
    transform: translate3d(-2.58px, 0.09px, 0);
  }
  42.500% {
    transform: translate3d(-2.42px, -0.42px, 0);
  }
  45.000% {
    transform: translate3d(-2.21px, -0.93px, 0);
  }
  47.500% {
    transform: translate3d(-1.93px, -1.41px, 0);
  }
  50.000% {
    transform: translate3d(-1.62px, -1.86px, 0);
  }
  52.500% {
    transform: translate3d(-1.26px, -2.27px, 0);
  }
  55.000% {
    transform: translate3d(-0.87px, -2.61px, 0);
  }
  57.500% {
    transform: translate3d(-0.46px, -2.9px, 0);
  }
  60.000% {
    transform: translate3d(-0.04px, -3.11px, 0);
  }
  62.500% {
    transform: translate3d(0.39px, -3.24px, 0);
  }
  65.000% {
    transform: translate3d(0.8px, -3.3px, 0);
  }
  67.500% {
    transform: translate3d(1.19px, -3.27px, 0);
  }
  70.000% {
    transform: translate3d(1.56px, -3.17px, 0);
  }
  72.500% {
    transform: translate3d(1.88px, -2.98px, 0);
  }
  75.000% {
    transform: translate3d(2.16px, -2.72px, 0);
  }
  77.500% {
    transform: translate3d(2.39px, -2.4px, 0);
  }
  80.000% {
    transform: translate3d(2.56px, -2.01px, 0);
  }
  82.500% {
    transform: translate3d(2.66px, -1.58px, 0);
  }
  85.000% {
    transform: translate3d(2.7px, -1.11px, 0);
  }
  87.500% {
    transform: translate3d(2.67px, -0.61px, 0);
  }
  90.000% {
    transform: translate3d(2.58px, -0.09px, 0);
  }
  92.500% {
    transform: translate3d(2.42px, 0.42px, 0);
  }
  95.000% {
    transform: translate3d(2.21px, 0.93px, 0);
  }
  97.500% {
    transform: translate3d(1.93px, 1.41px, 0);
  }
  to {
    transform: translate3d(1.62px, 1.86px, 0);
  }
}
.chip-wiggle {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .chip-wiggle {
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}
.rf-auth-right {
  background: var(--white);
  box-sizing: border-box;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  width: 50%;
  min-height: 100vh;
  padding: 48px 15% 48px 40px;
  display: flex;
}
.rf-auth-panel {
  flex-direction: column;
  gap: 24px;
  display: flex;
}
.rf-auth-panel-title {
  color: var(--ink);
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 900;
}
.rf-auth-panel-sub {
  color: var(--stone);
  margin: 0;
  font-size: 14px;
}
.rf-auth-link {
  color: var(--red-deep);
  cursor: pointer;
  text-underline-offset: 2px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
}
.rf-auth-form {
  flex-direction: column;
  gap: 10px;
  display: flex;
}
.rf-auth-row {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}
.rf-auth-input {
  background: var(--white);
  border: 1px solid var(--line);
  width: 100%;
  color: var(--ink);
  box-sizing: border-box;
  border-radius: 10px;
  outline: none;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.15s;
  display: block;
}
.rf-auth-input:focus {
  border-color: var(--red-deep);
  box-shadow: 0 0 0 3px #bb00161a;
}
.rf-pw-wrap .rf-auth-input {
  flex: 1;
  padding-right: 2.5rem;
}
.rf-auth-btn {
  background: linear-gradient(135deg, var(--red-deep), var(--red-bright));
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 4px;
  padding: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  transition: opacity 0.15s;
  display: flex;
}
.rf-auth-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.rf-pw-wrap {
  align-items: center;
  display: flex;
  position: relative;
}
.rf-pw-eye {
  cursor: pointer;
  color: #888;
  background: 0 0;
  border: none;
  align-items: center;
  padding: 0;
  line-height: 1;
  display: flex;
  position: absolute;
  right: 0.75rem;
}
.rf-auth-err {
  color: #b91c1c;
  background: #fff1f1;
  border: 1px solid #fecaca;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13px;
  display: flex;
}
.rf-auth-ok {
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13px;
  display: flex;
  text-wrap: balance;
}
/* Toggle plus wrapped text. The toggle is the shared .rf-switch, so it
   matches every other switch in the app; flex-start keeps it level with the
   first line rather than centred against the whole paragraph. */
.retailfix-tos-label {
  color: #a8a29e;
  text-wrap: balance;
  font-size: 14px;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.retailfix-tos-label .rf-switch {
  margin-top: 1px;
}
.rf-auth-center {
  text-align: center;
}
.rf-auth-links-row {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 16px;
  display: flex;
  text-align: center;
}
.rf-auth-sep {
  color: var(--line);
  font-size: 14px;
}
.rf-auth-reset-wrap {
  background: var(--paper);
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 24px;
  display: flex;
}
.rf-auth-reset-card {
  width: 100%;
  max-width: 420px;
}
.rf-auth-reset-hd {
  text-align: center;
  margin-bottom: 32px;
}
.rf-auth-reset-title {
  color: var(--red-bright);
  font-size: clamp(3rem, 3.5vw, 4rem);
  font-weight: 900;
  line-height: 0.5;
  font-family: var(--font-display);
  text-wrap: balance;
  margin: 0 0 8px;
}
.rf-auth-reset-sub {
  color: var(--stone);
  margin: 0;
  font-size: 14px;
}
.rf-auth-reset-box {
  background: var(--white);
  border: 1px solid var(--cream);
  border-radius: 20px;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  display: flex;
  box-shadow: 0 4px 24px #00000014;
}

@media (width<=860px) {
  .rf-auth-wrap {
    flex-direction: column;
  }
  .rf-auth-left {
    min-height: auto;
    padding: 100px 24px 25px;
  }
  .rf-auth-right {
    border-left: none;
    border-top: 1px solid var(--cream);
    width: 100%;
    min-height: auto;
    padding: 32px 24px;
  }
}
main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}
.app-section {
  border-bottom: 1px solid var(--cream);
  align-items: center;
  gap: 56px;
  padding: 72px 0;
  display: flex;
}
.app-section.reverse {
  flex-direction: row-reverse;
}
.app-visual {
  aspect-ratio: 4/3;
  border-radius: 24px;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.mock-card {
  z-index: 2;
  background: #fff;
  border-radius: 18px;
  width: 78%;
  padding: 20px;
  position: relative;
  box-shadow: 0 24px 48px #00000038;
}
.mock-row {
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  display: flex;
}
.mock-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}
.mock-line {
  background: #ece5e2;
  border-radius: 5px;
  height: 9px;
}
.mock-line.short {
  width: 55%;
}
.mock-line.full {
  width: 100%;
}
.mock-img {
  border-radius: 12px;
  width: 100%;
  height: 96px;
  margin-bottom: 14px;
}
.mock-icon-row {
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  display: flex;
}
.mock-icon-row svg {
  width: 18px;
  height: 18px;
}
.float-chip {
  color: var(--ink);
  z-index: 3;
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-sans);
  background: #fff;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  display: flex;
  position: absolute;
  box-shadow: 0 10px 24px #0000002e;
}
.stars {
  gap: 3px;
  display: flex;
}
.stars svg {
  fill: #f9a316;
  width: 20px;
  height: 20px;
}
.app-text {
  flex: 1;
  min-width: 0;
}
/* Studio's title sits on two lines once the page is full width. */
@media (min-width: 1080px) {
  main > .app-section:first-child .app-text {
    flex: 0 0 540px;
  }
}
.app-eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-deep);
  background: var(--cream);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 5px 14px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
}
.app-eyebrow svg {
  flex-shrink: 0;
}
.app-title {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  padding-top: 18px;
  font-size: 84px;
  font-weight: 700;
  line-height: 0.5;
  overflow-wrap: break-word;
}
.app-desc {
  color: var(--stone);
  max-width: 460px;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.65;
}
.app-features {
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
  list-style: none;
  display: flex;
}
.app-features li {
  color: var(--ink);
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  display: flex;
}
.app-features li .check {
  background: var(--cream);
  width: 20px;
  height: 20px;
  color: var(--red-deep);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 900;
  display: flex;
}
.app-cta {
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-sans);
  cursor: pointer;
  background: linear-gradient(90deg, var(--red-deep), var(--red-bright));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 28px;
  text-decoration: none;
  display: inline-block;
}
.pricing-section {
  background: var(--paper);
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 72px 0;
  position: relative;
  left: 50%;
  right: 50%;
}
.pricing-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}
.pricing-heading {
  font-family: var(--font-display);
  text-align: center;
  margin-bottom: 40px;
  padding-top: 14px;
  font-size: 65px;
  font-weight: 700;
  line-height: 0.55;
}
.pricing-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
  display: grid;
}
.price-card {
  border: 1px solid var(--cream);
  background: #fff;
  border-radius: 20px;
  padding: 28px 22px;
  box-shadow: 0 6px 20px #bb00160f;
}
.price-card-icon {
  background: var(--cream);
  width: 44px;
  height: 44px;
  color: var(--red-deep);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}
.price-card h3 {
  margin-bottom: 8px;
  font-size: 15.5px;
  font-weight: 800;
}
.price-card-amount {
  font-family: var(--font-mono);
  color: var(--red-deep);
  margin-bottom: 14px;
  font-size: 26px;
  font-weight: 800;
}
.price-card-amount span {
  color: var(--stone);
  font-size: 13px;
  font-weight: 600;
}
/* Geo App's price-card — "Free with Content Studio" is a phrase, not a
 * number, so it needs a much smaller size than the default 26px numeric
 * price to actually fit the card instead of wrapping/overflowing. */
.price-card-amount-free {
  font-size: 15px;
  line-height: 1.3;
}
/* Nearby's ** note, under the price cards once the founders card is gone. */
.price-grid-note {
  margin-top: 16px;
  color: var(--stone);
  font-size: 12px;
  text-align: center;
}
/* The founder price under Studio Pro's monthly one. */
.price-card-alt {
  margin: -8px 0 14px;
  color: var(--red-deep);
  font-size: 12.5px;
  font-weight: 700;
}
.price-card ul {
  flex-direction: column;
  gap: 6px;
  list-style: none;
  display: flex;
}
.price-card li {
  color: var(--stone);
  padding-left: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  position: relative;
}
.price-card li:before {
  content: "✓";
  color: var(--red-deep);
  font-size: 11px;
  font-weight: 700;
  position: absolute;
  left: 0;
}
.bundle-card {
  background: linear-gradient(
    110deg,
    var(--red-deep) 0%,
    var(--red-bright) 55%,
    var(--orange) 100%
  );
  border-radius: 24px;
  justify-content: space-between;
  align-items: center;
  gap: 36px;
  padding: 40px 44px;
  display: flex;
}
.bundle-card-eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: #fff3;
  border-radius: 999px;
  margin-bottom: 14px;
  padding: 5px 14px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-block;
}
.bundle-card-text {
  flex: 1;
}
.bundle-card h3 {
  font-family: var(--font-display);
  color: #fff;
  margin-bottom: 12px;
  padding-top: 12px;
  font-size: 40px;
  font-weight: 700;
  line-height: 0.55;
}
.bundle-card p {
  color: #ffffffeb;
  max-width: 400px;
  font-size: 14.5px;
  line-height: 1.55;
}
.bundle-card-dev-note {
  color: #ffffffb3 !important;
  margin-top: 8px;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
.bundle-card-price {
  text-align: center;
  flex-shrink: 0;
}
.bundle-card-amount {
  font-family: var(--font-mono);
  color: #fff;
  font-size: 40px;
  font-weight: 800;
}
.bundle-card-amount span {
  color: #fffc;
  font-size: 15px;
  font-weight: 600;
}
.bundle-card-save {
  font-family: var(--font-mono);
  color: #ffffffd9;
  margin-bottom: 16px;
  font-size: 12.5px;
}
/* Sits inside flagship-right, always a narrow column, so it gets the
 * stacked treatment unconditionally rather than at a breakpoint.
 * background:none lets .flagship's gradient show through from behind. */
@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.flagship-bundle-card {
  flex-direction: column;
  text-align: center;
  padding: 32px 28px;
  background: none;
  border: 2px solid transparent;
  position: relative;
}
.flagship-bundle-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--border-angle),
    #cb3242 0%,
    #cb3242 90%,
    #f9a316 95%,
    #cb3242 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rf-bundle-border-spin 9s linear infinite;
  pointer-events: none;
}
@keyframes rf-bundle-border-spin {
  to {
    --border-angle: 360deg;
  }
}
.flagship-bundle-card p {
  max-width: none;
}
.flagship-bundle-card h3 {
  font-size: 28px;
}
.flagship-bundle-card .bundle-card-amount {
  font-size: 34px;
}
/* Under the founder offer's button: the setup call and consulting. */
.rf-founder-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.rf-founder-links:empty {
  display: none;
}
.rf-founder-link {
  padding: 2px 4px;
  border: none;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rf-founder-link:hover {
  color: #ffffffd9;
}

@media (width<=860px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bundle-card {
    text-align: center;
    flex-direction: column;
  }
  .bundle-card p {
    max-width: none;
  }
}
.geo-strip {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  margin: 0px;
  padding: 60px 0;
  min-height: 535px;
  overflow: hidden;
  display: flex;
}
.geo-text {
}
.geo-text h3 {
  font-family: var(--font-display);
  margin-bottom: 10px;
  padding-top: 8px;
  font-size: 65px;
  font-weight: 700;
  line-height: 0.55;
}
.geo-text p {
  color: var(--stone);
  max-width: 520px;
  font-size: 15.5px;
}
.geo-link {
  border: 1.5px solid var(--line);
  color: var(--red-deep);
  white-space: nowrap;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

@media (width<=760px) {
  .app-section {
    flex-direction: column;
    gap: 28px;
    padding: 48px 0;
  }
  .app-section.reverse {
    flex-direction: column;
  }
  .app-visual {
    flex: none;
    width: 100%;
  }
  .geo-strip {
    text-align: center;
    flex-direction: column;
  }
  #rf-auth-scroll-target {
    scroll-margin-top: 80px;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}
.hero-banner {
  text-align: center;
  /* The sunrise, same light as the Studio's header. sunrise.js moves it
     from here; this resting position is what shows if the script never
     runs. */
  background-color: #bb0016;
  background-image: radial-gradient(
    150% 150% at 30% 118%,
    #fea121 0%,
    #fea121 15%,
    #e1272b 47%,
    #bb0016 80%
  );
  border-bottom: 1px solid #bb001633;
  padding: 121px 32px 80px;
  position: relative;
  overflow: hidden;
}
.hero-banner svg.waves {
  opacity: 0.25;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.flow-line {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000px;
  animation: 10s ease-in-out infinite alternate dash;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
.hero-inner {
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.hero-inner h1 {
  margin-bottom: 16px;
  color: #fff !important;
  font-family: Dongle, sans-serif !important;
  font-size: 65px !important;
  line-height: 0.5 !important;
}
.hero-inner p.sub {
  color: #ffffffd9;
  max-width: 512px;
  margin: 0 auto 16px;
  font-size: 14px;
  line-height: 1.5;
}
.pill-nav {
  z-index: 1;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  display: flex;
  position: relative;
}
.pill-nav button {
  font-family: var(--font-sans);
  color: #fff;
  cursor: pointer;
  background: #ffffff26;
  border: none;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
}
.pill-nav button:hover {
  background: #ffffff40;
}
.rf-auth-guides {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}
.pill-nav button.active {
  color: var(--red-deep);
  background: #fff;
  box-shadow: 0 1px 3px #0000001a;
}
.section-header {
  z-index: 2;
  max-width: 1180px;
  margin: -34px auto 0;
  padding: 0 32px;
  position: relative;
}
.section-header-inner {
  background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
  border-radius: 20px 20px 0 0;
  align-items: center;
  gap: 10px;
  padding: 20px 28px;
  display: flex;
  box-shadow: 0 10px 30px #bb001614;
}
.section-header-inner .icon {
  width: 22px;
  height: 22px;
  color: var(--red-deep);
}
.section-header-inner span {
  color: var(--red-deep);
  font-size: 15.5px;
  font-weight: 800;
}
main.content-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px 90px;
}
.content-panel {
  background: #fff;
  border-radius: 0 0 24px 24px;
  margin-bottom: 40px;
  padding: 40px 36px 36px;
  box-shadow: 0 10px 30px #bb00160f;
}
.row {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
  display: grid;
}
.tool-card {
  text-align: center;
  background: var(--paper);
  border: 1.5px dashed #f0d2cb;
  border-radius: 20px;
  padding: 28px 24px;
  position: relative;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Press-in effect on actual click/press, not hover — hovering no longer
   scales the button; :active fires only while the mouse button/touch is
   actually down, which is the correct trigger for a "pressing in" effect. */
.rf-press {
  transition: transform 0.1s ease;
}
.rf-press:active {
  transform: scale(0.97);
}

/* Same animated conic-gradient border as .flagship-bundle-card, scaled to a
   button. Its own class so it applies only to the Unlock button, not the
   marketing page's Get started free button, which shares .app-cta. */
.rf-moving-border {
  position: relative;
}
.rf-moving-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--border-angle),
    #cb3242 0%,
    #cb3242 90%,
    #f9a316 95%,
    #cb3242 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rf-bundle-border-spin 9s linear infinite;
  pointer-events: none;
}
.tool-card.unlocked {
  border-style: solid;
  border-color: var(--cream);
  background: #fff;
  box-shadow: 0 6px 20px #bb00160f;
}
.tool-card.locked {
  cursor: pointer;
}
.tool-card.locked .badge-circle {
  filter: grayscale(70%);
  opacity: 0.55;
}
.tool-card.locked h3,
.tool-card.locked p.desc {
  opacity: 0.5;
}
/* Placed after .unlocked/.locked (same specificity — two classes each) so
   this wins the tie and actually shows on every card state, not just the
   locked ones. */
.tool-card:hover {
  box-shadow: 0 10px 28px #bb00161a;
  border-color: #bb001633;
}
.badge-circle {
  background: var(--cream);
  width: 68px;
  height: 68px;
  color: var(--red-deep);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  margin: 0 auto 16px;
  font-size: 28px;
  display: flex;
}
/* Held: paid for at the founding rate, not shipped yet. Between locked and
   unlocked — no fade and no lock, but nothing to click into either. */
.tool-card.held {
  border-style: solid;
  border-color: var(--cream);
  background: #fff;
  box-shadow: 0 6px 20px #bb00160f;
  cursor: default;
}
.held-chip {
  background: var(--cream);
  border: 1px solid #f0d2cb;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  color: var(--red-deep);
  display: flex;
  position: absolute;
  top: 16px;
  right: 16px;
}
.held-chip svg {
  width: 16px;
  height: 16px;
}
/* Reads as a receipt, not a call to action — nothing here is clickable. */
.held-note {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  padding: 10px 18px;
  border-radius: 16px;
  background: var(--cream);
}
.held-note-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--red-deep);
  font-size: 13px;
  font-weight: 800;
}
.held-note-title svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.held-note-sub {
  color: var(--stone);
  font-size: 11.5px;
  font-weight: 700;
}
.held-thanks {
  margin-top: 10px;
  color: var(--stone);
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
}
/* On the flagship it sits on the red gradient rather than a white card. */
.flagship-bundle-card .held-thanks {
  color: #ffffffd9;
}

.lock-chip {
  background: #fff;
  border: 1px solid #f0d2cb;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  font-size: 16px;
  display: flex;
  position: absolute;
  top: 16px;
  right: 16px;
}
.tool-card h3 {
  color: var(--ink);
  font-family: var(--font-display);
  margin-bottom: 8px;
  font-size: 36px;
  font-weight: 800;
}
.tool-card p.desc {
  color: var(--stone);
  min-height: 40px;
  margin-bottom: 20px;
  font-size: 13.5px;
  line-height: 1.5;
}
.status-pill {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  margin-bottom: 14px;
  padding: 5px 12px;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-block;
}
.flagship {
  /* The sunrise, same light as the header — one warm source low and to the
     left rather than a wash running corner to corner. */
  background-color: var(--red-deep);
  background-image: radial-gradient(
    150% 150% at 30% 118%,
    var(--orange) 0%,
    var(--orange) 15%,
    var(--red-bright) 47%,
    var(--red-deep) 80%
  );
  cursor: pointer;
  color: #fff;
  border-radius: 24px;
  padding: 48px 44px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
/* Geo owned: the card as a whole stops being a target, so the padding and
   the gaps between the inner boxes don't show a pointer. The pointer comes
   back only on the half that still sells something. */
.flagship-geo-owned {
  cursor: default;
}
.flagship-geo-owned .flagship-right:not(.flagship-right-complete),
.flagship-geo-owned .flagship-click-zone-right:not(.flagship-click-zone-inert) {
  cursor: pointer;
}
/* Hovering either flagship-left or flagship-right lifts the whole box
   together — this is one unified card visually, not two — since :hover on
   a child element also matches its ancestors, no split-side logic needed. */
.flagship:hover {
  box-shadow: 0 14px 34px #bb001640;
}
/* Click zones covering all of .flagship including its padding, which the
 * inner content boxes don't reach. z-index:0 keeps them behind the real
 * content, so they only catch clicks falling through empty space. */
.flagship-click-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
}
.flagship-click-zone-left {
  left: 0;
  right: 50%;
}
.flagship-click-zone-right {
  left: 50%;
  right: 0;
}
.flagship svg.waves {
  opacity: 0.3;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.flagship-inner {
  z-index: 1;
  justify-content: center;
  align-items: center;
  gap: 56px;
  display: flex;
  position: relative;
}
.flagship-left {
  max-width: 600px;
}
.flagship-badge {
  background: #ffffff2e;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: 20px;
  font-size: 36px;
  display: flex;
}
.eyebrow-tag {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #fff3;
  border-radius: 999px;
  margin-bottom: 16px;
  padding: 5px 14px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-block;
}
.flagship h2 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 20px;
  padding-top: 14px;
  font-size: 52px;
  font-weight: 700;
  line-height: 0.5;
}
.flagship p.desc {
  color: #ffffffeb;
  max-width: 500px;
  margin-bottom: 26px;
  font-size: 15px;
  line-height: 1.6;
}
.flagship-right {
  text-align: center;
  flex-shrink: 0;
  max-width: 375px;
}
.flagship-price {
  font-family: var(--font-mono);
  color: #ffffffbf;
  margin-top: 14px;
  font-size: 13px;
}
.flagship-price-list {
  min-width: 220px;
}
.fp-row {
  color: #ffffffd9;
  border-bottom: 1px solid #ffffff26;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
  font-size: 13.5px;
  display: flex;
}
.fp-row span:last-child {
  font-family: var(--font-mono);
  color: #fff;
  font-weight: 700;
}
.fp-bundle {
  color: #fff;
  border-top: 1.5px solid #fff6;
  border-bottom: none;
  margin-top: 4px;
  padding-top: 12px;
  font-size: 15px;
  font-weight: 800;
}
.fp-bundle span:last-child {
  font-size: 17px;
}
.fp-save {
  text-align: right;
  font-family: var(--font-mono);
  color: #ffffffbf;
  margin-top: 2px;
  font-size: 11.5px;
}
/* Two uneven gusts per 13s cycle rather than a steady tick, so the loop is
 * hard to spot. transform-origin sits at the tag's point. Rotation only;
 * the shadow animation lives on .discount-sticker-anchor. */

.bundle-hint-callout {
  background: var(--cream);
  color: var(--ink);
  border: 1.5px solid #f0d2cb;
  border-radius: 14px;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.45;
  display: flex;
}
.bundle-hint-icon {
  flex-shrink: 0;
  font-size: 18px;
}
.bundle-hint-callout strong {
  color: var(--red-deep);
  font-size: 15px;
}
.bundle-callout {
  background: linear-gradient(
    110deg,
    var(--red-deep) 0%,
    var(--red-bright) 55%,
    var(--orange) 100%
  );
  color: #fff;
  border-radius: 14px;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
  padding: 16px;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  text-align: right;
}
.bundle-callout span {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffffd9;
  font-size: 11px;
  font-weight: 700;
}
.bundle-callout strong {
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}
.running-total {
  text-align: right;
  color: var(--ink);
  margin-bottom: 20px;
  font-size: 13.5px;
  font-weight: 700;
}
.billing-grid {
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
  display: grid;
}
.panel {
  border: 1px solid var(--cream);
  background: #fff;
  border-radius: 20px;
  margin-bottom: 20px;
  padding: 26px;
  box-shadow: 0 6px 20px #bb00160d;
}
/* Spans both settings-grid columns on desktop. order:5 on mobile so it
 * always lands after the Billing-tab reorder rule below, which shares this
 * class, rather than relying on DOM order. */
.team-members-panel {
  grid-column: 1 / -1;
}
@media (width<=820px) {
  .team-members-panel {
    order: 5;
  }
}
/* Team Members — 3 across on desktop, 1 per row on mobile. Styled to match
 * Content Studio's Recent Scrapes card using Suite's own tokens. */
.tm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 4px;
}
.tm-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 6px 20px #bb00160d;
  transition:
    box-shadow 0.15s,
    border-color 0.15s;
  display: flex;
  flex-direction: column;
  position: relative;
}
.tm-card:hover {
  box-shadow: 0 10px 26px #bb001614;
  border-color: #f0d2cb;
}
.tm-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  /* Reserves space for the status pill, which now sits position:
     absolute in the card's own top-right corner rather than inline in
     this row — without this, a longer name could run underneath it. */
  padding-right: 90px;
}
.tm-card-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--cream);
  color: var(--stone);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tm-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.tm-card-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
}
.tm-card-email {
  color: var(--stone);
  font-size: 12.5px;
  margin-top: 4px;
}
/* In the card's upper-right corner; .tm-card is position: relative for
 * this. Pairs with .conn-status-connected/.conn-status-disconnected for
 * the colour only. */
.tm-status-pill {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  border-radius: 999px;
  padding: 3px 9px;
  line-height: 1.4;
  white-space: nowrap;
}
.tm-card-access {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.tm-access-chip {
  display: flex;
  align-items: center;
  /* Label leads, switch trails. */
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--stone);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px 5px 12px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.tm-access-chip:hover {
  border-color: var(--red-deep);
}
/* An agency's team member: the client businesses they work on. */
.tm-card-clients {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.tm-card-clients .tm-card-access {
  margin-top: 8px;
}
.tm-clients-h {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stone);
  text-wrap: balance;
}
.tm-clients-none {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #9a5b00;
  text-wrap: balance;
}
.tm-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
}
.tm-action-btn {
  flex: 1;
  font-size: 12.5px;
  font-weight: 800;
  font-family: var(--font-sans);
  color: var(--red-deep);
  background: #fff;
  border: 1.5px solid #f0d2cb;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.tm-action-btn:hover {
  background: var(--cream);
}
.tm-action-btn-enable {
  background: linear-gradient(90deg, var(--red-deep), var(--red-bright));
  border-color: var(--red-deep);
  color: var(--white);
}
.tm-action-btn-enable:hover {
  background: linear-gradient(90deg, var(--red-deep), var(--red-bright));
  opacity: 0.9;
}
.tm-password-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.tm-password-row .rf-pw-wrap {
  flex: 1;
  min-width: 0;
}
.tm-invite-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 6px 20px #bb00160d;
  margin-top: 20px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tm-invite-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tm-invite-fields input:nth-child(3) {
  grid-column: 1 / -1;
}
.tm-invite-access-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--stone);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tm-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* The h3's default margin-bottom is zeroed inline so the slots-used text
     can share its row. This replaces it, landing the subtitle at the same
     effective 8px gap as the Connected Accounts section. */
  margin-bottom: 16px;
}
.tm-slots-used {
  font-size: 13px;
  color: var(--red-deep);
  font-weight: 800;
  white-space: nowrap;
}
.tm-empty {
  color: var(--stone);
  font-size: 13px;
  padding: 4px 0 8px;
}
@media (width<=820px) {
  .tm-grid {
    grid-template-columns: 1fr;
  }
  .tm-invite-fields {
    grid-template-columns: 1fr;
  }
  .tm-invite-fields input:nth-child(3) {
    grid-column: auto;
  }
}
.panel h3 {
  color: var(--red-deep);
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 800;
}
.plan-row {
  border-bottom: 1px solid var(--cream);
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  font-size: 14px;
  display: flex;
}
.plan-row:last-child {
  border-bottom: none;
}
.plan-row .name {
  position: relative;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.plan-row .meta {
  color: var(--stone);
  font-size: 11.5px;
}
.platform-icon {
  flex-shrink: 0;
}
.platform-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.connected-accounts-sub {
  color: var(--stone);
  font-size: 13px;
  line-height: 1.5;
  margin: -8px 0 16px;
}
.account-user {
  border-bottom: 1px solid var(--cream);
  padding: 4px 0 16px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.account-avatar-wrap {
  flex-shrink: 0;
  /* Anchors the camera button, which is absolutely positioned. */
  position: relative;
}
.account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
  color: var(--stone);
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}
.account-avatar:hover {
  opacity: 0.85;
}
.account-avatar:disabled {
  cursor: default;
  opacity: 0.6;
}
.account-avatar img {
  width: 100%;
  height: 100%;
  /* Crops from the bottom, keeps the top of the image visible — matters
     most for a face-centric photo, which is usually near the top. */
  object-fit: cover;
  object-position: top center;
}
.account-user-text {
  min-width: 0;
}
.account-avatar-error {
  color: var(--red-deep);
  font-size: 12px;
  margin-top: 4px;
}
.account-user-name {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}
.account-user-email {
  color: #5c3f3d;
  font-size: 13px;
  margin-top: 3px;
}
.account-logout {
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  transition: color 0.15s;
}
.account-logout:hover {
  color: var(--red-deep);
}
.account-logout svg {
  color: var(--red-deep);
  flex-shrink: 0;
}
/* Same row layout as .account-logout — kept as its own class rather than
 * sharing .account-logout so the two actions can be styled independently
 * (this one isn't destructive, so no red hover state). */
.account-reset-password {
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  transition: color 0.15s;
}
.account-reset-password:hover {
  color: var(--stone);
}
.account-reset-password svg {
  color: var(--ink);
  flex-shrink: 0;
}
.account-panel {
  position: relative;
  padding-bottom: 44px;
}
.account-delete-row {
  position: absolute;
  bottom: 16px;
  right: 20px;
}
.account-delete-link {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--stone);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  opacity: 0.8;
}
.account-delete-link:hover {
  opacity: 1;
  color: var(--red-deep);
  border-color: var(--red-deep);
}
.field {
  margin-bottom: 14px;
}
.field label {
  color: var(--stone);
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 700;
  display: block;
}
.field input {
  border: 1.5px solid var(--cream);
  background: var(--paper);
  width: 100%;
  font-size: 14px;
  font-family: var(--font-sans);
  border-radius: 12px;
  padding: 11px 14px;
}
.field-row {
  gap: 10px;
  display: flex;
}
table.invoices {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
}
table.invoices th {
  text-align: left;
  color: var(--stone);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding-bottom: 10px;
}
table.invoices td {
  border-top: 1px solid var(--cream);
  padding: 11px 0;
}
.paid-pill {
  color: #15803d;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  padding: 3px 10px;
}
/* Team Member rows have no button beside the pill, so the row needs its own
   breathing room against the next platform. */
.plan-row.rf-conn-row-tm {
  padding-bottom: 20px;
}

.conn-status-pill {
  position: absolute;
  bottom: -15px;
  left: 15px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 7.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  border-radius: 999px;
  padding: 1.5px 5px;
  line-height: 1.4;
  white-space: nowrap;
}
.conn-status-connected {
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
}
.conn-status-disconnected {
  color: #b91c1c;
  background: #fff1f1;
  border: 1px solid #fecaca;
}
/* A platform that isn't open yet. */
.conn-status-soon {
  color: #6b5a58;
  background: #f1ecea;
  border: 1px solid #e2d8d5;
}
.conn-status-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  flex-shrink: 0;
  background: currentColor;
}
.conn-status-text {
  display: inline-block;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.danger-zone {
  background: var(--paper);
  border: 1.5px dashed #f0d2cb;
  border-radius: 18px;
  padding: 22px;
}
.danger-zone h4 {
  color: var(--red-deep);
  margin-bottom: 6px;
  font-size: 14.5px;
  font-weight: 800;
}
.danger-zone p {
  color: var(--stone);
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.55;
}

@media (width<=820px) {
  .row,
  .billing-grid {
    grid-template-columns: 1fr;
  }
  /* minmax(0, …) so a wide line inside a panel can't push the column past
     the screen's right edge on a narrow phone. */
  .billing-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  main.content-main {
    padding: 0 15px 90px;
  }
  .hero-banner {
    padding-left: 15px;
    padding-right: 15px;
  }
  .section-header {
    padding: 0 15px;
  }
  .content-panel {
    padding: 0px;
    box-shadow: none;
  }
  .section-header-inner {
    border-radius: 20px;
    margin-bottom: 15px;
  }
  .flagship {
    padding: 32px 20px;
  }
  .flagship-inner {
    flex-direction: column;
    gap: 32px;
  }
  .flagship-right {
    width: 100%;
    max-width: 500px;
  }
  .flagship-price-list {
    min-width: 0;
    width: 100%;
  }
  .pill-btn {
    white-space: nowrap;
  }
  .platform-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  /* Swaps Invoice history and Cancel subscription on mobile. Flattens the
     left-column wrapper so its children reorder individually against
     Invoice history, billing-grid's other direct child. */
  .billing-grid > div:first-child {
    display: contents;
  }
  .billing-grid > .panel {
    order: 3;
  }
  .danger-zone {
    order: 4;
  }
}
/* Button stays next to content down to a much narrower width than the
 * general 820px tablet breakpoint above — only actual phone-width
 * screens stack the Connect/Disconnect (or "Add tools") button under
 * the row instead of beside it. */
@media (width<=350px) {
  .plan-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .plan-row > div:last-child {
    width: 100%;
  }
}
.geo-visual-left {
  left: 0;
}
.geo-visual-right {
  right: 0;
}
.geo-visual-frame {
  position: absolute;
  top: 0;
  width: 265px;
  max-width: 265px;
  z-index: 0;
  transform: translate3d(0, 0, 0);
}
.geo-visual-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .geo-visual-frame.geo-orbit-active .geo-visual-img {
    animation: geo-visual-wiggle 8s ease-in-out infinite;
  }
}
@keyframes geo-visual-wiggle {
  0%,
  92.5%,
  100% {
    transform: rotate(0deg);
  }
  93.75% {
    transform: rotate(-4deg);
  }
  95.625% {
    transform: rotate(4deg);
  }
  97.5% {
    transform: rotate(-3deg);
  }
  98.75% {
    transform: rotate(3deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .geo-visual-up {
    transition: transform 6.71s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .geo-visual-down {
    transition: transform 8.29s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .geo-visual-up.geo-pre-reveal {
    transform: translate3d(0, 430px, 0);
  }
  .geo-visual-down.geo-pre-reveal {
    transform: translate3d(0, -531px, 0);
  }
}
.geo-card {
  position: relative;
  z-index: 2;
  background: var(--paper);
  padding: 32px 40px;
  border-radius: 24px;
  box-shadow: 0 12px 40px #0000001f;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

@media (width<=764px) {
  .geo-strip {
    /* A phone screen and the card between them need more than one viewport
       — at 100vh the frames were cut off top and bottom. */
    height: auto;
    min-height: 168vh;
    padding: 0;
    gap: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  .geo-card {
    max-width: 86vw;
    padding: 24px 28px;
  }
  .geo-visual-left {
    top: auto;
    bottom: 4vh;
    left: calc(50% - 141.5px);
    right: auto;
  }
  .geo-visual-right {
    top: 4vh;
    bottom: auto;
    left: calc(50% - 141.5px);
    right: auto;
  }
  @media (prefers-reduced-motion: no-preference) {
    .geo-visual-up.geo-pre-reveal {
      transform: translate3d(-265px, 0, 0);
    }
    .geo-visual-down.geo-pre-reveal {
      transform: translate3d(265px, 0, 0);
    }
  }
}
.price-card h3 {
  font-size: 24px;
}

/**
 * Account-restored banner, shown when logging back in cancels a pending
 * account deletion. Dismissible, not on a timer.
 *
 * Fixed at the top of the viewport above the topnav, so it never needs the
 * dashboard's layout to shift around it.
 */
.rf-restored-banner {
  background: #1c1917;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
}
.rf-restored-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.rf-restored-banner-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}

/* Settings right column: Account above Email Notifications, mirroring the
   left column's wrapper. Connected Accounts stretches to match via flex:1.
   Desktop only — below 820px that wrapper becomes display:contents. */
@media (width>820px) {
  .settings-grid > div:first-child {
    display: flex;
    flex-direction: column;
  }
  .settings-grid > div:first-child > .panel {
    flex: 1;
    margin-bottom: 0;
  }
}
.settings-col-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* The flex gap replaces .panel's own bottom margin here. */
.settings-col-right > .panel {
  margin-bottom: 0;
}

/* Shared pill toggle, styled on the checkbox itself so it stays focusable.
   Used by Email Notifications rows and TM product-access chips.
   .rf-switch-sm is the compact variant for a chip. */
/* Both toggles on one row. Wraps rather than squashing if the panel gets
   narrow, so the labels never collide with their switches. */
.email-prefs-row {
  display: flex;
  align-items: center;
  gap: 12px 28px;
  flex-wrap: wrap;
  padding: 4px 0 0;
}
/* Notifications: a column for this phone or browser and one for email,
   All notifications on top. A dash where an alert isn't sent that way. */
.rf-nt {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
}
.rf-nt th {
  width: 64px;
  padding: 0 0 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: var(--stone);
}
.rf-nt th:first-child {
  width: auto;
}
.rf-nt td {
  padding: 11px 0;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.rf-nt .rf-nt-all td {
  padding: 12px 0;
  border-top: 0;
}
.rf-nt td.rf-nt-c {
  text-align: center;
}
.rf-nt .rf-switch {
  vertical-align: middle;
}
.rf-nt-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.rf-nt-all .rf-nt-name {
  font-size: 15px;
  font-weight: 800;
}
.rf-nt-desc {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--stone);
}
.rf-nt .rf-nt-msg td {
  padding: 0 0 10px;
  border-top: 0;
}
.rf-nt-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--stone);
}
.rf-nt-none {
  font-size: 14px;
  color: #c4bbb6;
}
.rf-switch:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Fingerprint or face sign-in, under Reset Password: the name on one line,
   then whether it's on here and the link to change that. */
.rf-bio-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 14px;
  color: var(--ink);
}
.rf-bio-row > svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.rf-bio-state {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rf-bio-name {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.rf-bio-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.rf-bio-sub {
  font-weight: 600;
  color: #15803d;
}
.rf-bio-dot {
  color: var(--stone);
}
.rf-bio-btn {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--red-deep);
  cursor: pointer;
}
.rf-bio-btn:hover {
  text-decoration: underline;
}
.rf-bio-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Sign-in: "OR", then fingerprint or face. */
.rf-auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #a8a29e;
}
.rf-auth-or::before,
.rf-auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.rf-auth-btn.rf-auth-btn-plain {
  gap: 8px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.rf-auth-btn-plain svg {
  color: var(--red-deep);
}

.email-prefs-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.rf-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition:
    background 0.18s ease,
    opacity 0.18s ease;
}
.rf-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #00000040;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rf-switch:checked {
  background: var(--red-deep);
}
.rf-switch:checked::after {
  transform: translateX(18px);
}
.rf-switch:focus-visible {
  outline: 2px solid var(--red-deep);
  outline-offset: 2px;
}
.rf-switch-sm {
  width: 32px;
  height: 18px;
}
.rf-switch-sm::after {
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
}
.rf-switch-sm:checked::after {
  transform: translateX(14px);
}

@media (width<=820px) {
  /* Both wrappers flatten so every panel orders individually. Orders are
     explicit: .billing-grid > .panel (0,2,0) outranks .team-members-panel
     (0,1,0), which would otherwise tie Team Members with Account. */
  .settings-col-right,
  .settings-grid > div:first-child {
    display: contents;
  }
  .settings-grid > div:first-child > .panel {
    order: 1;
  }
  /* Above Team Members: a Manager setting up their store is more likely to
     be doing that than managing people. */
  .settings-grid .rf-store-panel {
    order: 2;
    margin-top: 0;
  }
  .settings-grid .account-panel {
    order: 3;
  }
  /* Notifications, Team Members, then Redeem and the QR code. */
  .settings-grid .panel.rf-notify-panel {
    order: 4;
  }
  .settings-grid .panel.team-members-panel {
    order: 5;
  }
  .settings-grid .panel.rf-redeem-panel {
    order: 6;
  }
  .settings-grid .panel.rf-qr-panel {
    order: 7;
  }
}

/* Logout, with the "On all my devices" toggle inline beside it. Off by default —
   a plain logout signs out this device only. */
.account-logout-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.account-logout-everywhere {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--stone);
  cursor: pointer;
}

/**
 * Camera button on the account avatar. Same reasoning as Content Studio's
 * copy: a dedicated capture="environment" input, because a single input
 * can't offer both the camera and the library.
 */
.rf-camera-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 9999px;
  background: #f5f0ee;
  color: #5c3f3d;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.rf-camera-btn:hover {
  background: #bb0016;
  color: #fff;
}

/* Bigger on mobile, same reasoning as Content Studio's copy. */
@media (max-width: 767px) {
  .rf-camera-btn {
    width: 34px;
    height: 34px;
  }
  .rf-camera-btn svg {
    width: 18px;
    height: 18px;
  }
}

/**
 * Suite Dashboard — activity panel.
 * Spans the full width above the product cards, which are untouched.
 * Uses the same tokens as the rest of Suite so it reads as part of the page
 * rather than a report bolted on.
 */
.rf-activity {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 24px;
  margin-bottom: 24px;
}

.rf-activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.rf-activity-title {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.rf-activity-sub {
  margin-top: 3px;
  font-size: 14px;
  color: var(--stone);
}

/* Range pills, same shape as the filter pills in Content Studio. */
.rf-activity-range {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.rf-activity-range-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--stone);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.rf-activity-range-btn:hover {
  color: var(--ink);
}
.rf-activity-range-btn.is-active {
  background: var(--red-deep);
  color: var(--white);
}

/* Hero cell gets the width of two so the headline figure has room. */
.rf-activity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 28px;
  padding-top: 20px;
}
.rf-activity-cell {
  min-width: 0;
}
/* Deliberately NOT spanning two columns: hero + three cells would be five
   columns of content in a four-column grid, wrapping the last one onto its
   own row with three empty cells beside it. Equal widths, one clean row. */
.rf-activity-cell-hero {
  min-width: 0;
}
.rf-activity-mini {
  min-width: 0;
}
.rf-activity-cell-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.rf-activity-cell-title,
.rf-activity-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stone);
}
.rf-activity-cell-meta {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--stone);
}

.rf-activity-figure {
  font-family: var(--font-sans);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--red-deep);
}
.rf-activity-label {
  margin-top: 6px;
  display: block;
}
.rf-activity-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.rf-activity-delta.is-up {
  background: #dcfce7;
  color: #15803d;
}
.rf-activity-delta.is-down {
  background: var(--cream);
  color: var(--red-deep);
}
.rf-activity-delta-arrow {
  font-size: 12px;
  line-height: 1;
}

/* Platform bars. Length is relative to the busiest platform, not a total —
   the question is coverage, not share. */
.rf-activity-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rf-activity-bar-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 8px;
}
.rf-activity-bar-row.is-zero {
  opacity: 0.45;
}
.rf-activity-bar-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-activity-bar-track {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}
.rf-activity-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.32, 1.12, 0.5, 1);
}
.rf-activity-bar-count {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

.rf-activity-members {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* Same three-column shape as the platform bars: who, bar, count. The bar
   is what keeps the count aligned on the right without it drifting away
   from the name — space-between alone pushed them to opposite edges. */
.rf-activity-member {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px 26px;
  align-items: center;
  gap: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.rf-activity-member-track {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}
.rf-activity-member-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--red-deep);
  transition: width 0.4s cubic-bezier(0.32, 1.12, 0.5, 1);
}
.rf-activity-member.is-zero .rf-activity-member-name,
.rf-activity-member.is-zero .rf-activity-member-count {
  opacity: 0.55;
}
.rf-activity-member-who {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.rf-activity-member-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
  color: var(--red-deep);
}
.rf-activity-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Same crop as the topnav avatar — keeps the top of a face visible. */
  object-position: top center;
}
.rf-activity-member-initial {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.rf-activity-member:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.rf-activity-member-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-activity-member-count {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  flex-shrink: 0;
}

.rf-activity-cell-split {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rf-activity-mini-figure {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.rf-activity-mini-label {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--stone);
}
.rf-activity-issues {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.rf-activity-issue {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.rf-activity-issue-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--red-deep);
}
/* Action row under the failures. Dismiss is the quieter of the two. */
.rf-activity-issue-actions {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
.rf-activity-issue-link {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--red-deep);
  text-decoration: none;
  /* A button now rather than an anchor, so it needs the browser defaults
     stripped to keep reading as a link. */
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.rf-activity-issue-dismiss {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--stone);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rf-activity-issue-dismiss:hover {
  color: var(--ink);
  text-decoration: underline;
}
.rf-activity-issue-link:hover {
  text-decoration: underline;
}
.rf-activity-allgood {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--stone);
}
/* Lighter than the other states; nothing needs attention here. */
.rf-activity-hidden-note {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #a8a29e;
}
.rf-activity-issue-show {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--stone);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rf-activity-issue-show:hover {
  color: var(--red-deep);
}

.rf-activity-empty {
  padding: 26px 0 6px;
  text-align: center;
}
.rf-activity-empty-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
.rf-activity-empty-sub {
  margin-top: 5px;
  font-size: 14px;
  color: var(--stone);
}

/* Held at roughly the panel's real height so the product cards below don't
   jump when the numbers land. */
.rf-activity-loading {
  padding: 0;
  overflow: hidden;
}
/**
 * Skeletons mirror the layout they stand in for — same panels, same rows —
 * so content arrives in place rather than replacing a grey block. Outlined
 * shapes with a travelling highlight, matching the Live Scraper's.
 */
.rf-skel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(187 0 22 / 13%);
  border-radius: 8px;
  background: none;
  animation: rf-skel-breathe 2.2s ease-in-out infinite;
}
.rf-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgb(187 0 22 / 7%) 50%,
    transparent 80%
  );
  background-size: 220% 100%;
  animation: rf-skel-sweep 2.2s ease-in-out infinite;
}
@keyframes rf-skel-breathe {
  0%,
  100% {
    border-color: rgb(187 0 22 / 10%);
  }
  50% {
    border-color: rgb(187 0 22 / 24%);
  }
}
@keyframes rf-skel-sweep {
  0% {
    background-position: 140% 0;
  }
  100% {
    background-position: -60% 0;
  }
}
/* Staggered so a panel doesn't pulse as one block. */
.plan-row:nth-child(even) .rf-skel::after,
.rf-activity-cell:nth-child(even) .rf-skel::after {
  animation-delay: 0.35s;
}

.rf-skel-line {
  height: 12px;
}
.rf-skel-lg {
  height: 18px;
}
.rf-skel-chip {
  width: 46px;
  height: 26px;
  border-radius: 999px;
}
.rf-skel-pill {
  width: 68px;
  height: 24px;
  border-radius: 999px;
}
.rf-skel-card-line {
  height: 40px;
  border-radius: 10px;
}
/* The same space under the heading as the real payment method has. */
.rf-skel-lg + .rf-skel-card-line {
  margin-top: 18px;
}
.rf-skel-w30 { width: 30%; }
.rf-skel-w40 { width: 40%; }
.rf-skel-w50 { width: 50%; }
.rf-skel-w70 { width: 70%; }
.rf-skel-w90 { width: 90%; }
.rf-skel-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.rf-activity-loading .rf-activity-cell,
.rf-activity-loading .rf-activity-heading {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rf-activity-skeleton {
  height: 168px;
  background: linear-gradient(
    100deg,
    var(--paper) 30%,
    var(--white) 50%,
    var(--paper) 70%
  );
  background-size: 220% 100%;
  animation: rf-activity-shimmer 1.4s linear infinite;
}
@keyframes rf-activity-shimmer {
  to {
    background-position: -220% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rf-activity-skeleton,
  .rf-skel,
  .rf-skel::after {
    animation: none;
  }
  .rf-activity-bar-fill {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .rf-activity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .rf-activity {
    padding: 18px 16px;
  }
  .rf-activity-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .rf-activity-figure {
    font-size: 38px;
  }
  /* The head stays two across rather than stacking: business on the left,
     heading and range pills against the right edge. */
  .rf-activity-head {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px;
  }
  .rf-activity-head-right {
    align-items: flex-end;
    flex-shrink: 0;
  }
  /* The store block gets the leftover width so the name isn't squeezed to
     nothing by the right-hand column. */
  .rf-activity-store {
    flex: 1 1 auto;
    min-width: 0;
  }
  .rf-activity-store-name {
    font-size: 22px;
    min-width: 0;
  }
  /* Figure and its label share a row, left aligned, so the cell doesn't
     run tall on a narrow screen. */
  .rf-activity-cell-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .rf-activity-cell-hero .rf-activity-figure {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
  }
  .rf-activity-cell-hero .rf-activity-figure::after {
    content: attr(data-label);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--stone);
  }
  .rf-activity-cell-hero .rf-activity-label {
    display: none;
  }
}

/* Platform glyph beside its name in the coverage bars. */
.rf-activity-bar-label {
  display: flex;
  align-items: center;
  gap: 7px;
}
.rf-activity-bar-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.rf-activity-bar-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Wider now that a glyph shares the column. */
.rf-activity-bar-row {
  grid-template-columns: 112px minmax(0, 1fr) 30px;
}

/* The scheduled cell is a link into Content Studio's filtered list. */
a.rf-activity-mini {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.rf-activity-mini:hover .rf-activity-mini-label {
  color: var(--red-deep);
}
a.rf-activity-mini:hover .rf-activity-mini-arrow {
  transform: translateX(3px);
}
.rf-activity-mini-arrow {
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .rf-activity-mini-arrow {
    transition: none;
  }
}

/* Bars off for reduced motion, same as the platform ones. */
@media (prefers-reduced-motion: reduce) {
  .rf-activity-member-fill {
    transition: none;
  }
}
/* Narrow panel — the bar is the first thing worth losing. */
@media (max-width: 1100px) {
  .rf-activity-member {
    grid-template-columns: minmax(0, 1fr) 34px 26px;
  }
}
/* Below this the grid is a single column, so the cell is full width again
   and the bar gets a real share — the same balance the platform bars have.
   Must follow the rule above: same specificity, later wins. */
@media (max-width: 640px) {
  .rf-activity-member {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 26px;
  }
}

/* Scrape counts under the headline figure. Deliberately quieter than the
   post count — scraping is the step before the thing that matters. */
.rf-activity-funnel {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.rf-activity-funnel-item {
  font-size: 13px;
  font-weight: 600;
  color: var(--stone);
}
.rf-activity-funnel-item strong {
  font-weight: 800;
  color: var(--ink);
}
.rf-activity-funnel-item.is-muted strong {
  color: var(--stone);
}

/**
 * Free-tier panel. Same shell as the Manager one — allowance meters, what
 * they've done with it, and a way through to the sales modal.
 */
.rf-activity-grid-free {
  grid-template-columns: 1.4fr 1fr 1.1fr;
}
.rf-activity-cell-meters {
  min-width: 0;
}
.rf-activity-meters {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rf-activity-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.rf-activity-meter-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stone);
}
.rf-activity-meter-count {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--stone);
}
.rf-activity-meter-count strong {
  font-size: 15px;
  color: var(--ink);
}
.rf-activity-meter-track {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}
/* Colour tracks how close to the cap they are: amber with room, red as it
   fills. */
.rf-activity-meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--orange-deep);
  transition:
    width 0.45s cubic-bezier(0.32, 1.12, 0.5, 1),
    background 0.3s ease;
}
/* Warm at 70%, full red when spent. The colour is the nudge — no banner
   needed while there's still something left to use. */
.rf-activity-meter.is-low .rf-activity-meter-fill {
  background: var(--red-bright);
}
.rf-activity-meter.is-out .rf-activity-meter-fill {
  background: var(--red-deep);
}
.rf-activity-meter-left {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--stone);
}
.rf-activity-meter.is-out .rf-activity-meter-left {
  color: var(--red-deep);
}

.rf-activity-upsell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--red-deep), var(--orange));
  color: var(--white);
}
.rf-activity-upsell-line {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}
.rf-activity-upsell-sub {
  font-size: 13.5px;
  font-weight: 600;
  opacity: 0.9;
}
.rf-activity-upsell-btn {
  margin-top: 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  background: var(--white);
  color: var(--red-deep);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.rf-activity-upsell-btn:hover {
  transform: translateY(-1px);
}

/* A Team Member has no team breakdown, so the row is three cells wide. */
.rf-activity-grid-tm {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (prefers-reduced-motion: reduce) {
  .rf-activity-meter-fill {
    transition: none;
  }
  .rf-activity-upsell-btn:hover {
    transform: none;
  }
}
@media (max-width: 1100px) {
  .rf-activity-grid-free,
  .rf-activity-grid-tm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .rf-activity-grid-free,
  .rf-activity-grid-tm {
    grid-template-columns: minmax(0, 1fr);
  }
}

/**
 * Billing tab — real states. The mock version had one hardcoded plan row
 * and three fake invoices; these cover the cases that actually occur.
 */
.rf-billing-skeleton {
  height: 140px;
  border-radius: 12px;
  background: linear-gradient(
    100deg,
    var(--paper) 30%,
    var(--white) 50%,
    var(--paper) 70%
  );
  background-size: 220% 100%;
  animation: rf-activity-shimmer 1.4s linear infinite;
}

.rf-billing-plan-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}

/* A held founder's fee isn't an active plan. */
.rf-status-held,
.rf-status-founder {
  background: var(--cream);
  color: var(--red-deep);
}
/* Comes with the plan rather than being bought, so it reads quieter than a
   paid line. */
.rf-status-included {
  background: var(--paper);
  color: var(--stone);
  border-color: var(--line);
}
.rf-plan-row-included .name {
  font-weight: 700;
}

/* Cancelled but still running: when it ends, and the way back. */
.rf-billing-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--cream);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.rf-billing-notice-btn {
  padding: 7px 16px;
  border: none;
  border-radius: 999px;
  background: var(--red-deep);
  color: var(--white);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.rf-billing-notice-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.rf-billing-card {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.rf-billing-card-brand {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--stone);
}
.rf-billing-card-num {
  font-family: var(--font-mono);
}
.rf-billing-card-exp {
  font-size: 13px;
  color: var(--stone);
  margin-left: auto;
}
.rf-billing-card-none {
  padding: 12px 0 16px;
  font-size: 14px;
  color: var(--stone);
}
/* Stripe's iframe. Its styling comes from the Stripe dashboard. */
.rf-billing-card-form {
  min-height: 44px;
  margin-bottom: 14px;
}
.rf-billing-card-save {
  margin-top: 4px;
  margin-bottom: 12px;
  margin-right: 10px;
}

.rf-billing-error {
  margin: 12px 0;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--cream);
  color: var(--red-deep);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
}

.rf-billing-empty {
  padding: 20px 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--stone);
}

/* Lapsed. Same red block as the free Dashboard panel. */
.rf-billing-lapsed {
  background: linear-gradient(135deg, var(--red-deep), var(--orange));
  color: var(--white);
}
.rf-billing-lapsed-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}
.rf-billing-lapsed-sub {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.92;
}
.rf-billing-lapsed-btn {
  margin-top: 14px;
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: var(--white);
  color: var(--red-deep);
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}

.rf-unpaid-pill {
  background: var(--cream);
  color: var(--red-deep);
}
.rf-invoice-pdf {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--red-deep);
  text-decoration: none;
}
.rf-invoice-pdf:hover {
  text-decoration: underline;
}

/**
 * Forced password change, shown when a valid password is below the current
 * minimum. No close button and no backdrop dismiss.
 */
.rf-force-pw-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgb(28 25 23 / 72%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.rf-force-pw-card {
  width: 100%;
  max-width: 420px;
  padding: 28px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 24px 60px rgb(0 0 0 / 30%);
}
.rf-force-pw-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
}
.rf-force-pw-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--stone);
  margin-bottom: 18px;
}
.rf-force-pw-card .rf-pw-wrap {
  margin-bottom: 12px;
}
.rf-force-pw-error {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--cream);
  color: var(--red-deep);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
}

/**
 * Store details form. Reuses the blocking overlay shell, with an X unless
 * required.
 */
.rf-store-card {
  position: relative;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
}
.rf-store-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--cream);
  color: var(--red-deep);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.rf-store-close:hover {
  background: var(--red-deep);
  color: var(--white);
}
.rf-store-field {
  display: block;
  margin-bottom: 14px;
}
.rf-store-field > span {
  display: block;
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stone);
}
/* Sits under the input it explains. */
.rf-store-hint {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--stone);
}
/* Opening hours: a row per day, with the closed toggle on the right so the
   column of times stays readable down the week. */
.rf-store-hours-note {
  margin: -2px 0 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--stone);
}
.rf-store-hours-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rf-store-hours-day {
  display: grid;
  grid-template-columns: 82px 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}
.rf-store-hours-day.is-closed {
  background: #faf7f6;
}
.rf-store-hours-name {
  padding-top: 8px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink, #1c1917);
}
.rf-store-hours-spans {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.rf-store-hours-span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.rf-store-time {
  width: auto;
  min-width: 0;
  flex: 0 1 118px;
  padding: 7px 9px;
  font-size: 13px;
}
.rf-store-hours-to {
  font-size: 12px;
  font-weight: 700;
  color: var(--stone);
}
.rf-store-hours-closed {
  padding-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--stone);
}
.rf-store-hours-x,
.rf-store-hours-add,
.rf-store-hours-toggle {
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
  color: var(--red-deep);
}
.rf-store-hours-x {
  padding: 0 4px;
  font-size: 17px;
  line-height: 1;
  color: var(--stone);
}
.rf-store-hours-x:hover {
  color: var(--red-deep);
}
.rf-store-hours-add {
  align-self: flex-start;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
}
.rf-store-hours-toggle {
  margin-top: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}
.rf-store-hours-toggle:hover {
  border-color: var(--red-deep);
}
@media (max-width: 520px) {
  .rf-store-hours-day {
    grid-template-columns: 1fr auto;
  }
  .rf-store-hours-name {
    padding-top: 0;
  }
  .rf-store-hours-spans {
    grid-column: 1 / -1;
  }
}

.rf-store-textarea {
  min-height: 76px;
  resize: vertical;
  font-family: inherit;
}

/* The signup number offered in the phone field itself. Leaving it saves it;
   the x clears it so another number can be typed in its place. */
.rf-store-phone-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.rf-store-phone-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rf-store-phone-chip-x {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--cream);
  color: var(--stone);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.rf-store-phone-chip-x:hover {
  background: var(--red-deep);
  color: var(--white);
}

/* Geo card, once connected. */
.flagship-connected {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.flagship-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 800;
  color: var(--white);
}
.flagship-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
}
/* Only shows while the details are missing. */
.flagship-store-link {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--white);
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.9;
}
.flagship-store-link:hover {
  opacity: 1;
}

/* Category picker: chips rather than a multi-select box. */
.rf-store-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.rf-store-chip {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--stone);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.rf-store-chip:hover {
  border-color: var(--red-deep);
  color: var(--ink);
}
.rf-store-chip.is-on {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: var(--white);
}
/* Seven days on one row: equal columns rather than wrapping Sunday alone. */
.rf-day-chips {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.rf-day-chips .rf-store-chip {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

/* Time-of-day chips carry the hours under the label. */
.rf-call-time {
  flex-direction: column;
  gap: 1px;
  display: inline-flex;
  align-items: center;
  line-height: 1.25;
}
.rf-call-time em {
  font-size: 10.5px;
  font-weight: 700;
  font-style: normal;
  opacity: 0.7;
}
.rf-cal-foot {
  margin-top: 10px;
  text-align: center;
  color: var(--stone);
  font-size: 12px;
  font-weight: 600;
}

/* Business search. Picking a result fills name, address and coordinates in
   one go, so they match the Google listing Geo works against. */
.rf-store-search {
  position: relative;
}
.rf-store-results {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 100%;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 12px 28px rgb(0 0 0 / 12%);
}
.rf-store-results li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 8px;
  cursor: pointer;
}
.rf-store-results li:hover {
  background: var(--paper);
}
.rf-store-results strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.rf-store-results span {
  font-size: 12.5px;
  color: var(--stone);
}

/* Store logo. Manager only, since it's the business's branding. Same dashed
   tile as the Asset Library upload. */
.rf-store-logo-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 96px;
  height: 96px;
  padding: 0;
  border: 2px dashed var(--line);
  /* Circular, matching the account avatar. */
  border-radius: 50%;
  background: var(--paper);
  color: var(--stone);
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.rf-store-logo-tile:hover {
  border-color: var(--red-deep);
  box-shadow: 0 0 0 3px rgb(187 0 22 / 18%);
}
.rf-store-logo-tile:disabled {
  opacity: 0.6;
  cursor: default;
}
.rf-store-logo-tile.has-logo {
  border-style: solid;
  background: var(--white);
}
.rf-store-logo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rf-store-logo-remove {
  align-self: start;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--stone);
  cursor: pointer;
}
.rf-store-logo-remove:hover {
  color: var(--red-deep);
  text-decoration: underline;
}

.rf-store-logo-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rf-store-logo-preview {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

/* Label with an inline note beside it, for the categories hint. */
.rf-store-label-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.rf-store-label-note {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--stone);
  opacity: 0.85;
}

/* Store details panel in Settings, so a Manager can edit at any time. */
.rf-store-panel {
  margin-top: 24px;
}
.rf-store-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 16px;
}
.rf-store-summary-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.rf-store-summary-line {
  font-size: 13px;
  color: var(--stone);
  margin-top: 2px;
}

/* Scrollbars, matching the sales modal's. Any panel that scrolls internally
   gets the same thin rounded bar rather than the browser default. */
@supports not selector(::-webkit-scrollbar) {
  .rf-store-card,
  .rf-force-pw-card,
  .rf-activity-members,
  .invoices {
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
}
.rf-store-card::-webkit-scrollbar,
.rf-force-pw-card::-webkit-scrollbar,
.rf-activity-members::-webkit-scrollbar,
.invoices::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.rf-store-card::-webkit-scrollbar-track,
.rf-force-pw-card::-webkit-scrollbar-track,
.rf-activity-members::-webkit-scrollbar-track,
.invoices::-webkit-scrollbar-track {
  background: transparent;
  /* Stops short of both corners so the bar never runs into the radius. */
  margin: 20px 0;
}
/* No stepper buttons at either end. */
.rf-store-card::-webkit-scrollbar-button,
.rf-force-pw-card::-webkit-scrollbar-button,
.rf-activity-members::-webkit-scrollbar-button,
.invoices::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
.rf-store-card::-webkit-scrollbar-thumb,
.rf-force-pw-card::-webkit-scrollbar-thumb,
.rf-activity-members::-webkit-scrollbar-thumb,
.invoices::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}
.rf-store-card::-webkit-scrollbar-thumb:hover,
.rf-force-pw-card::-webkit-scrollbar-thumb:hover,
.rf-activity-members::-webkit-scrollbar-thumb:hover,
.invoices::-webkit-scrollbar-thumb:hover {
  background: var(--red-deep);
}

/* Store logo on the Dashboard, above the title. Shown to the Manager and
   every Team Member under them. White plate so a dark logo stays readable
   against the gradient. */
.rf-hero-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 14px;
  padding: 8px;
  border-radius: 18px;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 6px 18px rgb(0 0 0 / 14%);
}
.rf-hero-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Store details link, top-right of the Account panel. Reads "Set up store
   details" until they're filled in, then just "Store details". */
.account-panel {
  position: relative;
}
.rf-store-link {
  position: absolute;
  top: 22px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--red-deep);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rf-store-link:hover {
  text-decoration: underline;
}
/* Confirmation after a save that closes its own modal, where otherwise
   nothing tells you it worked. */
.rf-toast {
  z-index: 9999999;
  position: fixed;
  left: 50%;
  /* 96px, matching the toast offset Content Studio uses. */
  top: 96px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  /* As wide as the message, up to the screen's width less a margin; without
     this it wraps at half the screen. */
  width: max-content;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 13px 20px;
  /* A thin edge, so it still shows over a black photo. */
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 12px 32px #00000040;
  animation: rf-toast-in 0.22s ease;
}
.rf-toast svg {
  flex-shrink: 0;
  color: #7ee2a8;
}
.rf-toast.is-error svg {
  color: #ff8a80;
}
@keyframes rf-toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Sits under the Store details link, which is absolutely positioned in the
   panel's top-right corner. */
.rf-book-link {
  top: 46px;
}
.rf-activity-heading {
  min-width: 0;
}
/* Sits in the right-hand column, so it reads against that edge. */
.rf-activity-head-right .rf-activity-heading {
  text-align: right;
}
/* Panel identity, centred between the heading and the range buttons. Logo
   on the left of the name, so a store with a logo and no name yet still
   sits correctly rather than shifting when the name arrives. */
.rf-activity-store {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  min-width: 0;
  text-align: left;
}
/* Logo spans the rows beside the name and whatever links are under it.
   A span count, not 1 / -1 — the rows here are implicit, and -1 resolves to
   the last explicit line, which would leave it spanning only the first row
   and drop the links into this column instead. */
.rf-activity-store .rf-activity-logo {
  grid-row: 1 / span 3;
}
/* Nothing set yet — an outlined circle and a prompt, and the whole thing is
   the way in to Store Details. */
/* The logo and the name are each their own control now. */
.rf-activity-store button.rf-activity-logo,
.rf-activity-store-name.is-action {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
/* A button doesn't take the page font on its own. Only the family is set
   here — size, weight and line-height come from .rf-activity-store-name, and
   inherit would have pulled them from the parent instead. */
.rf-activity-store-name.is-action {
  font-family: var(--font-display);
}
.rf-activity-store button.rf-activity-logo {
  color: var(--stone);
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}
.rf-activity-logo-placeholder {
  width: 40%;
  height: 40%;
}
/* Something is being fetched for this circle. */
.rf-activity-logo.is-busy {
  animation: rf-logo-pulse 1.3s ease-in-out infinite;
}
@keyframes rf-logo-pulse {
  0%,
  100% {
    opacity: 1;
    border-color: var(--line);
  }
  50% {
    opacity: 0.55;
    border-color: var(--red-deep);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rf-activity-logo.is-busy {
    animation: none;
  }
}
/* Small links under the business name. */
.rf-activity-store-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--red-deep);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.rf-activity-store-link:hover {
  text-decoration: underline;
}
.rf-activity-store-link svg {
  flex-shrink: 0;
}

/* A free account's own name — highlighted, not actionable. */
.rf-activity-store-name.is-highlight {
  color: var(--red-deep);
}
/* Nothing uploaded — dashed outline and an upload glyph, the same
   treatment the Store Details tile uses. */
.rf-activity-store button.rf-activity-logo {
  border: 2px dashed var(--line);
  background: var(--paper);
}
/* An image fills it, so the outline goes solid. */
.rf-activity-store button.rf-activity-logo:has(img) {
  border-style: solid;
  border-width: 1px;
  background: var(--white);
}
.rf-activity-store-name.is-action {
  color: var(--stone);
}
.rf-activity-store button.rf-activity-logo:hover {
  border-color: var(--red-deep);
  color: var(--red-deep);
  box-shadow: 0 0 0 3px rgb(187 0 22 / 18%);
}
.rf-activity-store-name.is-action:hover {
  color: var(--red-deep);
}
.rf-activity-store-name {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 0.7;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Room for descenders, which the tight line-height would otherwise put
     outside the box for overflow:hidden to cut off. */
  padding-bottom: 0.22em;
}
/* Heading and range buttons stack on the right, against the store block. */
.rf-activity-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
}
.rf-activity-logo {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  /* No padding, and clipped: cover fills the box, so without this the
     image's square corners would sit outside the circle. */
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
}
.rf-activity-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rf-activity-cell::after {
  content: "";
  display: block;
  clear: both;
}
@media (max-width: 520px) {
  .rf-activity-logo {
    width: 88px;
    height: 88px;
  }
  /* Portrait: the business takes its own row, image pinned left and the
     name beside it, with the heading and range pills underneath. */
  .rf-activity-head {
    flex-wrap: wrap;
    position: relative;
  }
  /* Taken out of the flow and pinned left, so the name sits beside it
     rather than under it and can still run to the right edge. */
  /* The logo is absolute here, so it leaves the grid — one column, or the
     name takes column one and the links land in column two, off screen. */
  .rf-activity-store {
    flex: 1 1 100%;
    order: -1;
    grid-template-columns: minmax(0, 1fr);
    justify-items: end;
    align-content: center;
    text-align: right;
    row-gap: 6px;
    min-height: 88px;
    padding-left: 100px;
  }
  .rf-activity-store .rf-activity-logo {
    position: absolute;
    left: 0;
    top: 0;
  }
  .rf-activity-head-right {
    flex: 1 1 100%;
    align-items: flex-end;
  }
  /* Wraps to a second line rather than being cut off. */
  .rf-activity-store-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: right;
    font-size: 34px;
  }
}

/* Matches the Studio upload tile's spinner. */
.rf-store-logo-spin {
  color: var(--red-deep);
  animation: rf-store-logo-spin 0.9s linear infinite;
}
@keyframes rf-store-logo-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rf-store-logo-spin {
    animation: none;
  }
}


/* The last two panels sit side by side: redeeming at the till on the left,
   the window code on the right. They fall into place from DOM order, so
   neither needs a column. */
.rf-redeem-panel {
  align-self: start;
}
.rf-redeem-panel .panel-sub {
  margin: 6px 0 14px;
  font-size: 13px;
  color: var(--stone);
}
.rf-redeem-row {
  display: flex;
  gap: 8px;
}
.rf-redeem-input {
  flex: 1;
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rf-redeem-found {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--cream);
  border: 1px solid var(--red-deep);
}
.rf-redeem-found.is-used {
  background: var(--paper);
  border-color: var(--line);
  opacity: 0.75;
}
.rf-redeem-meta {
  flex: 1;
  min-width: 0;
}
.rf-redeem-big {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  line-height: 0.85;
  color: var(--red-deep);
}
.rf-redeem-found.is-used .rf-redeem-big {
  color: var(--stone);
}
.rf-redeem-small {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--stone);
}
.rf-redeem-who {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stone);
}
/* Scanning sits first: it's what staff reach for. */
.rf-redeem-scan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-bottom: 12px;
  padding: 14px 18px;
  font-size: 15.5px;
}
.rf-redeem-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}
.rf-redeem-or::before,
.rf-redeem-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.rf-redeem-row .pill-btn,
.rf-redeem-undo {
  background: #fff;
  color: var(--red-deep);
  border: 1.5px solid var(--red-deep);
}
.rf-redeem-found.is-done .rf-redeem-who {
  color: #15803d;
}
.rf-redeem-undo {
  flex-shrink: 0;
  min-width: 112px;
}
/* In the shop's Square: rung up at the register, so no button here. */
.rf-redeem-found.is-square {
  flex-wrap: wrap;
}
.rf-redeem-square {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 100%;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid var(--line);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}
.rf-redeem-square svg {
  flex-shrink: 0;
  color: var(--red-deep);
}
.rf-redeem-error {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--cream);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--red-deep);
}


/* The shop's QR code for the window. */
.rf-qr-panel {
  align-self: start;
}
/* On a phone it goes last — printing a code is a desk job, and the till
   lookup is what someone needs in a hurry. */
@media (width<=820px) {
  .rf-redeem-panel {
    order: 6;
  }
  .rf-qr-panel {
    order: 7;
  }
}
.rf-qr-panel .panel-sub {
  margin: 6px 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--stone);
}
.rf-qr-body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.rf-qr-code svg {
  width: 128px;
  height: 128px;
  display: block;
}
.rf-qr-code {
  flex-shrink: 0;
  padding: 12px;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  line-height: 0;
}
.rf-qr-code svg {
  display: block;
}
.rf-qr-side {
  flex: 1;
  min-width: 220px;
}
.rf-qr-url {
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--stone);
  word-break: break-all;
}
.rf-qr-label {
  margin: 16px 0 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}
.rf-qr-sizes {
  display: flex;
  gap: 8px;
}
.rf-qr-size {
  flex: 1;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.rf-qr-size span {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
}
.rf-qr-size small {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--stone);
}
.rf-qr-size.is-on {
  border-color: var(--red-deep);
  background: var(--cream);
}
.rf-qr-size.is-on span {
  color: var(--red-deep);
}
.rf-qr-print {
  width: 100%;
  margin-top: 12px;
}
.rf-qr-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--stone);
}


/* Settings: connections in two boxes, Posting and Register & online store. */
.rf-conn-group {
  border: 1px solid #f3e4e0;
  border-radius: 16px;
  padding: 4px 18px 6px;
  margin-top: 14px;
  background: #fffdfc;
}
.rf-conn-group:first-of-type {
  margin-top: 0;
}
.rf-conn-group-head {
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--line);
}
.rf-conn-group-head h4 {
  margin: 0 0 3px;
  color: var(--red-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rf-conn-group-head p {
  margin: 0;
  color: var(--stone);
  font-size: 12.5px;
  line-height: 1.45;
  text-wrap: pretty;
}
.rf-conn-group .plan-row {
  gap: 10px;
  padding: 15px 0 17px;
}
/* Product names stay on one line beside their button. */
.rf-conn-group .name > span:not(.conn-status-pill) {
  white-space: nowrap;
}
/* One register at a time: the other waits, greyed. */
.rf-conn-blocked .platform-info {
  opacity: 0.45;
}
.rf-conn-blocked-note {
  color: var(--stone);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
@media (width<=520px) {
  .rf-conn-group {
    padding: 2px 14px 4px;
  }
  .rf-conn-group .pill-btn {
    padding: 10px 15px;
  }
}
/* Phones: less room around the boxes inside Connected accounts. */
@media (width<=520px) {
  .settings-grid > div:first-child > .panel {
    padding: 22px 12px;
  }
  .settings-grid > div:first-child > .panel > h3 {
    margin-left: 6px;
  }
}



/* What their Nearby presence is doing. Sits under the activity panel on
   the dashboard. */
.rf-reach {
  margin-top: 20px;
  /* Matching .panel, so it sits in the same rhythm as everything else. */
  margin-bottom: 20px;
  padding: 22px 24px 24px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--cream);
  box-shadow: 0 6px 20px #bb00160d;
}
.rf-reach-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.rf-reach-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.rf-reach-mark {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.rf-reach-when {
  font-size: 12px;
  font-weight: 700;
  color: var(--stone);
}
.rf-reach-cells {
  display: grid;
  /* Three across, so six sits as two rows rather than six squeezed
     columns. */
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (width<=820px) {
  .rf-reach-cells {
    grid-template-columns: repeat(2, 1fr);
  }
}
.rf-reach-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 146px;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.rf-reach-figure {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.035em;
  color: var(--red-deep);
}
.rf-reach-label {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
.rf-reach-sub {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--stone);
}
.rf-reach-offers {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.rf-reach-offers-head {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}
.rf-reach-offer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.rf-reach-offer:last-child {
  border-bottom: none;
}
.rf-reach-offer-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}
.rf-reach-offer-nums {
  font-size: 12px;
  font-weight: 700;
  color: var(--stone);
  white-space: nowrap;
}

/* ── Phone mockups in the Nearby strip ────────────────────────────────────
   The frame is drawn rather than a PNG, so it stays sharp at any size and
   the status bar reads the same on both screens. Sizes come from --w. */
.geo-visual-frame .rf-phone {
  --w: 265px;
  --r: calc(var(--w) * 0.155);
  --bezel: calc(var(--w) * 0.032);
  --status: calc(var(--w) * 0.125);
  position: relative;
  width: var(--w);
  padding: var(--bezel);
  border-radius: var(--r);
  background: linear-gradient(150deg,
    #55504c 0%, #2b2724 18%, #1a1715 48%, #322d29 82%, #6a635d 100%);
  /* Edge light only. The strip already sits on a busy background and a
     drop shadow made two floating phones read as stickers. */
  box-shadow:
    0 1px 0 #ffffff38 inset,
    0 0 0 1px #0000008c;
}
.geo-visual-frame .rf-phone::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  background: linear-gradient(105deg,
    transparent 0 38%, #ffffff1a 46%, transparent 54% 100%);
  pointer-events: none;
}
.rf-phone-screen {
  position: relative;
  border-radius: calc(var(--r) - var(--bezel));
  overflow: hidden;
  background: #fff;
  isolation: isolate;
  line-height: 0;
}
/* Its own strip above the screenshot rather than over it, so nothing in
   the app's own header is covered. */
.rf-phone-status {
  position: relative;
  z-index: 3;
  height: var(--status);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--w) * 0.075) 0 calc(var(--w) * 0.085);
  background: #eef2f4;
  color: #1c1917;
  font-size: calc(var(--w) * 0.05);
  font-weight: 700;
  line-height: 1;
}
.rf-phone-status svg { display: block; }
.rf-phone-icons {
  display: flex;
  align-items: center;
  gap: calc(var(--w) * 0.018);
}
.rf-phone-shot { display: block; width: 100%; height: auto; }
.rf-phone-island {
  position: absolute;
  top: calc(var(--w) * 0.048);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--w) * 0.3);
  height: calc(var(--w) * 0.077);
  border-radius: 999px;
  background: #080706;
  z-index: 6;
}
.rf-phone-home {
  position: absolute;
  bottom: calc(var(--w) * 0.02);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--w) * 0.35);
  height: calc(var(--w) * 0.017);
  border-radius: 999px;
  background: #1c19174d;
  z-index: 6;
}
.rf-phone-btn {
  position: absolute;
  width: calc(var(--w) * 0.011);
  border-radius: 2px;
  background: linear-gradient(180deg, #4a4440, #241f1d);
}
.rf-btn-power { right: calc(var(--w) * -0.01); top: 26%; height: 11%; }
.rf-btn-up    { left:  calc(var(--w) * -0.01); top: 21%; height: 7%; }
.rf-btn-down  { left:  calc(var(--w) * -0.01); top: 30%; height: 7%; }
.rf-btn-mute  { left:  calc(var(--w) * -0.01); top: 14%; height: 4%; }
.rf-phone-glare {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(118deg,
    #ffffff24 0 14%, #ffffff0a 21%, transparent 34% 100%);
}

/* Shops. One size — a flat map has no perspective. */
.rf-map { position: relative; }
.rf-pin {
  position: absolute;
  z-index: 3;
  width: calc(var(--w) * 0.115);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 4px #1c191761);
}

/* The route. pathLength 1 makes the dash independent of the real length,
   so the offset is simply how much is left to draw — set from scroll, with
   no transition, because the scroll position is the animation. */
.rf-route {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.rf-route path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* On the property that actually changes. The frame around it used to
     carry will-change: transform, which cached the whole phone as one
     layer and stopped the stroke inside it being repainted. */
  will-change: stroke-dashoffset;
  /* Drawn, so a browser without scroll-driven animation shows the finished
     route rather than nothing. */
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}


.rf-route .casing { stroke: #fff; stroke-width: 30; }
.rf-route .line { stroke: #f9a316; stroke-width: 17; }

/* The frame is wider than the old flat image, so the strip's own slots
   widen with it. */
.geo-visual-frame {
  width: 283px;
  max-width: 283px;
}
@media (width<=764px) {
  .geo-visual-left { left: calc(50% - 141.5px); }
  .geo-visual-right { left: calc(50% - 141.5px); }
  @media (prefers-reduced-motion: no-preference) {
    .geo-visual-up.geo-pre-reveal { transform: translate3d(-283px, 0, 0); }
    .geo-visual-down.geo-pre-reveal { transform: translate3d(283px, 0, 0); }
  }
}

/* The footnote marker on a price. Scoped through .price-card-amount, which
   already styles every span inside it as the small stone unit — that rule
   is more specific and was winning. The marker belongs to the number, so it
   takes the number's colour. */
.price-card-amount .price-card-mark {
  font-size: 15px;
  font-weight: 700;
  color: var(--red-deep);
  vertical-align: super;
  line-height: 0;
}

/* What a shop can act on, above the counts. Findings read as sentences, so
   they get their own shape rather than another row of figures. */
.rf-reach-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (width<=820px) {
  .rf-reach-notes {
    grid-template-columns: 1fr;
  }
}
.rf-reach-note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 118px;
  padding: 18px 20px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red-deep);
}
.rf-reach-note-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--stone);
}
.rf-reach-note-big {
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.rf-reach-note-sub {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--stone);
}

/* A finding that points at something opens it. */
a.rf-reach-note {
  text-decoration: none;
}
a.rf-reach-note:hover {
  border-color: var(--red-deep);
}
a.rf-reach-note:hover .rf-reach-note-sub {
  color: var(--red-deep);
}

/* An offer row opens the post it came from. */
a.rf-reach-offer {
  text-decoration: none;
}
a.rf-reach-offer:hover .rf-reach-offer-name {
  color: var(--red-deep);
  text-decoration: underline;
}

/* An offer that ran on several posts expands to name them. */
.rf-reach-offer-group {
  border-bottom: 1px solid var(--line);
}
.rf-reach-offer-group:last-child {
  border-bottom: none;
}
.rf-reach-offer-group .rf-reach-offer {
  border-bottom: none;
}
button.rf-reach-offer {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.rf-reach-offer:hover .rf-reach-offer-name {
  color: var(--red-deep);
}
.rf-reach-offer-toggle {
  display: inline-block;
  width: 14px;
  margin-right: 6px;
  color: var(--stone);
  font-weight: 800;
}
.rf-reach-offer-posts {
  padding-left: 20px;
}
.rf-reach-offer-sub .rf-reach-offer-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--stone);
}
.rf-reach-offer-sub {
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
}
.rf-reach-offer-sub .rf-reach-offer-nums {
  margin-left: auto;
}

/* Small actions under a plan on the Billing tab: switching Studio Pro to the
   founder rate, and cancelling or keeping an app's plan. */
.rf-billing-switch {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--red-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rf-billing-switch:disabled {
  opacity: 0.5;
  cursor: default;
}

/* The founder perks under the founder offer, on the dashboard and the
   sign-in page. */
.rf-founder-bullets {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
}
.rf-founder-bullets li {
  position: relative;
  padding-left: 20px;
  color: #ffffffeb;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.rf-founder-bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
/* Centred as a block on the dashboard card, whose text is centred. */
.flagship-bundle-card .rf-founder-bullets {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* RetailFix Nearby, founder pricing and consulting: one row of cards, as
   many as there are, stacked on smaller screens. */
.rf-promo-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.rf-promo-card {
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
}
.rf-promo-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
  /* .bundle-card's own box and spacing don't apply inside a promo card. */
  background: none;
  padding: 0;
  border-radius: 0;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
}
.rf-promo-card .flagship-badge {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}
.rf-promo-card h2 {
  font-size: 40px;
}
.rf-promo-card h3 {
  font-family: var(--font-display);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 0.6;
  padding-top: 12px;
  margin-bottom: 14px;
}
.rf-promo-card p.desc {
  margin-bottom: 20px;
  font-size: 14px;
}
.rf-promo-card .bundle-card-eyebrow,
.rf-promo-card .eyebrow-tag {
  align-self: flex-start;
}
.rf-promo-card .rf-founder-bullets {
  margin: 10px 0 0;
}
/* Prices and buttons sit at the foot of each card. */
.rf-promo-card .bundle-card-price,
.rf-consult-actions {
  margin-top: auto;
  padding-top: 22px;
  text-align: center;
}
.rf-promo-card .bundle-card-dev-note {
  margin-top: 10px;
}

/* Consulting: Setup and Monthly, each with what's included. */
.rf-consult-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #ffffff38;
}
.rf-consult-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.rf-consult-name {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.rf-consult-price {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
}
.rf-consult-price span {
  font-size: 13px;
  font-weight: 600;
  color: #fffc;
}
.rf-consult-block .rf-founder-bullets li {
  font-size: 13px;
}
.rf-consult-note {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffffcc;
}

@media (max-width: 1000px) {
  .rf-promo-row {
    grid-auto-flow: row;
  }
}
/* Every card's button sits at its foot, and the titles match. */
.rf-promo-nearby .rf-promo-inner > :last-child {
  margin-top: auto;
}
/* Room above it when the card is only as tall as its content. */
.rf-promo-nearby .rf-promo-box:has(.rf-promo-steps) {
  margin-top: 10px;
  margin-bottom: 22px;
}
.rf-promo-card h2,
.rf-promo-card h3 {
  font-size: 34px;
  line-height: 0.6;
  padding-top: 12px;
  margin-bottom: 16px;
}

/* Even line breaks, so no line ends with one word left on its own. */
.price-card li,
.app-features li,
.bundle-card p,
.bundle-card-dev-note,
.rf-founder-bullets li,
.rf-promo-card p,
.rf-consult-note,
.price-card-alt {
  text-wrap: balance;
}
/* The founder offer's text uses the card's width. */
.pricing-section .bundle-card-text p {
  max-width: 560px;
}
/* Longer paragraphs: no lone last word. */
.rf-promo-card p.desc,
.bundle-card-dev-note {
  text-wrap: pretty;
}

/* The regular price, crossed out before the price paid. */
.price-card-was {
  color: var(--stone);
  font-size: 16px;
  font-weight: 700;
  margin-right: 6px;
  opacity: 0.8;
}
.price-card-alt .price-card-was {
  font-size: inherit;
  margin-right: 4px;
}
/* Each footnote on its own line, wrapped evenly. */
.bundle-card-note-line {
  display: block;
  text-wrap: balance;
}
/* The crossed-out and founder prices stay together. */
.price-card-alt {
  text-wrap: wrap;
}
.price-card-alt-price {
  white-space: nowrap;
}
/* Signed out, the footer matches the pricing section above it, edge to
   edge. The shadow carries the colour out to the sides without changing the
   footer's layout. */
body:not(.logged-in):has(.pricing-section) footer.rf-footer {
  background: #fcf9f8;
  box-shadow: 0 0 0 100vmax #fcf9f8;
  clip-path: inset(0 -100vmax);
}

/* "Which offers land": each offer as a mini version of the coupon shoppers
   see — red, with a dashed tear line and ticket notches at the sides. */
.rf-coupons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  /* The shadow follows each coupon's cut-out shape. */
  filter: drop-shadow(0 4px 8px rgba(165, 0, 22, 0.18));
}
@media (max-width: 900px) {
  .rf-coupons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .rf-coupons {
    grid-template-columns: 1fr;
  }
}
.rf-coupon {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 12px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #a50016 0%, #c8001c 100%);
  color: #fff;
  font: inherit;
  text-align: left;
  text-decoration: none;
  /* Ticket notches cut out of both sides, centred on the tear line. The
     script sets --rf-notch from where the line sits. */
  -webkit-mask:
    radial-gradient(circle 11px at 0 var(--rf-notch, calc(100% - 39px)), transparent 96%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% var(--rf-notch, calc(100% - 39px)), transparent 96%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 11px at 0 var(--rf-notch, calc(100% - 39px)), transparent 96%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 11px at 100% var(--rf-notch, calc(100% - 39px)), transparent 96%, #000) right / 51% 100% no-repeat;
}
.rf-coupon.is-link {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rf-coupon.is-link:hover {
  transform: translateY(-2px);
}
.rf-coupon.is-open {
  box-shadow: inset 0 0 0 2px #fcd34d;
}
.rf-coupon-top {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.rf-coupon-top {
  gap: 12px;
}
/* The post's photo, framed like a stamp on the coupon. */
.rf-coupon-thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 2px solid #ffffffcc;
  object-fit: cover;
  background: #ffffff26;
}
.rf-coupon-thumb-icon {
  display: grid;
  place-items: center;
  color: #fff;
}
.rf-coupon-thumb-icon svg {
  width: 24px;
  height: 24px;
}
.rf-coupon-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rf-coupon-terms {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffffe6;
}
.rf-coupon-post {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffffb3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-coupon-reward {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.rf-coupon-toggle {
  font-size: 18px;
  font-weight: 800;
  color: #ffffffcc;
}
/* The tear line, with a notch cut into each side. */
/* The tear line runs between the notches. Its distance from the bottom
   (10px gap + 16px line + 12px padding + half the 2px line = 39px) must
   match the notch position above, so the numbers stay on one line. */
.rf-coupon-tear {
  display: block;
  margin: 12px -6px 10px;
  border-top: 2px dashed #ffffff59;
}
.rf-coupon-nums {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: #ffffffd9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-coupon-posts {
  margin-top: 10px;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.rf-coupon-posts .rf-reach-offer:last-child {
  border-bottom: none;
}

/* Nearby's intro line, styled like the other cards' intro. */
.rf-promo-card .rf-promo-intro {
  margin: 0;
  max-width: 400px;
  color: #ffffffeb;
  font-size: 14.5px;
  line-height: 1.55;
}
/* Consulting: Setup and Monthly each in a soft panel, so the two lists read
   as two simple boxes rather than one long run of text. */
.rf-promo-consult .rf-consult-block {
  margin-top: 14px;
  padding: 14px 16px;
  border-top: none;
  border-radius: 14px;
  background: #ffffff1f;
}
.rf-promo-consult .rf-consult-block + .rf-consult-block {
  margin-top: 10px;
}
.rf-promo-consult .rf-consult-block .rf-founder-bullets {
  margin-top: 8px;
  gap: 3px;
}
.rf-promo-consult .rf-consult-block .rf-founder-bullets li {
  font-size: 13px;
  font-weight: 500;
  color: #ffffffe0;
}

/* A soft box inside a card: a small title, then checks or steps. */
.rf-promo-box {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #ffffff1f;
  text-align: left;
}
.rf-promo-box-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.rf-promo-card .rf-promo-box .rf-founder-bullets {
  margin: 8px 0 0;
  gap: 3px;
}
.rf-promo-box .rf-founder-bullets li {
  font-size: 13px;
  font-weight: 500;
  color: #ffffffe0;
}
/* Numbered steps, each number in a small round badge. */
.rf-promo-steps {
  list-style: none;
  counter-reset: rf-step;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rf-promo-steps li {
  counter-increment: rf-step;
  position: relative;
  padding-left: 32px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #ffffffe0;
  text-wrap: pretty;
}
.rf-promo-steps li::before {
  content: counter(rf-step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: #bb0016;
  font-size: 12px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}
/* Founder and Nearby have less in them than consulting, so their boxes
   read a size up and breathe more, closing the gap above the buttons. */
.rf-promo-founder .rf-promo-box,
.rf-promo-nearby .rf-promo-box {
  padding: 18px 20px;
}
.rf-promo-founder .rf-promo-box .rf-founder-bullets,
.rf-promo-nearby .rf-promo-box .rf-founder-bullets {
  gap: 9px;
  margin-top: 12px;
}
.rf-promo-founder .rf-promo-box .rf-founder-bullets li,
.rf-promo-nearby .rf-promo-box .rf-founder-bullets li,
.rf-promo-nearby .rf-promo-steps li {
  font-size: 14.5px;
}
.rf-promo-nearby .rf-promo-steps {
  gap: 14px;
  margin-top: 14px;
}
/* Each card's icon, large and faint, tucked into the bottom corner. */
.rf-promo-card {
  position: relative;
  overflow: hidden;
}
.rf-promo-watermark {
  position: absolute;
  right: -36px;
  bottom: -44px;
  width: 190px;
  height: 190px;
  color: #fff;
  opacity: 0.08;
  transform: rotate(-14deg);
  pointer-events: none;
  z-index: 0;
}

/* Founder pill: a small crown and "Founder", marking a founder's own things. */
.rf-founder-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid #f0d2cb;
  background: var(--cream);
  color: var(--red-deep);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.rf-founder-pill svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
/* On a tool card it sits above the title, like Studio's Pro pill. */
.rf-founder-pill-card {
  margin: 0 0 14px;
}

/* A founder's store card and rate-held tool cards: the crown, faint, in the
   bottom corner — the same touch as the dashboard's card row. */
.rf-activity-founder,
.tool-card.held {
  position: relative;
  overflow: hidden;
}
.rf-activity-founder > *,
.tool-card.held > * {
  position: relative;
  z-index: 1;
}
.rf-activity-founder > .rf-promo-watermark,
.tool-card.held > .rf-promo-watermark {
  position: absolute;
  z-index: 0;
  color: var(--red-deep);
  opacity: 0.06;
}
.tool-card.held > .rf-promo-watermark {
  width: 150px;
  height: 150px;
  right: -30px;
  bottom: -34px;
}
/* The held chip keeps its own corner position. */
.tool-card.held > .held-chip {
  position: absolute;
}

/* Sign-in founders card, in the dashboard cards' style. */
.rf-signin-founders {
  position: relative;
  overflow: hidden;
}
.rf-signin-founders > :not(.rf-promo-watermark) {
  position: relative;
  z-index: 1;
}
.rf-signin-founders .flagship-badge {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}
.rf-signin-founders .rf-promo-box {
  max-width: 700px;
  margin-top: 16px;
}
.rf-signin-founders .rf-promo-box .rf-founder-bullets {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
}
@media (max-width: 640px) {
  .rf-signin-founders .rf-promo-box .rf-founder-bullets {
    grid-template-columns: 1fr;
  }
}
.rf-signin-founders .rf-promo-box .rf-founder-bullets li {
  font-size: 13.5px;
  text-wrap: wrap;
}
.rf-signin-founders > .rf-promo-watermark {
  width: 240px;
  height: 240px;
  right: -40px;
  bottom: -60px;
}
.rf-signin-founders .flagship-badge {
  color: #fff;
}
/* With eight perks the founder list is the longest, so it matches
   consulting's lists rather than reading a size up. */
.rf-promo-founder .rf-promo-box .rf-founder-bullets {
  gap: 4px;
  margin-top: 8px;
}
.rf-promo-founder .rf-promo-box .rf-founder-bullets li {
  font-size: 13px;
}
.rf-promo-founder .rf-promo-box {
  padding: 14px 16px;
}
@media (max-width: 640px) {
  .rf-signin-founders .rf-promo-box .rf-founder-bullets li {
    text-wrap: balance;
  }
}
@media (max-width: 640px) {
  .rf-signin-founders .rf-promo-box .rf-founder-bullets li {
    text-wrap: balance;
  }
}
/* Nearby's Connected button: the green dot inside a white pill. */
.rf-nearby-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-decoration: none;
}
.rf-nearby-open .flagship-status-dot {
  flex-shrink: 0;
  background: #16a34a;
}

/* "Which offers land": heading and the Most popular / Most recent switch. */
.rf-reach-offers-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.rf-reach-offers-bar .rf-reach-offers-head {
  margin-bottom: 0;
}
/* Coupons as one sideways row, the next one peeking in at the edge. */
.rf-coupons.is-row {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px) / 3.2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding: 2px 2px 14px;
  margin: 0 -2px;
  scrollbar-width: thin;
}
.rf-coupons.is-row > .rf-coupon {
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  .rf-coupons.is-row {
    grid-auto-columns: calc((100% - 12px) / 2.2);
  }
}
@media (max-width: 520px) {
  .rf-coupons.is-row {
    grid-template-columns: none;
    grid-auto-columns: 82%;
  }
}
.rf-coupons-more {
  display: block;
  margin: 6px auto 0;
  padding: 6px 12px;
  border: none;
  background: none;
  color: var(--red-deep);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
/* Connected: a soft see-through pill like the boxes above, white text. */
.rf-nearby-open.pill-btn-white {
  background: #ffffff2e;
  color: #fff;
  border: none;
  box-shadow: none;
}
.rf-nearby-open.pill-btn-white:hover {
  background: #ffffff40;
  color: #fff;
}
.rf-nearby-open .flagship-status-dot {
  background: #4ade80;
}
/* Form intros: no word left alone on the last line. */
.rf-force-pw-sub {
  text-wrap: pretty;
}

/* What shoppers spent with an offer, at the top of the Nearby panel. */
.rf-sales {
  margin-bottom: 22px;
}

.rf-sales-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
}
.rf-sales-grid.is-empty {
  grid-template-columns: minmax(0, 1fr);
}
.rf-sales-hero {
  position: relative;
  overflow: hidden;
  padding: 24px 26px;
  border-radius: 20px;
  color: var(--white);
  background: radial-gradient(150% 150% at 30% 118%, #f9a316 0%, #f9a316 12%, #e0262f 50%, var(--red-deep) 85%);
}
.rf-sales-watermark {
  position: absolute;
  right: -6px;
  bottom: -62px;
  width: 200px;
  height: 200px;
  opacity: 0.13;
  transform: rotate(-12deg);
  pointer-events: none;
}
.rf-sales-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
}
.rf-sales-big {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 60px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.rf-sales-sub {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0.92;
  text-wrap: pretty;
}
.rf-sales-times {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #ffffff26;
}
.rf-sales-times b {
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
}
.rf-sales-times span {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}
.rf-sales-cells {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-content: start;
}
.rf-sales-cell {
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--paper);
  border: 1.5px solid #f0e4e1;
}
.rf-sales-cell.is-wide {
  grid-column: 1 / -1;
}
.rf-sales-cell-big {
  font-size: 34px;
  font-weight: 900;
  line-height: 1.05;
  color: var(--red-deep);
}
.rf-sales-cell-label {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
.rf-sales-cell.is-wide > .rf-sales-cell-label:first-child {
  margin-top: 0;
}
.rf-sales-cell-sub {
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--stone);
}
.rf-sales-split {
  display: flex;
  height: 12px;
  margin-top: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #f3e5e2;
}
.rf-sales-split i {
  display: block;
  height: 100%;
}
.rf-sales-split .is-item,
.rf-sales-legend .is-item {
  background: var(--red-deep);
}
.rf-sales-split .is-other,
.rf-sales-legend .is-other {
  background: #f9a316;
}
.rf-sales-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #57534e;
}
.rf-sales-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: -1px;
}
.rf-sales-foot {
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--stone);
}
@media (max-width: 860px) {
  .rf-sales-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 480px) {

  .rf-sales-hero {
    padding: 20px;
  }
  .rf-sales-big {
    font-size: 48px;
  }
  .rf-sales-cells {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Sales on an offer's coupon, from Square. */
.rf-coupon-money {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  min-width: 0;
}
.rf-coupon-money.is-empty {
  visibility: hidden;
}
/* The notches move up with the tear line, which the money row pushes up. */

.rf-coupon-money span:first-child {
  flex: none;
}
.rf-coupon-money span {
  flex: 0 1 auto;
  min-width: 0;
  line-height: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffffff26;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* The Square till on the Nearby card, quieter than the button beside it. */
.flagship-connected > .flagship-square,
.flagship-connected > .flagship-store-link:last-child {
  margin: 0 auto;
}
.flagship-square {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--white);
  opacity: 0.9;
}
/* Four ranges on a narrow phone: each stays on one line. */
@media (max-width: 380px) {
  .rf-activity-range-btn {
    padding: 6px 10px;
    font-size: 12.5px;
    white-space: nowrap;
  }
}

/* Nearby button: one line at every card width. */
.rf-nearby-open {
  white-space: nowrap;
  padding-left: 14px;
  padding-right: 14px;
}
@media (max-width: 1360px) {
  .rf-nearby-open {
    font-size: 13.5px;
  }
}
@media (max-width: 1100px) and (min-width: 1001px) {
  .rf-nearby-open {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12.5px;
    gap: 6px;
  }
}

/* Which offers land, when the chosen list has nothing in it. */
.rf-coupons-empty {
  margin: 4px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--stone);
}


/* Highlights and counts, styled to sit with the sales block above. */
.rf-reach-notes { grid-template-columns: repeat(12, 1fr); gap: 14px; margin: 24px 0 16px; }
.rf-reach-note {
  position: relative; overflow: hidden; justify-content: flex-start; min-height: 0;
  padding: 20px 20px 18px; background: #fff; border: 1.5px solid #f0e4e1;
  border-radius: 18px; box-shadow: 0 10px 24px -18px rgba(187,0,22,.45);
}
.rf-reach-note::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--red-deep), #e0262f 55%, #f9a316);
}
.rf-reach-note-top { display: flex; align-items: center; gap: 10px; }
.rf-reach-icon {
  flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 12px; color: #fff;
  background: radial-gradient(130% 130% at 20% 110%, #f9a316 0%, #e0262f 55%, var(--red-deep) 100%);
  box-shadow: 0 6px 14px -8px rgba(187,0,22,.7);
}
.rf-reach-icon svg { width: 18px; height: 18px; }
.rf-reach-note-label { font-size: 11px; letter-spacing: .08em; }
.rf-reach-note-big {
  margin-top: 12px; font-size: 34px; line-height: .95; color: var(--red-deep);
}
.rf-reach-note-sub { margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: #57534e; }
.rf-reach-note-go { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 800; color: var(--red-deep); }
a.rf-reach-note:hover { border-color: var(--red-deep); }
a.rf-reach-note:hover .rf-reach-note-sub { color: #57534e; }
a.rf-reach-note:hover .rf-reach-note-go { text-decoration: underline; }

/* The counts sit as one band in the sales colors, up to four a row. */
.rf-reach-cells {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; padding: 8px;
  border-radius: 20px; position: relative; overflow: hidden;
  background: radial-gradient(150% 260% at 15% 140%, #f9a316 0%, #f9a316 8%, #e0262f 45%, var(--red-deep) 85%);
}
.rf-reach-cell {
  grid-column: span var(--rf-span, 3); justify-content: flex-start; min-width: 0; min-height: 0;
  padding: 16px 18px; border: 0; border-radius: 0; background: transparent; color: #fff;
  border-left: 1px solid rgba(255,255,255,.22);
}
.rf-reach-cell.is-row-start { border-left: 0; }
.rf-reach-cell.is-next-row { border-top: 1px solid rgba(255,255,255,.18); }
.rf-reach-cell-top { display: flex; align-items: center; gap: 10px; }
.rf-reach-cell .rf-reach-icon { width: 30px; height: 30px; border-radius: 10px; background: rgba(255,255,255,.18); box-shadow: none; }
.rf-reach-cell .rf-reach-icon svg { width: 16px; height: 16px; }
.rf-reach-figure { font-size: 50px; line-height: .75; margin-top: 4px; color: #fff; }
.rf-reach-label { margin-top: 12px; font-size: 15px; color: #fff; }
.rf-reach-sub { margin-top: 3px; font-size: 12.5px; color: rgba(255,255,255,.82); }

@media (width<=820px) {
  .rf-reach-notes { grid-template-columns: 1fr; }
  .rf-reach-notes > * { grid-column: auto !important; }
  .rf-reach-cells { grid-template-columns: repeat(2, 1fr); }
  .rf-reach-cell { grid-column: auto; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
  .rf-reach-cell:nth-child(even) { border-left: 1px solid rgba(255,255,255,.22); }
  .rf-reach-cell:nth-child(-n+2) { border-top: 0; }
  .rf-reach-cells > :last-child:nth-child(odd) { grid-column: span 2; }
}

/* A post's links on a coupon, kept small so the sales lead. */
.rf-coupon-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.rf-coupon-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.rf-coupon-links a:hover {
  color: #fff;
  box-shadow: inset 0 0 0 1px #fff;
}
.rf-coupon-links svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.rf-coupon-links.is-light {
  margin: 0;
  flex-wrap: nowrap;
}
.rf-coupon-links.is-light a {
  color: var(--red-deep);
  box-shadow: inset 0 0 0 1px var(--line);
}
.rf-coupon-links.is-light a:hover {
  box-shadow: inset 0 0 0 1px var(--red-deep);
}

/* The most popular redeemed offer. */
.rf-coupon-best {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #facc15;
  color: #1c1917;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Number first, then the icon. */
.rf-reach-cell-top {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.rf-reach-figure {
  font-size: 72px;
}
.rf-reach-label {
  margin-top: -8px;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
@media (width<=820px) {
  .rf-reach-figure {
    font-size: 60px;
  }
  .rf-reach-label {
    font-size: 24px;
  }
}


/* Highlight cards read name first, then the number, then one line. */
.rf-reach-note-label {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.15;
  color: var(--ink);
}
.rf-reach-note-big {
  margin-top: 12px;
  font-size: 32px;
  line-height: 1;
}
.rf-reach-note-big.is-name {
  font-size: 22px;
  line-height: 1.2;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-reach-note-sub {
  margin-top: 6px;
}

/* Icon on the left; name, number and its line in one column beside it. */
.rf-reach-note {
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
}
.rf-reach-note-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  align-self: stretch;
}
.rf-reach-note-label {
  min-height: 36px;
  display: flex;
  align-items: center;
}
.rf-reach-note .rf-reach-icon {
  width: 36px;
  height: 36px;
}
.rf-reach-note-big {
  margin-top: 6px;
}
.rf-reach-note-sub {
  margin-top: 4px;
  font-size: 14px;
}
.rf-reach-note-big {
  line-height: 0.85;
}
.rf-reach-note-big.is-name {
  line-height: 1.2;
}
.rf-reach-note-sub {
  margin-top: 0;
}
.rf-coupon-links.is-empty {
  visibility: hidden;
}
.rf-coupon-links.is-empty span {
  display: inline-flex;
  padding: 5px 10px;
  font-size: 11.5px;
  line-height: 1.15;
}
.rf-coupon-links.rf-reach-note-links {
  margin-top: 12px;
}
/* Number first and big, then the card's name, then its line. */
.rf-reach-note-big {
  order: -1;
  margin-top: 0;
  font-size: 46px;
  line-height: 0.85;
  min-height: 36px;
  display: flex;
  align-items: center;
}
.rf-reach-note-big.is-name {
  display: block;
  font-size: 24px;
  line-height: 1.5;
}
.rf-reach-note-label {
  min-height: 0;
  margin-top: 6px;
}
/* The post's name on Most viewed post, kept to one line. */
.rf-reach-note-sub {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Each counter's icon sits large and faint in its bottom-right corner, like
   the bag on the sales card. A box on the band's right or bottom edge lets
   its icon run on through the band's padding, so the band's own edge cuts
   it off there, the same as a divider does inside the band. */
.rf-reach-cell {
  position: relative;
  overflow: visible;
  clip-path: inset(0 var(--rf-clip-r, 0px) var(--rf-clip-b, 0px) 0);
}
.rf-reach-cell.is-row-end {
  --rf-clip-r: -8px;
}
.rf-reach-cell.is-last-row {
  --rf-clip-b: -8px;
}
@media (width<=820px) {
  /* Two to a row: the second of each pair, and the last row, are on the edge. */
  .rf-reach-cell,
  .rf-reach-cell.is-row-end,
  .rf-reach-cell.is-last-row {
    --rf-clip-r: 0px;
    --rf-clip-b: 0px;
  }
  .rf-reach-cell:nth-child(even),
  .rf-reach-cell:last-child {
    --rf-clip-r: -8px;
  }
  .rf-reach-cell:last-child,
  .rf-reach-cell:nth-last-child(2):nth-child(odd) {
    --rf-clip-b: -8px;
  }
}
.rf-reach-cell .rf-reach-icon {
  position: absolute;
  right: -10px;
  bottom: -18px;
  width: 96px;
  height: 96px;
  border-radius: 0;
  background: none;
  opacity: 0.16;
  transform: rotate(-12deg);
  pointer-events: none;
}
.rf-reach-cell .rf-reach-icon svg {
  width: 96px;
  height: 96px;
  stroke-width: 1.6;
}
.rf-reach-cell > *:not(.rf-reach-cell-top) {
  position: relative;
}
@media (width<=820px) {
  .rf-reach-note-big {
    font-size: 40px;
  }
}

/* Promo cards: Nearby and founder pricing side by side, consulting as a
   full-width row underneath (name on the left, what's included in the
   middle, price and button on the right). A card alone in a row spreads
   across the same way. */
@media (width>1100px) {
  .rf-promo-row {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  :is(.rf-promo-consult, .rf-promo-nearby:not(:has(+ .rf-promo-founder))) {
    grid-column: 1 / -1;
    padding: 30px 34px;
  }
  :is(.rf-promo-consult, .rf-promo-nearby:not(:has(+ .rf-promo-founder))) .rf-promo-inner {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(270px, 0.9fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 24px;
    align-items: start;
  }
  :is(.rf-promo-consult, .rf-promo-nearby:not(:has(+ .rf-promo-founder))) .flagship-badge {
    grid-column: 1;
    grid-row: 1;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
  }
  :is(.rf-promo-consult, .rf-promo-nearby:not(:has(+ .rf-promo-founder))) .eyebrow-tag,
  :is(.rf-promo-consult, .rf-promo-nearby:not(:has(+ .rf-promo-founder))) .bundle-card-eyebrow {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  :is(.rf-promo-consult, .rf-promo-nearby:not(:has(+ .rf-promo-founder))) .rf-promo-inner > h2,
  :is(.rf-promo-consult, .rf-promo-nearby:not(:has(+ .rf-promo-founder))) .rf-promo-inner > h3 {
    grid-column: 1;
    grid-row: 3;
  }
  :is(.rf-promo-consult, .rf-promo-nearby:not(:has(+ .rf-promo-founder))) .rf-promo-inner > p {
    grid-column: 1;
    grid-row: 4;
    margin-bottom: 0;
  }
  :is(.rf-promo-consult, .rf-promo-nearby:not(:has(+ .rf-promo-founder))) .rf-promo-inner > .rf-promo-box,
  :is(.rf-promo-consult, .rf-promo-nearby:not(:has(+ .rf-promo-founder))) .rf-promo-inner > .rf-consult-block {
    grid-row: 1 / span 4;
    margin: 0;
    align-self: stretch;
  }
  :is(.rf-promo-consult, .rf-promo-nearby:not(:has(+ .rf-promo-founder))) .rf-promo-inner > :nth-child(5) {
    grid-column: 2;
  }
  :is(.rf-promo-consult, .rf-promo-nearby:not(:has(+ .rf-promo-founder))) .rf-promo-inner > :nth-child(6) {
    grid-column: 3;
  }
  :is(.rf-promo-consult, .rf-promo-nearby:not(:has(+ .rf-promo-founder))) .rf-promo-inner > .flagship-connected,
  :is(.rf-promo-consult, .rf-promo-nearby:not(:has(+ .rf-promo-founder))) .rf-promo-inner > .rf-consult-actions {
    grid-column: 4;
    grid-row: 1 / span 4;
    align-self: center;
    justify-self: center;
    margin: 0;
    padding-top: 0;
    text-align: center;
  }
}

/* Best deal sits above the offer's own text, so neither has to squeeze. */
.rf-coupon .rf-coupon-best {
  position: static;
  align-self: flex-start;
  margin-bottom: 4px;
}

/* The offer row: a flex strip so only the coupons near view need to be on
   the page; the pads stand in for the rest. */
.rf-coupons.is-row {
  display: flex;
  gap: 12px;
  /* Proximity, so a jump along the scroll bar isn't pulled back. */
  scroll-snap-type: x proximity;
}
.rf-coupons.is-row > .rf-coupon {
  flex: 0 0 calc((100% - 24px) / 3.2);
  min-width: 0;
}
.rf-coupons-pad {
  flex: 0 0 auto;
}
.rf-coupons-loading {
  flex: 0 0 60px;
  align-self: center;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--red-deep);
  width: 28px;
  flex-basis: 28px;
  margin: 0 16px;
  animation: rf-spin 0.8s linear infinite;
}
@keyframes rf-spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 900px) {
  .rf-coupons.is-row > .rf-coupon {
    flex-basis: calc((100% - 12px) / 2.2);
  }
}
@media (max-width: 520px) {
  .rf-coupons.is-row > .rf-coupon {
    flex-basis: 82%;
  }
}

/* Search beside the order switch; a full row of its own on a phone. */
.rf-offer-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  max-width: 340px;
  margin-left: auto;
  padding: 0 14px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--stone);
}
.rf-offer-search:focus-within {
  border-color: var(--red-deep);
}
.rf-offer-search svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.rf-offer-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
@media (max-width: 640px) {
  .rf-offer-search {
    order: 3;
    flex-basis: 100%;
    max-width: none;
    margin-left: 0;
  }
}
.rf-offer-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}
.rf-offer-search-clear {
  flex-shrink: 0;
  border: 0;
  background: none;
  padding: 0 2px;
  font-size: 22px;
  line-height: 1;
  color: var(--stone);
  cursor: pointer;
}
.rf-offer-search-clear:hover {
  color: var(--red-deep);
}

/* Row or grid, beside Most popular / Most recent. */
.rf-offer-view .rf-activity-range-btn {
  /* Its tooltip sits by the icon, not the middle of the offers. */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
}
.rf-offer-view svg {
  width: 18px;
  height: 18px;
}

/* The sliders button inside the search, as in the Studio. */
.rf-offer-search {
  padding-right: 5px;
}
.rf-offer-adv-btn {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--stone);
  cursor: pointer;
}
.rf-offer-adv-btn:hover {
  color: var(--red-deep);
}
.rf-offer-adv-btn svg {
  width: 18px;
  height: 18px;
}
.rf-offer-adv-knob {
  fill: #fff;
}
.rf-offer-adv-btn.is-on {
  background: rgba(187, 0, 22, 0.1);
  color: var(--red-deep);
}
.rf-offer-adv-btn.is-on .rf-offer-adv-knob {
  fill: #f9e5e7;
}
.rf-offer-adv-n {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red-deep);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

/* The filters float over the coupons, just under the bar, so opening them
   never moves the page. Their top stays where they'd sit in the page. */
.rf-reach-offers {
  position: relative;
}
.rf-offer-adv {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  margin-top: -4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
  padding: 20px 22px;
  border: 1px solid #e6bdb9;
  border-radius: 16px;
  background: rgb(255 255 255 / 96%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 5%),
    0 4px 14px #bb001612;
  max-height: min(70vh, 640px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.3s;
}
.rf-offer-adv.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.rf-offer-adv-field {
  min-width: 0;
}
.rf-offer-adv-label {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}
.rf-offer-adv-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rf-offer-adv-row button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1.5px solid #eee5e2;
  border-radius: 999px;
  background: #fff;
  color: #57534e;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.rf-offer-adv-row button:hover {
  border-color: #e6bdb9;
}
.rf-offer-adv-row button.is-on {
  border-color: var(--red-deep);
  background: rgba(187, 0, 22, 0.08);
  color: var(--red-deep);
}
.rf-offer-adv-av {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: #e9d9d5;
  color: #57534e;
  font-size: 10px;
  font-weight: 800;
}
.rf-offer-adv-dates {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--stone);
}
/* The date as "Oct 31, 2026" over the box, which keeps its own picker.
   Android draws the date in a different part of the box, so the box's own
   text is hidden too, as in Store hours. */
.rf-offer-date {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 170px;
}
.rf-offer-date input {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  padding: 0 10px 0 12px;
  border: 1.5px solid #eee5e2;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.rf-offer-date input::-webkit-datetime-edit,
.rf-offer-date input::-webkit-date-and-time-value {
  opacity: 0;
}
.rf-offer-date input:focus {
  outline: 0;
  border-color: var(--red-deep);
}
.rf-offer-date-shown {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}
.rf-offer-date-shown.is-empty {
  color: #78716c;
}
.rf-offer-adv-foot {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2px;
  font-size: 13px;
  color: var(--stone);
}
.rf-offer-adv-foot button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--red-deep);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
@media (max-width: 640px) {
  .rf-offer-adv {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  /* "Your offers" and the view switch share the top line; the order switch
     and the search each get a line of their own. */
  .rf-reach-offers-bar .rf-reach-offers-head {
    order: 0;
  }
  .rf-offer-view {
    order: 1;
    margin-left: auto;
  }
  .rf-offer-sort {
    order: 2;
  }
}

/* The grid: 3 across and 2½ rows tall on a computer, scrolling down
   inside its box (its height is set from the coupons'); two rows scrolling
   across on a phone, the next column peeking in. */
.rf-coupons.is-grid {
  box-sizing: border-box;
  padding: 2px 2px 14px;
  margin: 0 -2px;
  overflow-y: auto;
}
@media (max-width: 520px) {
  .rf-coupons.is-grid {
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }
  .rf-coupons.is-grid > .rf-coupon {
    scroll-snap-align: start;
  }
}
.rf-coupons-loading-grid {
  display: block;
  margin: 6px auto 0;
}

/* The offer row's scroll bar, the grid's the same: thin and rounded in the
   brand red. */
.rf-coupons.is-row,
.rf-coupons.is-grid {
  scrollbar-width: thin;
  scrollbar-color: rgba(187, 0, 22, 0.45) transparent;
}
.rf-coupons.is-row::-webkit-scrollbar,
.rf-coupons.is-grid::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.rf-coupons.is-row::-webkit-scrollbar-track,
.rf-coupons.is-grid::-webkit-scrollbar-track {
  margin: 0 4px;
  border-radius: 999px;
  background: #f3e5e2;
}
.rf-coupons.is-row::-webkit-scrollbar-thumb,
.rf-coupons.is-grid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(187, 0, 22, 0.45);
}
.rf-coupons.is-row::-webkit-scrollbar-thumb:hover,
.rf-coupons.is-grid::-webkit-scrollbar-thumb:hover {
  background: var(--red-deep);
}
/* Counters first, highlights under them. */
.rf-reach-cells {
  margin-top: 24px;
}
.rf-reach-notes {
  margin: 16px 0 0;
}
/* Sized so four cards fit across without the number wrapping. */
.rf-reach-note-big {
  font-size: 40px;
}
.rf-reach-note .rf-coupon-links {
  flex-wrap: wrap;
}
.rf-reach-note .rf-reach-icon {
  width: 34px;
  height: 34px;
}
.rf-reach-note {
  gap: 12px;
  padding: 20px 18px 18px;
}

/* The post behind a highlight card: photo beside its details, no box. */
.rf-reach-note-post {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.rf-reach-note-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
}
.rf-reach-note-post-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rf-reach-note-offer-title {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-reach-note-offer-deal {
  font-size: 13px;
  color: #57534e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-reach-note-offer-deal b {
  color: var(--red-deep);
}
.rf-reach-note-offer-nums {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--stone);
}
.rf-reach-note-offer-sales {
  color: var(--red-deep);
}

/* A card about a post: its usual layout, with the post beside it on a
   wide screen and under it otherwise. */
.rf-reach-note.has-post {
  flex-wrap: wrap;
}
.rf-reach-note.has-post .rf-reach-note-body {
  flex: 1 1 0;
}
.rf-reach-note.has-post .rf-reach-note-post {
  flex: 1 1 100%;
  flex-direction: row;
  align-items: center;
  margin: 4px 0 0;
  padding: 12px 0 0;
  border-left: 0;
  border-top: 1px solid var(--line);
}
.rf-reach-note.has-post .rf-reach-note-post-text {
  flex: 1;
}
.rf-reach-note-offer-nums {
  white-space: normal;
}
@media (width>1100px) {
  .rf-reach-note.has-post {
    flex-wrap: nowrap;
  }
  .rf-reach-note.has-post .rf-reach-note-post {
    flex: 0 0 40%;
    align-self: stretch;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0 0 0 16px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .rf-reach-note.has-post .rf-reach-note-post-text {
    width: 100%;
  }
  .rf-reach-note.has-post .rf-reach-note-thumb {
    width: 72px;
    height: 72px;
  }
}
.rf-reach-note-offer-sales {
  font-size: 12.5px;
  font-weight: 800;
}

/* The * on the sign-in founders card's price. */
.rf-signin-founders .bundle-card-amount .price-card-mark {
  font-size: 0.5em;
  vertical-align: super;
  margin-left: 1px;
}


/* The camera screen for scanning an offer code (qr-reader.js). */
.rf-scan {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  background: #0c0a09;
  color: #fff;
  font-family: var(--font-sans);
}
.rf-scan-top {
  padding: 22px 20px 14px;
  text-align: center;
}
.rf-scan-top b {
  display: block;
  font-size: 19px;
  font-weight: 800;
}
.rf-scan-top small {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  color: #d6d3d1;
  text-wrap: balance;
}
.rf-scan-view {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 60%, #57534e 0%, #292524 55%, #0c0a09 100%);
}
.rf-scan-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rf-scan-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(240px, 64vw);
  height: min(240px, 64vw);
  transform: translate(-50%, -50%);
  border-radius: 20px;
  /* Darkens the camera around the frame, following its rounded corners. */
  box-shadow: 0 0 0 100vmax rgba(12, 10, 9, 0.55);
  z-index: 2;
}
.rf-scan-frame i {
  position: absolute;
  width: 42px;
  height: 42px;
  border: 4px solid #fff;
  transition: border-color 0.15s;
}
.rf-scan-frame i:nth-child(1) { left: -2px; top: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 20px; }
.rf-scan-frame i:nth-child(2) { right: -2px; top: -2px; border-left: 0; border-bottom: 0; border-top-right-radius: 20px; }
.rf-scan-frame i:nth-child(3) { left: -2px; bottom: -2px; border-right: 0; border-top: 0; border-bottom-left-radius: 20px; }
.rf-scan-frame i:nth-child(4) { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 20px; }
.rf-scan-frame.is-hit i {
  border-color: #22c55e;
}
.rf-scan-note {
  display: none;
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}
.rf-scan.is-note .rf-scan-note {
  display: block;
}
.rf-scan.is-note .rf-scan-frame,
.rf-scan.is-note .rf-scan-video {
  display: none;
}
.rf-scan-note b {
  display: block;
  font-size: 18px;
  font-weight: 800;
}
.rf-scan-note small {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: #d6d3d1;
  text-wrap: balance;
}
.rf-scan-wrong {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--red-deep);
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.rf-scan.is-wrong .rf-scan-wrong {
  opacity: 1;
}
.rf-scan-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 20px max(26px, env(safe-area-inset-bottom));
}
.rf-scan-bottom button {
  padding: 14px;
  border-radius: 999px;
  border: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.rf-scan-type {
  background: #fff;
  color: var(--ink);
}
.rf-scan-cancel {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px #57534e;
}

/* Start here: the three setup steps for a new store. */
.rf-start-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.rf-start-step:first-of-type {
  margin-top: 8px;
  border-top: 0;
}
.rf-start-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f5f0ee;
  font-size: 14px;
  font-weight: 800;
  color: #57534e;
}
.rf-start-num.is-next {
  background: var(--red-deep);
  color: var(--white);
}
.rf-start-step.is-done .rf-start-num {
  background: #dcfce7;
  color: #15803d;
}
.rf-start-text {
  flex: 1;
  min-width: 0;
}
.rf-start-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}
.rf-start-sub {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--stone);
}
.rf-start-step.is-done .rf-start-title,
.rf-start-step.is-done .rf-start-sub {
  opacity: 0.6;
}
.rf-start-btn {
  flex: none;
  line-height: 1.15;
  text-decoration: none;
}
.rf-start-done {
  flex: none;
  padding-top: 5px;
  font-size: 13px;
  font-weight: 800;
  color: #15803d;
}

/* Make a post: three ways in, then the next post going out. */
.rf-make-tiles {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.rf-make-tile {
  flex: 1;
  min-width: 0;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px;
  border: 1.5px solid #f1e4e0;
  border-radius: 16px;
  background: var(--white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
}
.rf-make-tile:hover {
  border-color: var(--red-deep);
}
.rf-make-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(205% 205% at 46% 78%, #fea121 0%, #fea121 15%, #e1272b 47%, #bb0016 80%);
}
.rf-make-tile-sub {
  margin-top: -3px;
  font-size: 11px;
  font-weight: 600;
  color: #a8a29e;
}
.rf-next {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
/* On a computer the next post sits beside Make a post, not under it. */
@media (min-width: 900px) {
  .rf-make:has(.rf-next) {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  .rf-make:has(.rf-next) > :not(.rf-next) {
    grid-column: 1;
  }
  .rf-make > .rf-next {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: stretch;
    margin-top: 0;
    padding: 0 0 0 28px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .rf-make-tile {
    padding: 22px 6px 20px;
  }
  /* Room for the next two posts here, one under the other. */
  .rf-make .rf-next-row.is-second {
    display: flex;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .rf-next-eyebrow.has-two .rf-next-one {
    display: none;
  }
  .rf-next-eyebrow.has-two .rf-next-two {
    display: inline;
  }
}
.rf-next-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.rf-next-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--stone);
}
.rf-next-all {
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--red-deep);
}
.rf-next-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  text-decoration: none;
  color: var(--ink);
}
/* A phone shows only the next one. */
.rf-next-row.is-second,
.rf-next-two {
  display: none;
}
.rf-next-photo {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  background: #f5f0ee;
}
.rf-next-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rf-next-title,
.rf-next-caption {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rf-next-title {
  font-size: 14px;
  font-weight: 800;
}
.rf-next-caption {
  margin-top: 2px;
  font-size: 12px;
  color: #57534e;
}
.rf-next-when {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
}
.rf-next-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.rf-next-icons > span {
  display: inline-flex;
}

/* Store hours: one row for every day, and the days it's closed. */
.rf-store-same {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 2px 0 4px;
  cursor: pointer;
}
.rf-store-same-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.rf-store-same-note {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--stone);
}
.rf-store-closed-on {
  margin-top: 12px;
}
.rf-store-closed-on-name {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

/* Links and buttons in Connected accounts are the same height. */
.rf-conn-group .pill-btn {
  line-height: 1.15;
}

/* The phone or browser is blocking alerts. */
.rf-nt-blocked {
  margin: 8px 0 4px;
  padding: 8px 10px;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  background: #fff7ed;
  font-size: 12.5px;
  line-height: 1.4;
  color: #9a3412;
}

/* Make a post: big gradient buttons. */
.rf-make-tiles {
  gap: 8px;
}
.rf-make-tile {
  max-width: none;
  justify-content: flex-start;
  gap: 8px;
  padding: 16px 4px;
  border: 0;
  border-radius: 20px;
  background: radial-gradient(150% 120% at 50% 115%, #fea121 0%, #e1272b 48%, #bb0016 88%);
  box-shadow: 0 8px 18px rgb(187 0 22 / 22%), inset 0 1px 0 rgb(255 255 255 / 25%);
  color: var(--white);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rf-make-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgb(187 0 22 / 28%), inset 0 1px 0 rgb(255 255 255 / 25%);
}
.rf-make-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgb(255 255 255 / 18%);
  border: 1px solid rgb(255 255 255 / 35%);
}
.rf-make-icon svg {
  width: 34px;
  height: 34px;
}
/* One line, a touch smaller on a narrow phone. */
.rf-make-tile-sub {
  margin-top: -3px;
  font-size: min(11.5px, 2.95vw);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  color: rgb(255 255 255 / 80%);
}

/* The business name in the page font, not Dongle. */
.rf-activity-store-name,
.rf-activity-store-name.is-action {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  padding-bottom: 0;
}
@media (width<=820px) {
  .rf-activity-store-name {
    font-size: 22px;
  }
}

/* Sign-up page on a computer: "See what you get" at the foot of the screen. */
.rf-more-cue {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 22px;
  box-sizing: border-box;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff 62%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.rf-more-cue.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}
.rf-more-cue-btn {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #1c1917;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.rf-more-cue-btn i {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(160deg, #e1272b, #bb0016);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 8px rgb(187 0 22 / 9%), 0 10px 24px rgb(187 0 22 / 28%);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.rf-more-cue-btn svg {
  width: 24px;
  height: 24px;
  margin-top: 2px;
}
.rf-more-cue-btn:hover i,
.rf-more-cue-btn:focus-visible i {
  box-shadow: 0 0 0 10px rgb(187 0 22 / 13%), 0 12px 28px rgb(187 0 22 / 36%);
}
@media (prefers-reduced-motion: no-preference) {
  .rf-more-cue.is-on .rf-more-cue-btn i {
    animation: rf-more-bob 3.2s ease-in-out 1.2s infinite;
  }
}
@keyframes rf-more-bob {
  0%, 70%, 100% { transform: translateY(0); }
  80% { transform: translateY(6px); }
  90% { transform: translateY(0); }
}
@media (width<=860px) {
  .rf-more-cue { display: none; }
}

/* Store details: Save stays at the foot of the card, the form fading under it. */
.rf-store-card:has(.rf-store-savebar) {
  padding-bottom: 0;
}
.rf-store-savebar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -28px;
  padding: 26px 28px 22px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), var(--white) 24px);
}
.rf-store-savebar .rf-force-pw-error {
  margin-bottom: 10px;
}

/* Offers row: arrows at the ends on every screen, shown where there's more. */
.rf-coupons-wrap {
  position: relative;
}
.rf-coupons-arrow {
  position: absolute;
  top: calc(50% - 7px);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 1px solid #eee5e2;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease, color 0.15s ease;
}
.rf-coupons-arrow svg {
  width: 20px;
  height: 20px;
}
.rf-coupons-arrow.is-prev {
  left: 6px;
}
.rf-coupons-arrow.is-next {
  right: 6px;
}
/* The grid that scrolls down: arrows centred at its top and bottom. */
.rf-coupons-arrow.is-down {
  left: 50%;
  right: auto;
  margin-top: 0;
  margin-left: -20px;
}
.rf-coupons-arrow.is-down.is-prev {
  top: 6px;
}
.rf-coupons-arrow.is-down.is-next {
  top: auto;
  bottom: 20px;
}
@media (hover: hover) {
  .rf-coupons-arrow:hover {
    color: var(--red-deep);
    transform: scale(1.06);
  }
}
.rf-coupons-arrow.is-off {
  opacity: 0;
  pointer-events: none;
}
@media (width <= 640px) {
  .rf-coupons-arrow {
    width: 34px;
    height: 34px;
    margin-top: -17px;
  }
  .rf-coupons-arrow svg {
    width: 18px;
    height: 18px;
  }
  .rf-coupons-arrow.is-prev {
    left: 4px;
  }
  .rf-coupons-arrow.is-next {
    right: 4px;
  }
}

/* Dashboard highlights: a card for each post worth a look, then the figures
   in one strip. */
.rf-hl {
  margin: 22px 0 4px;
  font-family: var(--font-sans);
}
.rf-hl-head {
  margin: 0 0 12px 2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}
.rf-hl-spots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.rf-hl-spot,
.rf-hl-glance {
  border: 1px solid #f0e4e1;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 1px 3px rgb(28 25 23 / 5%);
}
.rf-hl-spot {
  display: flex;
  gap: 16px;
  min-width: 0;
  padding: 16px;
}
.rf-hl-photo {
  flex: none;
  width: 112px;
  height: 112px;
  border-radius: 14px;
  object-fit: cover;
}
.rf-hl-photo.is-empty {
  display: grid;
  place-items: center;
  background: #fbeceb;
}
.rf-hl-photo.is-empty .rf-reach-icon {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  color: var(--red-deep);
}
.rf-hl-photo.is-empty svg {
  width: 34px;
  height: 34px;
}
.rf-hl-spot-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.rf-hl-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 9999px;
  background: #fbeceb;
  color: var(--red-deep);
  font-size: 12px;
  font-weight: 800;
}
.rf-hl-spot.is-warn .rf-hl-tag {
  background: #fff4dc;
  color: #a15c00;
}
.rf-hl-tag .rf-reach-icon,
.rf-hl-cell-top .rf-reach-icon {
  background: none;
  box-shadow: none;
}
.rf-hl-tag .rf-reach-icon {
  width: auto;
  height: auto;
  color: inherit;
}
.rf-hl-tag .rf-reach-icon svg {
  width: 13px;
  height: 13px;
}
.rf-hl-title {
  margin: 8px 0 2px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rf-hl-deal {
  margin: 0;
  font-size: 13.5px;
  color: #57534e;
}
.rf-hl-deal b {
  color: var(--red-deep);
}
.rf-hl-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  color: #57534e;
}
.rf-hl-meter b {
  color: var(--ink);
}
.rf-hl-bar {
  flex: 1;
  max-width: 160px;
  height: 8px;
  border-radius: 9px;
  background: #f3ebe9;
  overflow: hidden;
}
.rf-hl-bar i {
  display: block;
  height: 100%;
  border-radius: 9px;
  background: linear-gradient(90deg, #f59e0b, #e1272b);
}
.rf-hl-nums {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--stone);
}
.rf-hl-money {
  color: var(--red-deep);
}
.rf-hl-big {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  line-height: 0.8;
  color: var(--red-deep);
}
.rf-hl-big small {
  margin-left: 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: #57534e;
}
.rf-hl-links {
  margin-top: auto;
  padding-top: 12px;
}
.rf-hl-links .rf-coupon-links {
  margin: 0;
  flex-wrap: wrap;
}
.rf-hl-glance {
  display: grid;
  grid-template-columns: repeat(var(--rf-hl-cols, 5), minmax(0, 1fr));
  margin-top: 14px;
  overflow: hidden;
}
.rf-hl-spots:empty + .rf-hl-glance {
  margin-top: 0;
}
.rf-hl-cell {
  min-width: 0;
  padding: 16px 18px;
}
.rf-hl-cell + .rf-hl-cell {
  border-left: 1px solid #f3ebe9;
}
/* Two rows of three: a line between the rows, none at the start of one. */
@media (width > 900px) {
  .rf-hl-glance[style*="--rf-hl-cols: 3"] .rf-hl-cell:nth-child(n + 4) {
    border-top: 1px solid #f3ebe9;
  }
  .rf-hl-glance[style*="--rf-hl-cols: 3"] .rf-hl-cell:nth-child(3n + 1) {
    border-left: 0;
  }
}
.rf-hl-cell-top {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  color: #57534e;
}
.rf-hl-cell-top .rf-reach-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fbeceb;
  color: var(--red-deep);
}
.rf-hl-cell-top .rf-reach-icon svg {
  width: 15px;
  height: 15px;
}
.rf-hl-num {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 0.85;
  color: var(--ink);
  white-space: nowrap;
}
.rf-hl-sub {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--stone);
}
.rf-hl-mini {
  display: block;
  height: 5px;
  margin-top: 9px;
  border-radius: 9px;
  background: #f3ebe9;
  overflow: hidden;
}
.rf-hl-mini i {
  display: block;
  height: 100%;
  border-radius: 9px;
  background: var(--red-deep);
}
/* Tablet: the figures two across, an odd last one full width. */
@media (width <= 900px) {
  .rf-hl-glance {
    grid-template-columns: 1fr 1fr;
  }
  .rf-hl-cell + .rf-hl-cell {
    border-left: 0;
  }
  .rf-hl-cell {
    border-top: 1px solid #f3ebe9;
  }
  .rf-hl-cell:nth-child(-n + 2) {
    border-top: 0;
  }
  .rf-hl-cell:nth-child(even) {
    border-left: 1px solid #f3ebe9;
  }
  .rf-hl-cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
/* Phone: cards stacked, the figures as a list with the number on the right. */
@media (width <= 640px) {
  .rf-hl-spots {
    grid-template-columns: 1fr;
  }
  .rf-hl-photo {
    width: 88px;
    height: 88px;
  }
  .rf-hl-glance {
    grid-template-columns: 1fr;
  }
  .rf-hl-cell,
  .rf-hl-cell:nth-child(even) {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "top num" "sub num" "bar bar";
    column-gap: 10px;
    padding: 14px 16px;
    border-left: 0;
    border-top: 1px solid #f3ebe9;
  }
  .rf-hl-cell:first-child {
    border-top: 0;
  }
  .rf-hl-cell:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .rf-hl-cell-top {
    grid-area: top;
    font-size: 14px;
    color: var(--ink);
  }
  .rf-hl-sub {
    grid-area: sub;
    margin: 2px 0 0 33px;
  }
  .rf-hl-num {
    grid-area: num;
    align-self: center;
    margin: 0;
    font-size: 38px;
    color: var(--red-deep);
  }
  .rf-hl-mini {
    grid-area: bar;
    margin-left: 33px;
  }
}

/* ── Agencies ───────────────────────────────────────────────────────────── */

/* "Need an agency or influencer solution?" under the founders card
   on the sign-up page and under Billing. */
.rf-ent-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 16px 20px;
  border: 1px solid #f0e4e1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(28 25 23 / 5%);
  box-sizing: border-box;
  text-align: left;
}
.rf-ent-line-ic {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #fbeceb;
  color: var(--red-deep, #bb0016);
  display: grid;
  place-items: center;
}
.rf-ent-line-t {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  color: #1c1917;
  line-height: 1.35;
  text-wrap: balance;
}
.rf-ent-line-t small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: #78716c;
  text-wrap: balance;
}
.rf-ent-line-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid #e6bdb9;
  background: #fff;
  color: var(--red-deep, #bb0016);
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.rf-ent-line-btn:hover {
  border-color: var(--red-deep, #bb0016);
}
.billing-grid + .rf-ent-line {
  margin-top: 0;
}
@media (max-width: 560px) {
  .rf-ent-line {
    flex-wrap: wrap;
    padding: 16px;
  }
  .rf-ent-line-t {
    flex-basis: calc(100% - 52px);
  }
  .rf-ent-line-btn {
    margin-left: 52px;
  }
}

/* Agency access, at the top of an owner's Settings, and handing a business
   over, at the top of an agency's. */
.rf-agency-panel .rf-agency-sub {
  margin: -6px 0 16px;
  font-size: 13.5px;
  color: #78716c;
}
.rf-agency-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rf-agency-row + .rf-agency-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--cream);
}
.rf-agency-av {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: grid;
  place-items: center;
}
.rf-agency-av-biz {
  background: var(--red-deep, #bb0016);
}
.rf-agency-t {
  flex: 1;
  min-width: 0;
}
.rf-agency-t b {
  display: block;
  font-size: 15px;
  color: #1c1917;
  text-wrap: balance;
}
.rf-agency-t small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: #78716c;
  text-wrap: balance;
}
.rf-agency-btn {
  flex: none;
}
.rf-agency-warn {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8f3f2;
  font-size: 13px;
  line-height: 1.45;
  color: #57534e;
  text-wrap: pretty;
}
/* Who an agency's posts show as on Nearby. */
.rf-showas-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rf-showas-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rf-showas-opt.is-on {
  border-color: var(--red-deep);
  background: rgba(187, 0, 22, 0.05);
}
.rf-showas-opt:disabled {
  cursor: default;
}
.rf-showas-dot {
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: auto;
  border: 2px solid #d6ccc8;
  border-radius: 50%;
  box-sizing: border-box;
}
.rf-showas-opt.is-on .rf-showas-dot {
  border: 6px solid var(--red-deep);
}
.rf-showas-img {
  overflow: hidden;
  background: #fff;
}
.rf-showas-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rf-showas-prev-h {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}
.rf-showas-prev {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--cream);
}
.rf-showas-prev b {
  font-size: 15px;
  color: #1c1917;
}
.rf-showas-prev em {
  font-style: normal;
  font-weight: 600;
  color: var(--stone);
}
.rf-showas-face {
  position: relative;
  flex: none;
}
.rf-showas-face > .rf-agency-av {
  width: 38px;
  height: 38px;
  border: 2px solid #fff;
  box-sizing: border-box;
}
.rf-showas-logo {
  position: absolute;
  right: -6px;
  bottom: -6px;
}
.rf-showas-logo .rf-agency-av {
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  box-sizing: border-box;
  font-size: 9px;
}
.rf-showas-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--stone);
  text-wrap: balance;
}
.rf-showas-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--cream);
}
.rf-showas-line {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #44403c;
}
.rf-showas-line-t {
  flex: 1;
  min-width: 0;
}
.rf-showas-line-t small {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--stone);
  text-wrap: balance;
}
.rf-showas-prev.rf-showas-prev-sm {
  display: inline-flex;
  padding: 8px 14px 8px 10px;
}
.rf-showas-line button,
.rf-showas-done {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 800;
  color: var(--red-deep);
  cursor: pointer;
}
.rf-showas-done {
  margin-top: 12px;
}
.rf-agency-panel .rf-showas-lead {
  margin: 0 0 12px;
}
@media (max-width: 560px) {
  .rf-agency-row {
    flex-wrap: wrap;
  }
  .rf-agency-t {
    flex-basis: calc(100% - 56px);
  }
  .rf-agency-btn {
    margin-left: 56px;
  }
}

/* The agency plan on Billing. */
.rf-status-failed {
  white-space: nowrap;
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.rf-status-ended {
  background: var(--paper);
  color: var(--stone);
  border-color: var(--line);
}
.rf-agency-counting {
  max-width: 46ch;
  text-wrap: pretty;
}
.rf-agency-pay {
  text-decoration: none;
  display: inline-block;
}

/* An agency's own face, shown but not changed from a business. */
.account-avatar.rf-avatar-fixed:disabled {
  opacity: 1;
}
.account-avatar.rf-avatar-fixed:hover {
  opacity: 1;
}
.account-logout-everywhere {
  white-space: nowrap;
}

/* ── All my businesses: an agency's businesses side by side ─────────────── */
.rf-dash-switch {
  display: flex;
  margin: 0 0 14px;
}
/* ── All my businesses ─────────────────────────────────────────────────── */
.rf-ag-ov-h {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #57534e;
}
.rf-ag-ov-sec {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.rf-ag-ov-n {
  padding: 1px 9px;
  border-radius: 999px;
  background: #fdecea;
  color: var(--red-deep);
  font-size: 12.5px;
  font-weight: 800;
}
.rf-ag-ov-none {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--stone);
  text-wrap: pretty;
}
/* A business's logo, or its initials. */
.rf-ag-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.rf-ag-logo.has-img {
  background: #fff;
  border: 1px solid var(--line);
}
.rf-ag-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rf-ag-logo.is-sm {
  width: 34px;
  height: 34px;
  font-size: 12px;
}
.rf-ag-logo.is-xs {
  width: 22px;
  height: 22px;
  font-size: 9px;
}
.rf-ag-logo.is-mail {
  background: #f3ebe9;
  color: #57534e;
}

/* How full the plan is. */
.rf-ag-ov-places {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 16px;
  font-size: 14px;
  color: #57534e;
}
.rf-ag-ov-places b {
  color: var(--ink);
  white-space: nowrap;
}
.rf-ag-ov-bar {
  flex: 0 0 200px;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #f1e8e5;
}
.rf-ag-ov-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--red-deep);
}
.rf-ag-ov-places-t {
  text-wrap: pretty;
}

/* The totals, as tiles. */
.rf-ag-ov-totals {
  gap: 14px;
  margin-top: 18px;
}
.rf-ag-ov-tile {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.rf-ag-ov-totals .rf-activity-figure {
  font-size: 34px;
}
.rf-ag-ov-tile-note {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--stone);
}

/* Needs a look: a card per business. */
.rf-ag-ov-attn {
  margin-top: 28px;
}
.rf-ag-ov-attn-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.rf-ag-ov-attn-biz {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.rf-ag-ov-attn-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rf-ag-ov-attn-top > b {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.rf-ag-ov-attn-top > b small {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--stone);
}
.rf-ag-ov-attn-top .rf-activity-issue-link {
  flex-shrink: 0;
  white-space: nowrap;
}
.rf-ag-ov-it {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.35;
}
.rf-ag-ov-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: #a8a29e;
}
.rf-ag-ov-dot.is-bad {
  background: #dc2626;
}
.rf-ag-ov-dot.is-todo {
  background: #f59e0b;
}
.rf-ag-ov-it-t {
  flex: 1;
  min-width: 0;
  text-wrap: pretty;
}
.rf-ag-ov-inv b,
.rf-ag-ov-inv small {
  display: block;
}
.rf-ag-ov-inv small {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--stone);
  overflow-wrap: anywhere;
}
.rf-ag-ov-fix,
.rf-ag-ov-change {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--red-deep);
  white-space: nowrap;
  cursor: pointer;
}
.rf-ag-ov-change {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
}
.rf-ag-ov-fix:hover,
.rf-ag-ov-change:hover {
  text-decoration: underline;
}
.rf-ag-ov-fix:disabled,
.rf-ag-ov-change:disabled {
  opacity: 0.6;
  cursor: default;
  text-decoration: none;
}

/* Your businesses. */
.rf-ag-ov-cmp {
  margin-top: 30px;
}
.rf-ag-ov-sortby {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--stone);
}
.rf-ag-ov-sortby select {
  font: inherit;
  color: var(--ink);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}
.rf-ag-ov-tbl {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 14px;
}
.rf-ag-ov-tbl th {
  height: 44px;
  padding: 0 12px;
  text-align: left;
  white-space: nowrap;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.rf-ag-ov-tbl th:first-child {
  padding-left: 18px;
}
.rf-ag-ov-tbl th button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stone);
  cursor: pointer;
}
.rf-ag-ov-tbl th[aria-sort] button,
.rf-ag-ov-tbl th button:hover {
  color: var(--red-deep);
}
.rf-ag-ov-tbl td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  background: var(--white);
}
.rf-ag-ov-tbl td:first-child {
  padding-left: 18px;
}
.rf-ag-ov-tbl tbody tr:last-child td {
  border-bottom: 0;
}
.rf-ag-ov-tbl td b {
  font-size: 17px;
  font-weight: 800;
}
.rf-ag-ov-tbl td small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--stone);
}
.rf-ag-ov-row {
  cursor: pointer;
}
.rf-ag-ov-row:hover td,
.rf-ag-ov-row.is-open td {
  background: #fffdfc;
}
.rf-ag-ov-biz > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.rf-ag-ov-biz-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rf-ag-ov-tbl .rf-ag-ov-biz b {
  font-size: 16px;
  overflow-wrap: anywhere;
}
.rf-ag-ov-tbl .rf-ag-ov-biz small {
  margin-top: 1px;
}
.rf-ag-ov-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.rf-ag-ov-kind {
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3ebe9;
  color: #57534e;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}
.rf-ag-ov-kind.is-freepro {
  background: #e8f7ee;
  color: #15803d;
}
.rf-ag-ov-kind.is-on {
  background: #e8f7ee;
  color: #15803d;
}
.rf-ag-ov-kind.is-off {
  background: #fff1e6;
  color: #a14a00;
}
.rf-ag-ov-tbl .rf-ag-ov-next b,
.rf-ag-ov-tbl .rf-ag-ov-last {
  font-size: 15px;
  font-weight: 700;
}
.rf-ag-ov-warn {
  font-size: 14px;
  font-weight: 700;
  color: #a14a00;
}
.rf-ag-chg {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.rf-ag-chg.is-up {
  color: #15803d;
}
.rf-ag-chg.is-down {
  color: var(--red-deep);
}
.rf-ag-ov-tog {
  width: 1%;
  text-align: right;
}
.rf-ag-ov-tog button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: #57534e;
  cursor: pointer;
}
.rf-ag-ov-tog-t {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.rf-ag-ov-row.is-open .rf-ag-ov-tog button {
  background: #f6f0ee;
}
.rf-ag-ov-row.is-open .rf-ag-ov-tog svg {
  transform: rotate(180deg);
}

/* A business opened: three boxes, then its actions. */
.rf-ag-ov-tbl .rf-ag-ov-more td {
  padding: 18px 18px 0;
  background: var(--paper);
}
.rf-ag-ov-boxes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.2fr);
  gap: 14px;
}
.rf-ag-ov-box {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.rf-ag-ov-box > .rf-ag-ov-h {
  margin-bottom: 12px;
}
.rf-ag-ov-nums {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 10px;
}
.rf-ag-ov-tbl .rf-ag-ov-nums b {
  font-size: 22px;
}
.rf-ag-ov-tbl .rf-ag-ov-nums small {
  font-size: 13px;
  color: #57534e;
}
.rf-ag-ov-best-card {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rf-ag-ov-best-card img {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
}
.rf-ag-ov-best-card div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.rf-ag-ov-tbl .rf-ag-ov-best-card b {
  font-size: 15px;
  overflow-wrap: anywhere;
}
.rf-ag-ov-offer {
  margin-top: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--red-deep);
  font-size: 12px;
  font-weight: 800;
}
.rf-ag-ov-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--stone);
  text-wrap: pretty;
}
.rf-ag-ov-empty > span {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f6f0ee;
  color: #a8a29e;
}
.rf-ag-ov-set {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rf-ag-ov-lab {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}
.rf-ag-ov-pro small {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--stone);
  text-wrap: pretty;
}
.rf-ag-ov-pro .rf-activity-range-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.rf-ag-ov-said {
  margin: 8px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #15803d;
}
.rf-ag-ov-said.is-bad {
  color: var(--red-deep);
}
.rf-ag-ov-as-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rf-ag-ov-tbl .rf-ag-ov-as-row b {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.rf-ag-ov-as-row em {
  font-style: normal;
  font-weight: 500;
  color: var(--stone);
}
.rf-ag-ov-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--line);
}

/* The agency's own account, under its businesses. */
.rf-ag-ov-own {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 18px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  font-size: 14px;
  color: #57534e;
}
.rf-ag-ov-own-t {
  flex: 1;
  min-width: 0;
  text-wrap: pretty;
}
.rf-ag-ov-own-t b {
  color: var(--ink);
}

@media (max-width: 960px) {
  .rf-ag-ov-boxes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .rf-ag-ov-set {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .rf-ag-ov-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .rf-ag-ov-totals .rf-activity-figure {
    font-size: 28px;
  }
  .rf-ag-vs,
  .rf-ag-ov-places-t {
    display: none;
  }
  .rf-ag-ov-bar {
    flex: 1 1 100%;
  }
  .rf-ag-ov-sortby {
    display: flex;
  }
  .rf-ag-ov-attn-list {
    grid-template-columns: 1fr;
  }
  /* Phones: each business is a card, its numbers two to a row. */
  .rf-ag-ov-tbl {
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .rf-ag-ov-tbl thead {
    display: none;
  }
  .rf-ag-ov-tbl,
  .rf-ag-ov-tbl tbody {
    display: block;
  }
  .rf-ag-ov-tbl tr.rf-ag-ov-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    margin-top: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--white);
  }
  .rf-ag-ov-tbl tr.rf-ag-ov-row.is-open {
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
  }
  .rf-ag-ov-tbl td {
    padding: 0;
    border: 0;
    background: none !important;
  }
  .rf-ag-ov-tbl td:first-child {
    padding-left: 0;
  }
  .rf-ag-ov-tbl td[data-l]::before {
    content: attr(data-l);
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--stone);
  }
  .rf-ag-ov-biz {
    grid-column: 1 / -1;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .rf-ag-ov-tbl .rf-ag-ov-last {
    align-self: center;
  }
  .rf-ag-ov-tog {
    width: auto;
    align-self: center;
  }
  .rf-ag-ov-tbl tr.rf-ag-ov-more {
    display: block;
    padding: 0 14px 4px;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    background: var(--paper);
  }
  .rf-ag-ov-tbl tr.rf-ag-ov-more td {
    display: block;
    padding: 14px 0 0;
  }
  .rf-ag-ov-boxes {
    grid-template-columns: 1fr;
  }
  .rf-ag-ov-acts {
    justify-content: stretch;
  }
  .rf-ag-ov-acts .pill-btn {
    flex: 1 1 0;
  }
  .rf-ag-ov-own {
    flex-wrap: wrap;
  }
}

/* ── Facebook with several Pages: which one this business posts to ─────── */
.rf-fb-pages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 12px;
  max-height: 46vh;
  overflow-y: auto;
}
.rf-fb-page {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.rf-fb-page input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--red-deep);
}
.rf-fb-page.is-on {
  border-color: var(--red-deep);
  background: #fff7f6;
}
.rf-fb-page-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.rf-fb-pic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
}
.rf-fb-h {
  margin: 18px 0 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
.rf-fb-tip {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--stone);
  text-wrap: pretty;
}
.conn-status-pick {
  color: #9a5b00;
  background: #fff4e0;
  border: 1px solid #fde3b3;
}
/* LinkedIn and Pinterest: tapping the pill changes where posts go. */
.rf-conn-pill-edit {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.rf-conn-pill-edit:hover {
  filter: brightness(0.97);
}
.rf-conn-pen {
  margin-left: 6px;
  flex: none;
}
.rf-conn-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.rf-conn-change {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  color: var(--red-deep);
  white-space: nowrap;
  cursor: pointer;
}
.rf-conn-change:hover {
  text-decoration: underline;
}

/* A Square location's address under its name. */
.rf-fb-addr {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--stone);
}

/* Taking a business off the list: quiet, on the left of the actions. */
.rf-ag-ov-drop {
  margin-right: auto;
  align-self: center;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--stone);
  cursor: pointer;
}
.rf-ag-ov-drop:hover {
  color: var(--red-deep);
  text-decoration: underline;
}
.rf-ag-ov-drop:disabled {
  opacity: 0.6;
  cursor: default;
  text-decoration: none;
}
.rf-ag-ov-drop-said {
  flex-basis: 100%;
  order: 9;
  margin: 0;
}
.rf-ag-ov-cmp > .rf-ag-ov-sec {
  flex-wrap: wrap;
}
.rf-ag-ov-list-said {
  flex-basis: 100%;
  order: 9;
  margin: 0;
}
.rf-ag-ov-inv .rf-ag-ov-said {
  display: block;
  margin-top: 4px;
}
@media (max-width: 760px) {
  .rf-ag-ov-acts .rf-ag-ov-drop {
    flex-basis: 100%;
    order: 8;
    margin: 4px 0 0;
    text-align: center;
  }
}

/* Who posts show as: the choices beside how shoppers see it, when there's
   room; stacked otherwise. */
.rf-showas-agency,
.rf-showas-wrap {
  container-type: inline-size;
}
.rf-showas-list-h {
  display: none;
}
@container (min-width: 560px) {
  .rf-showas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "listh prevh"
      "list prev"
      "note note";
    column-gap: 20px;
    align-items: start;
  }
  .rf-showas-list-h {
    display: block;
    grid-area: listh;
  }
  .rf-showas-list-h,
  .rf-showas .rf-showas-prev-h {
    margin: 0 0 8px;
  }
  .rf-showas-list {
    grid-area: list;
  }
  .rf-showas .rf-showas-prev-h {
    grid-area: prevh;
  }
  .rf-showas .rf-showas-list-h {
    grid-area: listh;
  }
  .rf-showas .rf-showas-prev {
    grid-area: prev;
  }
  .rf-showas .rf-showas-note {
    grid-area: note;
  }
}

/* How shoppers see it: Nearby's post header, copied from Nearby's own
   styles, on a white card like a post. */
.rf-showas-prev {
  display: block;
  padding: 0;
  background: transparent;
}
.rf-nb-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 12px 14px;
  border: 1px solid #e2d9d4;
  border-radius: 18px;
  background: #fff;
}
.rf-nb-avatars {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 44px;
  height: 38px;
}
.rf-nb-logo,
.rf-nb-face {
  position: absolute;
  top: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}
.rf-nb-logo {
  left: -30px;
  top: -15px;
  z-index: 2;
  width: 75px;
  height: 75px;
  border: 1px solid #e2d9d4;
}
.rf-nb-face {
  left: 12px;
  width: 38px;
  height: 38px;
  border: 2px solid #fff;
  box-shadow: 0 1px 5px #00000026;
  z-index: 3;
}
.rf-nb-logo img,
.rf-nb-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fcf9f8;
}
.rf-nb-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbe9e5;
  color: #bb0016;
  font-size: 16px;
  font-weight: 800;
}
.rf-nb-name {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: #1c1917;
}
.rf-nb-at {
  font-weight: 700;
  color: #78716c;
}

/* In a client business: the business at the top of Account, then who's
   signed in. */
.account-biz .rf-ag-logo {
  width: 56px;
  height: 56px;
  font-size: 18px;
}
.account-signed-h {
  margin: 4px 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}

.account-agency-link {
  color: var(--red-deep);
}

/* Phones: four ways in don't fit one row, so they go two by two. */
@media (max-width: 520px) {
  .rf-make-tiles {
    flex-wrap: wrap;
  }
  .rf-make-tile {
    flex: 1 1 calc(50% - 4px);
  }
}