/* =========================================================================
   SuiteAmerica Design System — New Components (DS Task 5)
   From design_handoff_ds_alignment/design_system/ui_kits/marketing/styles.css.
   Additive, opt-in classes — no collision with existing repo selectors.
   All values consume the --sa-* tokens consolidated into :root (DS Task 1).
   Scope everything under .SAweb_updateUi so it only applies in the new UI tree.
   ========================================================================= */

/* ---------- Testimonials — alternating black / stone quote cards ---------- */
.SAweb_updateUi .sa-testimonials { background: var(--bg-page); padding: 5rem 0; }
.SAweb_updateUi .sa-testimonials__eyebrow {
  display: block; font-family: var(--font-display);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 0.65rem;
}
.SAweb_updateUi .sa-testimonials h2 {
  font-size: 2.6rem; font-weight: 800; margin: 0 0 3rem; max-width: 20ch; text-wrap: balance;
}
.SAweb_updateUi .sa-testimonials__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.SAweb_updateUi .sa-tcard {
  position: relative; overflow: hidden;
  background: var(--sa-black); color: var(--sa-white);
  border-radius: 0; box-shadow: none;
  padding: 3.25rem 2rem 2rem;
  display: flex; flex-direction: column; min-height: 22rem; margin: 0;
}
.SAweb_updateUi .sa-tcard--stone { background: var(--sa-stone); }
.SAweb_updateUi .sa-tcard__mark {
  position: absolute; top: 0.5rem; left: 1rem;
  font-size: 7rem; line-height: 1; color: var(--sa-iron); pointer-events: none;
}
.SAweb_updateUi .sa-tcard--stone .sa-tcard__mark { color: var(--sa-graphite); }
.SAweb_updateUi .sa-tcard__body {
  position: relative; z-index: 1; margin: 0;
  font-size: 1.15rem; font-weight: 500; line-height: 1.45; flex: 1;
}
.SAweb_updateUi .sa-tcard__who {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  gap: 0.1rem; margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.SAweb_updateUi .sa-tcard__role { font-weight: 700; font-size: 0.95rem; }
.SAweb_updateUi .sa-tcard__org { font-size: 0.85rem; opacity: 0.7; }

@media (max-width: 900px) {
  .SAweb_updateUi .sa-testimonials__grid { grid-template-columns: 1fr; }
}

/* ---------- NEW LAUNCH banner — black band, caps chip, drifting spans ---------- */
.SAweb_updateUi .sa-newlaunch {
  position: relative; overflow: hidden;
  background: var(--sa-black); color: var(--sa-white);
  padding: 3.5rem 0; text-align: center;
}
.SAweb_updateUi .sa-newlaunch__bg {
  position: absolute; font-family: var(--font-display); font-weight: 900;
  font-size: 9rem; line-height: 1; color: rgba(255, 255, 255, 0.04);
  white-space: nowrap; pointer-events: none; user-select: none;
}
.SAweb_updateUi .sa-newlaunch__bg--1 { top: -1rem; left: -2rem; animation: sa-drift-l 18s linear infinite alternate; }
.SAweb_updateUi .sa-newlaunch__bg--2 { bottom: -1.5rem; right: -2rem; animation: sa-drift-r 22s linear infinite alternate; }
.SAweb_updateUi .sa-newlaunch__inner { position: relative; z-index: 1; }
.SAweb_updateUi .sa-newlaunch__chip {
  display: inline-block; font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 800; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; border: 2px solid var(--sa-white);
  padding: 0.4rem 0.9rem; margin-bottom: 1.25rem;
}
.SAweb_updateUi .sa-newlaunch__title { font-size: 2.1rem; font-weight: 800; margin: 0 0 0.75rem; }
.SAweb_updateUi .sa-newlaunch__sub { font-size: 1.1rem; font-weight: 500; opacity: 0.8; margin: 0 0 1.75rem; }

@keyframes sa-drift-l { from { transform: translateX(0); } to { transform: translateX(2.5rem); } }
@keyframes sa-drift-r { from { transform: translateX(0); } to { transform: translateX(-2.5rem); } }
@media (prefers-reduced-motion: reduce) {
  .SAweb_updateUi .sa-newlaunch__bg--1,
  .SAweb_updateUi .sa-newlaunch__bg--2 { animation: none; }
}

/* ---------- Credentials / trust strip ---------- */
.SAweb_updateUi .sa-credstrip {
  background: var(--sa-white);
  border-top: 1px solid var(--sa-mist); border-bottom: 1px solid var(--sa-mist);
  padding: 1.5rem 0;
}
.SAweb_updateUi .sa-credstrip__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap;
}
.SAweb_updateUi .sa-credstrip__rating { display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; }
.SAweb_updateUi .sa-credstrip__rating img { height: 26px; width: auto; }
.SAweb_updateUi .sa-credstrip__rating span {
  font-size: 0.9rem; font-weight: 600; color: var(--fg-2); max-width: 16ch; line-height: 1.25;
}
.SAweb_updateUi .sa-credstrip__creds { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.SAweb_updateUi .sa-credstrip__cell {
  display: flex; flex-direction: column; gap: 0.15rem; padding: 0 1.5rem; position: relative;
}
.SAweb_updateUi .sa-credstrip__cell + .sa-credstrip__cell::before {
  content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: var(--sa-mist);
}
.SAweb_updateUi .sa-credstrip__label { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; }
.SAweb_updateUi .sa-credstrip__sub { font-size: 0.78rem; color: var(--fg-3); }
@media (max-width: 720px) {
  .SAweb_updateUi .sa-credstrip__cell:nth-child(n + 3)::before { display: none; }
}

/* ---------- Co-brand client microsite header ---------- */
.SAweb_updateUi .sa-cobrand-header {
  position: sticky; top: 0; z-index: 50; background: var(--sa-white); border-bottom: 2px solid var(--sa-black);
}
.SAweb_updateUi .sa-cobrand-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1rem 0;
}
.SAweb_updateUi .sa-cobrand-lockup { display: flex; align-items: center; gap: 1.1rem; }
.SAweb_updateUi .sa-cobrand-lockup__sa img { height: 26px; display: block; }
.SAweb_updateUi .sa-cobrand-lockup__x { font-size: 1.1rem; font-weight: 500; color: var(--fg-3); line-height: 1; }
.SAweb_updateUi .sa-cobrand-lockup__client {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 0.5rem;
  border: 1px dashed var(--sa-fence);
}
.SAweb_updateUi .sa-cobrand-lockup__slot img { height: 26px; display: block; }
.SAweb_updateUi .sa-cobrand-lockup__slot-label {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--fg-3); white-space: nowrap;
}
.SAweb_updateUi .sa-cobrand-nav { display: flex; list-style: none; gap: 2rem; margin: 0; padding: 0; }
.SAweb_updateUi .sa-cobrand-nav__link {
  font-size: 0.92rem; font-weight: 600; color: var(--sa-ink); text-decoration: none; opacity: 0.85; transition: opacity 0.3s ease;
}
.SAweb_updateUi .sa-cobrand-nav__link:hover { opacity: 1; }
.SAweb_updateUi .sa-cobrand-header__strap { background: var(--sa-black); color: var(--sa-white); }
.SAweb_updateUi .sa-cobrand-header__strap .container { padding: 0.55rem 0; font-size: 0.85rem; }
.SAweb_updateUi .sa-cobrand-header__strap span { opacity: 0.85; }
.SAweb_updateUi .sa-cobrand-header__strap strong { font-weight: 800; opacity: 1; }
@media (max-width: 900px) { .SAweb_updateUi .sa-cobrand-nav { display: none; } }


