/*
 * The subscriber savings block.
 *
 * Taken from the approved design, with every rule scoped under .ap-stage
 * so nothing here can reach the rest of the page. The theme's own styles
 * are strong on headings and links, which is why a few of these carry
 * weight they would not need on a blank page.
 */

.ap-stage, .ap-stage *{box-sizing:border-box}

.ap-stage{
  --ap-gold:#FEC04B;
  --ap-gold2:#FFB250;
  --ap-ink:#111;
  --ap-card:#1a1a1a;
  --ap-line:rgba(255,255,255,.14);
  --ap-mute:#bdbdbd;
  position:relative;max-width:1520px;margin:34px auto 10px;
  width:100%;flex:1 1 100%;
  font-family:Roboto,sans-serif;color:#fff;
}

/* Theo stands behind the panel and bleeds off the right edge. */
.ap-stage .ap-theo{
  position:absolute;right:0;bottom:0;height:540px;width:auto;z-index:0;
  pointer-events:none;max-width:none;
}

.ap-stage .ap{
  position:relative;z-index:1;margin-right:228px;
  background:var(--ap-ink);border-radius:6px;
  padding:clamp(32px,5vw,72px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:clamp(36px,5vw,72px);align-items:center;
}

.ap-stage .ap-eyebrow{
  font:600 14px Poppins,sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ap-gold);margin:0 0 30px;
}

.ap-stage .ap-h{
  margin:0;font:600 clamp(38px,4.6vw,60px)/1.1 Poppins,sans-serif;
  letter-spacing:-.025em;color:#fff;
}
.ap-stage .ap-h b{
  color:var(--ap-gold);font-weight:700;display:block;
  font-size:1.55em;line-height:.95;letter-spacing:-.03em;margin-bottom:.06em;
}

.ap-stage .ap-lede{
  margin:22px 0 0;font-size:18px;line-height:1.6;color:#e2e2e2;max-width:560px;
}

.ap-stage .ap-steps{
  list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;
}
.ap-stage .ap-steps li{
  display:grid;grid-template-columns:44px 1fr;gap:4px 0;
  padding:18px 0;border-top:1px solid var(--ap-line);margin:0;
}
.ap-stage .ap-steps li:first-child{border-top:0;padding-top:0}
.ap-stage .ap-steps .ap-n{font:700 15px Poppins,sans-serif;color:var(--ap-gold);padding-top:3px}
.ap-stage .ap-steps h3{margin:0;font:600 18px Poppins,sans-serif;color:var(--ap-gold)}
.ap-stage .ap-steps p{grid-column:2;margin:0;font-size:16px;line-height:1.5;color:var(--ap-mute)}

.ap-stage .ap-cardwrap{position:relative}
.ap-stage .ap-card{
  position:relative;z-index:1;
  border:2px dashed var(--ap-gold);border-radius:2px;background:var(--ap-card);
  padding:clamp(28px,3.4vw,44px);
  display:flex;flex-direction:column;gap:28px;
}
.ap-stage .ap-logo{height:96px;width:auto;align-self:center}

.ap-stage .ap-offer{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
}
.ap-stage .ap-big{
  font:700 64px/1 Poppins,sans-serif;color:var(--ap-gold);
  letter-spacing:-.03em;white-space:nowrap;
}
.ap-stage .ap-offer small{
  display:block;font:600 12px Poppins,sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ap-mute);margin-bottom:6px;
}
.ap-stage .ap-offer p{margin:0 auto;max-width:420px;font-size:18px;font-weight:500;line-height:1.5}
.ap-stage .ap-offer p b{color:var(--ap-gold)}

.ap-stage .ap-form{display:flex;flex-direction:column;gap:16px;margin:0}
.ap-stage .ap-form label{font:500 14px Roboto,sans-serif;color:var(--ap-mute)}
.ap-stage .ap-em{
  width:100%;font:400 18px Roboto,sans-serif;padding:16px 18px;
  border-radius:4px;border:2px solid transparent;background:#fff;color:#111;outline:none;
}
.ap-stage .ap-em:focus{border-color:var(--ap-gold)}
.ap-stage .ap-em.ap-err{border-color:#ff6b5a}
.ap-stage .ap-msg{margin:0;font-size:14px;color:#ff8a7a;min-height:18px}

/* Off screen rather than display:none, so a script still sees a real field. */
.ap-stage .ap-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ap-stage button.ap-btn{
  font:600 18px Poppins,sans-serif;background:var(--ap-gold);color:#000;
  border:0;border-radius:100px;padding:18px 28px;cursor:pointer;
  transition:background .15s;width:100%;
}
.ap-stage button.ap-btn:hover{background:var(--ap-gold2)}
.ap-stage button.ap-btn[disabled]{opacity:.65;cursor:default}

.ap-stage .ap-fine{margin:0;font-size:13px;line-height:1.55;color:#9a9a9a}

.ap-stage .ap-done{display:none;flex-direction:column;gap:10px;padding:8px 0}
.ap-stage .ap-done h3{margin:0;font:700 26px Poppins,sans-serif;color:var(--ap-gold)}
.ap-stage .ap-done p{margin:0;font-size:16px;line-height:1.5;color:#e2e2e2}
.ap-stage .ap-card.ap-sent .ap-form{display:none}
.ap-stage .ap-card.ap-sent .ap-done{display:flex}

/* Theo shrinks and the panel reclaims the space he was standing in. */
@media (max-width:1100px){
  .ap-stage .ap{margin-right:150px}
  .ap-stage .ap-theo{height:380px}
}
@media (max-width:860px){
  .ap-stage .ap{margin-right:0}
  .ap-stage .ap-theo{display:none}
  .ap-stage .ap-big{font-size:52px}
}