/* The pay step. Loaded after builder.css, which is here for the card in the
   rail; everything below is this page's own. Colour comes from the tokens in
   platform.css and nothing here invents one. See DESIGN.md. */

/* ----------------------------------------------------------- the spine */
.spine {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 0; padding: 18px 0 2px; list-style: none;
  font-size: 14px; letter-spacing: -.01em;
}
.spine li { display: inline-flex; align-items: center; gap: 8px; }
.spine i {
  width: 20px; height: 20px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; font-style: normal;
  background: var(--ink); color: var(--white);
}
.spine .is-next { color: var(--muted-light); }
.spine .is-next i { background: transparent; color: var(--muted-light); box-shadow: inset 0 0 0 1px var(--hair); }
/* The dotted run between the two steps, drawn rather than written, because it
   is the one part of the spine nobody should read out. */
.spine .is-next::before { content: ""; flex: 0 0 120px; height: 0; border-top: 1px dotted var(--hair); }

/* ------------------------------------------------------------ the page */
/* `.wrap` is the site's 760px column and this is not that page, so the wide
   two-column measure takes a name of its own. */
.pay-wrap { max-width: 1360px; margin: 0 auto; padding: 0 var(--pad) 64px; }
.cols { display: grid; grid-template-columns: minmax(0, 72fr) minmax(0, 28fr); gap: 28px; align-items: start; }
.pay-h1 { margin: 14px 0 6px; font-size: clamp(30px, 5.4vw, 44px); line-height: 1.08; font-weight: 600; letter-spacing: -.015em; }
.pay-sub { margin: 0 0 18px; font-size: 19px; line-height: 1.42; color: var(--muted-light); }

/* "Just me", "My business", "My team". `.switch` is already the template
   picker and a checkbox row, so this control is `.seg`, and which of the
   three is on is a class on the body: the three grids and nothing else
   read it. */
.seg { display: flex; gap: 4px; width: 360px; max-width: 100%; margin: 0 0 24px; padding: 3px; background: var(--tile); border-radius: 8px; }
.seg button {
  flex: 1 1 0; padding: 8px; border: 0; border-radius: 6px;
  background: transparent; font-family: inherit; font-size: 13px;
  font-weight: 500; color: var(--muted-light); cursor: pointer;
}
body.state-me .seg .s-me, body.state-biz .seg .s-biz, body.state-team .seg .s-team {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
body.state-me .only-biz, body.state-me .only-team,
body.state-biz .only-me, body.state-biz .only-team,
body.state-team .only-me, body.state-team .only-biz { display: none; }

/* ----------------------------------------------------------- the doors */
.plangrid { display: grid; gap: 18px; align-items: start; }
.plangrid.g-me { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plangrid.g-biz { grid-template-columns: minmax(0, 1fr); }
/* One door on its own fills the column the three used to share, so its list
   runs in two columns rather than leaving the right half of the page empty. */
.plangrid.g-biz .plan-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.plangrid.g-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plancard {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--hair);
  border-radius: 16px; padding: 20px; cursor: pointer;
}
.plancard.is-rec { border: 2px solid var(--blue); background: var(--blue-wash); padding: 19px; box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .28); }
/* A door the design cannot go through: Starter has three templates and this
   draft is not on one of them. Dimmed, not hidden, so the plan still reads
   on the page, and the note says what would open it. */
.plancard.is-locked { cursor: default; opacity: .62; background: var(--white); }
.plancard.is-locked:hover { border-color: var(--hair); }
.plan-note { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted-light); }
.rec-pill {
  position: absolute; top: -11px; right: 16px;
  padding: 3px 9px; border-radius: 980px;
  background: var(--blue); color: var(--white);
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
}
/* The real radio does the choosing and the drawn one shows it, the way the
   footer's plan picker did: no script toggles a class here. */
.plancard input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair); background: var(--white); }
.plancard:has(input:checked) { border-color: var(--blue); background: var(--blue-wash); }
.plancard:has(input:checked) .radio { background: var(--blue); box-shadow: inset 0 0 0 5px var(--white), 0 0 0 1px var(--blue); }
.plancard:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.plan-name { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }
.plan-price { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-num { font-size: 40px; font-weight: 600; line-height: 1.08; letter-spacing: -.015em; }
.plan-unit { font-size: 14px; color: var(--muted-light); }
.plan-second { margin: 3px 0 16px; font-size: 13px; line-height: 1.45; color: var(--muted-light); }
.plan-feats { flex: 1 1 auto; margin: 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--hair); }
.plan-feats li { display: flex; gap: 10px; padding: 7px 0; font-size: 15px; line-height: 1.4; }
.plan-feats svg { flex: 0 0 14px; margin-top: 4px; color: var(--blue); }
.plancard .pill { margin-top: 16px; font-size: 15px; padding: 11px 16px; }
.pill-line { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
.pill-line:hover { background: var(--light); }
.door-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.45; color: var(--muted-light); }
.grid-note { margin: 22px 0 0; text-align: center; font-size: 13px; line-height: 1.45; color: var(--muted-light); }

/* ------------------------------------------------------------ the rail */
.rail { position: sticky; top: 64px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 20px; padding: 18px; }
.rail h2 { margin: 0 0 12px; font-size: 18px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }
.sigprev { display: flex; justify-content: center; margin: 16px 0; }
/* The card ladder in builder.css runs up to 1.04 and the marks divide by the
   same variable, so the rail's smaller card is that variable and not a zoom
   of its own. */
/* The builder clips the bands with its stage; the rail has no stage, so the
   card clips them itself. */
.sigprev .stage-card { --card-scale: .55; overflow: hidden; box-shadow: 0 0 0 1px var(--hair); border-radius: 12px; }

.ledger { margin: 0; font-size: 13px; }
.ledger div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.ledger dt, .ledger dd { margin: 0; }
.ledger dd { color: var(--muted-light); }
.ledger .is-total { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 17px; font-weight: 600; }
.ledger .is-total dd { color: var(--ink); }
.ledger .is-total small { font-size: 12px; font-weight: 400; color: var(--muted-light); }
.rail-notes { margin: 12px 0 16px; padding-left: 16px; font-size: 13px; line-height: 1.45; color: var(--muted-light); }
.rail-notes li { padding: 3px 0; }

/* The Company door's form, at the panel's own density rather than the site's. */
.contact .field input[type="text"],
.contact .field input[type="email"],
.contact .field input[type="number"],
.contact .field textarea {
  width: 100%; height: 40px; padding: 0 12px;
  font-family: inherit; font-size: 15px; line-height: 1.3;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--hair); border-radius: 8px;
}
.contact .field textarea { height: auto; padding: 10px 12px; resize: vertical; }
.contact .field label { font-size: 13px; margin-bottom: 6px; }
.contact .field .opt { font-size: 12px; font-weight: 400; color: var(--muted-light); }

/* The card is 508px before it is scaled, and .55 of that is wider than the
   rail has left on a 375 phone. */
@media (max-width: 400px) {
  .sigprev .stage-card { --card-scale: .42; }
}

@media (max-width: 900px) {
  .cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .plangrid.g-me, .plangrid.g-biz, .plangrid.g-team { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rail { position: static; }
  .spine .is-next::before { flex: 0 1 40px; }
}