/*
 * Referee signup page (/ref/<code>/) — design system styles.
 *
 * TODO(TU-5411): this file is only ever loaded by the referee signup page,
 * which is itself reached through the REFERRAL_REVAMP_ENABLED gate in
 * teamup/referral/constants.py. Nothing here can affect any other page.
 *
 * DUPLICATION IS DELIBERATE (TU-5549). Per the project ADR, the design system
 * is *not* consumed from a shared source of truth on the Django side: setting
 * up a shared pipeline is out of scope. These values are transcribed from the
 * Figma variables of the Referral Revamp file, and are intentionally NOT the
 * @goteamup/tempo-design-system-tokens package — that package's palette is
 * different (e.g. its brand pink is #ed1062, this design's is #d60064).
 *
 * Consequence: this file will drift as the design system evolves. A follow-up
 * to consolidate onto a shared source of truth is tracked outside this project.
 *
 * DISPLAY FACE: the headline is set in licensed VC Gosh SemiCondensed Bold,
 * self-hosted from teamup_site/static/fonts/ and referenced relative to this
 * stylesheet. The face ships as a single cut
 * whose subfamily reads "Regular", but its OS/2 usWeightClass is 700, so it is
 * declared at 700 and requested via --rr-weight-display. Family and weight are
 * paired tokens deliberately: pointing --rr-font-display at a 400-only
 * fallback without moving the weight would produce faux bold.
 *
 * Everything is scoped under .referral-revamp so it cannot leak into the rest
 * of the landing site, which is Bootstrap 4 based and light themed.
 */

/*
 * Licensed from Vintage Voyage Design Supply. The files live in
 * teamup_site/static/fonts/, which collectstatic publishes to <STATIC_URL>fonts/.
 *
 * The URLs are relative to THIS stylesheet, not root-relative. STATIC_URL is an
 * absolute, per-environment origin (teamupstatic.com in prod, the preview host
 * in preview envs, /assets/ locally), so a root-relative /fonts/... only
 * resolves in prod and UAT -- those are the only environments where the deploy
 * runs the extra sync that publishes a top-level fonts/ prefix, and no Django
 * route serves it. This stylesheet is at <STATIC_URL>landing/css/, so ../../
 * lands on <STATIC_URL> in every environment.
 *
 * The teamupstatic.com/apps/fonts/ mirror used by the Hind and Roboto Slab
 * blocks is deliberately omitted: nothing in the deploy publishes to that
 * prefix, so for a new face those entries are three guaranteed 403s per load.
 */
@font-face {
  font-family: "VC Gosh";
  font-style: normal;
  font-weight: 700;
  font-display: swap;

  src:
    url("../../fonts/vc-gosh-semicondensed-700.abc7b193de76.woff2") format("woff2"),
    url("../../fonts/vc-gosh-semicondensed-700.418ffe69a473.woff") format("woff"),
    url("../../fonts/vc-gosh-semicondensed-700.ad6cec0aeb53.ttf") format("truetype");
}