/* =============================================================
   FORM FIELDS — appended verbatim from
   design_handoff_form_fields/colors_and_type.css (DS Task 4a).
   The .sa-* form classes are unique (zero collision verified) and
   apply only to elements that opt in, so they are intentionally
   UNSCOPED — matching the canonical handoff source byte-for-byte.
   Tokens (--sa-*, --fg-*, --font-body, etc.) come from style-new.css
   :root (DS Task 1). Includes: base inputs + 3 treatments, field
   wrapper/label/help, select, inputgroup, validation states,
   checkbox, segment, stepper, toggle, floating-label (.sa-float*),
   and the international phone field (.sa-phone*).
   ============================================================= */

/* ---------- Forms ----------
   One base (.sa-input) + three treatments. All square, 2px structure,
   Cabinet Grotesk. The box is constant-width on every side (transparent where
   not drawn) so focus only swaps a colour — fields never shift on click.
   Treatments:
     .sa-input            underline  — minimal; hero search, single fields
     .sa-input--box       boxed      — DEFAULT for multi-field forms / dropdowns
     .sa-input--filled    filled     — quiet paper fill for inline forms on white
*/
.sa-input {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--w-medium);
  color: var(--fg-1);
  background: var(--sa-white);
  border: var(--border-w) solid transparent;
  border-bottom-color: var(--sa-ink);
  border-radius: 0;
  padding: 0.7rem 0.1rem;
  width: 100%;
  outline: none;
  transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.sa-input::placeholder { color: var(--fg-3); }
