/* ==========================================================================
   OATH landing page
   Desktop sizes are derived from the 724px-wide mockup: 1mu = 1px of the
   mockup, scaled to the page column. The column is the viewport minus a side
   margin (--edge) on each side, capped at --page-max, and framed by dashed
   lines. Fluid with clamp().
   ========================================================================== */

:root {
  --red: #D90000;
  --bone: #F2EFE9;
  --ink: #1A0A0A;

  --bone-muted: color-mix(in srgb, var(--bone) 55%, transparent);

  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --page-max: 1120px;
  --edge: clamp(24px, 4vw, 96px);
  --mu: calc(min(100vw - 2 * var(--edge), var(--page-max)) / 724);
  --gutter: calc(32 * var(--mu));

  /* Type scale */
  --fs-body: clamp(15px, calc(10.35 * var(--mu)), 28px);
  --fs-mono-xs: clamp(12px, calc(6.7 * var(--mu)), 18px);
  --fs-mono-s: clamp(12px, calc(8.4 * var(--mu)), 22px);
  --fs-mono-m: clamp(13px, calc(8.7 * var(--mu)), 23px);
  --fs-mono-l: clamp(13px, calc(10.5 * var(--mu)), 28px);

  --track: 0.12em;
  --tap: 44px;

  /* Dash pattern for 1px dashed rules: 8px dash, 4px gap */
  --dash-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='1'%3E%3Crect width='8' height='1'/%3E%3C/svg%3E");
  --dash-y: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='12'%3E%3Crect width='1' height='8'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  position: relative;
  max-width: calc(724 * var(--mu));
  margin: 0 auto;
  background: var(--red);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.3;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page frame: dashed lines down the left and right edge of the column.
   On the bone panel they are bone on bone, so the panel edge takes over. */
body::before,
body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 1px;
  background: var(--bone);
  -webkit-mask: var(--dash-y) repeat-y;
  mask: var(--dash-y) repeat-y;
  pointer-events: none;
}

body::before {
  left: 0;
}

body::after {
  right: 0;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
}

.on-bone :focus-visible {
  outline-color: var(--red);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 16px;
  background: var(--bone);
  color: var(--red);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--track);
  text-transform: uppercase;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.container {
  width: 100%;
  max-width: calc(724 * var(--mu));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Dashed rules (1px, bone on red, red on bone) ---------- */

.rule-top,
.rule-bottom {
  position: relative;
}

.rule-top::before,
.rule-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 1px;
  background: var(--bone);
  -webkit-mask: var(--dash-x) repeat-x;
  mask: var(--dash-x) repeat-x;
  pointer-events: none;
}

.rule-top::before {
  top: 0;
}

.rule-bottom::after {
  bottom: 0;
}

.on-bone .rule-top::before {
  background: var(--red);
}

/* ---------- Shared pieces ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 calc(10 * var(--mu));
  border: 1px solid var(--bone);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--track);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.btn--solid {
  background: var(--bone);
  color: var(--red);
}

.btn--outline {
  background: transparent;
  color: var(--bone);
}

.btn--sm {
  font-size: var(--fs-mono-xs);
}

.btn--block {
  display: flex;
  width: 100%;
}

.terminal {
  background: var(--ink);
  color: var(--bone);
  border-radius: 2px;
  padding: calc(6.5 * var(--mu)) calc(12.5 * var(--mu)) calc(12.5 * var(--mu)) calc(8 * var(--mu));
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  line-height: 1.55;
}

.terminal__dots {
  display: flex;
  gap: calc(5 * var(--mu));
  margin-bottom: calc(11.5 * var(--mu));
}

.terminal__dots span {
  width: calc(5 * var(--mu));
  height: calc(5 * var(--mu));
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background: var(--bone);
}

.terminal__line {
  padding-left: calc(4 * var(--mu));
  white-space: pre;
}

.terminal--hero .terminal__prompt {
  color: var(--bone-muted);
}

.terminal--oath .terminal__prompt {
  color: var(--red);
}

/* ---------- Header ---------- */

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  height: calc(83 * var(--mu));
}