.referral-revamp {
  /* ---- Brand palette ------------------------------------------------- */
  --rr-color-ink: #1f2222;
  --rr-color-ink-light: #383d3a;
  --rr-color-racing-dark: #1e2c2a;
  --rr-color-heartbeet: #3a1227;
  --rr-color-white: #ffffff;
  --rr-color-chalk-dark: #e0e2de;
  --rr-color-pink: #d60064;
  --rr-color-pink-neutral: #edccd5;
  --rr-color-spring: #c9f990;
  --rr-color-circuit: #67ba90;
  --rr-color-circuit-neutral: #cce3d7;

  /* ---- Form palette -------------------------------------------------- */
  --rr-color-form-label: #3a3f3d;
  --rr-color-form-border: #e2e4e2;
  --rr-color-form-placeholder: #b0b4b2;
  --rr-color-form-subtitle: #5b6260;
  --rr-color-form-fine-print: #7a807d;

  /* ---- Spacing scale ------------------------------------------------- */
  --rr-space-6: 6px;
  --rr-space-8: 8px;
  --rr-space-9: 9px;
  --rr-space-10: 10px;
  --rr-space-11: 11px;
  --rr-space-12: 12px;
  --rr-space-14: 14px;
  --rr-space-16: 16px;
  --rr-space-18: 18px;
  --rr-space-20: 20px;
  --rr-space-22: 22px;
  --rr-space-24: 24px;
  --rr-space-30: 30px;
  --rr-space-32: 32px;
  --rr-space-36: 36px;
  --rr-space-40: 40px;
  --rr-space-48: 48px;
  --rr-space-56: 56px;
  --rr-space-64: 64px;
  --rr-space-72: 72px;
  --rr-space-80: 80px;
  --rr-space-84: 84px;
  --rr-space-88: 88px;

  /* ---- Radius scale -------------------------------------------------- */
  --rr-radius-9: 9px;
  --rr-radius-10: 10px;
  --rr-radius-20: 20px;
  --rr-radius-24: 24px;
  --rr-radius-60: 60px;
  --rr-radius-100: 100px;
  --rr-radius-pill: 999px;

  /* ---- Typography ---------------------------------------------------- */
  --rr-font-display: "VC Gosh", "Arial Narrow", "Helvetica Neue", sans-serif;
  --rr-font-body: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --rr-weight-regular: 400;
  --rr-weight-display: 700;
  --rr-weight-semibold: 600;
  --rr-weight-bold: 700;
  --rr-weight-extrabold: 800;

  --rr-text-fine-print: 11.5px;
  --rr-text-label: 12px;
  --rr-text-perk: 13.5px;
  --rr-text-input: 13.5px;
  --rr-text-body-sm: 14px;
  --rr-text-action: 14.5px;
  --rr-text-eyebrow: 15px;
  --rr-text-faq-question: 15.5px;
  --rr-text-body: 16px;
  --rr-text-h2: 21px;
  --rr-text-section-title: 29px;
  --rr-text-display: 52px;

  --rr-leading-display: 1.25;
  --rr-leading-prose: 1.6;

  /* ---- Surfaces and effects ------------------------------------------ */
  --rr-surface-page: var(--rr-color-ink);
  --rr-surface-card: var(--rr-color-white);
  --rr-surface-glass-bg: rgba(255, 255, 255, 0.04);
  --rr-surface-glass-border: rgba(255, 255, 255, 0.1);
  --rr-surface-glass-blur: 12px;
  --rr-divider-glass: rgba(224, 226, 222, 0.16);

  --rr-shadow-photo: 0 20px 40px 0 rgba(0, 0, 0, 0.6);
  --rr-shadow-photo-inset: inset 0 1px 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  --rr-shadow-card: 0 24px 60px 0 rgba(0, 0, 0, 0.35);

  --rr-focus-ring: 0 0 0 3px rgba(214, 0, 100, 0.35);

  /* ---- Base ---------------------------------------------------------- */
  background-color: var(--rr-surface-page);
  color: var(--rr-color-chalk-dark);
  font-family: var(--rr-font-body);
  font-size: var(--rr-text-body);
  font-weight: var(--rr-weight-regular);
  line-height: var(--rr-leading-prose);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.referral-revamp *,
.referral-revamp *::before,
.referral-revamp *::after {
  box-sizing: border-box;
}

.referral-revamp img,
.referral-revamp svg {
  display: block;
  max-width: 100%;
}

.referral-revamp a:not(.rr-btn) {
  color: var(--rr-color-pink);
  text-decoration: underline;
}

.referral-revamp a:not(.rr-btn):hover,
.referral-revamp a:not(.rr-btn):focus-visible {
  color: var(--rr-color-spring);
}

.referral-revamp :focus-visible {
  outline: 2px solid var(--rr-color-spring);
  outline-offset: 2px;
}

/* ---- Typography primitives ------------------------------------------- */

.rr-display {
  margin: 0;
  font-family: var(--rr-font-display);
  font-size: var(--rr-text-display);
  font-weight: var(--rr-weight-display);
  line-height: var(--rr-leading-display);
  color: var(--rr-color-white);
  letter-spacing: 0.01em;
}

.rr-display em {
  font-style: normal;
  color: var(--rr-color-spring);
}

.rr-section-title {
  margin: 0;
  font-size: var(--rr-text-section-title);
  font-weight: var(--rr-weight-extrabold);
  line-height: normal;
  color: var(--rr-color-spring);
  text-align: center;
}

.rr-h2 {
  margin: 0;
  font-size: var(--rr-text-h2);
  font-weight: var(--rr-weight-extrabold);
  line-height: normal;
  color: var(--rr-color-ink);
}

.rr-prose {
  margin: 0;
  font-size: var(--rr-text-body);
  line-height: var(--rr-leading-prose);
  color: var(--rr-color-chalk-dark);
}

.rr-prose strong {
  font-weight: var(--rr-weight-extrabold);
  color: var(--rr-color-pink);
}

.rr-fine-print {
  margin: 0;
  font-size: var(--rr-text-fine-print);
  line-height: normal;
  color: var(--rr-color-form-fine-print);
}

/* ---- Pill (hero eyebrow) --------------------------------------------- */

.rr-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--rr-space-9);
  padding: var(--rr-space-10) var(--rr-space-18);
  border-radius: var(--rr-radius-pill);
  background-color: var(--rr-color-heartbeet);
  font-size: var(--rr-text-eyebrow);
  font-weight: var(--rr-weight-bold);
  line-height: normal;
  color: var(--rr-color-pink-neutral);
}

.rr-pill strong {
  font-weight: var(--rr-weight-extrabold);
  color: var(--rr-color-pink);
}

/* ---- Button ----------------------------------------------------------- */

.rr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--rr-space-14) var(--rr-space-30);
  border: 0;
  border-radius: var(--rr-radius-10);
  font-family: inherit;
  font-size: var(--rr-text-action);
  font-weight: var(--rr-weight-extrabold);
  line-height: normal;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.rr-btn--primary {
  background-color: var(--rr-color-pink);
  color: var(--rr-color-white);
}

.rr-btn--primary:hover,
.rr-btn--primary:focus-visible {
  background-color: #b30054;
  color: var(--rr-color-white);
  text-decoration: none;
}

.rr-btn:focus-visible {
  box-shadow: var(--rr-focus-ring);
}

.rr-btn[disabled],
.rr-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---- Card (light surface holding the form) ---------------------------- */

