/* The six-digit code step of the sign-in card, as its own screen. Carl, 11 October 2026, with a picture of it
   (loginpage.png): "This page needs to be copied exactly, this is the sign in for entering code".

   Every number here was read off that picture. It was taken in a 1440px window and scaled by 1555/1440 =
   1.0799 into 1555px (the header's 18px wordmark measures 18.03px that way), so each figure is the
   picture's, divided by 1.0799: the card is 516px wide, the six boxes are 54 by 59 on a 64px pitch, the
   button is 422px across. The page is #modal-signin; this screen is the .code-screen inside it, and while it
   shows, the light card (.box-signin) and the landing page's own header give way to it. */

.code-screen {
  --cs-white: #fff; --cs-sub: #c3c9d3; --cs-dim: #aeb4bc; --cs-tag: #a0a5a9; --cs-blue: #4678da; --cs-line: rgba(255,255,255,.24);
  position: relative; flex: 1 1 100%; width: 100%; min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-top: 22px; margin: auto; pointer-events: none; /* a click on the empty page behind still closes the card, as it did */
}
.code-screen[hidden] { display: none; }
.code-screen > * { pointer-events: auto; }

/* while the code step shows: the light card goes, the scrim is the picture's (65% dark, 4.5px of blur), and the page behind
   is the wall alone: its header (nav, Sign in) and the hero are hidden, as they are in the picture. The wall's photos keep the
   lift they had when the picture was taken, so this screen looks the same whatever the landing page does with its own wall. */