.site-nav,
.site-header__actions {
  display: flex;
  align-items: center;
  height: calc(42 * var(--mu));
  min-height: var(--tap);
  margin-top: calc(16 * var(--mu));
}

.site-nav__list {
  display: flex;
  gap: calc(22.5 * var(--mu));
}

.site-nav__list a,
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-s);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.site-nav__toggle,
.site-nav__x {
  display: none;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(10 * var(--mu));
}

/* The mark fills the middle half of its square canvas; the transparent
   top and bottom are pulled out of the layout with negative margins. */
.brand__logo {
  width: calc(85 * var(--mu));
  height: calc(85 * var(--mu));
  margin-block: calc(-21.5 * var(--mu));
  object-fit: contain;
}

.brand__word {
  margin-top: calc(1 * var(--mu));
  padding-left: 0.25em;
  font-family: var(--font-display);
  font-size: clamp(16px, calc(23.75 * var(--mu)), 64px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.25em;
}

.site-header__actions {
  justify-content: flex-end;
  gap: calc(11 * var(--mu));
}

.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
}

.icon-link svg {
  width: clamp(14px, calc(8.5 * var(--mu)), 22px);
  height: auto;
}

.site-header__actions .btn {
  height: calc(27 * var(--mu));
  min-width: calc(81 * var(--mu));
  padding-inline: calc(9 * var(--mu));
}

/* ---------- Hero ---------- */

.hero__inner {
  position: relative;
  padding-top: calc(20.5 * var(--mu));
  padding-bottom: calc(35 * var(--mu));
}

.hero__copy {
  position: relative;
  z-index: 1;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(64px, calc(97.5 * var(--mu)), 260px);
  font-weight: 300;
  line-height: 0.9;
  text-transform: uppercase;
}

.hero__title span {
  display: block;
  white-space: nowrap;
}

.hero__sub {
  margin-top: calc(11.25 * var(--mu));
  line-height: 1.3;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: calc(17 * var(--mu));
  margin-top: calc(16.5 * var(--mu));
}

.hero__ctas .btn {
  min-width: calc(141 * var(--mu));
  height: calc(33 * var(--mu));
}

.terminal--hero {
  width: calc(284 * var(--mu));
  min-width: max-content;
  margin-top: calc(20 * var(--mu));
}

.hero__art {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(410 * var(--mu));
  right: 0;
  pointer-events: none;
}

.hero__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right top;
}

/* ---------- The oath in action ---------- */

.oath {
  padding: calc(17 * var(--mu)) calc(11 * var(--mu)) calc(11 * var(--mu));
}

.oath__title {
  padding-left: 0.2em;
  font-family: var(--font-display);
  font-size: clamp(22px, calc(23.75 * var(--mu)), 64px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

.oath__stage {
  position: relative;
  max-width: calc(702 * var(--mu));
  margin: calc(15.25 * var(--mu)) auto 0;
}

.oath__img {
  width: 100%;
  height: auto;
  aspect-ratio: 702 / 306;
  object-fit: cover;
  object-position: center 55%;
}

.terminal--oath {
  position: absolute;
  top: calc(40 * var(--mu));
  left: 50%;
  transform: translateX(-50%);
}

/* ---------- Bone panel: how it works + FAQ ---------- */

.on-bone {
  background: var(--bone);
  color: var(--red);
}

.how .container {
  padding-top: calc(18.85 * var(--mu));
  padding-bottom: calc(35.4 * var(--mu));
}

.how__title {
  font-family: var(--font-display);
  font-size: clamp(56px, calc(88.75 * var(--mu)), 236px);
  font-weight: 300;
  line-height: 0.9;
  text-transform: uppercase;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(43.5 * var(--mu));
  margin-top: calc(14.3 * var(--mu));
}

.step {
  position: relative;
}

.step + .step::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-21.75 * var(--mu));
  width: 1px;
  background: var(--red);
  -webkit-mask: var(--dash-y) repeat-y;
  mask: var(--dash-y) repeat-y;
}