.rr-card {
  background-color: var(--rr-surface-card);
  border-radius: var(--rr-radius-20);
  box-shadow: var(--rr-shadow-card);
  overflow: hidden;
}

/* ---- Glass panel (FAQ) ------------------------------------------------ */

.rr-glass {
  background-color: var(--rr-surface-glass-bg);
  border: 1px solid var(--rr-surface-glass-border);
  border-radius: var(--rr-radius-24);
  padding: var(--rr-space-8) var(--rr-space-32);
  backdrop-filter: blur(var(--rr-surface-glass-blur));
  -webkit-backdrop-filter: blur(var(--rr-surface-glass-blur));
}

/* ---- Form primitives -------------------------------------------------- */

.rr-field {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-6);
}

.rr-label {
  font-size: var(--rr-text-label);
  font-weight: var(--rr-weight-bold);
  line-height: normal;
  color: var(--rr-color-form-label);
}

.rr-label .rr-required {
  color: var(--rr-color-pink);
}

.rr-input {
  width: 100%;
  /*
   * Height is explicit because Figma's Input frame is 38px tall with its 1.5px
   * stroke drawn *inside* that 38 (38:547 and every other Input node). Read as
   * padding -- 11px above and below the 16px line box -- CSS adds the border on
   * top and the control comes out 41px, which compounds: 15 fields at +3px each
   * pushed the grid's row pitch to 77px against the design's 72. Setting the
   * height instead also makes selects match inputs, which they do not when both
   * are sized by their own content.
   */
  height: 38px;
  padding: 0 var(--rr-space-12);
  border: 1.5px solid var(--rr-color-form-border);
  border-radius: var(--rr-radius-9);
  background-color: var(--rr-color-white);
  font-family: inherit;
  font-size: var(--rr-text-input);
  line-height: normal;
  color: var(--rr-color-ink);
}

.rr-input::placeholder {
  color: var(--rr-color-form-placeholder);
}

.rr-input:focus {
  border-color: var(--rr-color-pink);
  outline: none;
  box-shadow: var(--rr-focus-ring);
}

.rr-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--rr-space-8);
  font-size: var(--rr-text-body-sm);
  line-height: normal;
  color: var(--rr-color-form-label);
}

.rr-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--rr-color-pink);
}

/* ---- Motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .referral-revamp *,
  .referral-revamp *::before,
  .referral-revamp *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =======================================================================
 * Page layout (TU-5553)
 *
 * Built from two Figma frames: Desktop (1440) and Mobile (480). The design
 * only specifies those two, so the layout is fluid between them and switches
 * at 960px (the width below which the hero's two columns stop fitting).
 * ===================================================================== */

.referral-revamp {
  --rr-container: 1080px;
  --rr-gutter: var(--rr-space-48);

  margin: 0;
  min-height: 100vh;
}

/* ---- Nav --------------------------------------------------------------- */

.rr-nav {
  padding: var(--rr-space-18) var(--rr-gutter);
  background-color: var(--rr-color-ink);
}

.rr-nav__inner {
  width: 100%;
  max-width: var(--rr-container);
  margin-inline: auto;
}

.rr-nav__logo {
  display: inline-block;
  text-decoration: none;
}

.rr-nav__logo img {
  width: 120px;
  height: auto;
}

/* ---- Hero -------------------------------------------------------------- */

.rr-hero {
  padding: var(--rr-space-72) var(--rr-gutter) var(--rr-space-88);
  background-image: linear-gradient(
    180deg,
    var(--rr-color-ink) 0%,
    var(--rr-color-racing-dark) 100%
  );
}

.rr-hero__inner {
  display: flex;
  align-items: center;
  gap: var(--rr-space-48);
  width: 100%;
  max-width: var(--rr-container);
  margin-inline: auto;
}

.rr-hero__text {
  flex: 0 1 542px;
  min-width: 0;
}

.rr-hero__headline {
  margin-top: var(--rr-space-22);
}

.rr-hero__body {
  max-width: 460px;
  margin-top: var(--rr-space-20);
}

.rr-hero__media {
  flex: 0 0 490px;
  aspect-ratio: 490 / 367.5;
  border: 2px solid var(--rr-color-white);
  border-radius: var(--rr-radius-100);
  box-shadow: var(--rr-shadow-photo);
  overflow: hidden;
}

/* ---- Form section ------------------------------------------------------ */

.rr-form-wrap {
  padding: var(--rr-space-56) var(--rr-gutter) var(--rr-space-80);
  background-color: var(--rr-color-ink);
}

.rr-form-card {
  width: 100%;
  max-width: var(--rr-container);
  margin-inline: auto;
}

.rr-form-card__top {
  display: flex;
  align-items: stretch;
  min-height: 53px;
  background-color: var(--rr-color-racing-dark);
}

.rr-form-card__body {
  padding: var(--rr-space-30) var(--rr-space-40) var(--rr-space-40);
  background-color: var(--rr-color-white);
}

/* ---- FAQ --------------------------------------------------------------- */

.rr-faq {
  position: relative;
  padding: var(--rr-space-72) var(--rr-gutter) var(--rr-space-84);
  background-color: var(--rr-color-ink);
  overflow: hidden;
}