.sa-input:focus { border-bottom-color: var(--sa-link); }

.sa-input--box {
  border-color: var(--sa-ink);
  padding: 0.7rem 0.85rem;
}
.sa-input--box:focus { border-color: var(--sa-link); }

.sa-input--filled {
  background: var(--sa-paper);
  border-bottom-color: var(--sa-graphite);
  padding: 0.7rem 0.85rem;
}
.sa-input--filled:focus { background: #f1f1f1; border-bottom-color: var(--sa-link); }

textarea.sa-input { resize: vertical; min-height: 5.5rem; line-height: var(--lh-normal); }

/* Field wrapper + label + help text */
.sa-field { display: flex; flex-direction: column; gap: 0.45rem; }
.sa-field__label {
  font-size: 0.7rem; font-weight: var(--w-bold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3);
}
.sa-field__label em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: var(--w-semibold); opacity: 0.7; }
.sa-field__help { font-size: 0.78rem; color: var(--fg-3); display: inline-flex; align-items: center; gap: 0.35rem; }

/* Custom select — native chevron suppressed, Bootstrap chevron drawn */
.sa-select { position: relative; display: block; }
.sa-select select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer; }
.sa-select__chev { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--fg-1); font-size: 0.9rem; }
.sa-select .sa-input:not(.sa-input--box):not(.sa-input--filled) + .sa-select__chev { right: 0.2rem; }

/* Input group — leading prefix (phone +1, $, units…) */
.sa-inputgroup { display: flex; align-items: stretch; }
.sa-inputgroup__pre { display: flex; align-items: center; font-weight: var(--w-semibold); color: var(--fg-2); white-space: nowrap; }
.sa-inputgroup .sa-input { border: 0; }
.sa-inputgroup--box { border: var(--border-w) solid var(--sa-ink); }
.sa-inputgroup--box:focus-within { border-color: var(--sa-link); }
.sa-inputgroup--box .sa-inputgroup__pre { padding: 0 0.85rem; border-right: 1px solid var(--sa-fence); background: var(--sa-paper); }
.sa-inputgroup--line { border-bottom: var(--border-w) solid var(--sa-ink); }
.sa-inputgroup--line:focus-within { border-bottom-color: var(--sa-link); }
.sa-inputgroup--line .sa-inputgroup__pre { padding: 0.7rem 0.5rem 0.7rem 0.1rem; }

/* States — muted semantic tints, never saturated red/green */
.sa-input.is-error { border-bottom-color: var(--sa-error); }
.sa-input--box.is-error { border-color: var(--sa-error); background: var(--sa-error-tint); }
.sa-input.is-success { border-bottom-color: var(--sa-success); }
.sa-input--box.is-success { border-color: var(--sa-success); }
.sa-field__help.is-error { color: var(--sa-error); }
.sa-field__help.is-success { color: var(--sa-success); }
.sa-input:disabled, .sa-input.is-disabled { background: var(--sa-paper); color: var(--fg-3); border-bottom-color: var(--sa-fence); cursor: not-allowed; }

