/**
 * PLS Registration v3 — page styles
 *
 * Implements the Claude Design canvas "PLS Registration v3".
 * Spec + tokens: shared/design/PLS-Registration-SPEC.md (gitignored; see repo docs)
 *
 * Everything is scoped under .pls-reg so nothing here can leak into other Pro
 * pages. The design expressed its 760px breakpoint as a JS resize listener;
 * here it is a real CSS media query so it survives page caching and is
 * verifiable without driving a resize event.
 */

.pls-reg {
  --pls-navy: #163b83;
  --pls-navy-deep: #0a265d;
  --pls-red: #e02b19;
  --pls-red-hover: #c51e0d;
  --pls-body: #505050;
  --pls-muted: #888888;
  --pls-border: #cbcbcb;
  --pls-surface: #f5f5f5;
  --pls-fill: #ededed;
  --pls-track: #dddddd;
  --pls-green: #236e38;
  --pls-green-bg: #e9f1ec;
  --pls-gradient: linear-gradient(135deg, #163b83 0%, #0a265d 100%);
  --pls-card-shadow: 0 14px 0 -6px rgba(255, 255, 255, 0.3),
    0 28px 0 -12px rgba(255, 255, 255, 0.15);

  font-family: "Jost", system-ui, -apple-system, sans-serif;
  color: var(--pls-navy);
  background: var(--pls-surface);
}

.pls-reg *,
.pls-reg *::before,
.pls-reg *::after {
  box-sizing: border-box;
}

/* ── Shell ───────────────────────────────────────────────────────────────── */

.pls-reg__grid {
  display: grid;
  grid-template-columns: minmax(380px, 460px) 1fr;
  min-height: 100vh;
}

.pls-reg__aside {
  background: var(--pls-gradient);
  color: #fff;
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
}

.pls-reg__main {
  background: var(--pls-surface);
  padding: 34px 48px;
  display: flex;
  flex-direction: column;
}

/* Pro sets img { width: 100% }, which squashes the near-square logo (400×366)
   into a 44px-tall letterbox. Pin width to auto and cap it explicitly. */
.pls-reg .pls-reg__logo,
.pls-reg .pls-reg__mobile-head img,
.pls-reg .pls-reg__mobile-formhead img {
  width: auto !important;
  max-width: none;
  height: 44px;
  display: block;
  object-fit: contain;
  /* .pls-reg__aside is a flex column, so children stretch to its full width by
     default — that, not a width rule, is what letterboxed the logo. */
  align-self: flex-start;
  flex: none;
}

.pls-reg .pls-reg__logo {
  height: 56px;
  margin-bottom: 34px;
}

.pls-reg .pls-reg__mobile-head img,
.pls-reg .pls-reg__mobile-formhead img {
  height: 38px;
}

.pls-reg__aside h1 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.pls-reg__aside p {
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* Clears the stacked-paper shadow under .pls-card (0 28px 0 -12px), which the
   disclaimer was sitting on top of. */
.pls-reg__disclaimer {
  display: block;
  margin-top: 34px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.pls-reg__stats {
  margin-top: auto;
  padding-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
}

/*
 * In the aside (≈388px of content width) three stats cannot sit on one flex
 * line, so the third wrapped to its own row. The design treats them as three
 * equal COLUMNS that wrap internally, not as items that reflow — so grid them
 * and let each cell wrap its own text.
 */
.pls-reg .pls-reg__aside .pls-reg__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.pls-reg .pls-reg__aside .pls-reg__stats > span {
  display: block;
  line-height: 1.45;
}

.pls-reg__stats strong {
  color: #fff;
}

/* ── Sample score card ───────────────────────────────────────────────────── */

.pls-card {
  background: #fff;
  border-radius: 24px;
  padding: 20px 22px;
  color: var(--pls-navy);
  box-shadow: var(--pls-card-shadow);
}

/* ── Animated health-check preview (template-parts/pls-score-card.php) ─────
   Two stacked cards: the question card, and a result card that overlaps its
   bottom-right corner. JS toggles .is-picked / .is-shown and rewrites the copy;
   everything visible here is a transition, so with JS off (or with
   prefers-reduced-motion) the markup's own resolved state is what shows. */

.pls-demo {
  --pls-band: #5aa95e;
  --pls-band-bg: #e9f1ec;
  position: relative;
  padding-bottom: 8px;
}

/* One band colour per result, driven by data-band (JS rewrites it each cycle). */
.pls-demo__result[data-band="excellent"] {
  --pls-band: #5aa95e;
  --pls-band-bg: #e9f1ec;
}

.pls-demo__result[data-band="foundation"] {
  --pls-band: #d38520;
  --pls-band-bg: #fdf3e6;
}

.pls-demo__result[data-band="attention"] {
  --pls-band: #d93025;
  --pls-band-bg: #fdecea;
}

.pls-demo__q {
  padding: 16px 18px 18px;
}

.pls-demo__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pls-reg .pls-card .pls-demo__kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pls-muted);
}

.pls-reg .pls-card .pls-demo__counter {
  font-size: 11px;
  color: var(--pls-muted);
  white-space: nowrap;
}

.pls-demo__titlerow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ececec;
}