.rr-faq__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

/* =======================================================================
 * Mobile (Figma frame: 480)
 * ===================================================================== */

/* =======================================================================
 * Tablet (Figma frame: 768)
 *
 * This is the narrow-width layout for the whole page: the design set has a
 * Desktop (1440) and a Tablet (768) frame and nothing below, so these rules
 * apply from 1175px all the way down rather than handing off to a mobile block
 * built from values no designer chose.
 *
 * The switch happens at 1175px, not a round 1024: the desktop hero is a
 * 542 + 48 + 490 two-column composition inside 48px gutters, so 1176px is the
 * exact width below which it stops fitting at its designed size. Below that
 * the 768 frame's stacked layout is the honest thing to show.
 * ===================================================================== */

@media (max-width: 1175px) {
  .referral-revamp {
    --rr-gutter: var(--rr-space-24);
  }

  .rr-nav {
    padding: var(--rr-space-16) var(--rr-gutter);
  }

  .rr-hero {
    padding-top: var(--rr-space-56);
    padding-bottom: var(--rr-space-64);
  }

  .rr-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--rr-space-32);
  }

  .rr-hero__text {
    flex: 1 1 auto;
  }

  .rr-hero__body {
    max-width: none;
  }

  .rr-hero__media {
    flex: 1 1 auto;
    aspect-ratio: 720 / 320;
    border-radius: var(--rr-radius-60);
  }

  .rr-form-wrap {
    padding-top: var(--rr-space-24);
    padding-bottom: var(--rr-space-24);
  }

  .rr-faq {
    padding-top: var(--rr-space-48);
    padding-bottom: var(--rr-space-56);
  }
}

/* =======================================================================
 * Static content (TU-5554)
 * ===================================================================== */

/* ---- Hero perks -------------------------------------------------------- */

.rr-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--rr-space-22);
  margin: var(--rr-space-22) 0 0;
  padding: 0;
  list-style: none;
}

.rr-perk {
  display: flex;
  align-items: center;
  gap: var(--rr-space-8);
  font-size: var(--rr-text-perk);
  font-weight: var(--rr-weight-semibold);
  line-height: normal;
  color: var(--rr-color-circuit-neutral);
  white-space: normal;
}

.rr-perk__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
}

/* ---- Hero photo -------------------------------------------------------- */

.rr-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * The photo carries a pink wash and an inner highlight in the design. Both are
 * overlays on the media box rather than baked into the asset, so the committed
 * image stays a plain photograph.
 */
.rr-hero__media {
  position: relative;
}

.rr-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(
    148deg,
    rgba(214, 0, 100, 0.32) 14%,
    rgba(31, 34, 34, 0.15) 57%
  );
  box-shadow: var(--rr-shadow-photo-inset);
  pointer-events: none;
}

/* ---- FAQ --------------------------------------------------------------- */

.rr-faq__blob {
  position: absolute;
  z-index: 0;
  width: 600px;
  height: 600px;
  pointer-events: none;
}

.rr-faq__blob--circuit {
  top: -201px;
  left: -193px;
}

.rr-faq__blob--pink {
  right: -144px;
  bottom: -234px;
}

.rr-faq__list {
  margin: var(--rr-space-36) 0 0;
}

.rr-faq__item {
  padding: var(--rr-space-22) 0;
  border-bottom: 0.5px solid var(--rr-divider-glass);
}

.rr-faq__item:last-child {
  border-bottom: 0;
}

.rr-faq__q {
  margin: 0;
  font-size: var(--rr-text-faq-question);
  font-weight: var(--rr-weight-bold);
  line-height: normal;
  color: var(--rr-color-white);
}

.rr-faq__a {
  margin: var(--rr-space-6) 0 0;
  font-size: var(--rr-text-body-sm);
  line-height: var(--rr-leading-prose);
  color: var(--rr-color-chalk-dark);
}

/* =======================================================================
 * Tabs (TU-5555)
 *
 * Built from the Figma "Form Top" node -- Desktop 38:530, Tablet 78:674 --
 * which are byte-identical for the tabs: a 53px strip, two tabs at exactly half
 * its width, 18px vertical padding, Rubik Bold 14.5px, centred.
 *
 * No breakpoint. The only frame that specifies different tab metrics (Mobile
 * 480, node 155:772: 43px strip, 13px text, 14px/8px padding) is the unapproved
 * one parked on the Thumbnail page beside the cover art, which TU-5553 already
 * deleted a whole breakpoint for once. Desktop and Tablet agree, so their
 * values apply from 1175px down to 0 like the rest of the page.
 *
 * .rr-form-card__top is itself the tablist -- it is already the flex row with
 * the racing-dark background, which is exactly the design's Form Top node.
 * Wrapping a separate element inside it would add a nested flex context whose
 * only job is to be 100% wide.
 *
 * Selected state is styled off `aria-selected` rather than a modifier class.
 * That attribute has to be right for assistive tech regardless, so keying the
 * design off it too means the visual state and the announced state cannot drift
 * apart -- there is only one thing to set.
 * ===================================================================== */

