/* buy.css: the two pages around paying for a Brief (/buy and /welcome).
   They stand alone (no site.css), in the pricing section's own terms: ink ground, one paper card set like a Brief answer. */
:root {
  --ink: #0F0F12; --ink-2: #26262C; --ink-3: #55555E; --ink-4: #86868F; --on-ink: #EDEAE3; --blue: #3D5AFE; --blue-2: #2C46E6;
  --rule: rgba(15, 15, 18, .1);
  --serif-d: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --g: clamp(20px, 5vw, 60px);
}
* { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; background: var(--ink); color: var(--on-ink);
  font: 400 17px/1.55 var(--sans); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid #7C8DFF; outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(100% - 2 * var(--g), 1120px); margin: 0 auto; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(18px, 2.4vw, 28px) 0; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 600 19px/1 var(--sans); letter-spacing: -.035em; text-decoration: none; }
.logo svg { height: 22px; fill: var(--blue); }
.back { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; font: 500 14px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; opacity: .62; transition: opacity .25s; }
.back:hover { opacity: 1; }
.back svg, .tl svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

main { padding: clamp(20px, 3vw, 44px) 0 clamp(48px, 6vw, 88px); }
.mk { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; margin: 0 0 clamp(28px, 3.4vw, 48px); padding-top: 14px;
  border-top: 1px solid rgba(237, 234, 227, .22); font: 500 13px/1.3 var(--sans); letter-spacing: -.003em; }
.mk span:last-child { opacity: .5; text-align: right; }
h1 { margin: 0 0 clamp(28px, 3.4vw, 48px); font: 400 clamp(42px, 5.6vw, 84px)/1.02 var(--serif-d); letter-spacing: -.028em; text-wrap: balance; font-variation-settings: 'opsz' 72; }
h1 em { font-weight: 300; color: rgba(237, 234, 227, .46); }

/* the card: what you pay on the left, what happens next on the right, the other way in along the foot */
.pc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "price next" "alt alt"; border-radius: 24px; background: #F7F5F0; color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, 0 60px 110px -60px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; }
.pc__price { grid-area: price; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 3.4vw, 52px) clamp(22px, 3.6vw, 56px) clamp(26px, 3.2vw, 44px); }
.pc__next { grid-area: next; padding: clamp(26px, 3.4vw, 52px) clamp(22px, 3.6vw, 56px) clamp(24px, 3vw, 40px); border-left: 1px solid var(--rule); }
.pc__q { margin: 0 0 22px; font: italic 300 clamp(19px, 1.5vw, 22px)/1.2 var(--serif-d); letter-spacing: -.01em; color: var(--ink-4); font-variation-settings: 'opsz' 36; }
.pc__fig { display: flex; align-items: flex-start; margin: 0 0 clamp(24px, 2.6vw, 34px); font: 300 clamp(96px, 10.2vw, 150px)/.8 var(--serif-d); letter-spacing: -.055em;
  font-variation-settings: 'opsz' 72; font-feature-settings: 'lnum' 1; font-variant-numeric: lining-nums; }
.pc__cur { margin: .07em .08em 0 0; font-size: .2em; letter-spacing: -.01em; color: var(--ink-3); }
.pc__v { padding-top: .04em; }
.pc__per { align-self: flex-end; margin: 0 0 .02em .16em; font: italic 300 clamp(20px, 1.7vw, 26px)/1 var(--serif-d); letter-spacing: -.01em; color: var(--ink-4); }
.pc__terms { width: 100%; margin: 0 0 clamp(24px, 2.8vw, 34px); }
.pc__terms div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.pc__terms div:last-child { border-bottom: 1px solid var(--rule); }
.pc__terms dt { font: 400 15.5px/1.3 var(--sans); color: var(--ink-3); }
.pc__terms dd { margin: 0; font: 600 15.5px/1.3 var(--sans); white-space: nowrap; }
.pc__lab { margin: 0 0 14px; font: 500 13px/1.3 var(--sans); color: var(--ink-4); }
.pc__fine { margin: 16px 0 0; max-width: 34em; font: 400 13px/1.5 var(--sans); color: var(--ink-4); }
.pc__fine a { color: var(--ink-3); text-underline-offset: 3px; }