/* Square checkbox */
.sa-check { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; font-weight: var(--w-medium); cursor: pointer; }
.sa-check input { position: absolute; opacity: 0; pointer-events: none; }
.sa-check__box { width: 20px; height: 20px; border: var(--border-w) solid var(--sa-ink); display: inline-flex; align-items: center; justify-content: center; color: transparent; flex-shrink: 0; transition: background-color var(--dur-fast) var(--ease); }
.sa-check input:checked + .sa-check__box { background: var(--sa-ink); color: var(--sa-white); }
.sa-check input:focus-visible + .sa-check__box { outline: 2px solid var(--sa-link); outline-offset: 2px; }

/* Segmented control — the on-brand single-select / toggle */
.sa-segment { display: inline-flex; border: var(--border-w) solid var(--sa-ink); }
.sa-segment button { background: transparent; border: 0; padding: 0.55rem 1.1rem; font-family: var(--font-display); font-weight: var(--w-bold); font-size: 0.85rem; color: var(--sa-ink); cursor: pointer; }
.sa-segment button + button { border-left: var(--border-w) solid var(--sa-ink); }
.sa-segment button.is-on { background: var(--sa-ink); color: var(--sa-white); }

/* Number stepper */
.sa-stepper { display: inline-flex; align-items: stretch; border: var(--border-w) solid var(--sa-ink); }
.sa-stepper button { background: transparent; border: 0; width: 2.6rem; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--sa-ink); }
.sa-stepper button:first-child { border-right: var(--border-w) solid var(--sa-ink); }
.sa-stepper button:last-child { border-left: var(--border-w) solid var(--sa-ink); }
.sa-stepper input { width: 3rem; text-align: center; border: 0; outline: 0; font: inherit; font-weight: var(--w-semibold); background: transparent; }

/* Square toggle */
.sa-toggle { display: inline-flex; align-items: center; gap: 0.7rem; cursor: pointer; font-size: 0.95rem; font-weight: var(--w-medium); }
.sa-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.sa-toggle__track { width: 46px; height: 24px; border: var(--border-w) solid var(--sa-ink); display: inline-flex; align-items: center; padding: 2px; transition: background-color var(--dur-fast) var(--ease); }
.sa-toggle__knob { width: 16px; height: 16px; background: var(--sa-ink); transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.sa-toggle input:checked + .sa-toggle__track { background: var(--sa-ink); }
.sa-toggle input:checked + .sa-toggle__track .sa-toggle__knob { transform: translateX(22px); background: var(--sa-white); }

/* ---------- Form treatment 04 · Floating label ----------
   Formalises the codebase's `.floating-label-group` pattern. The label rests
   inside the field (vertically centred) when empty, then floats up to straddle
   the top border on focus or when filled — knocked out of the 2px box with a
   white background. Square, Cabinet Grotesk, dusty-blue on focus. Requires the
   input to carry placeholder=" " (a single space) so :placeholder-shown works.

   Markup:
     <label class="sa-float">
       <input class="sa-float__field" type="text" placeholder=" " />
       <span class="sa-float__label">Full name</span>
     </label>
*/
.sa-float { position: relative; display: block; }
.sa-float__field {
  font-family: var(--font-body); font-size: 1rem; font-weight: var(--w-medium); line-height: 1.2;
  color: var(--fg-1); background: var(--sa-white);
  border: var(--border-w) solid var(--sa-ink); border-radius: 0;
  padding: 1.15rem 0.85rem 0.6rem; width: 100%; outline: none;
  transition: border-color var(--dur-base) var(--ease);
}
.sa-float__field::placeholder { color: transparent; }
.sa-float__label {
  position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%);
  margin: 0; padding: 0 0.3rem; background: var(--sa-white);
  font-family: var(--font-body); font-size: 1rem; font-weight: var(--w-medium);
  color: var(--fg-3); pointer-events: none;
  transition: top var(--dur-fast) var(--ease), font-size var(--dur-fast) var(--ease),
              font-weight var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              letter-spacing var(--dur-fast) var(--ease);
}
.sa-float__label em { font-style: normal; opacity: 0.7; }
/* Floated state: focused, filled, or always-floated (e.g. selects) */
.sa-float__field:focus ~ .sa-float__label,
.sa-float__field:not(:placeholder-shown) ~ .sa-float__label,
.sa-float.is-floated .sa-float__label {
  top: 0; font-size: 0.7rem; font-weight: var(--w-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3);
}
.sa-float__field:focus { border-color: var(--sa-link); }
.sa-float__field:focus ~ .sa-float__label { color: var(--sa-link); }