.pls-demo__num {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pls-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pls-reg .pls-card .pls-demo__pillar {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pls-navy);
}

.pls-demo__next {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pls-red);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pls-reg .pls-card .pls-demo__statement {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid #f3dcd8;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pls-navy);
}

.pls-demo__options {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pls-demo__option {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pls-demo__radio {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--pls-navy);
  background: transparent;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.pls-demo__option.is-picked .pls-demo__radio {
  background: var(--pls-red);
  transform: scale(1.15);
}

.pls-reg .pls-card .pls-demo__optlabel {
  font-size: 12px;
  line-height: 1.35;
  color: var(--pls-navy);
  transition: font-weight 0.2s ease;
}

.pls-demo__option.is-picked .pls-demo__optlabel {
  font-weight: 600;
}

/* The result card lifts off the question card's bottom-right corner, as in the
   design. Negative margin keeps it in flow, so the panel height stays stable. */
.pls-demo__result {
  position: relative;
  z-index: 2;
  width: 86%;
  margin: -26px -10px 0 auto;
  padding: 14px 16px 16px;
  border-top: 3px solid var(--pls-band);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.3s ease;
}

.pls-demo__result.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.pls-demo__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 99px;
  border: 1.5px solid var(--pls-band);
  background: var(--pls-band-bg);
  color: var(--pls-band);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.2, 1.5, 0.4, 1);
}

.pls-demo__pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pls-band);
}

.pls-demo__result.is-shown .pls-demo__pill {
  animation: pls-pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) 0.15s both;
}

@keyframes pls-pop {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pls-demo__bar {
  position: relative;
  height: 10px;
  margin-top: 14px;
  border-radius: 99px;
  background: var(--pls-fill);
}

.pls-demo__bar-global,
.pls-demo__bar-industry {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s ease, left 0.6s ease;
}

.pls-demo__bar-global {
  left: 0;
  background: #7f97c8;
}

.pls-demo__bar-industry {
  background: var(--pls-navy);
}

.pls-demo__bar-you {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--pls-band);
  transform: translateY(-50%);
  transition: left 0.6s cubic-bezier(0.3, 1.2, 0.4, 1), background-color 0.3s ease;
}

.pls-demo__legend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--pls-body);
}

.pls-demo__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pls-demo__legend-item::before {
  content: "";
  width: 9px;
  height: 5px;
  border-radius: 99px;
  background: currentColor;
}

.pls-demo__legend-item--global {
  color: #7f97c8;
}

.pls-demo__legend-item--industry {
  color: var(--pls-navy);
}

.pls-demo__legend-item--you {
  margin-left: auto;
  color: var(--pls-band);
  font-weight: 700;
}

.pls-demo__legend-item--you::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.pls-demo__legend strong {
  color: inherit;
}

/* Compact (mobile intro screen) */
.pls-demo--compact .pls-demo__q {
  padding: 14px 15px 15px;
}

.pls-demo--compact .pls-demo__result {
  width: 92%;
  margin-right: -4px;
  padding: 12px 14px 14px;
}