/* the road from paying to live: numbered like the card's list on the front page */
.road { list-style: none; margin: 0; padding: 0; counter-reset: road; }
.road li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; padding: 14px 0 15px; border-top: 1px solid var(--rule); counter-increment: road; }
.road li:last-child { border-bottom: 1px solid var(--rule); }
.road li::before { content: counter(road, decimal-leading-zero); font: 500 11.5px/1 var(--sans); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.road b { display: block; font: 400 clamp(17px, 1.3vw, 19px)/1.3 var(--serif-d); letter-spacing: -.01em; color: var(--ink); font-variation-settings: 'opsz' 24; }
.road small { display: block; margin-top: 4px; font: 400 14px/1.45 var(--sans); color: var(--ink-3); }
.road .is-done::before { content: ""; width: 12px; height: 7px; margin: 0 0 4px 2px; border: solid var(--blue); border-width: 0 0 1.8px 1.8px; transform: rotate(-45deg); }
.road .is-done b { color: var(--ink-4); }
.road .is-live b::after { content: ""; display: inline-block; width: 9px; height: 9px; margin: 0 0 1px 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(61, 90, 254, .16); }

.pc__alt { grid-area: alt; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding: 20px clamp(22px, 3.6vw, 56px) 22px; border-top: 1px solid var(--rule); background: #F0EDE6; }
.pc__alt p { margin: 0; font: 400 clamp(18px, 1.4vw, 21px)/1.25 var(--serif-d); letter-spacing: -.012em; font-variation-settings: 'opsz' 36; }
.pc__alt p span { color: var(--ink-4); }

.btn { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px 0 26px; border: 0; border-radius: 999px; background: var(--blue); color: #fff;
  font: 500 16px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .3s, transform .3s var(--ease-out); }
.btn:hover { background: var(--blue-2); }
.btn:active { transform: scale(.985); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn--ink { background: var(--ink); }
.btn--ink:hover { background: var(--ink-2); }
.tl { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; font: 500 15px/1 var(--sans); letter-spacing: -.01em; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease-out); }
.tl:hover { background-size: 0 1px; background-position: 100% 100%; }

.base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 22px 0 calc(22px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; color: rgba(237, 234, 227, .55); }
.base a { text-underline-offset: 3px; text-decoration-color: rgba(237, 234, 227, .3); }

/* the page arrives in one quiet rise */
@media (prefers-reduced-motion: no-preference) {
  .mk, h1, .pc { animation: rise .9s var(--ease-out) both; }
  h1 { animation-delay: .06s; } .pc { animation-delay: .14s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } }
}

/* a short laptop screen: the pay button stays on the first screen */
@media (min-width: 900px) and (max-height: 820px) {
  .top { padding: 16px 0; }
  main { padding-top: 8px; }
  .mk { margin-bottom: 22px; }
  h1 { margin-bottom: 26px; font-size: clamp(40px, 4.4vw, 60px); }
  .pc__price, .pc__next { padding-top: 30px; padding-bottom: 28px; }
  .pc__q { margin-bottom: 16px; }
  .pc__fig { margin-bottom: 22px; font-size: clamp(96px, 8.4vw, 116px); }
  .pc__terms { margin-bottom: 22px; }
  .pc__terms div { padding: 10px 0; }
  .road li { padding: 11px 0 12px; }
}
@media (max-width: 899px) {
  .pc { grid-template-columns: 1fr; grid-template-areas: "price" "next" "alt"; }
  .pc__next { border-left: 0; border-top: 1px solid var(--rule); }
  .pc__price .btn { width: 100%; justify-content: space-between; }
}
@media (max-width: 480px) {
  .pc { border-radius: 22px; }
  .pc__terms dt, .pc__terms dd { font-size: 15px; }
}