/* ---- variant B rail ------------------------------------------------------
   The zone is the track. .rv-track is stretched over it, so the sticky rail
   inside runs from the first section and parks itself where the zone ends,
   which is the top of the lead form section. */
.sv-zone{position:relative}
.rv-track{position:absolute;left:0;right:0;top:96px;bottom:96px;
  z-index:5;pointer-events:none}
.rv-rail{position:sticky;top:96px;width:344px;margin-left:auto;pointer-events:auto}

/* the form in the rail. Same four questions the page asks at the bottom, asked
   where the reader already is. */
.rv-form{border:1px solid var(--line);border-radius:16px;background:var(--void);
  padding:22px 22px 20px;box-shadow:0 18px 44px -30px rgba(0,0,0,.34);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
/* The headline has to earn the two fields under it. It carries the page's own
   argument, that the answer already exists inside someone's head, with the ember
   on the half that does the work. Upright, because background-clip:text shears
   the last glyph off an italic. */
.rv-hd b{display:block;font-family:var(--display);font-size:19px;font-weight:500;
  line-height:1.24;letter-spacing:-.022em;margin-bottom:7px;text-wrap:balance}
.rv-hd b em{font-style:normal;
  background:var(--ember-ramp,linear-gradient(100deg,#c8102e,#e0563b 55%,#e8944b));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rv-hd span{display:block;font-size:12.5px;font-weight:300;line-height:1.5;
  color:var(--muted);margin-bottom:16px}
.rv-f{display:block;margin-bottom:12px}
.rv-f span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.rv-f input,.rv-f textarea{width:100%;font-family:var(--ui);font-size:13.5px;
  font-weight:300;padding:10px 12px;border:1px solid var(--line);border-radius:4px;
  background:var(--void);color:var(--txt);outline:none;resize:vertical}
.rv-f input:focus,.rv-f textarea:focus{border-color:var(--warm);
  box-shadow:0 0 0 3px rgba(200,16,46,.10)}
.rv-f.bad input,.rv-f.bad textarea{border-color:#c8102e}
.rv-go{width:100%;font-family:var(--ui);font-size:14px;font-weight:500;
  padding:11px 16px;border:1px solid var(--warm);border-radius:4px;
  background:var(--warm);color:#fff;cursor:pointer;transition:.2s var(--ease)}
.rv-go:hover{background:#fff;border-color:#c8102e;color:#c8102e}
.rv-note{margin-top:10px;font-size:11.5px;font-weight:300;color:var(--muted);text-align:center}
.rv-done b{display:block;font-family:var(--display);font-size:16px;font-weight:500;margin-bottom:6px}
.rv-done span{font-size:13px;font-weight:300;line-height:1.55;color:var(--muted)}

/* the capsule, directly under the form. Same pill the homepage docks in the
   corner, taken out of fixed position and seated here instead. */
.rv-pill{position:static;margin-top:14px;width:100%;opacity:1;transform:none;
  pointer-events:auto;transition:box-shadow .3s ease,opacity .3s var(--ease)}
.rv-pill .txt{min-width:0}
.rv-pill b,.rv-pill .s2{text-align:left}

/* Nexy takes the form's place. The seat carries its own ground here because
   there is white page behind it, exactly as in variant A. */
#rv-nexy{position:relative;top:auto;right:auto;margin:0;width:344px;height:566px;
  border-radius:16px;pointer-events:auto;
  background-image:linear-gradient(rgba(9,22,42,.52),rgba(9,22,42,.52)),
    var(--nx-mesh,linear-gradient(#152647,#152647));
  background-size:cover,cover;background-position:50% 50%,72% 26%;
  box-shadow:0 26px 64px -34px rgba(0,0,0,.55)}
.rv-rail.nexy-open .rv-form,.rv-rail.nexy-open .rv-pill{display:none}

/* Nothing sits beside the hero copy any more, so it stops reserving the 400px
   Nexy used to occupy and takes its natural measure back. */
@media(min-width:1120px){.at-hero .at-hero-in{max-width:940px}}

@media(max-width:1119px){.rv-track{display:none}}