/* /join — the sign-up page. Loads after ../site.css and ../checkout.css, so the
   type, colour, header, footer and pill are the site's own. This file lays out
   one page: the offer beside the card form above the fold, the next steps
   below it. Colour is a tinted surface, never an edge.

   Every section here is section.j, which takes it out of site.css's two-column
   prose grid and its h2/ul/li defaults. */

/* ------------------------------------------------------------ the shell */

/* two body greys a step lighter than the site's, for reading on the ground */
body.join { --j-ink-2: #c9ccd2; --j-ink-3: #aeb2b9; }

body.join main > section.j {
  display: block;
  padding: clamp(52px, 4.6vw, 68px) var(--pad);
}
body.join .j h2,
body.join .j h3 {
  background: none;
  -webkit-text-fill-color: currentColor;
  padding-bottom: 0;
}
body.join .j p { margin: 0; }
body.join .j ul,
body.join .j ol { margin: 0; padding: 0; list-style: none; }
body.join .j li { margin: 0; padding: 0; color: inherit; }
body.join .j li::before { content: none; }

body.join .j-wrap { max-width: 1180px; margin: 0 auto; }

/* a section's heading: the site's ivory fall, at a size that leaves room */
body.join .j .j-h {
  margin-bottom: clamp(36px, 4vw, 52px);
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 460;
  line-height: 1.05;
  letter-spacing: -0.035em;
  background: linear-gradient(to bottom, var(--ivory-hi) 8%, var(--ivory-mid) 52%, var(--ivory-lo) 96%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.1em;
}

/* the small tracked label over a list or a card */
body.join .j .su-label {
  margin-bottom: 18px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--j-ink-3);
}

/* ------------------------------------------------------------ 1 · the sign-up */

body.join main > section.j-signup {
  padding-top: calc(var(--header-h) + clamp(28px, 3vw, 40px));
  padding-bottom: clamp(52px, 4.6vw, 68px);
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(219, 195, 170, 0.09), transparent 70%),
    radial-gradient(50% 60% at 92% 18%, rgba(110, 121, 201, 0.1), transparent 70%),
    var(--stars),
    var(--ground);
}

/* the offer reads down the left; the form holds the right and stays in view */
.su {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  grid-template-areas:
    "head form"
    "body form";
  grid-template-rows: auto 1fr;
  column-gap: clamp(48px, 6vw, 96px);
  max-width: 1180px;
  margin: 0 auto;
}
.su-head { grid-area: head; }
.su-body { grid-area: body; margin-top: 40px; }
.su-form {
  grid-area: form;
  align-self: start;
  position: sticky;
  top: 20px;
}