/* Select inside a floating field — native arrow suppressed, label always floated.
   The legacy global `select { background-image: url(down-arrow.png) !important; padding-right: 23px !important }`
   in main-style.css bleeds a raster arrow onto every <select>; here it collided with our own
   .sa-float__chev (bi-chevron-down) to render a doubled chevron. Suppress the inherited PNG (and
   restore the chevron gutter) with !important so DS float-selects show only the .sa-float__chev. */
.sa-float--select .sa-float__field { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: none !important; padding-right: 2.4rem !important; }
.sa-float__chev { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--fg-1); font-size: 0.9rem; }

/* Textarea floating field */
textarea.sa-float__field { resize: vertical; min-height: 5.5rem; line-height: var(--lh-normal); padding-top: 1.35rem; }

/* Phone / prefix inside a floating field */
.sa-float--group .sa-float__field { padding-left: 2.6rem; }
.sa-float__pre {
  position: absolute; left: 0.85rem; top: var(--border-w); transform: none;
  padding: 1.15rem 0 0.6rem; line-height: 1.2;  /* match field text line; top offset accounts for the field's 2px border */
  font-size: 1rem; font-weight: var(--w-medium); color: var(--fg-2); pointer-events: none;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.sa-float__field:focus ~ .sa-float__pre,
.sa-float__field:not(:placeholder-shown) ~ .sa-float__pre,
.sa-float--group.is-floated .sa-float__pre { opacity: 1; }

/* States — reuse the muted semantic tints */
.sa-float__field.is-error { border-color: var(--sa-error); background: var(--sa-error-tint); }
.sa-float__field.is-error ~ .sa-float__label { color: var(--sa-error); }
.sa-float__field.is-success { border-color: var(--sa-success); }
.sa-float__field.is-success ~ .sa-float__label { color: var(--sa-success); }
.sa-float__field:disabled { background: var(--sa-paper); color: var(--fg-3); border-color: var(--sa-fence); cursor: not-allowed; }
.sa-float__field:disabled ~ .sa-float__label { color: var(--fg-3); background: var(--sa-paper); }

/* ---------- International phone field (.sa-phone) ----------
   A phone input whose dial-code prefix is a tappable, searchable country
   dropdown. No flag emoji (brand avoids emoji) — ISO code + country name +
   dial code in Cabinet Grotesk. Square, 2px structure, dusty-blue focus, and
   the same list styling language as the codebase `.select-items`. Behaviour
   (toggle / filter / keyboard / outside-click) is wired by the accompanying
   script in the specimen; the markup contract is documented in the README. */
.sa-phone { position: relative; display: flex; align-items: stretch; width: 100%; background: var(--sa-white); border: var(--border-w) solid var(--sa-ink); border-radius: 0; }
.sa-phone:focus-within { border-color: var(--sa-link); }
.sa-phone__code {
  display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
  border: 0; border-right: 1px solid var(--sa-fence); background: var(--sa-paper);
  padding: 0 0.7rem 0 0.85rem; cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-size: 1rem; font-weight: var(--w-semibold); color: var(--fg-1);
}
.sa-phone__code:hover { background: var(--sa-mist); }
.sa-phone__code i { font-size: 0.75rem; color: var(--fg-3); transition: transform var(--dur-fast) var(--ease); }
.sa-phone[data-open="true"] .sa-phone__code i { transform: rotate(180deg); }
.sa-phone__input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--font-body); font-size: 1rem; font-weight: var(--w-medium); line-height: 1.2; color: var(--fg-1);
  padding: 0.7rem 0.85rem;
}
.sa-phone__input::placeholder { color: var(--fg-3); }

