/* /reserve: our half says what the $100 buys, Stripe's embedded checkout takes it (Anshul 2026-10-27).
   Laptops split the screen, the kit photo edge to edge across the top of the left half. Phones stack it.
   Standalone on purpose: the home page's stylesheet pins every main > section to one screen and snaps the scroll,
   which locked this page at its top (Anshul's recording, 2026-10-27 01:58). Only the shared basics are copied here. */
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Neue Montreal SS"; src: url("/fonts/neue-montreal-semi-squeezed-book.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neue Montreal SS"; src: url("/fonts/neue-montreal-semi-squeezed-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --ink: #141414; --bone: #eeeae2; --slate: #a2afb9; --line: rgba(238, 234, 226, .16);
  --blue: #1c04f4; --red: #f40404; --magenta: #f40488;
  --stripe: clamp(9px, 2.4vw, 30px);
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Neue Montreal SS", "Inter", "Helvetica Neue", Arial, sans-serif;
  /* one inset for everything in the left half: wordmark, heading, price, list and its rules, on both sides */
  --inset: 20px;
}
@media (min-width: 900px) { :root { --inset: 48px; } }
* { box-sizing: border-box; }
body { margin: 0; color: var(--bone); font: 400 17px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.stripe { position: fixed; top: 0; right: 0; bottom: 0; width: var(--stripe); z-index: 50; pointer-events: none;
  background: linear-gradient(90deg, var(--blue) 0 33.34%, var(--red) 33.34% 66.67%, var(--magenta) 66.67% 100%); }
.btn { display: inline-block; padding: 17px 28px; background: var(--bone); color: var(--ink); font: 600 17px/1 var(--display);
  text-decoration: none; white-space: nowrap; }

.reserve-page { background: #fff; }
.reserve { display: grid; align-content: start; min-height: 100svh; }

.buy { position: relative; background: var(--ink); color: var(--bone); }
.buy .home { position: absolute; z-index: 2; top: 20px; left: var(--inset); display: block; width: 104px; }
.buy .home img { width: 100%; height: auto; filter: invert(1) brightness(1.8); }
.buy .kit { width: 100%; height: auto; aspect-ratio: 1600 / 1066; object-fit: cover; }
.buy .words { padding: 28px var(--inset) 40px; }
/* on phones the edge stripe lies over this half, so the right inset starts where the stripe ends */
@media (max-width: 899px) { .buy .words { padding-right: calc(var(--inset) + var(--stripe)); } }
.buy h1 { margin: 0; font: 600 34px/1 var(--display); letter-spacing: -.01em; }
.buy .price { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.buy .price b { font: 600 34px/1 var(--display); }
.buy .price span { color: var(--slate); font-size: 15px; }
.buy ul { list-style: none; margin: 28px 0 0; padding: 0; }
.buy li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.4; color: rgba(238, 234, 226, .86); }
.buy li:last-child { border-bottom: 1px solid var(--line); }
.buy li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; background: var(--slate); }
.buy li b { color: var(--bone); font-weight: 600; }

/* white, Stripe's checkout background (Stripe, Branding, Checkout styling: brand colours off, button ink), so the
   form sits flat in one field of colour with no card around it (Anshul 2026-10-27) */
.reserve .pay { background: #fff; color: var(--ink); padding: 8px var(--stripe) 48px 0; }
.pay .state { padding: 32px 20px; max-width: 440px; }
.pay .wait, .pay .slow { margin: 0; padding: 24px 20px; font-size: 15px; color: #6b7680; }
.pay .slow a { color: var(--ink); font-weight: 600; }
.pay [hidden] { display: none; }
.pay .state h2 { margin: 0 0 12px; font: 600 32px/1.05 var(--display); }
.pay .state p { margin: 0 0 24px; font-size: 17px; line-height: 1.45; color: #3f4a52; }
.pay .state .btn { background: var(--ink); color: var(--bone); }

@media (min-width: 900px) {
  .reserve { grid-template-columns: 1fr 1fr; }
  /* ink down the whole left half, white under Stripe's form on the right */
  .reserve { background: linear-gradient(90deg, var(--ink) 50%, #fff 50%); }
  .buy { min-height: 100svh; }
  .buy .home { top: 32px; width: 120px; }
  .buy .words { padding-top: 44px; padding-bottom: 48px; }
  .buy h1, .buy .price b { font-size: 46px; }
  .buy li { font-size: 17px; }
  .reserve .pay { padding: 40px var(--stripe) 40px 0; }
  .pay .state { padding: 64px 48px; }
}

/* laptop screens tall enough keep the left half in view while the form scrolls. The words keep their height and
   the photo takes what is left of the screen, so the four lines are never cut off (Anshul 2026-10-27: on a
   1149px tall window the last line was clipped). */
@media (min-width: 900px) and (min-height: 700px) {
  .buy { position: sticky; top: 0; align-self: start; height: 100svh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .buy .kit { flex: 1 1 0; min-height: 0; height: auto; aspect-ratio: auto; object-fit: cover; object-position: 50% 85%; }
  .buy .words { flex: none; }
}