/* ==========================================================================================================================================================
   REQUEST-AN-INVITE: the APPROVED "A-1 inline swap" (F1) visuals. t1840 (replaces the t1835 prototype layer, which was the wrong source: a JS prototype without its CSS).
   Source (saved-approved t1693u), extracted from _source/invite_approved_bundle.tgz (sha256 2857f372b373520cb0e7d8f776b878ed98f8e7aa3c36cb57d784d585259ca41f):
     [A] <style id="hx">   in F1_1_email.html ... F1_5_skip_sent.html (identical in each), lines 1533-1559 of F1_2_swap.html: the .hx / .prow / .wb / .tgs / .tg1 / .lbl / .codeline base.
     [B] <style id="hx2">  = gen_flows.py CSS2 (lines 28-88): g3 toggle grid, .fl Send button, .sent, .rsv, .skp, .sc, 2px desktop border, no-outer-ring focus + html[data-kbd],
                           long-value input (.fi, .ovf, t1383u), phone rules (t1381u, 210px form box), phone Phase 1 rule.
     [C] the site's base CSS inside those pages (F1_2_swap.html lines 732-739 .prow/.codeline, 802-803 square corners, 815 placeholder, 810 .err, 870 + 910 .codeline,
                           896 + 899 + 906 .dl3, 779 phone .prow width).
   Values are copied, not restyled. Every place where this file differs from the source is marked  ADAPT:  (selector or element-type changes needed to make the controls real
   buttons and inputs, the positioning shell of this page, and the states the bundle does not draw: the invite-code step and the error line).
   The bundle's A-2 / A-3 variants (.doner, .chs, .pk, .pf) and its nav-lockup rules are NOT ported: they are not part of the approved A-1 flow or of this task.
   The send path is js/home.js send() through js/invite.js (lane W3); its states are styled in the "W3" block at the end of this file.
   ========================================================================================================================================================== */