.step__tile {
  aspect-ratio: 1;
  background: var(--red);
}

.step__label,
.step__title,
.step__body {
  padding-left: calc(3.5 * var(--mu));
}

.step__tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.step__label {
  margin-top: calc(11 * var(--mu));
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-s);
  line-height: 1.2;
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.step__title {
  margin-top: calc(11 * var(--mu));
  font-family: var(--font-display);
  font-size: clamp(26px, calc(31 * var(--mu)), 82px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.step__body {
  margin-top: calc(8.9 * var(--mu));
  color: var(--ink);
  font-size: clamp(13px, calc(10.35 * var(--mu)), 28px);
  line-height: 1.15;
}

.faq__inner {
  display: grid;
  grid-template-columns: calc(191 * var(--mu)) minmax(0, 1fr);
  column-gap: calc(43.5 * var(--mu));
  align-items: start;
  padding-top: calc(7 * var(--mu));
  padding-bottom: calc(11 * var(--mu));
}

.faq__title {
  margin-top: calc(12.9 * var(--mu));
  font-family: var(--font-display);
  font-size: clamp(96px, calc(172.5 * var(--mu)), 460px);
  font-weight: 300;
  line-height: 0.9;
}

.faq__item {
  position: relative;
}

.faq__item + .faq__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--red);
  -webkit-mask: var(--dash-x) repeat-x;
  mask: var(--dash-x) repeat-x;
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: max(var(--tap), calc(42.5 * var(--mu)));
  padding-right: calc(8 * var(--mu));
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-l);
  line-height: 1.2;
  letter-spacing: var(--track);
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  flex: none;
  font-size: 1.3em;
  line-height: 1;
  letter-spacing: 0;
}

.faq__item[open] summary::after {
  content: "\2212";
}

.faq__answer {
  max-width: 62ch;
  padding-bottom: calc(14 * var(--mu));
  color: var(--ink);
  line-height: 1.45;
}

/* ---------- Waitlist ---------- */

.waitlist {
  position: relative;
  overflow: hidden;
}

.waitlist__inner {
  position: relative;
  padding-top: calc(19.8 * var(--mu));
  padding-bottom: calc(22.5 * var(--mu));
}

.waitlist__copy {
  position: relative;
  z-index: 1;
  width: calc(299 * var(--mu));
  padding-left: calc(4 * var(--mu));
}

.waitlist__title {
  font-family: var(--font-display);
  font-size: clamp(48px, calc(62.5 * var(--mu)), 166px);
  font-weight: 300;
  line-height: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
}

.form {
  display: grid;
  gap: calc(8.5 * var(--mu));
  margin-top: calc(13.5 * var(--mu));
}

.form .btn--block {
  height: calc(29.5 * var(--mu));
  margin-top: calc(2.5 * var(--mu));
  font-size: var(--fs-mono-m);
}

.field {
  position: relative;
}

.field__control {
  display: block;
  width: 100%;
  height: max(52px, calc(29.5 * var(--mu)));
  margin: 0;
  padding: max(20px, calc(11.5 * var(--mu))) calc(17.5 * var(--mu)) 0;
  border: 1px solid var(--bone);
  border-radius: 0;
  background: transparent;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
}

.field__control:focus {
  outline: none;
}

.field__control:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
}

select.field__control {
  cursor: pointer;
}

select.field__control option {
  background: var(--bone);
  color: var(--ink);
}

textarea.field__control {
  min-height: max(52px, calc(29.5 * var(--mu)));
  max-height: calc(8 * var(--fs-mono-m));
  padding-bottom: calc(6 * var(--mu));
  resize: none;
  field-sizing: content;
}

.field__label {
  position: absolute;
  top: 0;
  left: calc(17.5 * var(--mu));
  display: flex;
  align-items: center;
  height: max(52px, calc(29.5 * var(--mu)));
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-m);
  letter-spacing: var(--track);
  text-transform: uppercase;
  pointer-events: none;
}

