:root {
  --black: #000;
  --white: #fff;
  --grey-on-white: #636363;
  --grey-on-black: #a6a6a6;
  --rule: #d4d4d4;

  /* Serif text sets opsz low so hairlines survive at small sizes */
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 4vw, 56px);
  --name-size: 14.6vw;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

html:has(dialog[open]) { overflow: hidden; }

h1, h2, h3, p, dl, dd, ol { margin: 0; padding: 0; }
ol { list-style: none; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.on-black :focus-visible { outline-color: var(--white); }

/* Hero: two halves, with the name straddling the line between them */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr 1fr;
  min-height: max(100svh, 600px);
}

.hero-top,
.hero-bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-inline: var(--gutter);
}

.hero-top {
  background: var(--white); /* the name's blend needs a painted backdrop */
  padding-top: 24px;
  padding-bottom: calc(var(--name-size) * 0.72);
}

.hero-bottom {
  position: relative;
  justify-content: flex-end;
  padding-top: calc(var(--name-size) * 0.72);
  padding-bottom: clamp(28px, 5vh, 48px);
  color: var(--white);
}

.hero-bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black);
  transform-origin: bottom;
  animation: rise 1s cubic-bezier(.7, 0, .2, 1) both;
}

.bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-size: 15px;
}

.bar-title { font-weight: 600; }

.bar nav { display: flex; gap: 28px; }

.bar a { text-decoration: none; }
.bar a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (pointer: coarse) {
  .bar a { display: inline-block; margin-block: -12px; padding-block: 12px; line-height: 20px; }
}

.hero-lede {
  font: 400 clamp(22px, 2.4vw, 34px)/1.2 var(--serif);
  font-variation-settings: "opsz" 8;
  max-width: 24ch;
}

.name {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(calc(-50% - 0.115em)); /* puts the line through the middle of the lowercase letters */
  color: var(--white);
  mix-blend-mode: difference;
  font: 400 var(--name-size)/1 var(--serif);
  font-variation-settings: "opsz" 24;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
}

.offer {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  animation: appear .6s .8s ease-out both;
}

.offer-price { display: grid; gap: 2px; }

.price {
  font: 400 clamp(34px, 4vw, 56px)/1.1 var(--serif);
  font-variation-settings: "opsz" 8;
  font-variant-numeric: lining-nums;
}

.offer-note { color: var(--grey-on-black); font-size: 15px; }

@keyframes rise { from { transform: scaleY(0); } }
@keyframes appear { from { opacity: 0; } }

/* Buttons */
.btn {
  appearance: none;
  border: 1px solid;
  border-radius: 0;
  padding: 18px 44px;
  font: 600 17px/1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s, color .15s;
}

.btn-light { background: var(--white); color: var(--black); border-color: var(--white); }

.btn-dark { background: var(--black); color: var(--white); border-color: var(--black); }

@media (hover: hover) {
  .btn-light:hover { background: var(--black); color: var(--white); }
  .btn-dark:hover { background: var(--white); color: var(--black); }
}

/* Content bands */
.band {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 32px var(--gutter);
  padding: clamp(64px, 9vw, 120px) var(--gutter);
  scroll-margin-top: 0;
}

.band + .band { border-top: 1px solid var(--black); }

.band h2 { font: 400 clamp(30px, 3.2vw, 44px)/1.15 var(--serif); font-variation-settings: "opsz" 8; }

.specs > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.specs > div:first-child { padding-top: 0; }
.specs dt { color: var(--grey-on-white); }
.specs dd { font-weight: 500; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  counter-reset: step;
}

.steps li { counter-increment: step; }

.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: 20px;
  font: 400 72px/1 var(--serif);
  font-variation-settings: "opsz" 8;
  font-variant-numeric: lining-nums;
}

.steps h3 { font: 600 17px/1.4 var(--sans); margin-bottom: 6px; }
.steps p { color: var(--grey-on-white); max-width: 30ch; }

.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.faq details:first-child summary { padding-top: 0; }
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after { content: "+"; font-size: 22px; line-height: 1.1; }
.faq details[open] summary::after { content: "\2212"; }

.faq details p { padding-bottom: 20px; color: var(--grey-on-white); max-width: 60ch; }