.pls-reg .pls-demo--compact .pls-card .pls-demo__pillar {
  font-size: 14px;
}

.pls-demo--compact .pls-demo__options {
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .pls-demo__radio,
  .pls-demo__result,
  .pls-demo__bar-global,
  .pls-demo__bar-industry,
  .pls-demo__bar-you,
  .pls-demo__pill {
    transition: none;
  }

  .pls-demo__result.is-shown .pls-demo__pill {
    animation: none;
  }
}

/* ── Form column ─────────────────────────────────────────────────────────── */

.pls-reg__login-link {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--pls-muted);
}

.pls-reg__login-link a {
  font-weight: 500;
  color: var(--pls-red);
  text-decoration: none;
}

.pls-reg__form-col {
  max-width: 400px;
  width: 100%;
  margin: auto;
}

/* ── Gravity Forms overrides ─────────────────────────────────────────────── */

.pls-reg .gform_wrapper {
  margin: 0;
}

.pls-reg .gform_wrapper form {
  margin: 0;
}

/* Kill GF's own progress bar; the design ships its own step meter. */
.pls-reg .gf_progressbar_wrapper {
  display: none !important;
}

.pls-reg .gform_wrapper .gform_fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  grid-row-gap: 14px;
}

/* GF 3.0's theme framework sets label weight/colour via --gf-label-* at a
   specificity that beats a bare class, so the framework class is included here
   (font-size alone was landing; weight and colour were not). */
.pls-reg .gform_wrapper .gfield_label,
.pls-reg .gform_wrapper label.gfield_label.gform-field-label,
.pls-reg .gform_wrapper legend.gfield_label.gform-field-label,
.pls-reg .gform_wrapper legend.gfield_label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--pls-navy);
  margin-bottom: 6px;
}

.pls-reg .gform_wrapper .gfield_required {
  color: var(--pls-red);
}

.pls-reg .gform_wrapper input[type="text"],
.pls-reg .gform_wrapper input[type="email"],
.pls-reg .gform_wrapper input[type="password"],
.pls-reg .gform_wrapper select,
.pls-reg .gform_wrapper textarea {
  width: 100%;
  /* Upstream forces height:38px + line-height:38px on form controls. Inputs
     survived it (browsers centre single-line input text anyway) but <select>
     did not, and 38px is shorter than the design's 13px-padding field. Let all
     controls size from their own padding so they match each other. */
  height: auto;
  min-height: 0;
  line-height: normal;
  padding: 13px 14px;
  border: 1.5px solid var(--pls-border);
  border-radius: 10px;
  font-family: "Jost", system-ui, sans-serif;
  font-size: 15px;
  color: var(--pls-navy);
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}

.pls-reg .gform_wrapper input[type="text"]:focus,
.pls-reg .gform_wrapper input[type="email"]:focus,
.pls-reg .gform_wrapper input[type="password"]:focus,
.pls-reg .gform_wrapper select:focus {
  border-color: var(--pls-red);
}

/*
 * <select> needs its own geometry + background reset.
 *
 * Two bugs this fixes:
 *  1. Vertical alignment — something upstream sets `height: 38px` AND
 *     `line-height: 38px`. With box-sizing:border-box and 13px vertical padding
 *     the content box is only 12px, so a 38px line-height shoved the text to the
 *     bottom of the control. Height must be auto and line-height normal so the
 *     padding does the centring, exactly like the text inputs.
 *  2. The zigzag on hover — a hover state upstream injects a small SVG
 *     background-image, and because background-repeat computes to `repeat` it
 *     tiled across the whole control as a wave pattern. Pinning the background
 *     (colour + no-repeat) on every state kills it regardless of which
 *     stylesheet injects it.
 *
 * appearance:none also removes the native arrow, so supply our own chevron.
 */
.pls-reg .gform_wrapper select,
.pls-reg .gform_wrapper select:hover,
.pls-reg .gform_wrapper select:focus,
.pls-reg .gform_wrapper select:active {
  appearance: none;
  -webkit-appearance: none;
  height: auto;
  min-height: 0;
  line-height: normal;
  vertical-align: middle;
  padding: 13px 40px 13px 14px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23163B83' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  text-indent: 0;
}