/* Label floats to the top once the field is focused or filled. */
.field:focus-within .field__label,
input.field__control:not(:placeholder-shown) + .field__label,
textarea.field__control:not(:placeholder-shown) + .field__label,
select.field__control:valid + .field__label {
  height: auto;
  top: max(7px, calc(4 * var(--mu)));
  font-size: max(10px, 0.72em);
  opacity: 0.8;
}

.field__control[aria-invalid="true"] {
  border-width: 2px;
}

.field__error {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.form__status {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-s);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.form__status:empty {
  display: none;
}

.waitlist__note {
  margin-top: calc(15.5 * var(--mu));
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-s);
  line-height: 1.2;
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.waitlist__art {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(283.5 * var(--mu));
  pointer-events: none;
}

.waitlist__art img {
  width: auto;
  max-width: none;
  height: 100%;
  object-fit: contain;
}

/* ---------- Footer ---------- */

.site-footer {
  padding-top: calc(10.8 * var(--mu));
  padding-bottom: calc(17 * var(--mu));
}

.footer-word {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  padding-inline: calc(7.24 * var(--mu));
  font-family: var(--font-display);
  font-size: clamp(96px, calc(162.5 * var(--mu)), 600px);
  font-weight: 300;
  line-height: 0.85;
}

.site-footer__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: calc(5.6 * var(--mu));
}

.footer-nav {
  grid-column: 2;
}

.footer-nav ul {
  display: flex;
  align-items: center;
}

.footer-nav li {
  display: flex;
  align-items: center;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: max(var(--tap), calc(22 * var(--mu)));
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.footer-nav a {
  font-size: var(--fs-mono-l);
}

.footer-nav__sep {
  margin-inline: calc(20.5 * var(--mu));
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-l);
}

/* ==========================================================================
   Below 900px: stacked layout
   ========================================================================== */