.modal-signin:has(.code-screen:not([hidden])) { --scrim: .65; background: rgba(18,18,20,var(--scrim)); backdrop-filter: blur(4.5px); }
.modal-signin:has(.code-screen:not([hidden])) .box-signin { display: none; }
body:has(.modal-signin:not([hidden]) .code-screen:not([hidden])) :is(#join-view header.nav, #join-view .hero-body) { visibility: hidden; }
body:has(.modal-signin:not([hidden]) .code-screen:not([hidden])) .wall4 .lot img { filter: contrast(.72) brightness(1.6) saturate(1.15); }

/* the brand, in the page's corner: where the picture has it (mark at 79px in, 17px down at 1440) */
.code-brand { position: fixed; top: calc(var(--hdr-top, 20px) - 3px); left: max(8px, calc(var(--page-x, 24px) - 20px)); display: flex; align-items: center; gap: 12px; min-height: 36px; color: var(--cs-white); text-decoration: none; }
.code-brand img { display: block; flex: none; width: 40px; height: 40px; }
.code-wordmark { font-weight: 600; font-size: 18px; white-space: nowrap; }
@media (max-width: 720px) { .code-wordmark { display: none; } } /* the header's own phone rule: the mark alone */
@media (max-width: 640px) { .code-brand img { width: 32px; height: 32px; } }

/* the card */
.code-card {
  position: relative; width: 516px; max-width: 100%; padding: 0 46px 36px; text-align: center; color: var(--cs-white);
  border: 1px solid var(--cs-line); border-radius: 6px;
  background: linear-gradient(180deg, #171718 0%, #161617 33%, #131415 62%, #121315 100%);
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.9);
}
.code-card.rise { animation: rise .45s cubic-bezier(.2,.7,.2,1); }

.code-back { position: absolute; top: 24px; left: 28px; display: inline-flex; align-items: center; gap: 7px; height: 20px; padding: 0; border: 0; background: none; color: #c2c8d5; font: 400 14.5px/20px var(--sans); cursor: pointer; }
.code-back:hover { color: var(--cs-white); }
.code-back svg { flex: none; width: 12px; height: 11px; }

.code-lockup { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 27px 0 0; color: var(--cs-white); }
.code-lockup img { display: block; width: 44px; height: 44px; margin-left: -11px; } /* the mark's ink starts a quarter of the way in, so the ink, not the box, is what centres */
.code-lockup-word { font-weight: 600; font-size: 16.75px; letter-spacing: -.01em; white-space: nowrap; }

.code-eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 25px 0 0; font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .21em; text-transform: uppercase; color: var(--cs-blue); }
.code-eyebrow i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: #5e91fe; box-shadow: 0 0 0 4px rgba(59,110,245,.34); }

#modal-signin .code-card h2 { margin: 13px 0 0; font-family: var(--serif); font-weight: 400; font-size: 58px; line-height: 62px; letter-spacing: 0; color: var(--cs-white); }

.code-sub { margin: 9px 0 0; font-size: 16.3px; line-height: 22px; color: var(--cs-sub); }
.code-to { margin: 4px 0 0; font-size: 16.8px; line-height: 22px; color: var(--cs-white); overflow-wrap: anywhere; }
.code-to b { font-weight: 600; }
.code-change { margin: 0 0 0 8px; padding: 0; border: 0; background: none; color: var(--cs-dim); font: 400 15px/22px var(--sans); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.code-change:hover { color: var(--cs-white); }

/* the six boxes: the same spans waitlist.js has always drawn (.filled, .active, .err), dressed for the dark card */
.code-card .code-cells { position: relative; display: flex; justify-content: center; gap: 10px; margin: 26px 0 0; cursor: text; }
.code-card .code-cells span { position: relative; width: 54px; height: 59px; display: grid; place-items: center; border: 1px solid #4c4e50; border-radius: 4px; background: rgba(255,255,255,.012); box-shadow: none; font: 600 28px/1 var(--sans); color: var(--cs-white); }
.code-card .code-cells span.filled { border-color: rgba(255,255,255,.55); }
.code-card .code-cells span.active { border: 2px solid #4373fa; box-shadow: 0 0 0 1px #4373fa; } /* three pixels of ring, one of them outside the box, as in the picture: the focused box is two larger each way, and the row does not move */
.code-card .code-cells span.active:empty::after { content: ""; width: 1px; height: 29px; background: #f3f2f2; animation: codeCaret 1.1s steps(1) infinite; }
.code-card .code-cells.err span { border: 1px solid #d9534f; box-shadow: none; }
@keyframes codeCaret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .code-card .code-cells span.active:empty::after { animation: none; } }

.code-verify { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 49px; margin: 25px 0 0; padding: 0; border: 0; border-radius: 4px; background: #3464f5; color: #f6f8fe; font: 600 17px/1 var(--sans); cursor: pointer; transition: background .2s; }
.code-verify:hover { background: #2f5ae0; }
.code-verify:disabled { opacity: .6; cursor: default; }
.code-verify svg { flex: none; width: 14px; height: 11px; }
.code-or { margin: 20px 0 0; font-size: 13.9px; line-height: 20px; color: #babfc7; }

.code-foot { margin: 32px 0 0; padding: 17px 0 0; border-top: 1px solid rgba(255,255,255,.15); }
.code-card .code-hint { margin: 0; min-height: 0; font-size: 12.5px; line-height: 18px; color: #b8bec7; }
.code-card .code-actions { display: flex; justify-content: center; margin: 5px 0 0; }
.code-card #signin-resend { color: var(--cs-blue); font: 500 13.4px/18px var(--sans); }
.code-card #signin-resend:hover { color: #7ea2f0; }

.code-tagline { margin: 40px 0 0; font-size: 12.5px; line-height: 17px; color: var(--cs-tag); text-align: center; }

/* a card narrower than its own 516px: the boxes share the width, the padding eases */
@media (max-width: 560px) {
  .code-card { padding: 0 24px 36px; }
  .code-card .code-cells { gap: 8px; }
  .code-card .code-cells span { flex: 1 1 0; width: auto; min-width: 0; height: 54px; }
  #modal-signin .code-card h2 { font-size: 46px; }
}

/* keyboard focus: a ring on every control of the card, the picture having none to copy */
.code-back:focus-visible, .code-change:focus-visible, .code-card #signin-resend:focus-visible, .code-brand:focus-visible { outline: 2px solid #4373fa; outline-offset: 3px; border-radius: 2px; }
.code-verify:focus-visible { outline: 2px solid #f6f8fe; outline-offset: 3px; }

/* ───────────────────────── the access card, in the same dark ─────────────────────────
   Carl, 11 October 2026, with a picture of the access card in its light grey and one of the code screen above:
   "when clicked access code should appear as [the code screen], same style here". It is that screen's own design: the same
   card, back link, lockup, eyebrow, serif heading, button, divider and tagline, with two dark fields where the six boxes are.
   The markup is #modal-access in index.html, with the ids waitlist.js has always used, so waitlist.js is untouched. */

#modal-access .code-card h2 { margin: 13px -24px 0; font-family: var(--serif); font-weight: 400; font-size: 58px; line-height: 62px; letter-spacing: 0; color: var(--cs-white); } /* the line is 437px and the column 422: it may run into the card's padding, which is only room, so it stays on one line at the picture's size */
#modal-access .code-card .sub { margin: 9px 0 0; font-size: 16.3px; line-height: 22px; color: var(--cs-sub); }

/* the page behind. Over the landing page it is what the code screen has, so a code sent from here (the next screen) arrives on
   the same ground: 65% dark, 4.5px of blur, the nav and the hero put away, the wall lifted as it is there, the brand in the corner.
   Over the position page nothing is put away: the page stays behind the card as it did behind the grey one, in its own dark. */
.access-screen .code-brand { display: none; }
body:has(#join-view:not([hidden])) .access-screen .code-brand { display: flex; }
body:has(#join-view:not([hidden])) .modal-access { --scrim: .65; background: rgba(18,18,20,var(--scrim)); backdrop-filter: blur(4.5px); }
body:has(.modal-access:not([hidden])) :is(#join-view header.nav, #join-view .hero-body) { visibility: hidden; }
body:has(.modal-access:not([hidden])) .wall4 .lot img { filter: contrast(.72) brightness(1.6) saturate(1.15); }

/* the two fields: the six boxes' own edge, rounding and ring (the focused one is the active box: two pixels of line and one outside) */
.code-card .code-field {
  display: block; width: 100%; height: 54px; margin: 12px 0 0; padding: 0 18px;
  border: 1px solid #4c4e50; border-radius: 4px; background: rgba(255,255,255,.012); box-shadow: none; outline: none;
  font: 400 17px/1 var(--sans); color: var(--cs-white); text-align: center; transition: border-color .15s, box-shadow .15s;
}
#access-form .code-field:first-of-type { margin-top: 26px; }
.code-card .code-field::placeholder { color: #7d838b; opacity: 1; }
.code-card .code-field:focus { border-color: #4373fa; box-shadow: inset 0 0 0 1px #4373fa, 0 0 0 1px #4373fa; }
.code-card .code-field.err { border-color: #d9534f; box-shadow: none; }
.code-card .code-field.err:focus { box-shadow: inset 0 0 0 1px #d9534f, 0 0 0 1px #d9534f; }
.code-card .code-field[readonly] { color: var(--cs-sub); cursor: default; } /* a signed-in seat's own address: shown, not asked for */
.code-card .code-field:-webkit-autofill, .code-card .code-field:-webkit-autofill:focus { -webkit-text-fill-color: var(--cs-white); caret-color: var(--cs-white); transition: background-color 600000s 0s, color 600000s 0s; }
.code-card .code-field.access-input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.code-card .code-field.access-input::placeholder { font-size: 17px; font-weight: 400; }
.code-card .access-err { margin: 12px 0 0; font-size: 13.5px; line-height: 1.4; color: #f08a86; text-align: center; }

/* the button: the picture's, with its arrow drawn on, so the script's own words ("Checking…") can replace the text and the arrow stays */
.access-screen .code-verify { margin-top: 22px; }
.access-screen .code-verify::after { content: ""; flex: none; width: 14px; height: 11px; background: currentColor; -webkit-mask: var(--cs-arrow) center / contain no-repeat; mask: var(--cs-arrow) center / contain no-repeat; }
.access-screen .code-verify:disabled::after { display: none; }
.access-screen { --cs-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.5h12M8.5 1 13 5.5 8.5 10'/%3E%3C/svg%3E"); }

/* Request access: under the divider, in the blue "Resend code" has. The divider belongs to the link, so where the link is not offered
   (over the waiting room, where the seat is already in line) the card ends at the button. */
#access-form:has(+ #access-request:not([hidden])) { margin-bottom: 17px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.15); }
.code-card .access-request { display: inline-block; margin: 0; font: 500 13.4px/18px var(--sans); color: var(--cs-blue); text-decoration: none; }
.code-card .access-request:hover { color: #7ea2f0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor; }
.code-card .access-request:focus-visible { outline: 2px solid #4373fa; outline-offset: 3px; border-radius: 2px; }

@media (max-width: 560px) { #modal-access .code-card h2 { font-size: min(46px, 10vw); } }

/* granted: the check in the picture's blue, then the heading and its line, in the same card (its Back does nothing now, so it goes) */
.access-screen .check-56 { margin-top: 30px; background: #3464f5; }
.code-card:has(#access-step-done:not([hidden])) .code-back { visibility: hidden; }

/* ───────────────────────── the subscribe card, as Carl's mockup ─────────────────────────
   Carl, 11 October 2026, 5:02pm: "These pages that link from calendar and assistant rather than redirecting them here, they should be a
   pop-up asking them to subscribe". The Calendar and Assistant links of a seat still in line open it (waitlist.js
   openSeatPaywall("subscribe")) over the position page, which stays behind it as it does behind the access card. It was the access card's
   own parts, fewer of them; on 12 October, with his picture check.png, he said "update the subscribe card to this mockup design", and it
   is that picture: two panes, a dark one for what the seat gets and a light one that reviews the order and holds the button.
   Every size is the picture's (1487 x 1058, the card 1308 x 867, the dark pane 548 wide, the light one 760) times 0.74, which turns the
   picture's 22px lines into the 16.3px the access card's lines already are. The markup is #modal-subscribe in index.html. */
.modal-subscribe { z-index: 7; background: rgba(15,14,14,.8); backdrop-filter: blur(12px); }
.sub-card {
  --sc-blue: #3464f5; --sc-link: #2f5ae0; --sc-ring: #4373fa; --sc-dim: #9b9ba2; --sc-rule: rgba(255,255,255,.17);
  --sc-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.5h12M8.5 1 13 5.5 8.5 10'/%3E%3C/svg%3E");
  position: relative; display: grid; grid-template-columns: 406px minmax(0, 1fr); width: 968px; max-width: 100%; margin: auto; overflow: hidden;
  border-radius: 6px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 60px 120px -40px rgba(0,0,0,.9); font-family: var(--sans);
}
.sub-card h2, .sub-card h3 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
.sub-card :where(p, ul) { margin: 0; padding: 0; }

/* the dark pane: what the seat gets */
.sub-pitch { position: relative; display: flex; flex-direction: column; padding: 0 34px 35.5px 37px; background: #1b1b1c; color: #fff; }
.sub-back { position: absolute; top: 28px; left: 27px; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: #aeaeb4; font: 400 13.3px/1 var(--sans); cursor: pointer; }
.sub-back:hover { color: #fff; }
.sub-back-ring { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; }
.sub-back-ring svg { display: block; width: 12px; height: 12px; }
.sub-lockup { display: flex; align-items: center; gap: 4px; margin: 88.5px 0 0; color: #fff; }
.sub-lockup img { display: block; flex: none; width: 60px; height: 60px; margin: -21px 0 -21px -15px; } /* the mark's ink is the middle half of its box, so the box is cut back to the ink */
.sub-lockup-word { font-weight: 600; font-size: 17.3px; letter-spacing: -.01em; white-space: nowrap; }
.sub-pitch h2 { margin-top: 33px; font-size: 52px; line-height: 1.04; color: #fff; }
.sub-plan { margin-top: 17.5px; font-weight: 400; font-size: 15.5px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-dim); }
.sub-price { display: flex; align-items: baseline; gap: 14px; margin-top: 17.5px; }
.sub-price b { font-weight: 700; font-size: 68.5px; line-height: 1; letter-spacing: -.025em; color: #fff; }
.sub-price span { font-size: 18px; color: var(--sc-dim); }
.sub-billed { margin-top: 10px; font-size: 15.5px; line-height: 22px; color: #c8c8cd; }
.sub-points { display: grid; gap: 20px; margin: 26.4px 0 30.5px; padding-top: 24px; border-top: 1px solid var(--sc-rule); list-style: none; } /* the 30.5px is the least gap above the seats line, which sits at the pane's foot where the light pane's last line does */
.sub-points li { display: grid; grid-template-columns: 21px minmax(0, 1fr); column-gap: 16px; font-size: 16px; line-height: 23px; color: #ebebee; }
.sub-points i { display: grid; place-items: center; width: 21px; height: 21px; margin-top: 1px; border-radius: 50%; background: var(--sc-blue); color: #fff; }
.sub-points svg { display: block; width: 11px; height: 11px; }
.sub-seats { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--sc-rule); font-size: 13.8px; line-height: 20px; color: var(--sc-dim); }
.sub-seats[hidden] { display: none; }
.sub-seats i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--sc-blue); }
.sub-seats b { font-weight: 400; color: #fff; }

/* the light pane: the order, and the button */
.sub-review { display: flex; flex-direction: column; padding: 0 36px 35.5px 42px; background: #f6f5f7; color: #14161f; }
.sub-review-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 33px; margin-top: 28px; }
.sub-kicker { font-weight: 500; font-size: 12.4px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: #2b2e3b; }
.sub-demo { box-sizing: border-box; display: inline-flex; align-items: center; height: 33px; padding: 0 14px; border: 1px solid #5d88fa; border-radius: 5px; background: #f3f5fe; color: var(--sc-link); font-weight: 500; font-size: 12px; white-space: nowrap; }
.sub-demo[hidden] { display: none; }
.sub-review h3 { margin-top: 21px; font-size: 42px; line-height: 1.05; color: #0e1017; }
.sub-review-sub { margin-top: 5px; font-size: 19.5px; line-height: 1.3; color: #2b2e3a; }
.sub-rows { margin-top: 19px; }
.sub-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 48px; border-bottom: 1px solid #e1e3ec; font-size: 16.8px; line-height: 1.2; color: #1a1c26; }
.sub-row span:first-child { padding-left: 4px; }
.sub-row span:last-child { padding-right: 6px; text-align: right; }
.sub-due { height: 60px; border-bottom: 0; font-size: 17.5px; font-weight: 700; }
.sub-due span:last-child { font-size: 26px; letter-spacing: -.01em; }
.sub-note { display: flex; align-items: center; gap: 19px; box-sizing: border-box; height: 57px; margin-top: 6.6px; padding: 0 18px; border: 1px solid #d9dce8; border-radius: 4px; background: #ecedf3; font-size: 14.5px; line-height: 1.3; color: #2b2e3a; }
.sub-note svg { flex: none; width: 19px; height: 19px; color: #1a1c26; }
.sub-note[data-kind="demo"] .sub-note-lock, .sub-note[data-kind="secure"] .sub-note-info { display: none; }
.sub-pay { display: flex; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; width: 100%; height: 54px; margin-top: 13.3px; padding: 0; border: 0; border-radius: 3px; background: var(--sc-blue); color: #fff; font: 600 18.2px/1 var(--sans); cursor: pointer; transition: background .2s; }
.sub-pay:hover { background: #2f5ae0; }
.sub-pay:disabled { opacity: .6; cursor: default; }
.sub-pay::after { content: ""; flex: none; width: 15px; height: 12px; background: currentColor; -webkit-mask: var(--sc-arrow) center / contain no-repeat; mask: var(--sc-arrow) center / contain no-repeat; }
.sub-pay:disabled::after { display: none; }
.sub-renews { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin: 14.8px 0 21.5px; padding-left: 4px; font-size: 13.4px; line-height: 20px; letter-spacing: -.01em; color: #4a4d58; }
.sub-switch { padding: 0; border: 0; background: none; font: 500 13.4px/18px var(--sans); color: var(--sc-link); cursor: pointer; }
.sub-switch[hidden] { display: none; }
.sub-switch:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor; }
.sub-fine { margin-top: auto; padding: 18px 0 0 4px; border-top: 1px solid #dfe1e9; font-size: 13.2px; line-height: 20px; letter-spacing: -.01em; color: #5c5f6a; }

.sub-back:focus-visible .sub-back-ring { outline: 2px solid var(--sc-ring); outline-offset: 3px; }
.sub-pay:focus-visible, .sub-switch:focus-visible { outline: 2px solid var(--sc-ring); outline-offset: 3px; }

/* narrower than the two panes: one above the other, as the Checkout does, with the gaps closed up (the picture has no such view) */
@media (max-width: 900px) {
  .sub-card { grid-template-columns: 1fr; width: 480px; }
  .sub-pitch { padding-bottom: 26px; }
  .sub-lockup { margin-top: 76px; }
  .sub-pitch h2 { margin-top: 22px; }
  .sub-plan { margin-top: 14px; }
  .sub-price { margin-top: 12px; }
  .sub-billed { margin-top: 8px; }
  .sub-points { gap: 14px; margin: 20px 0 22px; padding-top: 20px; }
  .sub-seats { padding-top: 16px; }
  .sub-review { padding-bottom: 28px; }
  .sub-review-top { margin-top: 24px; }
  .sub-review h3 { margin-top: 16px; }
  .sub-rows { margin-top: 12px; }
  .sub-row { height: 44px; }
  .sub-due { height: 54px; }
}
@media (max-width: 560px) {
  .sub-pitch, .sub-review { padding-left: 24px; padding-right: 24px; }
  .sub-back { left: 14px; }
  .sub-pitch h2 { font-size: min(52px, 12.5vw); }
  .sub-review h3 { font-size: min(42px, 9.6vw); }
}

/* The confirmation, in the same window. Carl, 12 October 2026, of the development harness's button, which closed this card and opened the
   Checkout's smaller box: "the confirmation should take the place of the current panel, everything disappears and ... so same little
   window, not as much transition animation, just everything disappear and goes to the confirmation of payment". waitlist.js showSubscribed
   sets data-step="done" on the card, and its second pair of panes (.sub-done-l, .sub-done-r) takes the place of the first. All four sit in
   the same two cells, and the first pair keeps its place in the layout, unseen (visibility, never display: a pane that left it would let
   the row shrink to the confirmation's height), so the window is the size it was, at any width. The new words fade in over .16s, in
   place and by opacity alone; Back and the lockup, which are the first pair's twins, do not blink. */
.sub-card > .sub-pitch { grid-area: 1 / 1; }
.sub-card > .sub-review { grid-area: 1 / 2; }
.sub-card > .sub-done-l, .sub-card > .sub-done-r { visibility: hidden; }
.sub-card[data-step="done"] > .sub-pitch, .sub-card[data-step="done"] > .sub-review { visibility: hidden; }
.sub-card[data-step="done"] > .sub-done-l, .sub-card[data-step="done"] > .sub-done-r { visibility: visible; }
.sub-card[data-step="done"] > .sub-done-l > :not(.sub-back, .sub-lockup), .sub-card[data-step="done"] > .sub-done-r > * { animation: sub-swap .16s ease-out; }
@keyframes sub-swap { from { opacity: 0; } to { opacity: 1; } }

/* the dark pane: the receipt, where the pitch was */
.sub-done-l .sub-plan { margin-top: 33px; }
.sub-done-l .sub-billed { text-wrap: balance; }

/* the light pane: the check, the words and the way on, in the middle of it */
.sub-done-r { align-items: center; justify-content: center; padding-top: 35.5px; text-align: center; }
.sub-done-check { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sc-blue); color: #fff; }
.sub-done-check svg { display: block; width: 28px; height: 28px; }
.sub-done-r h3 { margin-top: 24px; }
.sub-done-text { max-width: 24em; margin-top: 14px; }
.sub-done-r .sub-pay { margin-top: 34px; }

@media (max-width: 900px) {
  .sub-card > .sub-review { grid-area: 2 / 1; }
  .sub-done-l .sub-plan { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sub-card[data-step="done"] > .sub-done-l > :not(.sub-back, .sub-lockup), .sub-card[data-step="done"] > .sub-done-r > * { animation: none; }
}