.pls-reg .gform_wrapper .gfield_description,
.pls-reg .gform_wrapper .instruction {
  margin: 6px 0 0;
  padding: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--pls-muted);
}

/* First/Last name on one row */
.pls-reg .gform_wrapper .pls-half {
  width: 100%;
}

@media (min-width: 480px) {
  .pls-reg .gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 10px;
  }

  .pls-reg .gform_wrapper .gfield {
    grid-column: 1 / -1;
  }

  .pls-reg .gform_wrapper .pls-half-left {
    grid-column: 1 / 2;
  }

  .pls-reg .gform_wrapper .pls-half-right {
    grid-column: 2 / 3;
  }
}

/* Priority radio cards.
   The step heading is a <legend class="gfield_label gform-field-label">, so it
   needs an element selector to out-specify the generic label rule above. */
.pls-reg .gform_wrapper .pls-priority legend.gfield_label,
.pls-reg .gform_wrapper .pls-priority .gfield_label {
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--pls-navy);
  margin-bottom: 6px;
  float: none;
  width: auto;
}

/* GF appends "(Required)" to every label; the design shows no required marker. */
.pls-reg .gform_wrapper .gfield_required {
  display: none;
}

/* Per-step heading + sub-copy, injected as HTML fields on pages 2 and 3
   (page 1's heading is the priority field's own legend). */
.pls-reg .gform_wrapper .pls-step-head {
  margin: 0;
}

.pls-reg .gform_wrapper .pls-step-title {
  margin: 0 0 6px;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--pls-navy);
}

.pls-reg .gform_wrapper .pls-step-sub {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pls-body);
}

.pls-reg .gform_wrapper .pls-priority .gfield_description {
  margin: 0 0 18px;
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pls-body);
}

.pls-reg .pls-priority .gfield_radio {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pls-reg .pls-priority .gchoice {
  margin: 0;
}

/*
 * GF's theme framework lays each choice out as
 *   grid-template-columns: minmax(var(--gf-ctrl-choice-size), max-content) auto;
 * which sizes the label to its content instead of the row. The design wants the
 * whole card clickable, so the choice becomes a plain block and the label goes
 * full width.
 */
.pls-reg .gform_wrapper .pls-priority .gchoice {
  position: relative;
  display: block !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  column-gap: 0 !important;
}

.pls-reg .gform_wrapper .pls-priority .gchoice > label {
  flex: 1 0 100%;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/*
 * The dot is the real <input type="radio"> restyled with appearance:none,
 * NOT a ::before on the label. Two reasons: the native control keeps its
 * semantics and focus behaviour for free, and generated content is dropped by
 * DOM-render screenshot capture, which makes a pseudo-element dot impossible
 * to verify visually.
 */
/*
 * Drive GF's own control variables instead of overriding its declarations.
 *
 * Every visual property of a framework radio — border, background, shadow, and
 * the checked dot (a ::before whose background is --gf-ctrl-choice-check-color)
 * — is var-driven behind selectors carrying :where() chains that a child theme
 * cannot out-specify. Setting the variables wins cleanly and needs no
 * !important; overriding the declarations does not.
 *
 * NOTE the ::before is invisible to DOM-render screenshot capture, which drops
 * generated content — so a blue dot here cannot be caught visually, only via
 * getComputedStyle(el, '::before').
 */
.pls-reg .gform_wrapper .pls-priority {
  --gf-ctrl-choice-check-color: #e02b19;
  --gf-ctrl-choice-size: 18px;
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #ffffff;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color: #cbcbcb;
  --gf-ctrl-border-color-hover: #e02b19;
  --gf-ctrl-border-color-focus: #e02b19;
  --gf-ctrl-shadow: none;
}

.pls-reg .gform_wrapper .pls-priority .gchoice input[type="radio"] {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  flex: none;
  margin: 0;
  cursor: pointer;
  /* No transition on the dot: selection feedback should be instant, and the
     design animates the CARD (border/background), not the indicator.
     Verification note — a transitioned property here is also untrustworthy in a
     backgrounded tab, where Chrome suspends the rendering lifecycle so the
     transition never advances and getComputedStyle keeps returning its start
     value. That reads exactly like a broken :checked state when nothing is. */
}

/* Literal colours, and the dot drawn with background rather than an inset
   box-shadow: GF's framework declares box-shadow on these controls and the
   custom-property indirection made the checked state unreliable. */
/* Checked state now comes entirely from GF's own rendering, recoloured via
   --gf-ctrl-choice-check-color above. No override needed. */

/*
 * White + red only — no blue anywhere on these cards.
 *
 * Two upstream blues were showing through:
 *  - a 3px navy `outline` declared on the choice label, which painted a hard
 *    blue ring on focus;
 *  - a blue-tinted `box-shadow: rgba(18,25,97,.08) 0 1px 4px` on the radio at
 *    rest, reading as a faint blue glow around the control.
 * Both are neutralised here, and the focus ring is re-stated in red so the
 * control keeps a visible keyboard indicator.
 */
.pls-reg .gform_wrapper .pls-priority .gchoice input[type="radio"] {
  box-shadow: none;
  outline-color: var(--pls-red);
}

.pls-reg .gform_wrapper .pls-priority .gchoice label,
.pls-reg .gform_wrapper .pls-priority .gchoice label:hover,
.pls-reg .gform_wrapper .pls-priority .gchoice label:focus,
.pls-reg .gform_wrapper .pls-priority .gchoice label:focus-within {
  outline: none;
  box-shadow: none;
  background: #fff;
}

/* Keyboard focus: red ring on the card, never blue. */
.pls-reg .gform_wrapper .pls-priority .gchoice input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--pls-red);
  outline-offset: 2px;
}