/* The popover list */
.sa-phone__menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  display: flex; flex-direction: column; max-height: 290px;
  background: var(--sa-white); border: var(--border-w) solid var(--sa-ink); box-shadow: var(--shadow-deep);
}
.sa-phone__menu[hidden] { display: none; }
.sa-phone__search { padding: 0.6rem 0.6rem 0.5rem; border-bottom: 1px solid var(--sa-fence); flex-shrink: 0; }
.sa-phone__search input {
  width: 100%; border: 0; border-bottom: var(--border-w) solid var(--sa-ink); border-radius: 0; outline: 0;
  background: transparent; font-family: var(--font-body); font-size: 0.95rem; font-weight: var(--w-medium); color: var(--fg-1);
  padding: 0.4rem 0.1rem;
}
.sa-phone__search input:focus { border-bottom-color: var(--sa-link); }
.sa-phone__search input::placeholder { color: var(--fg-3); }
.sa-phone__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.sa-phone__option {
  display: flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 0.85rem; cursor: pointer;
  font-size: 0.95rem; color: var(--fg-1);
}
.sa-phone__option:hover, .sa-phone__option.is-active { background: var(--sa-paper); }
.sa-phone__option[aria-selected="true"] { font-weight: var(--w-bold); }
.sa-phone__option.is-hidden { display: none; }
.sa-phone__iso { flex-shrink: 0; width: 1.9rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--fg-3); }
.sa-phone__name { flex: 1; }
.sa-phone__dial { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.sa-phone__empty { padding: 0.85rem; font-size: 0.9rem; color: var(--fg-3); text-align: center; }

/* Floating-label variant — the box carries a "PHONE" label straddling the top
   border (kept permanently floated, since the code segment is always visible) */
.sa-phone--float .sa-phone__floatlabel {
  position: absolute; top: 0; left: 0.65rem; transform: translateY(-50%); z-index: 1;
  margin: 0; padding: 0 0.3rem; background: var(--sa-white); pointer-events: none;
  font-family: var(--font-body); font-size: 0.7rem; font-weight: var(--w-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3);
  transition: color var(--dur-fast) var(--ease);
}
.sa-phone--float:focus-within .sa-phone__floatlabel { color: var(--sa-link); }

/* Error / disabled states mirror the other field treatments */
.sa-phone.is-error { border-color: var(--sa-error); }
.sa-phone.is-error .sa-phone--float .sa-phone__floatlabel { color: var(--sa-error); }



/* =============================================================
   FORM-CONTROL BRIDGE (DS Task 4d) — converge Bootstrap .form-control
   onto the .sa-input--box treatment WITHOUT rewriting markup across
   275 files. This is value-convergence, not a rewrite: every
   .SAweb_updateUi .form-control gets the square, 2px-black, Cabinet
   Grotesk, dusty-blue-focus field language from the design system.

   Specificity notes (deliberate):
   - 0,0,2 selector (.SAweb_updateUi .form-control) wins over Bootstrap's
     base .form-control (0,0,1) but LOSES to the higher-specificity
     reserve-drawer rules (#sideQuote ... .form-control = 0,1,3+), which
     are aligned separately in Task 4e. Correct by design.
   - The existing .form-control.validation { border-color: red !important }
     and .form-control.validation + span.checkmark rules keep winning
     (their !important + equal/higher specificity), so error states are
     preserved untouched.
   ============================================================= */
.SAweb_updateUi .form-control {
  font-family: var(--font-body);
  border: var(--border-w) solid var(--sa-ink);
  border-radius: 0;
  background-color: var(--sa-white);
  color: var(--fg-1);
  box-shadow: none;
  transition: border-color var(--dur-base) var(--ease),
              background-color var(--dur-base) var(--ease);
}
.SAweb_updateUi .form-control::placeholder { color: var(--fg-3); }
.SAweb_updateUi .form-control:focus {
  border-color: var(--sa-link);
  box-shadow: none;
  outline: none;
}
.SAweb_updateUi textarea.form-control {
  min-height: 5.5rem;
  line-height: var(--lh-normal);
}
/* Disabled / readonly keep the quiet paper treatment from the system */
.SAweb_updateUi .form-control:disabled,
.SAweb_updateUi .form-control[readonly] {
  background-color: var(--sa-paper);
  color: var(--fg-3);
  border-color: var(--sa-fence);
}

/* =============================================================
   .sa-float in stacked forms (DS Task 4g) — the handoff's .sa-float
   has no outer margin (specimen used a grid/flex gap on the wrapper).
   When fields are stacked directly in a <form>, give them rhythm so
   they don't jam together (matches the old .floating-label-group's
   1.5rem). Scoped to .SAweb_updateUi forms only.
   ============================================================= */
.SAweb_updateUi form .sa-float,
.SAweb_updateUi form .sa-phone { margin-bottom: 1.5rem; }
/* Only zero the gap when a field is truly the LAST child (button is usually last,
   so this matches nothing in the reserve form — Daily Budget keeps its gap, and
   SaPhone is spaced like every other field). :last-of-type was tag-based and
   wrongly zeroed the last <label> (Daily Budget) even with datepickers below it. */
.SAweb_updateUi form .sa-float:last-child,
.SAweb_updateUi form .sa-phone:last-child { margin-bottom: 0; }

/* =========================================================================
   DS Task 4p — Referral modal (brokers) field rhythm.
   The brokers form nests its fields in .inputView wrappers (2-up rows). After
   4l converted .form-group.floating-label-group -> .sa-float / .sa-phone /
   .sa-float--select, the old ".form-group{margin-bottom:20px}" rhythm no longer
   applied AND the 4m rule "form .sa-float:last-child{margin-bottom:0}" started
   matching the LAST field of each .inputView (live DOM: 0px gaps between every
   row group, 18px within — inconsistent). Restore a single uniform 20px under
   every field, at (0,4,0) specificity so it beats 4m's (0,3,1) :last-child rule
   everywhere (stacked OR side-by-side, so mobile within-group can't re-jam).
   align-items:flex-start keeps the two fields in a row top-aligned when one
   shows an inline error. Scoped to .referalModalView — affects only this form. */
.SAweb_updateUi .referalModalView .inputView .sa-float,
.SAweb_updateUi .referalModalView .inputView .sa-phone,
.SAweb_updateUi .referalModalView .inputView .floating-label-group { margin-bottom: 20px; }
.SAweb_updateUi .referalModalView .inputView { align-items: flex-start; }

/* =============================================================
   VALIDATION-CLASS BRIDGE (DS Task 4g) — the codebase's form JS adds
   a `.validation` class to the field element on error (jQuery
   $("#id").addClass("validation")). Map it to the DS error look so
   existing validation logic keeps working on both the .form-control
   bridge fields AND the new .sa-float fields.
   ============================================================= */
.SAweb_updateUi .form-control.validation,
.SAweb_updateUi .sa-input.validation,
.SAweb_updateUi .sa-float__field.validation {
  border-color: var(--sa-error) !important;
  background-color: var(--sa-error-tint);
}
.SAweb_updateUi .sa-float__field.validation ~ .sa-float__label {
  color: var(--sa-error);
}

/* =============================================================
   DS Task 4s — react-datepicker v9 weekday-header fix.
   v9 renders each day-name cell as TWO spans: a screen-reader-only
   full name (<span class="react-datepicker__sr-only">Sunday</span>)
   plus the visible 2-char abbrev (<span aria-hidden>Su</span>).
   The vendored base CSS (public/assets/css/react-datepicker.css) is
   from the pre-upgrade v1.x era and has NO .react-datepicker__sr-only
   rule, so the full name was NOT hidden -> "Sunday"/"Su" rendered
   together and overflowed the 36px cell, garbling the header across
   every calendar in the app. Restore v9's canonical visually-hidden
   rule (verbatim from react-datepicker/dist) so only "Su M T W Th F
   Sa" shows. GLOBAL on purpose: datepicker poppers render in a portal
   often outside .SAweb_updateUi, and this vendor class only ever
   appears inside react-datepicker, so it can't leak.
   ============================================================= */
.react-datepicker__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* =============================================================
   DS Task 4t — react-datepicker v9 month-nav button fix.
   Companion to 4s. v9 moved the prev/next arrow from a ::before on
   .react-datepicker__navigation (v1.x) to a child element
   .react-datepicker__navigation-icon::before, and hides the button's
   "Previous/Next Month" label via text-indent. The vendored base CSS
   (public/assets/css/react-datepicker.css, pre-upgrade v1.x) has the
   old .navigation rules but ZERO .navigation-icon rules, so under v9
   the label rendered as visible text ("Next Month") with no arrow and
   a collapsed 10px-wide button. Restore v9's canonical nav rules
   (verbatim from react-datepicker/dist) so the arrow draws and the
   label is hidden. Global — datepicker poppers portal outside
   .SAweb_updateUi; these vendor classes only exist inside the picker.
   ============================================================= */
.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous { left: 2px; }
.react-datepicker__navigation--next { right: 2px; }
.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next { left: -2px; }
.react-datepicker__navigation-icon--previous { right: -2px; }
.react-datepicker__navigation-icon::before {
  border-color: #5b5b5b;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

/* =============================================================
   DS Task 4v — calendar month-title invisible on the homepage hero.
   react-datepicker renders the month/year title as an <h2> with class
   .react-datepicker__current-month. On the homepage the picker mounts
   inside <div id="hero">, where style-new.css:1755
   `.SAweb_updateUi #hero h2 { color: var(--whiteColor) }` — a broad
   hero-heading rule, specificity (1,1,1) via the #hero ID — wins over
   the black `.react-datepicker__current-month` rules (specificity
   (0,1,0) and (0,3,0)), painting "June 2026" white-on-(transparent
   over light) → invisible. (This is homepage-only; other calendars
   aren't under #hero, which is why the reserve drawer looked fine.)
   Re-assert the calendar title color at equal-ID specificity so it
   ties #hero h2 and wins on later source order. Scoped to the
   datepicker class so real hero page headings are untouched.
   ============================================================= */
.SAweb_updateUi #hero .react-datepicker__current-month,
.SAweb_updateUi #hero .react-datepicker-year-header,
.SAweb_updateUi #hero .react-datepicker-time__header,
.SAweb_updateUi #sideQuote .react-datepicker__current-month,
.SAweb_updateUi #sideQuote .react-datepicker-year-header,
.SAweb_updateUi #sideQuote .react-datepicker-time__header {
  color: #000000;
}

/* =============================================================
   DS Task 4w — calendar weekday row alignment with the date grid.
   v9's base CSS indents the number grid (.react-datepicker__month
   { margin: 0.5em }) but the weekday-name row
   (.react-datepicker__day-names) has only a margin-bottom, no left
   margin — so the "Su Mo Tu…" row sat ~4.8px (0.5em) LEFT of the
   number columns (measured live: day-names left 328 vs month left
   333). Give the day-names row the same horizontal margin so both
   rows share one left origin and each weekday sits over its column.
   Global — only react-datepicker renders these classes.
   ============================================================= */
.react-datepicker__day-names {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

/* =============================================================
   DS Task 4x — vertically center the month title with the nav arrows.
   react-datepicker v9 positions the prev/next nav buttons via an
   inline `top` (JS-computed, ~18px) that sits them ~10px BELOW the
   title's natural baseline — the title's large `margin-bottom` (24px
   from the style-new.css scoped rule) keeps it pinned to the header
   top while the arrows drop lower. Result: "July 2026" reads as
   floating up-and-left of the arrow centerline (measured: title
   vertical-center 17px above the arrow center). Re-flow the title as
   a centered flex line the height of the nav button and nudge it onto
   the arrow centerline so the month label sits squarely between/level
   with ‹ ›. Values verified live against the homepage hero header;
   the reserve-drawer header shares the same structure.
   ============================================================= */
.react-datepicker__current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin: 0 0 8px;
  line-height: 1;
  position: relative;
  top: 10px;
}