@media (max-width: 899.98px) {
  :root {
    --edge: 0px;
    --gutter: 16px;
    --fs-body: 16px;
    --fs-mono-xs: 12px;
    --fs-mono-s: 13px;
    --fs-mono-m: 13px;
    --fs-mono-l: 14px;
  }

  body::before,
  body::after {
    display: none;
  }

  /* Header: logo + join waitlist, links behind a toggle */
  .site-header__inner {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "brand toggle actions"
      "list list list";
    align-items: center;
    height: auto;
    min-height: 76px;
    padding-block: 10px;
  }

  .brand {
    grid-area: brand;
    justify-self: start;
    padding-top: 0;
  }

  .brand__logo {
    width: 56px;
    height: 56px;
    margin-block: -14px;
  }

  .brand__word {
    margin-top: 2px;
    font-size: 16px;
  }

  .site-header__actions {
    grid-area: actions;
    height: auto;
    margin-top: 0;
    gap: 8px;
  }

  .site-header__actions .icon-link {
    display: none;
  }

  .site-header__actions .btn {
    height: var(--tap);
    min-width: 0;
    padding-inline: 14px;
  }

  .site-nav {
    display: contents;
  }

  .js .site-nav__toggle {
    grid-area: toggle;
    display: inline-flex;
    margin-right: 8px;
    padding: 0 8px;
    border: 0;
    background: none;
    font-size: var(--fs-mono-xs);
    cursor: pointer;
  }

  .site-nav__list {
    grid-area: list;
    flex-direction: column;
    gap: 0;
    margin-top: 10px;
  }

  .js .site-nav__list {
    display: none;
  }

  .js .site-header.is-open .site-nav__list {
    display: flex;
  }

  .site-nav__list li {
    position: relative;
  }

  .site-nav__list li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--bone);
    -webkit-mask: var(--dash-x) repeat-x;
    mask: var(--dash-x) repeat-x;
  }

  .site-nav__list a {
    width: 100%;
    min-height: 48px;
  }

  .site-nav__x {
    display: block;
  }

  /* Hero */
  .hero__inner {
    display: flex;
    flex-direction: column;
    padding-top: 28px;
    padding-bottom: 0;
  }

  .hero__title {
    font-size: calc((100vw - 2 * var(--gutter)) / 3.8);
  }

  .hero__sub {
    margin-top: 16px;
  }

  .hero__ctas {
    gap: 12px;
    margin-top: 20px;
  }

  .hero__ctas .btn {
    flex: 1 1 200px;
    min-width: 0;
    height: 52px;
  }

  .terminal {
    padding: 10px 14px 14px 12px;
  }

  .terminal__dots {
    gap: 6px;
    margin-bottom: 12px;
  }

  .terminal__line {
    padding-left: 1.4em;
    text-indent: -1.4em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .terminal--hero {
    width: auto;
    min-width: 0;
    margin-top: 20px;
  }

  .terminal--hero .terminal__line {
    padding-left: 2.6em;
    text-indent: -2.6em;
  }

  .hero__art {
    position: static;
    margin: 28px calc(var(--gutter) * -1) 0;
  }

  .hero__art img {
    height: auto;
  }

  /* Oath in action: terminal moves below the image */
  .oath {
    padding: 28px var(--gutter) 24px;
  }

  .oath__title {
    font-size: clamp(22px, 6.4vw, 34px);
  }

  .oath__stage {
    margin-top: 18px;
  }

  .oath__img {
    aspect-ratio: 3 / 2;
  }

  .terminal--oath {
    position: static;
    transform: none;
    margin-top: 12px;
  }

  /* How it works */
  .how .container {
    padding-top: 28px;
    padding-bottom: 32px;
  }

  .how__title {
    font-size: calc((100vw - 2 * var(--gutter)) / 3.7);
  }

  .steps {
    grid-template-columns: 1fr;
    row-gap: 57px;
    margin-top: 20px;
  }

  .step + .step::before {
    top: -28px;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    -webkit-mask: var(--dash-x) repeat-x;
    mask: var(--dash-x) repeat-x;
  }

  .step__label {
    margin-top: 14px;
  }

  .step__title {
    margin-top: 10px;
    font-size: clamp(30px, 9.5vw, 56px);
    white-space: normal;
  }

  .step__body {
    margin-top: 10px;
  }

  /* FAQ */
  .faq__inner {
    grid-template-columns: 1fr;
    padding-top: 28px;
    padding-bottom: 20px;
  }

  .faq__title {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: clamp(96px, 36vw, 200px);
  }

  .faq__item summary {
    padding-block: 12px;
    padding-right: 4px;
  }

  .faq__answer {
    padding-bottom: 16px;
  }

  /* Waitlist */
  .waitlist__inner {
    display: flex;
    flex-direction: column;
    padding-top: 32px;
    padding-bottom: 0;
  }

  .waitlist__copy {
    width: auto;
    padding-left: 0;
  }

  .waitlist__title {
    font-size: calc((100vw - 2 * var(--gutter)) / 4.65);
  }

  .form {
    gap: 10px;
    margin-top: 20px;
  }

  .form .btn--block {
    height: 52px;
    margin-top: 4px;
  }

  .field__control,
  .field__label,
  textarea.field__control {
    min-height: 0;
    height: 56px;
  }

  textarea.field__control {
    height: auto;
    min-height: 56px;
  }

  .field__control {
    padding: 22px 16px 0;
  }

  textarea.field__control {
    padding-bottom: 10px;
  }

  .field__label {
    left: 16px;
  }

  .field:focus-within .field__label,
  input.field__control:not(:placeholder-shown) + .field__label,
  textarea.field__control:not(:placeholder-shown) + .field__label,
  select.field__control:valid + .field__label {
    top: 8px;
  }

  .waitlist__note {
    margin-top: 16px;
  }

  .waitlist__art {
    position: static;
    margin: 28px calc(var(--gutter) * -1) 0;
  }

  .waitlist__art img {
    width: 100%;
    height: auto;
  }

  /* Footer */
  .site-footer {
    padding-top: 12px;
    padding-bottom: 20px;
  }

  .site-footer__bar {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 4px;
    margin-top: 8px;
  }

  .footer-nav {
    grid-column: auto;
  }

  .footer-nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  .footer-nav__sep {
    margin-inline: 10px;
  }
}