.pls-reg .gform_wrapper .pls-priority .gchoice input[type="radio"]:focus-visible {
  outline: none;
}

.pls-reg .pls-priority .gchoice label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1.5px solid var(--pls-border);
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--pls-navy);
  line-height: 1.35;
  transition: border-color 0.15s, background 0.15s;
  margin: 0;
}

/* Label leaves room for the absolutely-positioned dot. */
.pls-reg .gform_wrapper .pls-priority .gchoice label {
  padding-left: 44px;
}

/* Hover was navy; red keeps the card to white + red. */
.pls-reg .pls-priority .gchoice label:hover {
  border-color: var(--pls-red);
}

.pls-reg .gform_wrapper .pls-priority .gchoice input[type="radio"]:checked + label {
  border-color: var(--pls-red);
}

/* Consent checkbox */
/* GF renders the label as <legend class="gfield_label …">; the design shows only
   the checkbox text, so the legend needs an element selector to be hidden. */
.pls-reg .gform_wrapper .pls-consent legend.gfield_label,
.pls-reg .gform_wrapper .pls-consent .gfield_label {
  display: none;
}

.pls-reg .pls-consent .gfield_consent_label {
  display: block;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--pls-body);
  font-weight: 400;
  cursor: pointer;
}

.pls-reg .pls-consent .ginput_container {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.pls-reg .gform_wrapper .pls-consent input[type="checkbox"] {
  flex: 0 0 16px;
  margin: 2px 0 0 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 0;
  min-height: 0;
  accent-color: var(--pls-red);
}

/* Marketing preference — a Yes/No question, so the label is VISIBLE here (unlike
   the consent checkbox) and the two choices sit side by side. Deliberately not
   the .pls-priority card treatment: that is the page-1 hero question, and giving
   an optional preference the same weight would out-shout it. */
.pls-reg .gform_wrapper .pls-marketing legend.gfield_label,
.pls-reg .gform_wrapper .pls-marketing .gfield_label {
  display: block;
  flex: 1 1 200px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--pls-body);
  margin-bottom: 0;
}

/* Question and answers share one row. GF's framework CSS sets
   `.gfield--type-choice .gfield_radio { flex-direction: column }` at (0,2,0), so
   overriding `display` alone left the choices stacked — the direction has to be
   stated too. The fieldset itself becomes the flex row; if a browser refuses to
   treat <legend> as a flex item, `flex-wrap` drops the answers to their own line
   rather than breaking the layout. */