/* ---- [A] base ---- */
.hx { font-family: Geist, system-ui, sans-serif; color: #fff; width: 440px; max-width: 100%; }
.hx .lbl { display: block; font: 500 18px/28px Geist; color: #fff; margin: 0 0 12px; }
.hx .tgs { display: flex; width: 440px !important; max-width: 100%; box-sizing: border-box; gap: 8px; margin: 0 0 10px; }
.hx .tg1 { flex: 1 1 0; min-width: 0; box-sizing: border-box; height: 48px; border: 1.5px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; gap: 8px; font: 500 17px/1 Geist; color: #fff; background: rgba(0,0,0,.55); }
.hx .tg1 svg { width: 20px; height: 20px; }
.hx .tg1.on { border-color: #fff; background: #DE321E; } /* t1949; W6: white on #DE321E 4.58:1 (was #E13A26, 4.34) */
.hx .codeline { display: inline-flex; font: 400 18px/24px Geist; color: #fff; min-height: 44px; align-items: center; margin-top: 8px; gap: 6px; }
.hx .codeline u { text-underline-offset: 3px; }
.hx .prow.r { display: flex; height: 60px; border: 1.5px solid #fff; background: rgba(0,0,0,.55); border-radius: 0; padding: 0; box-sizing: border-box; align-items: stretch; }
.hx .r .v { flex: 1; display: flex; align-items: center; padding: 0 16px; font: 400 18px/1 Geist; color: #fff; white-space: nowrap; overflow: hidden; }
.hx .r .pre { color: #E13A26; } /* t1949 */
.hx .wb { background: #fff; color: #000; font: 500 18px/1 Geist; display: flex; align-items: center; padding: 0 22px; margin: 4px; white-space: nowrap; }
.hx .dl3 { margin: 0 0 12px !important; }

/* ---- [C] the site's base rules the F1 pages relied on ---- */
.hx .prow { display: flex; align-items: center; box-sizing: border-box; width: 440px; max-width: 100%; border-radius: 0 !important; }   /* C 732 (width), 802 (square) */
.hx .prow input::placeholder { color: #8A8A8A; opacity: 1; }
.hx .prow input::-webkit-input-placeholder { color: #8A8A8A; opacity: 1; }
.hx .prow input::-moz-placeholder { color: #8A8A8A; opacity: 1; }
.hx .codeline { color: #fff !important; text-decoration: none; }                                                                        /* C 735 */
.hx .codeline { font: 400 19.2px/28.8px Geist !important; min-height: 44px; align-items: center; }                                          /* C 870 */
.hx .codeline:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }                                                           /* C 739 */
/* Phase 1 line: desktop (C 896, 899, 906). The selector is .hero .hx .dl3 (same weight as the source's .hero .act .dl3) so that [B]'s .rsv rule below still wins in the Sent state. */
@media (min-width: 861px) {
  .hx .dl3 { padding-left: 12px; border-left: 2px solid #E13A26; color: #fff; }
  .hero .hx .dl3 { font: 500 21.6px/33.6px Geist !important; margin-bottom: 16px !important; }
  .hx .codeline, .hx .err { font-size: 21.6px !important; line-height: 33.6px !important; }                                                 /* C 910 */
}
/* error line (C 810: the slot of the code line; the source's data-state=error also turned the frame border to 3px). ADAPT: margin-top 8px = the code line's own margin, so no state moves the frame. */
.hx .err { display: none; position: absolute; left: 0; top: 100%; margin: 8px 0 0; font: 500 16px/24px Geist; color: #fff; min-height: 44px; line-height: 44px; }
#rq[data-error] .err { display: flex; align-items: center; }
#rq[data-error] .hx-f:not(.hx-social) .prow.r { border-width: 3px; }

/* ---- [B] CSS2 ---- */
.hx .tgs.g3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 440px !important; max-width: 100%; }
.hx .tgs.g3 .tg1 { flex: none; width: auto; min-width: 0; padding: 0 6px; white-space: nowrap; }
.hx .prow.r.fl .wb { margin: 0; align-self: stretch; padding: 0 26px; }
@media (max-width: 860px) { .hx .tgs.g3 .tg1 { gap: 6px; font-size: 16px; } }
.hx .prow.r.sent { display: inline-flex; width: auto; }
.hx .sent .wb { gap: 10px; padding: 0 22px; margin: 0; align-self: stretch; }
.hx .rsv { position: relative; height: 98px; }
.hero .hx .rsv .dl3 { position: absolute; left: 0; bottom: 12px; margin: 0 !important; white-space: nowrap; }
.hx .skp { height: 52px; }
.hx .sc { width: 24px; height: 24px; }
@media (min-width: 861px) { .hx .prow.r { border-width: 2px; } }
/* phone: the Phase 1 line keeps the desktop hero's blue rule (B 47-48). ADAPT: 17px/500 is not in the source (its phone .dl3 inherited the site's 17px hero text); 17px is read from the 390px proofs (the line is 289px wide). */
@media (max-width: 860px) {
  .hero .dl3 { padding-left: 12px !important; border-left: 2px solid #E13A26 !important; font-weight: 500 !important; }
  .hx .dl3 { font-size: 20.4px; line-height: 28.8px; color: #fff; white-space: nowrap; }
@media (max-width: 430px) {
  .hero-invite.hx .dl3 { font-size: 17px; line-height: 24px; }
}
}
/* focus (B 59-63): no outer ring. Mouse or touch focus shows only the caret; keyboard focus (html[data-kbd]) lifts the frame's fill in place. */
.hero .prow:focus-within, .hero .prow:focus-visible, .hero .prow input:focus, .hero .prow input:focus-visible, .hx .r .fi:focus, .hx .r .fi:focus-visible { outline: none !important; }
html[data-kbd] .hero .prow:focus-within { background: rgba(255,255,255,.08) !important; }
/* long values (B 64-73, t1383u): the value lives in a real input with a hard right edge, clipped and scrolled natively; no ellipsis; when not focused and overflowing, the last 20px fade. */
.hx .r .v { min-width: 0; }
.hx .wb { flex: none; }
.hx .r .v.vi { padding: 0; }
.hx .r .v.vi .pre { flex: none; padding-left: 16px; font: 400 18px/1 Geist; }
.hx .r .fi { flex: 1 1 auto; min-width: 0; width: 0; height: 100%; box-sizing: border-box; margin: 0; padding: 0 12px 0 16px; border: 0; border-radius: 0; outline: 0; background: transparent; color: #fff; font: 400 18px/normal Geist; caret-color: #fff; text-overflow: clip; -webkit-appearance: none; appearance: none; }
.hx .r .pre + .fi { padding-left: 0; }
.hx .r .fi.ovf:not(:focus) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent calc(100% - 12px)); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent calc(100% - 12px)); }

/* ---- ADAPT: the source draws these controls as <div>s; here they are real <button>s, so the user-agent button look is reset and keyboard focus is visible. ---- */
.hx button.wb, .hx button.tg1 { -webkit-appearance: none; appearance: none; border-radius: 0; cursor: pointer; }
.hx button.wb { border: 0; }
.hx button.tg1 { margin: 0; }
.hx .wb:focus-visible { outline: 2px solid #000; outline-offset: -4px; }
.hx .tg1:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hx a.codeline { cursor: pointer; }
#rq[data-motion] { pointer-events: none; }   /* t1843: while the authored Send/Skip -> Sent motion runs (js/home.js), the group ignores the pointer; the controller also ignores repeat activations */
.hx .codeline .msg:empty { display: none; }   /* the invite-code step's one-line notice sits in the Back line, so the frame does not move */

/* ---- ADAPT: the positioning shell of this page. Desktop: the group scales with the composition (js/home.js sets --inv-s = the layout unit, never below .91 so the frame stays at
   least 400px wide, as the previous build's floor); the scale is about the group's bottom-left corner, which is the reference anchor. At 1440x900 --inv-s is exactly 1. ---- */
.hero-invite.hx { transform: none; transform-origin: 0 100%; }

/* ---- stacked layout (width under 1020 or height under 704: the same triggers as css/home.css) ----
   [B 75-87, t1381u] the form box is a fixed 210px (the height of the handle and Sent states) with the email and code content at its foot, so Request, Send and Sent share one button y.
   ADAPT: the source applies this at 860px and below; here it applies to the whole stacked layout so no state moves the frame. The source selects the email state with
   :has(> .dl3:first-child); here that is data-state (email and code both start with the Phase 1 line). */

/* Step 2 (handle): approved prompt, footer-like field + chips, Send, and the Skip control. */
.hx .lbl.hx-step2 {
  display: block;
  white-space: normal;
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--hx-gap, 10px);
  color: #fff;
  font: 500 var(--hx-label-fs, 15px)/var(--hx-label-lh, 20px) Geist;
}
#rq[data-state="handle"] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#rq[data-state="handle"] .invite-fields { width: var(--hx-w, 100%); max-width: 100%; }
#rq[data-state="handle"] .hx-body,
#rq[data-state="handle"] .tgs { width: 100%; max-width: 100%; }
#rq[data-state="sent"] { padding-bottom: var(--skp-tail, 0px); box-sizing: border-box; }
.hx a.k-skip { display: inline-flex; color: #fff; }

@media (max-width: 1019.98px), (max-height: 703.98px), (min-width: 1020px) and (max-aspect-ratio: 4/5) {
  .hero-invite.hx { transform: none; width: 100%; max-width: 100%; }
  .hero-invite, .hero #rq { position: relative; top: auto; bottom: auto; left: auto; right: auto; }
  .hero #rq { min-height: 0; box-sizing: border-box; }
  .hero #rq[data-state="email"], .hero #rq[data-state="handle"] { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
  .hero #rq[data-state="email"] .invite-fields,
  .hero #rq[data-state="handle"] .invite-fields,
  .hero #rq[data-state="handle"] .lbl,
  .hero #rq .k-skip,
  .hero #rq .prow.sent { align-self: flex-start; width: var(--hx-w); max-width: 100%; }
  .hero #rq .dl3 { align-self: flex-start; width: max-content; max-width: 100%; }
  .hero #rq[data-state="email"] .prow,
  .hero #rq[data-state="handle"] .prow,
  .hero #rq[data-state="handle"] .hx-social,
  .hero #rq[data-state="handle"] .tgs { align-self: stretch; width: 100%; max-width: 100%; }
}
@media (max-width: 860px) {                                                                                                            /* A 1559, C 779 */
  .hx .wb { padding: 0 16px; }
  .hx .tg1 { font-size: 16px; }
  .hx .prow { width: 100%; max-width: 100%; }
}

.hx .tg1[aria-label="LinkedIn"]:hover { border-color: #DE321E; background: #DE321E; color: #fff; }   /* W6: 4.58:1 */


/* t2182u / t2185u: footer-like invite stack on the dark hero, modestly larger than the footer,
   sized with clamp() so it stays proportional to the hero text column and never overruns wide screens.
   --u / --t are the same units as the hero type. Max is a modest step over the original 440x60 / 18px fields (490px / 66px / 20px at the 1440 reference). Bottom is aligned in JS to the halo's flat edge, then raised a tad (t2215u) by --inv-raise so the section sits just above the hero bottom. On stacked layouts bottom is auto and the existing hero padding-bottom is left as-is so short windows keep Request Invite and Skip on screen. */
.hero-invite.hx {
  --hx-field-h: clamp(72px, calc(79.2 * var(--t)), 79.2px);
  --hx-chip-h: clamp(57.6px, calc(64.8 * var(--t)), 64.8px);
  --hx-btn-h: clamp(72px, calc(79.2 * var(--t)), 79.2px);
  --hx-fs: clamp(21.6px, calc(24 * var(--t)), 24px);
  --hx-label-fs: clamp(16.8px, calc(19.2 * var(--t)), 19.2px);
  --hx-label-lh: clamp(21.6px, calc(26.4 * var(--t)), 26.4px);
  --hx-gap: clamp(9.6px, calc(12 * var(--u)), 12px);
  --hx-label-gap: clamp(7.2px, calc(9.6 * var(--u)), 9.6px);
  --hx-icon: clamp(19.2px, calc(24 * var(--u)), 24px);
  --hx-pad: clamp(16.8px, calc(19.2 * var(--u)), 19.2px);
  --hx-w: min(calc(var(--hx-field-h) * 9), clamp(20rem, min(calc(490 * var(--u)), calc(var(--disc) - var(--gutter) - 12px)), 30.625rem));
  --inv-raise: clamp(20px, 3vh, 40px);
  width: max-content;
  max-width: 100%;
  bottom: calc(var(--inv-bottom, 0px) + var(--inv-raise));
}
.hero-invite.hx .invite-fields { width: var(--hx-w); max-width: 100%; }
.hx { width: var(--hx-w, 100%); max-width: 100%; }
.hx .invite-fields { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; margin: 0; padding: 0; border: 0; gap: var(--hx-gap, 16px); }
.hx .hx-body { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: var(--hx-gap, 16px); }
.hx .hx-f { display: flex; flex-direction: column; align-items: stretch; width: 100%; margin: 0; }
.hx .hx-f > label { margin: 0 0 var(--hx-label-gap, 8px); color: #fff; font: 500 var(--hx-label-fs, 15px)/var(--hx-label-lh, 20px) Geist; }
.hx .hx-opt { font-weight: 400; color: rgba(255,255,255,.64); }
.hx .prow { width: 100%; max-width: 100%; }
.hx .prow.r { height: var(--hx-field-h, 52px); }
.hx .r .v { font-size: var(--hx-fs, 18px); padding: 0 var(--hx-pad, 16px); }
.hx .r .v.vi .pre { padding-left: var(--hx-pad, 16px); font-size: var(--hx-fs, 18px); }
.hx .r .fi { font-size: var(--hx-fs, 18px); padding: 0 12px 0 var(--hx-pad, 16px); }
.hx .r .pre + .fi { padding-left: 0; }
/* Joined chips, as in the footer: one control group with the handle field */
.hx .hx-social .tgs { width: 100% !important; margin: -2px 0 0; }
.hx .hx-social .tgs.g3 { width: 100% !important; gap: 0; }
.hx .hx-social .tgs.g3 .tg1 {
  height: var(--hx-chip-h, 48px);
  border-width: 2px;
  border-color: rgba(255,255,255,.45);
  border-radius: 0;
  font: 500 var(--hx-label-fs, 15px)/1 Geist;
  gap: 6px;
  background: rgba(0,0,0,.55);
}
.hx .hx-social .tgs.g3 .tg1 + .tg1 { border-left-width: 0; }
.hx .hx-social .tgs.g3 .tg1 svg { width: var(--hx-icon, 18px); height: var(--hx-icon, 18px); }
.hx .hx-social .tgs.g3 .tg1.on { border-color: #DE321E; background: #DE321E; }   /* W6: white on #DE321E 4.58:1 (was #E13A26, 4.34) */
.hx .hx-social .prow.r { border-bottom-width: 0; }
/* Full-width Request Invite, footer structure, hero (white on dark) chrome */
.hx .invite-fields > button.wb {
  width: 100%;
  height: var(--hx-btn-h, 52px);
  min-height: 44px;
  margin: 0;
  padding: 0 var(--hx-pad, 16px);
  justify-content: center;
  align-self: stretch;
  flex: none;
  box-sizing: border-box;
  font: 500 var(--hx-fs, 18px)/1 Geist;
}
#rq[data-state="sent"] { display: flex; flex-direction: column; align-items: flex-start; }
#rq[data-state="sent"] .skp { height: var(--skp-h, 0px); flex: none; width: 100%; }
#rq[data-state="sent"] .prow.r.sent { height: var(--hx-btn-h, 52px); }
.hero-invite.hx .dl3 { margin-bottom: 9.6px !important; white-space: nowrap; width: max-content; max-width: 100%; }
/* Error sits directly under the email field, like the footer: compact in-flow line, existing wording. */
.hx .err, #rq[data-state="email"] .err {
  display: none;
  position: static;
  left: auto;
  top: auto;
  margin: 9.6px 0 0;
  font: 500 16.8px/24px Geist !important;
  color: #fff;
  min-height: 0;
  line-height: 24px !important;
}
#rq[data-error] .err { display: block; }
#rq[data-error] .hx-f:not(.hx-social) .prow.r { border-width: 3px; }
.hx .invite-fields:focus-within .hx-f:focus-within .prow.r { border-color: #E13A26; }

@media (max-width: 1019.98px), (max-height: 703.98px), (min-width: 1020px) and (max-aspect-ratio: 4/5) {
  .hero-invite.hx {
    --hx-field-h: clamp(52.8px, calc(62.4 * var(--t)), 62.4px);
    --hx-chip-h: clamp(52.8px, calc(57.6 * var(--t)), 57.6px);
    --hx-btn-h: clamp(52.8px, calc(62.4 * var(--t)), 62.4px);
    --hx-fs: clamp(19.2px, calc(21.6 * var(--t)), 21.6px);
    --hx-label-fs: clamp(16.8px, calc(18 * var(--t)), 18px);
    --hx-label-lh: clamp(21.6px, calc(24 * var(--t)), 24px);
    --hx-gap: clamp(10px, calc(12 * var(--u)), 12px);
    --hx-w: min(100%, calc(var(--hx-field-h) * 9));
    width: 100%;
    max-width: 100%;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    box-sizing: border-box;
  }
  .hero-invite.hx .invite-fields,
  .hero-invite.hx .lbl,
  .hero-invite.hx .k-skip,
  .hero-invite.hx .prow.sent { width: var(--hx-w); max-width: 100%; }
  .hero-invite.hx .dl3 { width: max-content; max-width: 100%; white-space: nowrap; }
  .hero-invite.hx .hx-body, .hero-invite.hx .hx-f, .hero-invite.hx .invite-fields .prow, .hero-invite.hx .tgs { width: 100%; max-width: 100%; }
}
@media (max-width: 430px) {
  .hero-invite.hx {
    --hx-w: 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* Short stacked windows: shrink the video band, tighten gaps, keep 44px controls so the invite can fit or scroll as a whole. */
@media (max-height: 619.98px) {
  :root { --band-h: clamp(160px, 30svh, 200px); }
  .hero { padding-bottom: clamp(16px, 3vh, 24px); }
  .hero-upper { margin-bottom: clamp(10px, 2.4vh, 20px); }
  .hero h1 { margin-top: 4px; }
  .hero .sub { margin-top: clamp(8px, 1.6vh, 14px); }
  .hero .agent { margin-top: clamp(6px, 1.2vh, 10px); }
  .hero-invite.hx {
    --hx-gap: 8px;
    --hx-label-gap: 4px;
    --hx-field-h: 52.8px;
    --hx-chip-h: 52.8px;
    --hx-btn-h: 52.8px;
  }
  .hero .hx .dl3 { margin-bottom: 8px !important; }
}



/* Very short stacked windows (e.g. 370x500): shrink the band and type just enough
   that Request Invite, and step 2's Send + Skip, fit on the first screen. */
@media (max-height: 559.98px) {
  :root { --band-h: clamp(84px, 18svh, 110px); }
  .hero { padding-bottom: 8px; }
  .hero-upper { margin-bottom: 6px; }
  .hero h1 { margin-top: 2px; font-size: 32.4px; line-height: 1.07; }
  .hero .sub, .hero .agent { margin-top: 4px; line-height: 1.3; }
  .hero-invite.hx { --hx-gap: 4px; --hx-label-gap: 2px; --hx-field-h: 44px; --hx-chip-h: 44px; --hx-btn-h: 44px; }
  .hero .hx .dl3 { margin-bottom: 4px !important; }
  .hx .lbl.hx-step2 { margin: 0 0 4px; }
  .hx .codeline { margin-top: 4px; }
}

/* Phone portrait stacked: reserve room on the first screen for the email field and the Request Invite button. */
@media (max-width: 599.98px) and (min-height: 620px) {
  :root { --band-h: clamp(220px, 26svh, 320px); }
  .hero-upper { margin-bottom: clamp(16px, 4vw, 28px); }
}
@media (max-width: 860px) {
  .hx .invite-fields, .hx .hx-social, .hx .hx-body { width: 100%; }
}

/* t2224u: tall narrow stacked windows (phone header). Free height goes to the video band (uniform cover, never letterboxed) and a capped spacer above the invite,
   so the headline sits lower and the gap before Request Invite stays modest. The crop keeps the light's left edge (source x 1448) clear of the wordmark and caps the
   band so the light's top (source x 2041) ends before the menu icon; under 600px it also keeps source x <= 3321 so the back of the head stays off-frame. */
@media (max-width: 699.98px) and (min-height: 620px) {
  .hero-media { flex: 1 0 var(--band-h); height: auto; min-height: var(--band-h); max-height: calc((100vw - 186px) * 3.6425); container-type: size; }
  .hero-video { object-position: calc(-1 * max(0px, min(.6 * (177.778cqh - 100cqw), 67.037cqh - 136px))) 50%; }
  .hero::after { content: ""; order: 1; flex: 1 1 0px; min-height: 0; max-height: 16px; }
  .hero-invite { order: 2; margin-top: 0; }
}
@media (max-width: 599.98px) and (min-height: 620px) {
  .hero-video { object-position: calc(-1 * max(0px, min(.74 * (177.778cqh - 100cqw), 153.75cqh - 100cqw, 67.037cqh - 136px))) 50%; }
  .hero::after { max-height: 40px; }
}

/* ---- W3 (lane W3, Nov 11): send states, the trap field ----
   #rq-msg is the handle step's state line and a polite live region. It stays rendered (an empty block is 0px tall) so a screen reader hears each change;
   "Sending..." is read out but drawn only on the Send button, so nothing moves while the request is out. The hero keeps only a small "Privacy Policy" link, which
   sits under the email and handle steps and fades with Skip in the Send -> Sent motion. */
.hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }   /* the hidden "website" trap field (both forms) */
.hx .hx-msg { width: var(--hx-w, 100%); max-width: 100%; margin: 9.6px 0 0; color: #fff; font: 500 16.8px/24px Geist; }
.hx .hx-msg:empty { margin: 0; }
.hx .hx-msg[data-kind="sending"] { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hx button.wb[aria-busy="true"] { cursor: default; }
.hx .hx-note { width: var(--hx-w, 100%); max-width: 100%; margin: var(--hx-gap, 12px) 0 0; color: rgba(255,255,255,.78); font: 400 14.4px/21.6px Geist; }
.hx .hx-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hx .hx-note a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* handle step: the Privacy Policy link shares the Skip row beside Skip, so the step is no taller than before */
.hx .hx-skiprow { display: flex; align-items: center; gap: 16px; width: var(--hx-w, 100%); max-width: 100%; margin-top: 8px; }
.hero #rq .hx-skiprow .k-skip { flex: none; width: auto; margin-top: 0; }
.hero #rq .hx-skiprow .hx-note { flex: 1 1 0; min-width: 0; width: auto; margin: 0; }
@media (max-width: 1019.98px), (max-height: 703.98px), (min-width: 1020px) and (max-aspect-ratio: 4/5) {
  .hero #rq .hx-note, .hero #rq .hx-msg, .hero #rq .hx-skiprow { align-self: flex-start; width: var(--hx-w); max-width: 100%; }
}