/* ---- tokens ---- */

:root {
  --bg: #ffffff;
  --ink: #0a0a0b;
  --dim: #63636a;
  --rule: #e7e7ea;
  --accent: #e10600;

  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  --out: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ---- reset ---- */

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

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

body {
  margin: 0;
  min-block-size: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--s8) var(--s5);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, p, dl, dd, ol, table { margin: 0; }
ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

/* ---- stage ---- */

.stage {
  inline-size: 100%;
  max-inline-size: 62rem;
  text-align: center;
}

.mark {
  position: fixed;
  inset-block-start: var(--s5);
  inset-inline-start: var(--s5);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-decoration: none;
}

.head {
  font-size: clamp(1.75rem, 4.6vw, 3rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin-block-end: clamp(var(--s7), 7vw, var(--s8));
}

.tail {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--dim);
  margin-block-start: var(--s5);
}

/* ---- flow ---- */

.flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  border-block: 1px solid var(--rule);
}

.flow__item {
  position: relative;
  display: grid;
}

.flow__item + .flow__item::before {
  content: "\2192" / "";
  position: absolute;
  inset-inline-start: calc(var(--s5) / -2);
  inset-block-start: 50%;
  translate: -50% -50%;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--dim);
}

.step {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--s3);
  inline-size: 100%;
  padding: var(--s6) var(--s3);
  text-align: center;
  cursor: pointer;
  transition: scale 150ms var(--out);
}

.step:active { scale: 0.985; }

.step__n {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  transition: color 200ms ease;
}

.step__label {
  position: relative;
  max-inline-size: 16ch;
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
  /* two lines regardless of label length, so the expand marks stay on one line */
  min-block-size: calc(0.9375rem * 1.3 * 2);
}

.step__label::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -6px;
  block-size: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: 0 50%;
  transition: scale 240ms var(--out);
}

/* expand affordance: a plus that rotates into a close mark */
.step__plus {
  position: relative;
  inline-size: 9px;
  block-size: 9px;
  transition: rotate 280ms var(--out);
}

.step__plus::before,
.step__plus::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  background: var(--dim);
  transition: background 200ms ease;
}

.step__plus::before { inline-size: 9px; block-size: 1px; }
.step__plus::after  { inline-size: 1px; block-size: 9px; }

@media (hover: hover) and (pointer: fine) {
  .step:hover .step__label::after { scale: 1 1; }
  .step:hover .step__plus::before,
  .step:hover .step__plus::after { background: var(--ink); }
}

.step[aria-expanded="true"] .step__n { color: var(--accent); }
.step[aria-expanded="true"] .step__label { color: var(--accent); }
.step[aria-expanded="true"] .step__label::after { scale: 1 1; }
.step[aria-expanded="true"] .step__plus { rotate: 45deg; }
.step[aria-expanded="true"] .step__plus::before,
.step[aria-expanded="true"] .step__plus::after { background: var(--accent); }

.step:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.mark:focus-visible,
.contact__link:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 5px;
}

/* ---- detail panels ---- */

.detail {
  display: grid;
  justify-items: center;
  align-content: start;
  margin-block-start: var(--s5);
}

.panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--out);
}

.panel[data-open] { grid-template-rows: 1fr; }

.panel__in {
  min-block-size: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  translate: 0 -4px;
  transition:
    opacity 180ms ease,
    translate 300ms var(--out),
    visibility 0s 300ms;
}

.panel[data-open] .panel__in {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition:
    opacity 240ms 60ms var(--out),
    translate 320ms var(--out),
    visibility 0s;
}

/* one shared column width so content does not jump sideways between panels */
.panel__in > * {
  inline-size: 24rem;
  max-inline-size: 100%;
}

.spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2) var(--s5);
  padding-block-start: var(--s5);
  text-align: start;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
}

.spec dt { color: var(--dim); }

.queue {
  margin-block-start: var(--s5);
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.queue caption {
  caption-side: top;
  padding-block-end: var(--s3);
  text-align: start;
  font-size: 0.6875rem;
  color: var(--dim);
}

.queue th,
.queue td {
  padding: var(--s2) 0;
  text-align: start;
  font-weight: 400;
  border-block-end: 1px solid var(--rule);
}

/* numbers right-align against the column edge */
.queue th:not(:first-child),
.queue td:not(:first-child) { text-align: end; }

.queue thead th {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--dim);
}

.queue tbody th { letter-spacing: 0.08em; }
.queue tbody td:first-of-type { color: var(--dim); }

.queue tbody tr:last-child th,
.queue tbody tr:last-child td { border-block-end: 0; }

.fast { color: var(--accent); }

/* ---- contact ---- */

.contact {
  display: grid;
  justify-items: center;
  margin-block-start: clamp(var(--s6), 5vw, var(--s7));
}

/* the mono body scale the tail, spec lists and queue table all use */
.contact__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--ink);
  transition: color 200ms ease;
}

/* dim label, ink value, middot between: the spec lists' own dt/dd split */
.contact__cue {
  color: var(--dim);
  transition: color 200ms ease;
}

.contact__cue::after {
  content: "\00b7";
  margin-inline-start: var(--s3);
}

/* same wipe-in rule the step labels use, so the page has one hover language */
.contact__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -6px;
  block-size: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: 0 50%;
  transition: scale 240ms var(--out);
}

@media (hover: hover) and (pointer: fine) {
  .contact__link:hover { color: var(--accent); }
  .contact__link:hover .contact__cue { color: var(--accent); }
  .contact__link:hover::after { scale: 1 1; }
}

/* reserve the tallest panel's height so opening one never shifts the page */
@media (min-width: 46rem) {
  .detail { min-block-size: 13.5rem; }
}

/* ---- narrow: stack the flow vertically ---- */

@media (max-width: 46rem) {
  body { padding: var(--s8) var(--s5) var(--s7); }

  .flow {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .flow__item + .flow__item { border-block-start: 1px solid var(--rule); }

  .flow__item + .flow__item::before {
    content: "\2193" / "";
    inset-inline-start: 50%;
    inset-block-start: 0;
    padding-inline: var(--s2);
    background: var(--bg);
  }

  .step {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-items: start;
    gap: var(--s4);
    padding: var(--s5) 0;
    text-align: start;
  }

  /* rows are single-line here, so the two-line reservation is dead height */
  .step__label {
    max-inline-size: none;
    min-block-size: 0;
  }

  .spec {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .spec dd { margin-block-end: var(--s3); }

  /* the tel link is the whole point on a phone, so buy it a real tap target.
     height only: a display change here would break the row onto two lines. */
  .contact__link {
    min-block-size: 44px;
    padding-inline: var(--s3);
  }

  /* touch never fires hover, and the rule would hang off the padded box */
  .contact__link::after { display: none; }

}

/* ---- motion preference ---- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}