.pls-reg .gform_wrapper .pls-marketing.gfield {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}

.pls-reg .gform_wrapper .pls-marketing .ginput_container {
  flex: 0 0 auto;
  margin: 0;
}

.pls-reg .gform_wrapper .pls-marketing .gfield_radio {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 18px;
  align-items: center;
}

.pls-reg .pls-marketing .gchoice {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.pls-reg .gform_wrapper .pls-marketing input[type="radio"] {
  flex: 0 0 16px;
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 0;
  min-height: 0;
  accent-color: var(--pls-red);
}

.pls-reg .pls-marketing label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--pls-navy);
  cursor: pointer;
}

/* Password label is a legend on a complex field — needs the element selector
   to match the 12px/600 treatment every other label gets. */
.pls-reg .gform_wrapper legend.gfield_label.gfield_label_before_complex,
.pls-reg .gform_wrapper .pls-password legend.gfield_label,
.pls-reg .gform_wrapper .pls-password .gfield_label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pls-navy);
  margin-bottom: 6px;
}

/* The design has no strength meter (also disabled on the field itself). */
.pls-reg .gform_wrapper .gfield_password_strength,
.pls-reg .gform_wrapper .gform-password-strength {
  display: none;
}

.pls-reg .pls-consent a,
.pls-reg .pls-marketing a {
  color: var(--pls-red);
}

/* Buttons — GF next / previous / submit */
.pls-reg .gform_wrapper .gform_page_footer,
.pls-reg .gform_wrapper .gform_footer {
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  border: 0;
}

/*
 * GF 3.0 renders these as <button class="gform_next_button gform-theme-button
 * button"> — not <input> — and its own theme layer paints `.button` blue at a
 * specificity that plain class selectors lose to. Hence the element+class
 * selectors and the targeted !important on the paint properties only.
 */
.pls-reg .gform_wrapper .gform_page_footer .gform_next_button,
.pls-reg .gform_wrapper .gform_page_footer .gform_button,
.pls-reg .gform_wrapper .gform_footer .gform_button,
.pls-reg .gform_wrapper .gform_footer button[type="submit"],
.pls-reg .gform_wrapper .gform_footer input[type="submit"],
.pls-reg .gform_wrapper .gform_page_footer input[type="submit"] {
  width: 100%;
  padding: 15px !important;
  background: var(--pls-red) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: "Jost", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  margin: 0;
  order: 1;
  box-shadow: none !important;
  text-transform: none;
}

.pls-reg .gform_wrapper .gform_page_footer button.gform_next_button:hover,
.pls-reg .gform_wrapper .gform_footer button[type="submit"]:hover,
.pls-reg .gform_wrapper .gform_footer input[type="submit"]:hover {
  background: var(--pls-red-hover) !important;
}

/* "← Back" is a text button, never a pill. Listed after — and at equal or
   higher specificity than — the pill rule so it wins. */
.pls-reg .gform_wrapper .gform_page_footer button.gform_previous_button,
.pls-reg .gform_wrapper .gform_page_footer input.gform_previous_button,
.pls-reg .gform_wrapper .gform_page_footer .gform_previous_button {
  order: 2;
  align-self: center;
  width: auto;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-family: "Jost", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--pls-muted) !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* The design shows no Back on step 1; JS stamps data-pls-step on the wrapper. */
.pls-reg .gform_wrapper[data-pls-step="1"] .gform_previous_button {
  display: none;
}

.pls-reg__reassurance {
  order: 3;
  text-align: center;
  font-size: 11px;
  color: var(--pls-muted);
}

/* Step meter — the design's own, replacing GF's progress bar */
.pls-step-meter__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.pls-step-meter__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--pls-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pls-step-meter__hint {
  font-size: 11px;
  color: var(--pls-muted);
}

.pls-step-meter__track {
  height: 5px;
  background: var(--pls-track);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 24px;
}

.pls-step-meter__fill {
  height: 100%;
  background: var(--pls-red);
  border-radius: 99px;
  transition: width 0.25s ease;
}

/* Validation */
.pls-reg .gform_wrapper .gfield_error input,
.pls-reg .gform_wrapper .gfield_error select {
  border-color: var(--pls-red);
}