.rr-tab {
  /*
   * `flex: 1 0 0` + `min-width: 0` is the 540-of-1080 split: equal halves that
   * divide whatever the card is actually wide, rather than two natural-width
   * tabs. The strip's --rr-color-racing-dark is visible *through* the inactive
   * tab, which is transparent -- it is not a gap left beside the tabs.
   */
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* The design clips rather than wraps; a wrapped label in a 53px bar is worse. */
  overflow: hidden;
  padding: var(--rr-space-18) 0;
  border: 0;
  background-color: transparent;
  color: var(--rr-color-form-placeholder);
  font-family: inherit;
  font-size: var(--rr-text-action);
  font-weight: var(--rr-weight-bold);
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.rr-tab:hover:not([aria-selected="true"]) {
  color: var(--rr-color-chalk-dark);
}

/*
 * The pink rule under the active tab is an inset shadow, not a border-bottom.
 * Figma draws that 3px stroke *inside* the tab's 53px, so a real border would
 * either push the strip to 56px or eat 3px of the content box and lift the
 * label off centre. An inset shadow occupies no layout space at all, which also
 * means switching tabs cannot shift anything by a subpixel.
 */
.rr-tab[aria-selected="true"] {
  background-color: var(--rr-color-ink-light);
  color: var(--rr-color-white);
  box-shadow: inset 0 -3px 0 0 var(--rr-color-pink);
}

/*
 * The page's global focus ring sits 2px outside the element. On a tab flush
 * against the top and side of a card with `overflow: hidden`, that ring gets
 * clipped away. Same ring, drawn inside the tab instead.
 */
.rr-tab:focus-visible {
  outline-offset: -3px;
}

/*
 * Explicit rather than relying on the `hidden` attribute's UA default: the
 * moment anything sets `display` on .rr-tabpanel, the UA rule loses and both
 * panels show at once. Cheap to state, expensive to debug.
 */
.rr-tabpanel[hidden] {
  display: none;
}

/* =======================================================================
 * HubSpot demo form (TU-5687)
 *
 * The "Schedule a demo" tab is HubSpot form b3b5405f-e360 on portal 8507288,
 * embedded by the /forms/embed/developer/ script (see referee_signup.html for
 * why that one). That script renders the form into this document rather than
 * into a cross-origin iframe, so everything below is ordinary CSS reaching
 * ordinary markup -- which is the only reason this tab can be made to match the
 * account tab from here at all.
 *
 * TWO KINDS OF RULE LIVE HERE, and they work differently:
 *
 * 1. Custom properties. HubSpot's own stylesheet reads every themeable value as
 *    `var(--hsf-<thing>, var(--hsf-default-<thing>))`. The form editor emits the
 *    `--hsf-default-*` half in a <style> block scoped to `[id="<instance>-r"]`,
 *    where <instance> is a fresh uuid on every render -- so that selector cannot
 *    be targeted from a stylesheet, and there is no point trying. Setting the
 *    *non-default* name here wins on the cascade of the var() fallback rather
 *    than on specificity, which is why none of this needs !important.
 *
 * 2. Plain declarations, for the handful of things HubSpot exposes no token for:
 *    control height, focus and hover states, and line-height (it has no
 *    line-height token at all, so the form inherits this page's 1.6 body value
 *    where the .rr-* primitives all reset to `normal`).
 *
 * The values are the account form's, and are written as the same literals the
 * --rr-* tokens hold rather than as var(--rr-*) references. That is deliberate:
 * a custom property set on .hsfc-Renderer is consumed inside HubSpot's own
 * rules, and pointing one at another custom property makes the value depend on
 * two cascades instead of one for no gain. Where a number here disagrees with
 * its --rr-* counterpart, the --rr-* one is right and this is the bug.
 *
 * Font sizes are in em because that is how HubSpot's editor expresses them, and
 * the base is 16px: 12px = 0.75em, 13.5px = 0.84375em, 14.5px = 0.90625em.
 *
 * Scoped under .referral-revamp, like everything else in this file, because the
 * .hsfc-* classes are HubSpot's and other pages embed HubSpot forms too.
 * ===================================================================== */

.referral-revamp .hsfc-Renderer {
  /* ---- Labels -------------------------------------------------------- */
  --hsf-field-label__font-size: 0.75em;
  --hsf-field-label__color: #3a3f3d;
  --hsf-field-label-requiredindicator__color: #d60064;

  /* The label-to-input gap; .rr-field spends --rr-space-6 on the same thing. */
  --hsf-module__vertical-spacing: 6px;

  /* ---- Inputs -------------------------------------------------------- */
  --hsf-field-input__font-size: 0.84375em;
  --hsf-field-input__padding: 0 12px;
  --hsf-field-input__border-width: 1.5px;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-color: #e2e4e2;
  --hsf-field-input__border-radius: 9px;
  --hsf-field-dropdown-options__border-radius: 9px;
  --hsf-field-input__background-color: #ffffff;
  --hsf-field-input__color: #1f2222;
  --hsf-field-input__placeholder-color: #b0b4b2;

  /*
   * The demo form has no textarea, checkbox or radio today. These are set
   * anyway so that a field type added in the HubSpot editor arrives styled
   * instead of arriving with the stock theme next to eight fields that match.
   */
  --hsf-field-textarea__font-size: 0.84375em;
  --hsf-field-textarea__padding: 8px 12px;
  --hsf-field-textarea__border-width: 1.5px;
  --hsf-field-textarea__border-color: #e2e4e2;
  --hsf-field-textarea__border-radius: 9px;
  --hsf-field-textarea__placeholder-color: #b0b4b2;

  --hsf-field-checkbox__border-color: #e2e4e2;
  --hsf-field-checkbox__border-width: 1.5px;
  --hsf-field-radio__border-color: #e2e4e2;
  --hsf-field-radio__border-width: 1.5px;

  /* ---- Layout -------------------------------------------------------- */
  /*
   * .rr-form__grid's 14px/18px, with the 16px the tablet frame uses picked up
   * by the media query below. HubSpot spends vertical-spacing on each row's
   * margin-bottom and horizontal-spacing on its column gap.
   *
   * background__padding is HubSpot's own 40px inset, and is the whole of the
   * left-edge misalignment the two tabs used to show: .rr-form-card__body is
   * already the thing that pads this card, so HubSpot's copy of that padding
   * pushed the demo form's first label ~38px right of the account form's.
   */
  --hsf-row__vertical-spacing: 16px;
  --hsf-row__horizontal-spacing: 18px;
  --hsf-background__padding: 0;
  --hsf-background__border-style: none;
  --hsf-background__border-radius: 0;

  /* ---- Submit button ------------------------------------------------- */
  /* .rr-btn--primary, down to the hover darkening. */
  --hsf-button__font-size: 0.90625em;
  --hsf-button__font-weight: 800;
  --hsf-button__border-radius: 10px;
  --hsf-button__padding: 14px 30px;
  --hsf-button__background-color: #d60064;
  --hsf-button__color: #ffffff;
  --hsf-button--hover__background-color: #b30054;
  --hsf-navigationrow-buttons__justify-content: end;
  --hsf-navigationrow-buttons-single__justify-content: end;

  /* ---- Validation ---------------------------------------------------- */
  /* .rr-field__errors: pink, because pink is this page's one accent. */
  --hsf-erroralert__font-size: 0.75em;
  --hsf-erroralert__color: #d60064;
}

/*
 * The 14px desktop row gap. HubSpot's tokens are not media-query aware from the
 * style panel, which is the other reason this file is a better home for them
 * than the form editor: .rr-form__grid tightens to 14px above the tablet
 * breakpoint and the demo tab can now follow it.
 */
@media (min-width: 1176px) {
  .referral-revamp .hsfc-Renderer {
    --hsf-row__vertical-spacing: 14px;
  }
}

/*
 * Everything below is a property HubSpot exposes no token for.
 *
 * line-height first: HubSpot ships no line-height token of any kind, so its
 * elements inherit .referral-revamp's --rr-leading-prose (1.6). Every .rr-*
 * primitive resets to `normal`, and without the same reset here a label's line
 * box is 19.2px against the account form's 14 -- which is 5px per field, and
 * every row below the first one drifts.
 */
.referral-revamp .hsfc-Renderer .hsfc-TextInput,
.referral-revamp .hsfc-Renderer .hsfc-Button,
.referral-revamp .hsfc-Renderer .hsfc-DropdownOptions__List__ListItem {
  line-height: normal;
}

/*
 * The label's weight is stated on both the label and the <strong> that HubSpot's
 * rich-text editor currently wraps each label in. Setting it on the label alone
 * is worse than not setting it: `strong { font-weight: bolder }` resolves
 * against the inherited weight, so a 700 label yields a 900 <strong>. Naming
 * both makes the rule hold whether or not that wrapping survives the next edit
 * in HubSpot.
 */
.referral-revamp .hsfc-Renderer .hsfc-FieldLabel,
.referral-revamp .hsfc-Renderer .hsfc-FieldLabel strong {
  font-weight: 700;
  line-height: normal;
}

/*
 * .rr-input's 38px, for the same reason it is explicit there -- Figma draws a
 * 38px control with the stroke inside it. The phone field's country button is a
 * sibling of its text input rather than a wrapper, so it has to be pinned too or
 * the two halves of that control come out different heights.
 */
.referral-revamp .hsfc-Renderer .hsfc-TextInput,
.referral-revamp .hsfc-Renderer .hsfc-PhoneInput__FlagAndCaret {
  height: 38px;
  box-sizing: border-box;
}

/*
 * --hsf-field-input__padding is a single token spent in five places, and the
 * `0 12px` an input wants is wrong for three of them: the country button, the
 * dropdown's search box and its list items all need vertical padding to size
 * themselves. They are given it back here.
 */
.referral-revamp .hsfc-Renderer .hsfc-PhoneInput__FlagAndCaret {
  padding: 0 12px;
}

.referral-revamp .hsfc-Renderer .hsfc-DropdownOptions__Search {
  padding: 8px;
}

.referral-revamp .hsfc-Renderer .hsfc-DropdownOptions__List__ListItem {
  padding: 8px 12px;
}

/*
 * A dropdown's caret is absolutely positioned over the right edge of its input,
 * so the input needs right padding wide enough to clear it. HubSpot's stock
 * caret is 20px of padding a side; trimming it to 12 keeps the caret's distance
 * from the edge equal to the text's on the left.
 */
.referral-revamp .hsfc-Renderer .hsfc-DropdownInput__Caret {
  padding: 0 12px;
}

.referral-revamp .hsfc-Renderer .hsfc-TextInput--button {
  padding-right: 34px;
}

/*
 * HubSpot glows the input on hover and again, differently, on focus. The design
 * has no hover treatment at all, and .rr-input:focus is a pink border plus a 3px
 * pink ring. The hover reset is stated before the focus rule so that an input
 * that is both -- which is every input the moment it is clicked -- keeps the
 * ring.
 */
.referral-revamp .hsfc-Renderer .hsfc-TextInput:hover,
.referral-revamp .hsfc-Renderer .hsfc-TextInput:active {
  box-shadow: none;
}

.referral-revamp .hsfc-Renderer .hsfc-TextInput:focus {
  border-color: #d60064;
  outline: none;
  box-shadow: 0 0 0 3px rgba(214, 0, 100, 0.35);
}

.referral-revamp .hsfc-Renderer .hsfc-TextInput[aria-invalid="true"] {
  border-color: #d60064;
}

/*
 * TU-5725: Django owns the demo title and offer so the trial length follows the
 * active referral program, not static HubSpot editor copy. This relies on the
 * embed's intro being a first-child .hsfc-Row with a direct .hsfc-Heading,
 * immediately followed by a .hsfc-Row with a direct .hsfc-RichText.
 * Hide only those intro rows in this panel, not later rich text such as consent
 * or success messages. Recheck these selectors if the HubSpot intro is edited.
 */
.referral-revamp #rr-panel-demo .hsfc-Renderer .hsfc-Row:first-child:has(> .hsfc-Heading),
.referral-revamp #rr-panel-demo .hsfc-Renderer .hsfc-Row:first-child:has(> .hsfc-Heading) + .hsfc-Row:has(> .hsfc-RichText) {
  display: none;
}

