/* The Become a rep page, explained the way the home page explains Pinpoint: the offer beside the original icon (the home's
   closing art from public/closing.css, at hero scale), the four steps as the home's objects (public/sales-benefits.css), the
   contract's terms beside the commission card (the pricing card in public/pricing.css), the shared questions, then the
   application. Every section is centered on the page, as the home page's are, and no picture is cropped by its box. */
.rep .nb { white-space: nowrap; }
.rep h2 { color: #23262b; }

/* ---------- The opening: the offer beside the original icon ---------- */
.rep-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; column-gap: 40px; min-height: 760px; height: min(100svh, 62.5vw); max-height: 980px; padding: 76px max(48px, calc((100% - 1240px) / 2)) 12px; overflow: hidden; }
.rep-hero__copy { min-width: 0; }
/* The product hero's display size: the copy shares the opening with the icon, so it sits a step below the home's centered one. */
.rep-hero__copy h1 { font-size: clamp(46px, 5.6vw, 80px); font-weight: 430; line-height: 1.06; letter-spacing: -.04em; color: #23262b; }
.rep-hero__copy h1 span { color: #ca2333; }
.rep-hero__lead { max-width: 32em; margin-top: 30px; font-size: 18px; line-height: 1.6; letter-spacing: -.012em; color: #555e67; }
.rep-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 34px; }
/* The home hero's pill. */
.rep-hero__actions .button { min-height: 52px; padding-inline: 34px; border-radius: 26px; font-size: 14px; }
.rep-hero__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 480; color: #343b44; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: #a8afbb; }
.rep-hero__link:hover { color: var(--red-dark); text-decoration-color: var(--red); }
/* The closing art keeps its tile, ground and frames. On the open ground beside the copy it needs no box, and its emission is
   shorter than in the closing panel: a frame has faded out at 1.3 times its base size (1.85 there), before it can reach the
   copy, the window's edge or, on phones, the edge of its region. The home's timing stays (5.4s, staggered by 1.8s). */
.rep-hero__icon.closing-box__art { overflow: visible; mask-image: none; -webkit-mask-image: none; }
@keyframes rep-emission { 0% { transform: scale(.76); opacity: 0; } 15% { opacity: .7; } 55% { opacity: .35; } 78%, 100% { transform: scale(1.3); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .rep-hero .closing-box__wave { animation-name: rep-emission; } }
@media (min-width: 1051px) {
  .rep-hero__icon.closing-box__art { height: 580px; }
  .rep-hero .closing-box__waves { width: 742px; height: 591px; }
  .rep-hero .closing-box__tile { width: 266px; height: 266px; margin: -140px 0 0 -127px; border-radius: 64px; box-shadow: 10px 14px 1px #d2d8e2, 11px 15px 0 #fff, 22px 32px 30px -11px #6b799342; }
  .rep-hero .closing-box__face::before { border-radius: 61px; }
  .rep-hero .closing-box__ground { width: 286px; height: 45px; margin: 165px 0 0 -128px; filter: blur(21px); }
}

/* ---------- How it works: the home's four objects, one for each step ---------- */
.rep-steps .sales-benefit h3 { min-height: 0; }
/* Without the script that starts their loops, the objects rest in their drawn state: the pin stays on its track. */
html:not(.js-ready) .rep-steps .sales-figure * { animation: none !important; }

/* ---------- What you get and what we expect: the terms beside the commission ---------- */
.rep-terms { width: min(1240px, calc(100% - 96px)); margin: 44px auto 0; }
/* The home's section heading, as How it works above it. */
.rep-terms > h2 { margin: 0 auto; text-align: center; font-size: clamp(28px, 3.4vw, 48px); font-weight: 450; line-height: 1.14; letter-spacing: -.035em; }
.rep-terms__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; gap: clamp(40px, 6vw, 88px); margin-top: 52px; }
.rep-terms__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin: 0; padding: 0; list-style: none; }
.rep-terms__list li { display: grid; align-content: start; gap: 5px; padding: 24px 0 26px; border-top: 1px solid var(--line); }
.rep-terms__list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.rep-terms__list strong { font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: #23262b; }
.rep-terms__list span { font-size: 15px; line-height: 1.6; color: var(--secondary); }
/* The figure is charcoal, as the commission is a fact, not an action: red stays with Apply. */
.rep-commission .price__amount { color: #23262b; }
.rep-commission__lead { margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--secondary); }
.rep-commission .price__list { margin: 8px 0 0; padding: 0; border-top: 0; }
.rep-commission__payout { margin: 14px 0 0; font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: #23262b; }
.rep-commission .price__button { margin-top: 26px; }

/* ---------- The questions and the application share one measure ---------- */
.rep > .qa, .rep-apply { width: min(1040px, calc(100% - 96px)); }
.rep-apply { margin: clamp(88px, 10vw, 140px) auto 0; padding-bottom: clamp(64px, 7vw, 104px); }

/* ---------- Apply: one white sheet in the commission card's material, with quiet controls ---------- */
.rep-apply__card { padding: 58px 72px 64px; background: #fff; border: 1px solid #e3e8ee; border-radius: 30px; box-shadow: inset 0 2px 0 #fff, 0 6px 0 -2px #e1e7ee, 0 48px 70px -46px #42587288; }
.rep-apply__head h2, .rep-done h2 { font-size: clamp(35px, 3.55vw, 49px); line-height: 1.09; letter-spacing: -.035em; }
.rep-apply__head { text-align: center; }
.rep-apply__head p { margin: 14px auto 0; max-width: 46ch; font-size: 17px; line-height: 1.6; letter-spacing: -.01em; color: #555e67; }
.rep-form { margin-top: 42px; }
.rep-form__grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; }
.rep-field { display: grid; align-content: start; gap: 9px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rep-field--wide { grid-column: 1 / -1; }
.rep-field > label, .rep-field > legend { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0; font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: #23262b; }
.rep-field > legend { margin-bottom: 9px; }
.rep-field__optional { font-size: 13px; font-weight: 450; letter-spacing: 0; color: var(--secondary); }
.rep-field input:not([type="radio"]):not([type="checkbox"]), .rep-field textarea { display: block; width: 100%; min-height: 52px; margin: 0; padding: 13px 16px; border: 1px solid transparent; border-radius: 14px; background: #f3f5f8; font: inherit; font-size: 16px; line-height: 1.5; color: #23262b; -webkit-appearance: none; appearance: none; transition: background 160ms ease, border-color 160ms ease, box-shadow 220ms var(--ease); }
.rep-field textarea { min-height: 124px; max-height: 320px; resize: none; field-sizing: content; }
.rep-field input::placeholder, .rep-field textarea::placeholder { color: #69707b; opacity: 1; }
.rep-field input:not([type="radio"]):not([type="checkbox"]):hover, .rep-field textarea:hover { background: #eef1f5; }
.rep-field input:not([type="radio"]):not([type="checkbox"]):focus, .rep-field textarea:focus { outline: none; background: #fff; border-color: #23262b; box-shadow: 0 0 0 4px #23262b12; }
.rep-field input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]), .rep-field textarea[aria-invalid="true"] { background: #fff; border-color: #c3202f; }
.rep-field input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]):focus, .rep-field textarea[aria-invalid="true"]:focus { border-color: #c3202f; box-shadow: 0 0 0 4px #d923321f; }
.rep-field__error { margin: 0; font-size: 14px; line-height: 1.45; color: #b9192a; }
/* Hours a week: a segmented control, the panel's soft track with its raised white pill. */
.rep-seg { display: inline-flex; justify-self: start; gap: 2px; max-width: 100%; padding: 4px; border-radius: 14px; background: #eef1f5; }
.rep-seg label { position: relative; display: block; flex: 1 1 auto; }
.rep-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rep-seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 10px; font-size: 15px; font-weight: 500; color: #4a5468; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; transition: background 160ms ease, color 160ms ease, box-shadow 220ms var(--ease); }
.rep-seg label:hover span { color: #23262b; }
.rep-seg input:checked + span { background: #fff; color: #23262b; font-weight: 600; box-shadow: 0 2px 6px rgba(38, 54, 77, .12), inset 0 -1px 1px rgba(211, 220, 229, .4); }
.rep-seg input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.rep-hours.is-invalid .rep-seg { box-shadow: inset 0 0 0 1px #c3202f; }
.rep-field > .rep-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); justify-content: start; gap: 12px; align-items: start; font-weight: 450; line-height: 1.5; color: #39414d; cursor: pointer; }
.rep-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #23262b; cursor: pointer; }
.rep-check input:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
/* The website field is a trap for automated sign-ups: people never see or reach it. */
.rep-trap { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.rep-form__foot { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-top: 34px; }
.rep-form__status { margin-right: auto; }
.rep-form__status p { margin: 0; font-size: 15px; line-height: 1.45; color: #b9192a; }
.rep-form__send { min-width: 210px; }
.rep-form__send[aria-disabled="true"] { opacity: .78; cursor: progress; transform: none; }
.rep-form__noscript { margin: 18px 0 0; font-size: 14px; color: var(--secondary); }
.rep-done { display: grid; justify-items: center; padding: 6px 0 2px; text-align: center; outline: none; }
.rep-done__mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #e4f3ea; color: #0b6844; }
.rep-done__mark svg { width: 26px; height: 26px; }
.rep-done h2 { margin: 28px 0 0; }
.rep-done p { margin: 10px 0 0; font-size: 19px; line-height: 1.5; letter-spacing: -.012em; color: #39414d; }
@media (prefers-reduced-motion: no-preference) {
  .rep-done:not([hidden]) { animation: ui-fade .5s cubic-bezier(.22, 1, .36, 1) both; }
  .rep-done:not([hidden]) .rep-done__mark { animation: rep-pop .5s .1s cubic-bezier(.22, 1, .36, 1) both; }
}
@keyframes rep-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) {
  .rep-hero { padding-inline: 32px; }
  .rep-terms, .rep > .qa, .rep-apply { width: calc(100% - 64px); }
}
@media (max-width: 1050px) {
  .rep-hero__icon.closing-box__art { height: 440px; }
  .rep-hero .closing-box__waves { width: 460px; height: 366px; }
}
@media (max-width: 900px) {
  .rep-terms__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 48px; max-width: 640px; margin-inline: auto; }
  .rep-terms__list { width: 100%; }
  .rep-commission { width: min(100%, 460px); }
  .rep-apply__card { padding: 44px 40px 48px; }
}
/* The opening stacks: the icon above the copy, centered, as the home's closing box does. The art spans the window, and its
   frames fade at the top and bottom of their region so they never cross the headline. */
@media (max-width: 800px) {
  .rep-hero { grid-template-columns: minmax(0, 1fr); row-gap: 6px; height: auto; min-height: 0; max-height: none; padding-top: 88px; padding-bottom: 20px; text-align: center; }
  .rep-hero__icon.closing-box__art { order: -1; width: 100vw; height: 340px; margin-inline: calc(50% - 50vw); overflow: hidden; mask-image: linear-gradient(transparent, #000 10%, #000 86%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 86%, transparent); }
  .rep-hero .closing-box__waves { width: 515px; height: 410px; }
  .rep-hero__copy h1 { font-size: clamp(39px, 7vw, 54px); }
  .rep-hero__lead { margin-inline: auto; }
  .rep-hero__actions { justify-content: center; }
}
@media (max-width: 760px) {
  .rep-terms > h2 { font-size: 35px; }
  .rep-form__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rep-terms__list { grid-template-columns: minmax(0, 1fr); }
  .rep-terms__list li:nth-last-child(2) { border-bottom: 0; }
}
@media (max-width: 720px) {
  .rep-hero__icon.closing-box__art { height: 300px; }
  .rep-hero .closing-box__waves { width: 420px; height: 334px; }
}
@media (max-width: 650px) {
  .rep-hero { padding: 80px 20px 16px; }
  .rep-terms, .rep > .qa, .rep-apply { width: calc(100% - 40px); }
  .rep-hero__copy h1 { font-size: clamp(35px, 10.3vw, 58px); line-height: 1.12; letter-spacing: -.035em; }
  .rep-hero__lead { max-width: 330px; margin-top: 18px; font-size: 16px; line-height: 1.6; }
  .rep-hero__actions { gap: 4px 24px; margin-top: 24px; }
  .rep-hero__actions .button { min-height: 49px; padding-inline: 30px; font-size: 13px; }
  .rep-terms { margin-top: 20px; }
  .rep-terms > h2 { max-width: 330px; }
  .rep-terms__grid { margin-top: 30px; gap: 36px; }
  .rep-terms__list li { padding: 20px 0 22px; }
  .rep-apply__card { padding: 30px 20px 28px; border-radius: 22px; }
  .rep-apply__head p { font-size: 16px; }
  .rep-form { margin-top: 32px; }
  .rep-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: stretch; }
  .rep-seg span { padding: 0 8px; }
  .rep-form__foot { flex-direction: column-reverse; align-items: stretch; gap: 14px; margin-top: 28px; }
  .rep-form__send { width: 100%; min-width: 0; }
  .rep-done p { font-size: 17px; }
}
@media (max-width: 370px) {
  .rep-hero { padding-inline: 16px; }
  .rep-terms > h2 { font-size: 31px; }
  .rep-terms, .rep > .qa, .rep-apply { width: calc(100% - 32px); }
}
/* Short phones (an iPhone SE, 320 by 640) keep the whole opening, Apply included, in the first screen: a smaller tile and region. */
@media (max-width: 650px) and (max-height: 720px) {
  .rep-hero { padding-top: 76px; }
  .rep-hero__icon.closing-box__art { height: 224px; }
  .rep-hero .closing-box__waves { width: 333px; height: 265px; }
  .rep-hero .closing-box__tile { width: 120px; height: 120px; margin: -62px 0 0 -58px; border-radius: 30px; box-shadow: 5px 7px 1px #d2d8e2, 6px 8px 0 #fff, 12px 17px 18px -8px #6b799342; }
  .rep-hero .closing-box__face::before { border-radius: 28px; }
  .rep-hero .closing-box__ground { width: 128px; height: 18px; margin: 71px 0 0 -59px; filter: blur(11px); }
}
@media (forced-colors: active) { .rep-hero { grid-template-columns: minmax(0, 1fr); } }