.pls-reg .gform_wrapper .validation_message,
.pls-reg .gform_wrapper .gform_validation_errors {
  font-size: 11.5px;
  color: var(--pls-red-hover);
  background: none;
  border: none;
  box-shadow: none;
  padding: 4px 0 0;
}

/* On the confirmation screen the step meter and reassurance line go away.
   Done with :has() rather than JS so it can't lose a race with GF's AJAX
   confirmation swap. */
.pls-reg__form-col:has(.pls-done) .pls-step-meter,
.pls-reg__form-col:has(.pls-done) .pls-reg__reassurance {
  display: none;
}

/* Confirmation ("You're in.") */
.pls-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 6px;
  min-height: 340px;
}

.pls-done__check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--pls-green-bg);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  font-size: 28px;
  color: var(--pls-green);
}

.pls-done h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: var(--pls-navy);
}

.pls-done p {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--pls-body);
}

.pls-done__cta {
  display: block;
  width: 100%;
  padding: 15px;
  background: var(--pls-red);
  color: #fff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

.pls-done__secondary {
  display: block;
  margin-top: 10px;
  padding: 13px;
  color: var(--pls-body);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

/* ── Mobile intro (rendered always, revealed under 760px) ────────────────── */

.pls-reg__mobile-intro {
  display: none;
}

@media (max-width: 760px) {
  .pls-reg__grid {
    display: block;
    min-height: 0;
  }

  /* The desktop aside is replaced wholesale by the mobile intro screen. */
  .pls-reg__aside {
    display: none;
  }

  .pls-reg__mobile-intro {
    display: flex;
    flex-direction: column;
    /* 100vh is the LARGE viewport height: with the browser's address bar shown
       it is taller than what the user can actually see, which pushed the CTA
       below the fold. dvh tracks the visible area; vh stays as the fallback. */
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--pls-gradient);
    color: #fff;
    padding: 18px 20px 22px;
  }

  .pls-reg__mobile-intro.is-hidden {
    display: none;
  }

  .pls-reg__mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
  }

  .pls-reg__mobile-head img {
    height: 38px;
    width: auto;
    display: block;
  }

  .pls-reg__mobile-head a {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
  }

  /* The theme sets an explicit dark colour on h1, and an explicit rule always
     beats inheritance from .pls-reg__mobile-intro's `color: #fff` — so this
     rendered near-black on the navy gradient. Every text element on a coloured
     panel needs its colour stated, never inherited. */
  .pls-reg .pls-reg__mobile-intro h1 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
  }

  .pls-reg__mobile-intro > p {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
  }

  .pls-reg__mobile-cta-wrap {
    margin-top: auto;
    padding-top: 24px;
  }

  .pls-reg__mobile-cta {
    display: block;
    width: 100%;
    padding: 15px;
    background: var(--pls-red);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: "Jost", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .pls-reg__mobile-fineprint {
    margin: 10px 0 0;
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
  }

  /* Form screen */
  .pls-reg__main {
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .pls-reg__main.is-hidden {
    display: none;
  }

  .pls-reg__mobile-formhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 10px;
  }

  .pls-reg__mobile-formhead img {
    height: 38px;
    width: auto;
    display: block;
  }

  .pls-reg__mobile-formhead a {
    font-size: 12px;
    font-weight: 500;
    color: var(--pls-red);
    text-decoration: none;
  }

  .pls-reg__login-link {
    display: none;
  }

  .pls-reg__form-col {
    max-width: none;
    margin: 0;
    padding: 6px 20px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .pls-step-meter__track {
    margin-bottom: 22px;
  }

  /*
   * Sticky CTA. Applied to GF's own footer where it already lives, rather than
   * relocating it — moving the footer out of .gform_wrapper breaks every
   * `.pls-reg .gform_wrapper …` button rule above. GF's AJAX rebuilds this
   * element on each page change, which sticky handles fine; what would break it
   * is an ancestor with overflow/transform, so keep .pls-reg__form-col clean.
   */
  .pls-reg .gform_wrapper .gform_page_footer,
  .pls-reg .gform_wrapper .gform_footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0;
    /* Clears the home indicator / gesture bar on notched phones. */
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--pls-surface);
    box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, 0.12);
  }

  .pls-reg__sticky-footer {
    padding: 0 0 20px;
    background: var(--pls-surface);
  }
}