.referral-revamp #rr-panel-demo > .rr-form__head {
  margin-bottom: var(--rr-space-22);
}

.referral-revamp .hsfc-Renderer .hsfc-Heading {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  line-height: normal;
}

.referral-revamp .hsfc-Renderer .hsfc-RichText p {
  margin: 0;
}

.referral-revamp .hsfc-Renderer .hsfc-Row:has(> .hsfc-Heading) {
  margin-bottom: 6px;
}

.referral-revamp .hsfc-Renderer .hsfc-Row:has(> .hsfc-RichText) {
  margin-bottom: 22px;
}

/*
 * The reCAPTCHA badge is the last thing before the button and needs no gap of
 * its own; NavigationRow's own margin-top is what separates them. That margin is
 * `vertical-spacing * 2` by default, which tracks the row gap rather than the
 * 22px .rr-form__footer sits at.
 */
.referral-revamp .hsfc-Renderer .hsfc-Row:has(> .hsfc-ReCaptchaV3) {
  margin-bottom: 0;
}

.referral-revamp .hsfc-Renderer .hsfc-ReCaptchaV3 {
  position: relative;
  min-height: 78px;
}

.referral-revamp .hsfc-Renderer .hsfc-ReCaptchaV3 .grecaptcha-badge {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
}

.referral-revamp .hsfc-Renderer .hsfc-NavigationRow {
  margin-top: 22px;
}

