/* The buy page: a reading page (site.css) with one slab in the middle, set out as the app sets out a
   moment: a stamp, a lead that has stepped back and the rest, a short body, one lantern capsule and a
   quiet way out. Errors in the same voice, never red. Paddle's checkout sits inside the slab in its
   own frame, on its dark theme, so the payment reads as part of the page rather than a form pasted on. */

.buy .lede { max-width: 30em; }
.buy > ul { margin-top: 22px; }

.slab { position: relative; margin: 44px 0 0; background: rgba(26,33,48,.94); border: 1px solid rgba(242,179,61,.34); border-radius: 24px;
  padding: 26px 28px 26px; box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 60px rgba(242,179,61,.07); }
.slab [data-state] { display: block; }
.slab [hidden] { display: none !important; }
.slab[data-at="closed"] ~ .small, .slab[data-at="opening"] ~ .small { display: none; }
.slab [data-state="opening"] { min-height: 150px; display: grid; place-items: center; }

.slab .line { margin: 12px 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(21px, 2.6vw, 24px); line-height: 1.3; color: var(--bone); max-width: none; text-wrap: pretty; }
.slab .lead { color: var(--bone-55); }
.slab .body { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--bone-70); }
.slab .said { margin: 16px 0 0; font-size: 16px; line-height: 1.5; color: var(--bone); }
.slab .said .lead { color: var(--bone-55); }

.slab button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.slab .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.slab .capsule { height: 50px; padding: 0 24px; border-radius: 999px; border: 1.5px solid var(--lantern); color: var(--lantern); background: rgba(242,179,61,.06);
  font-weight: 600; font-size: 17px; white-space: nowrap; transition: transform .14s ease, background .2s ease; }
.slab .capsule:hover { background: rgba(242,179,61,.12); }
.slab .capsule.ember { border-color: var(--ember); color: var(--ember); background: rgba(226,84,59,.06); }
.slab .capsule.ember:hover { background: rgba(226,84,59,.12); }
.slab .capsule:active, .slab .apple:active { transform: scale(.97); }
.slab .quiet { padding: 12px 2px; font-size: 16px; color: var(--bone-55); white-space: nowrap; }
.slab .quiet:hover { color: var(--bone); text-decoration: underline; text-decoration-color: var(--bone-40); text-underline-offset: 4px; }
/* Apple's own style, as its rules require: white, its logo, its words. The brightest thing on the slab. */
.slab .apple { height: 50px; padding: 0 24px 0 20px; border-radius: 999px; background: #fff; color: #000; display: inline-flex; align-items: center; gap: 9px;
  font-family: -apple-system, system-ui, "Helvetica Neue", sans-serif; font-weight: 600; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; transition: transform .14s ease; }
.slab .apple svg { width: 15px; height: 18px; fill: #000; margin-top: -2px; }

.slab .field { display: block; margin-top: 20px; max-width: 26em; }
.slab .field input { width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--bone-12); background: rgba(14,17,27,.62);
  color: var(--bone); font: 400 18px/1 var(--sans); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.slab .field input::placeholder { color: var(--bone-40); }
.slab .field input:focus { border-color: rgba(242,179,61,.7); box-shadow: 0 0 0 4px rgba(242,179,61,.1); }

/* Six boxes over one real field, so iOS can fill the code in from Mail and a paste lands whole. */
.slab .code { position: relative; display: inline-block; margin-top: 22px; }
.slab .code input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; border: 0; padding: 0; background: transparent; color: transparent; caret-color: transparent; }
.slab .boxes { display: grid; grid-template-columns: repeat(6, 46px); gap: 8px; }
.slab .boxes i { height: 58px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--bone-12); background: rgba(14,17,27,.62);
  font: 600 26px/1 var(--serif); font-style: normal; color: var(--bone); font-variant-numeric: tabular-nums; transition: border-color .2s ease, box-shadow .2s ease; }
.slab .code.on .boxes i.at { border-color: rgba(242,179,61,.7); box-shadow: 0 0 0 4px rgba(242,179,61,.1); }

.slab .who { margin: 0; font-size: 15px; line-height: 1.5; color: var(--bone-55); max-width: none; }
.slab .who b { color: var(--bone-85); font-weight: 600; word-break: break-all; }
.slab .who .quiet { font-size: 15px; padding: 8px 0; margin-left: 6px; }
.slab .bill { margin: 14px 0 0; border-top: 1px solid var(--bone-07); }
.slab .bill > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--bone-07); }
.slab .bill > div[hidden] { display: none; }
.slab .bill dt { color: var(--bone-70); font-size: 16px; }
.slab .bill dd { margin: 0; color: var(--bone-85); font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slab .bill .today dt, .slab .bill .today dd { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--bone); }
.slab .till { margin-top: 18px; min-height: 120px; }
.slab .till:empty { display: grid; place-items: center; }
.slab .till:empty::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lantern); animation: breathe 1.6s ease-in-out infinite; }
.slab .renews { margin: 14px 0 0; font-size: 14px; color: var(--bone-55); }

.slab .steps { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 8px; }
.slab .steps li { counter-increment: step; position: relative; padding-left: 34px; margin: 0; color: var(--bone-85); font-size: 16px; line-height: 1.5; }
.slab .steps li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(242,179,61,.5);
  display: grid; place-items: center; font: 600 11px/1 var(--mono); color: var(--lantern); background: none; opacity: 1; }

.slab .wait { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--lantern); box-shadow: 0 0 22px rgba(242,179,61,.6); animation: breathe 1.6s ease-in-out infinite; }
[data-state="settling"] .wait { margin: 22px 0 4px; }
@keyframes breathe { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }

.buy .small { margin-top: 18px; font-size: 15px; color: var(--bone-55); }
.buy .small:first-of-type { margin-top: 22px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 560px) {
  .slab { padding: 22px 20px 22px; border-radius: 22px; }
  .slab[data-at="checkout"] { padding-inline: 14px; }
  .slab[data-at="checkout"] .who, .slab[data-at="checkout"] .bill, .slab[data-at="checkout"] .said, .slab[data-at="checkout"] .renews { margin-inline: 6px; }
  .slab .boxes { grid-template-columns: repeat(6, minmax(0, 44px)); gap: 6px; }
  .slab .acts { gap: 10px 18px; }
}
/* Paddle's frame asks for 286px; on the narrowest phones the slab gives up some of the page's margin for it. */
@media (max-width: 359px) {
  .slab[data-at="checkout"] { margin-inline: calc(8px - var(--gutter)); padding-inline: 9px; }
}