/* Closing */
.closing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  padding: clamp(64px, 9vw, 120px) var(--gutter);
  background: var(--black);
  color: var(--white);
}

.closing h2 { font: 400 clamp(34px, 5.4vw, 80px)/1.1 var(--serif); font-variation-settings: "opsz" 8; }

.foot {
  padding: 0 var(--gutter) 28px;
  background: var(--black);
  color: var(--grey-on-black);
  font-size: 15px;
}

/* Checkout dialog */
.checkout {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--black);
  border-radius: 0;
  background: var(--white);
  color: var(--black);
}

.checkout::backdrop { background: rgb(0 0 0 / .72); }

.checkout[open] { animation: appear .18s ease-out; }

.checkout-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--rule);
}

.checkout-head h2 { font: 400 24px/1.2 var(--serif); font-variation-settings: "opsz" 8; }

.close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-right: -10px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.state {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  min-height: 268px;
  padding: 32px 24px;
  text-align: center;
}

.state[hidden] { display: none; }

.state h3 { font: 400 30px/1.2 var(--serif); font-variation-settings: "opsz" 8; }

.state p { max-width: 34ch; color: var(--grey-on-white); }

.state .btn { margin-top: 12px; }

.spinner {
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border: 2px solid var(--rule);
  border-top-color: var(--black);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Phone buy bar, hidden until the small-screen rules turn it on */
.buybar { display: none; }

/* Tablets and phones */
@media (max-width: 760px) {
  .band { grid-template-columns: minmax(0, 1fr); padding-block: 56px; }

  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .steps li {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
  }

  .steps li::before { grid-row: span 2; margin: 0; font-size: 48px; }

  .steps p { max-width: none; }

  .faq summary { padding: 14px 0; min-height: 52px; align-items: center; }
  .faq details:first-child summary { padding-top: 14px; }

  .specs > div:first-child { padding-top: 16px; }

  .buybar {
    position: fixed;
    inset: auto 0 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--white);
    background: var(--black);
    color: var(--white);
    visibility: hidden;
    transform: translateY(100%);
    transition: transform .2s ease-out, visibility .2s;
  }

  .buybar.is-visible { visibility: visible; transform: none; }

  .buybar p { display: grid; line-height: 1.3; }
  .buybar-name { color: var(--grey-on-black); font-size: 14px; }
  .buybar-price { font-size: 18px; font-weight: 600; }
  .buybar .btn { padding: 14px 28px; }

  /* Checkout becomes a bottom sheet, within thumb reach */
  .checkout {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-width: 1px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .checkout[open] { animation: sheet .22s ease-out; }

  .close { width: 44px; height: 44px; margin-right: -14px; }

  .state { min-height: 280px; }
  .state .btn { width: 100%; }
}

/* Phones: the name stays on one line, nearly edge to edge, and the type around it scales up */
@media (max-width: 600px) {
  :root { --name-size: 15.9vw; }

  .bar nav { display: none; }

  .hero { min-height: max(100svh, 560px); }

  .hero-top { padding-bottom: calc(var(--name-size) * 1.05); }

  .bar { justify-content: center; }

  .hero-lede { align-self: center; font-size: 6vw; text-align: center; }

  .name { font-variation-settings: "opsz" 11; font-size: 15.2vw; letter-spacing: -0.03em; }

  .offer-price { justify-items: center; text-align: center; }

  .price { font-size: 11.5vw; }

  .offer { gap: 22px; }

  .offer { flex-direction: column; align-items: stretch; }
  .offer .btn, .closing .btn { width: 100%; }

  .closing h2 { font-size: clamp(34px, 10.5vw, 56px); }
}

/* Phones held sideways */
@media (max-height: 500px) and (min-width: 601px) {
  .hero { min-height: 100svh; }
  .hero-lede { display: none; }
  .hero-top { padding-top: 16px; }
  .hero-bottom { padding-bottom: 20px; }
  .price { font-size: 30px; }
  .state { min-height: 0; padding-block: 16px; }
  .checkout { max-height: 100svh; overflow-y: auto; }
}

@keyframes sheet { from { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-bottom::before, .offer, .checkout[open] { animation: none; }
  .spinner { animation-duration: 2.4s; }
}