/*
 * HubSpot stacks its rows and goes full-width on the button at 430px. The
 * account form does both at 560 (--rr-* has no 430 breakpoint), so between those
 * two widths the tabs would disagree -- one column against two, a full-width
 * button against a 164px one. This moves HubSpot's behaviour onto the account
 * form's breakpoint; below 430 the two rules simply agree.
 */
@media (max-width: 560px) {
  .referral-revamp .hsfc-Renderer .hsfc-Row {
    display: flex;
    flex-direction: column;
    gap: var(--hsf-row__vertical-spacing);
  }

  .referral-revamp .hsfc-Renderer .hsfc-NavigationRow__Buttons {
    flex-direction: column;
  }

  .referral-revamp .hsfc-Renderer .hsfc-NavigationRow__Buttons > * {
    width: 100%;
  }
}

/* =======================================================================
 * Account form (TU-5555)
 *
 * TeamUp's real SignupForm, laid out to Figma's Form Body (38:535). The field
 * primitives it uses -- .rr-field, .rr-label, .rr-required, .rr-input,
 * .rr-checkbox -- were built by TU-5549 and are unchanged; what is new here is
 * the grid they sit in, the head and footer, and the states Django's widgets
 * need that a static mockup does not show (errors, selects, disabled submit).
 * ===================================================================== */

.rr-form__head {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-6);
}

.rr-form__subtitle {
  margin: 0;
  font-size: var(--rr-text-input);
  line-height: normal;
  color: var(--rr-color-form-subtitle);
}

/*
 * Figma's Grid is 1000px of three 321.33 columns with 18px between them, which
 * `repeat(3, 1fr)` and an 18px column gap reproduce exactly at any card width.
 * Row gap is 14px: rows sit at y 0, 72, 144 ... and are 58 tall.
 *
 * Every row in the design sums to three columns, so the fields flow into place
 * without per-row wrapper elements -- two thirds plus a third, three thirds, or
 * one full-width field.
 */