@media (min-width: 761px) {
  .pls-reg__mobile-formhead,
  .pls-reg__mobile-intro {
    display: none;
  }

  .pls-reg__sticky-footer {
    position: static;
    padding: 0;
    background: none;
    box-shadow: none;
  }
}

/* ── Login screen (template-pls-login.php) ───────────────────────────────── */
/* The login screen reuses the registration shell wholesale — .pls-reg__grid,
   .pls-reg__aside, .pls-reg__main, .pls-reg__form-col — so the only rules here
   are for what is unique to it: the heading block and the GF login widget.
   The old centred .pls-login__screen / __inner / __aside / __card layout is
   gone with the markup that used it. */

.pls-reg .pls-login__head h1 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--pls-navy);
}

.pls-reg .pls-login__sub {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pls-body);
}

/* GF login widget internals */
.pls-login__form .gform_wrapper,
.pls-login__form form {
  margin: 0;
}

.pls-login__form .gform_fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pls-reg .pls-login__form label,
.pls-reg .pls-login__form .gfield_label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--pls-navy);
  margin-bottom: 6px;
}

.pls-reg .pls-login__form input[type="text"],
.pls-reg .pls-login__form input[type="email"],
.pls-reg .pls-login__form input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1.5px solid var(--pls-border);
  border-radius: 10px;
  font-family: "Jost", system-ui, sans-serif;
  font-size: 15px;
  color: var(--pls-navy);
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}

.pls-reg .pls-login__form input:focus {
  border-color: var(--pls-red);
}

.pls-reg .pls-login__form input[type="submit"],
.pls-reg .pls-login__form button[type="submit"],
.pls-reg .pls-login__form .gform_button {
  width: 100%;
  margin: 20px 0 0 !important;
  padding: 15px !important;
  background: var(--pls-red) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: "Jost", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-transform: none;
}

.pls-reg .pls-login__form input[type="submit"]:hover,
.pls-reg .pls-login__form .gform_button:hover {
  background: var(--pls-red-hover) !important;
}

/* Hide the widget's own "remember me" / register links — the design has its own */
.pls-login__form .gform_footer + p,
.pls-login__form .gf_login_links {
  display: none;
}

.pls-reg .pls-login__forgot {
  margin: 12px 0 0;
  text-align: right;
  font-size: 11.5px;
}

.pls-reg .pls-login__forgot a {
  font-weight: 500;
  color: var(--pls-red);
  text-decoration: none;
}

.pls-reg .pls-login__newhere {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--pls-muted);
}

.pls-reg .pls-login__newhere a {
  font-weight: 600;
  color: var(--pls-red);
  text-decoration: none;
}

/* Password label + "Forgot password?" on one row (assembled by
   adaptLoginWidget(); the widget renders them apart). */
/* Single-class (0,1,0) loses to GF's framework rules on generic divs inside
   .gfield, which force display:block — hence the deeper selector. */
.pls-reg .pls-login__form .pls-login__pwrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.pls-reg .pls-login__pwrow label,
.pls-reg .pls-login__pwrow .gfield_label {
  margin-bottom: 0;
}

.pls-reg .pls-login__pwrow .pls-login__forgot {
  margin: 0;
  white-space: nowrap;
}

/* Hide GF's own widget heading as a belt-and-braces alongside the JS. */
.pls-login__form .gform_title,
.pls-login__form .gform_heading > h3 {
  display: none;
}

/* The widget's "remember me" checkbox isn't in the design. */
.pls-login__form .gfield--type-checkbox {
  display: none;
}

/* GF gives labels width:100%, which pushed "Forgot password?" onto its own
   line inside the flex row. Shrink the label to its content. */
.pls-reg .pls-login__pwrow label,
.pls-reg .pls-login__pwrow .gfield_label {
  width: auto;
  flex: 0 0 auto;
}