body.join .j .su-kicker {
  margin-bottom: 20px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

body.join .j .su-title {
  font-size: clamp(44px, 4.6vw, 66px);
  font-weight: 460;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.su-title span {
  display: block;
  width: max-content;
  max-width: 100%;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  background: linear-gradient(to bottom, var(--ivory-hi) 8%, var(--ivory-mid) 52%, var(--ivory-lo) 96%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.su-price {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(26px, 2.8vw, 36px);
}
.su-price b {
  font-size: clamp(56px, 5vw, 72px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #f6efe4;
}
.su-price span {
  font-size: 16px;
  line-height: 1.35;
  color: var(--j-ink-2);
}
body.join .j .su-cancel { margin-top: 12px; font-size: 16px; color: var(--j-ink-3); }

/* what is in it: a gold tick, the name, then one quiet line */
.su-list { display: grid; gap: 18px; }
body.join .j .su-list li {
  position: relative;
  padding-left: 38px;
}
body.join .j .su-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.4l3 3 6-6.4' fill='none' stroke='%23e3bf8e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat,
    rgba(227, 191, 142, 0.14);
}
.su-list b {
  display: block;
  font-size: 18.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #ece7df;
}
.su-list span {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--j-ink-2);
}

/* the promise sits on the warm surface */
.su-promise {
  margin-top: 40px;
  padding: 24px 26px;
  border-radius: 16px;
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(238, 190, 110, 0.12), transparent 70%),
    linear-gradient(to bottom, rgba(230, 180, 100, 0.07), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body.join .j .su-promise .su-label { margin-bottom: 10px; color: var(--gold-ink); }
body.join .j .su-promise p { font-size: 18px; line-height: 1.5; color: #e4e1db; }

.su-note { margin: 40px 0 0; }
.su-note blockquote { margin: 0; }
body.join .j .su-note p {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.5;
  color: #d4d1cc;
}
.su-note figcaption {
  margin-top: 12px;
  font-size: 15px;
  color: var(--j-ink-3);
}
.su-note figcaption::before { content: '\2014\00a0'; }

/* the card the form sits in: Stripe draws its form on white (the account's
   branding, not ours), so the card is white too and the two read as one sheet.
   It is the one bright thing on the page, which is the point of a sign-up. */
.su-card {
  padding: 24px 22px 8px;
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 40px 100px -40px rgba(0, 0, 0, 0.9),
    0 0 80px -20px rgba(219, 195, 170, 0.18);
}
/* inset to the edge of Stripe's own fields, so the card has one left edge */
body.join .j .su-card-head {
  padding: 0 38px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #14161c;
}

/* checkout.css draws a warm box for a page with nothing around it; here the
   card is the box, so the mount keeps only its loading space */
body.join .su-card .checkout {
  max-width: none;
  margin: 8px 0 0;
  padding: 0;
  background: none;
}
body.join .su-card .checkout-status {
  display: grid;
  place-items: center;
  min-height: 480px;
  padding: 28px 20px 48px;
  color: #6b707a;
  font-size: 15px;
  line-height: 1.5;
}
body.join .su-card .checkout.is-failed .checkout-status { color: #b42318; }
body.join .su-card .checkout.is-ready .checkout-status { display: none; }

body.join .j .su-fine {
  margin-top: 16px;
  padding: 0 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #b8bcc3;
  text-align: center;
}

/* ------------------------------------------------------------ 2 · after you join */

body.join main > section.j-band {
  background: linear-gradient(to bottom, var(--tint-cool), rgba(110, 121, 201, 0.02));
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  counter-reset: step;
}
body.join .j .steps li {
  counter-increment: step;
  padding: 26px 26px 28px;
  border-radius: 16px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.join .j .steps li::before {
  content: counter(step);
  position: static;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: rgba(227, 191, 142, 0.14);
  opacity: 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--gold-ink);
}
.steps b {
  display: block;
  text-wrap: balance;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #ece7df;
}
body.join .j .steps p {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--j-ink-2);
}

/* ------------------------------------------------------------ 3 · back to the form */

body.join main > section.j-close {
  text-align: center;
  background:
    radial-gradient(50% 70% at 50% 100%, rgba(219, 195, 170, 0.08), transparent 70%),
    var(--ground);
}
body.join .j .close-price {
  font-size: clamp(44px, 4.6vw, 64px);
  font-weight: 460;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #f6efe4;
}
body.join .j .close-what {
  max-width: 28em;
  margin: 18px auto 0;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.5;
  color: #d4d1cc;
}
.close-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 36px;
  margin-top: 36px;
}
.pill-up { padding: 16px 52px; }
.pill-up::after { content: '\2191'; }

/* ------------------------------------------------------------ 1100 and down */

@media (max-width: 1100px) {
  .su { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
}

/* ------------------------------------------------------------ one column */
/* the price, then the form, then what is in it: nobody scrolls past a list
   to find where to pay */

@media (max-width: 900px) {
  .su {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "form" "body";
    grid-template-rows: auto;
    max-width: 560px;
  }
  .su-form { position: static; margin-top: 36px; }
  .su-body { margin-top: 56px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body.join .j .steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; }
  body.join .j .steps li::before { grid-row: 1 / span 2; margin-bottom: 0; }
  body.join .j .steps p { grid-column: 2; }
  .steps b { align-self: center; }
}

@media (max-width: 760px) {
  body.join main > section.j { padding-top: 52px; padding-bottom: 52px; }
  body.join main > section.j-signup { padding-top: calc(var(--header-h) + 36px); }
  body.join .j .su-title { font-size: clamp(40px, 11vw, 52px); }
  .su-title span { width: auto; }
  .su-card { padding: 20px 8px 6px; border-radius: 18px; }
  body.join .j .su-card-head { padding: 0 14px; }
  body.join .j .steps li { padding: 22px 20px 24px; }
  .close-actions { flex-direction: column; gap: 22px; }
  .pill-up { width: 100%; }
}