.rr-form__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rr-space-14) var(--rr-space-18);
  margin-top: var(--rr-space-22);
}

.rr-field--wide {
  grid-column: span 2;
}

.rr-field--full {
  grid-column: 1 / -1;
}

/*
 * Selects keep the platform caret rather than `appearance: none` plus a
 * background-image chevron. The design draws a caret and the native one is a
 * caret; swapping it for an SVG would mean owning the open state, the disabled
 * state and the high-contrast rendering of a control the browser already gets
 * right on every platform.
 */
select.rr-input {
  /* The native caret needs room the design's 12px right padding does not leave. */
  padding-right: var(--rr-space-8);
  cursor: pointer;
}

/* ---- Errors ------------------------------------------------------------ */

/*
 * Not in any frame -- the mockup only draws the empty state. Pink is the page's
 * one accent and is already what marks a required field, so errors reuse it
 * rather than introducing a red that appears nowhere else in the design.
 */
.rr-form__errors,
.rr-field__errors {
  margin: var(--rr-space-6) 0 0;
  padding-left: var(--rr-space-18);
  font-size: var(--rr-text-fine-print);
  line-height: normal;
  color: var(--rr-color-pink);
}

.rr-form__errors {
  margin-top: var(--rr-space-14);
}

.rr-input[aria-invalid="true"] {
  border-color: var(--rr-color-pink);
}

/* ---- Consent and policy checkboxes ------------------------------------- */

.rr-form__policies {
  display: flex;
  flex-direction: column;
}

/*
 * The policies widget renders one checkbox per ACTIVE_POLICIES entry as a
 * <ul><li><label>, so Figma's two rows are one field here and a third policy
 * would simply appear.
 *
 * Selected structurally, not by the `radio-select-choices` class that
 * landing/field_widgets/checkbox_select_multiple.html appears to set: the
 * rendered markup is `<ul id="id_policies">` with no class on it at all. Rather
 * than depend on resolving which template the form renderer actually picked,
 * this keys off the structure, which is the same either way -- otherwise the
 * default UA list styling shows through as bullets beside every checkbox.
 */
.rr-form__policies ul {
  display: flex;
  flex-direction: column;
  gap: var(--rr-space-14);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rr-form__policies li {
  list-style: none;
}

.rr-form__policies label,
.rr-form__consent .rr-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--rr-space-8);
  font-size: var(--rr-text-body-sm);
  line-height: normal;
  color: var(--rr-color-form-label);
  cursor: pointer;
}

.rr-form__policies input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--rr-color-pink);
}

/* ---- Footer ------------------------------------------------------------ */

.rr-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rr-space-14);
  margin-top: var(--rr-space-22);
}

.rr-form__fine-print {
  margin: 0;
  max-width: 340px;
  font-size: var(--rr-text-fine-print);
  line-height: normal;
  color: var(--rr-color-form-fine-print);
}

/*
 * The footer is the one row the design lays out side by side that cannot stay
 * that way: "Protected by reCAPTCHA." plus a 164px button does not fit beside
 * itself once the card is narrow, and the button is the page's primary action.
 * It goes full width and the fine print sits under it.
 */
@media (max-width: 560px) {
  .rr-form__footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .rr-form__footer .rr-btn {
    width: 100%;
  }
}

/* ---- Account form: narrower widths ------------------------------------- */

/*
 * The Tablet (768) frame lays the same fields out in TWO columns of 327 with
 * the same 18px gutter, and tightens the card body to 24px all round (Figma:
 * Grid x=24 w=672, Form Body h=1069 with the footer ending at 1045).
 *
 * It also re-pairs them, and almost all of that falls out of the column count
 * for free -- Category+fitness, First+Last, Address2+City, Region+Postcode all
 * land exactly as drawn, and everything marked --wide becomes a full row
 * because `span 2` of two columns *is* the full row. Phone is the sole
 * exception, hence --full-lap.
 *
 * Same 1175px switch as the rest of the page, for the reason TU-5553 gives
 * there: it is where the desktop hero stops fitting at its designed size.
 */
@media (max-width: 1175px) {
  .rr-form-card__body {
    padding: var(--rr-space-24);
  }

  .rr-form__grid {
    grid-template-columns: repeat(2, 1fr);
    /* Tablet rows sit 74px apart on a 58px field: a 16px gap, not desktop's 14. */
    gap: var(--rr-space-16) var(--rr-space-18);
  }

  .rr-field--full-lap {
    grid-column: 1 / -1;
  }
}

/*
 * One column below 560px. This is a fit constraint, not a design: two 327px
 * columns need 672px of grid, and by here there is less than half of that, so
 * a two-up row would put "State/Region" in about 120px. The only frame that
 * draws this width is the unapproved Mobile (480) one -- which, for what it is
 * worth, also stacks every field full width. Same caveat TU-5553 recorded: if
 * phones this narrow matter, that wants a real frame.
 */
@media (max-width: 560px) {
  .rr-form__grid {
    grid-template-columns: 1fr;
  }

  /*
   * --wide has to be reset, not just left alone: `grid-column: span 2` in a
   * one-column grid does not clamp, it invents a second implicit column and
   * pushes that field off the card.
   */
  .rr-field--wide {
    grid-column: 1 / -1;
  }
}