/*
  orkhon.ai/breaker: the Breaker product page. Loaded after site.css, on this page only.
  Kit tokens plus three product colours from Breaker's CMF table (breaker repo, v1/DESIGN.md §6):
  Breaker White #ECE9E3, Graphite #2B2D30 and Signal Orange #F05A1A. Orange marks one thing, as on the device:
  the part you act on. No gradients, glow or shadows. Square corners.
*/

.breaker-page {
  --bw: #ECE9E3;
  --graphite: #2B2D30;
  --signal: #F05A1A;
}

.breaker-page main p {
  text-wrap: pretty;
}

/* Small parts */

.b-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 26px;
  border: 0;
  border-radius: 0;
  background-color: var(--signal);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    transform 160ms var(--ease-out);
}

.b-button:active {
  transform: scale(0.97);
}

.b-button:disabled {
  cursor: progress;
}

@media (hover: hover) and (pointer: fine) {
  .b-button:hover {
    background-color: var(--ink);
    color: var(--limestone);
  }

  .surface-ink .b-button:hover {
    background-color: var(--limestone);
    color: var(--ink);
  }
}

/* A source link sits right after the claim it backs. */
.src {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-decoration-color: currentColor;
  text-transform: uppercase;
}

.surface-ink .src {
  color: var(--limestone);
}

/* A plate holds one render, whole. The render's own studio light stays inside it. */
.plate {
  margin: 0;
}

.plate img {
  width: 100%;
  background-color: var(--stone);
}

.plate__cap {
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--lichen);
}

.surface-ink .plate__cap {
  color: var(--stone);
}

.b-split {
  display: grid;
  gap: var(--space-lg);
}

.b-split__head {
  display: grid;
  gap: var(--space-md);
  align-content: start;
  max-width: 40rem;
}

@media (min-width: 1024px) {
  .b-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .b-split > .b-split__head {
    grid-column: 1 / span 5;
    position: sticky;
    top: calc(var(--header-h) + var(--space-lg));
  }

  .b-split > :not(.b-split__head) {
    grid-column: 7 / span 6;
  }
}

/* Hero: the product, wide, in its own studio light. On desktop the name and the claim flank it, in the empty
   studio space either side (the product spans 36 to 64 % of the frame's width). */

.b-hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.b-hero__plate {
  margin: 0;
  background-color: #A7A39D;
}

.b-hero__plate img {
  display: block;
  width: 100%;
  height: auto;
}

.b-hero__cap {
  padding: 12px var(--margin, 24px) 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--lichen);
  background-color: var(--limestone);
}

.b-hero__over {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--margin, 24px) 0;
}

.b-hero__name {
  font-size: clamp(4.5rem, 1rem + 11vw, 7rem);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.05em;
}

.b-hero__by {
  margin-top: 0.35em;
  font-size: clamp(1.25rem, 0.9rem + 1.1vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--lichen);
}

.b-hero__claim {
  max-width: 12em;
  margin-top: var(--space-xs);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.b-hero__below {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-lg) var(--space-xl);
}

.b-hero__below .lead {
  max-width: 34rem;
}

.b-hero__act {
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
  margin-top: var(--space-md);
}

/* The ARMED face straight on, at a whole-number scale so every panel pixel stays square. */
.b-hero__face {
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
  margin: 0;
}

.b-hero__face .eink {
  width: 256px;
}

.b-hero__face figcaption {
  max-width: 280px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--lichen);
}

/* Two lines at every width, so no separator is ever left at a line edge. */
.b-hero__terms span {
  display: block;
}

.b-hero__terms {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* Phones and tablets: name and claim first, then the square crop of the same frame. */
@media (max-width: 1023px) {
  .b-hero__over { order: 1; padding-bottom: var(--space-lg); }
  .b-hero__plate { order: 2; }
}

@media (min-width: 1024px) {
  .b-hero__plate,
  .b-hero__over {
    grid-area: 1 / 1;
  }

  .b-hero__plate {
    align-self: start;
  }

  .b-hero__over {
    position: relative;
    grid-template-columns: 34fr 32fr 34fr;
    grid-template-rows: auto 1fr;
    align-items: center;
    aspect-ratio: 2400 / 1350;
    padding: var(--space-md) var(--margin, 72px) var(--space-lg);
  }

  .b-hero__over .stage {
    grid-column: 1 / -1;
    align-self: start;
  }

  .b-hero__title {
    grid-column: 1;
  }

  .b-hero__name {
    font-size: 7.4vw;
  }

  .b-hero__by {
    font-size: 1.6vw;
    color: var(--ink);
  }

  .b-hero__claim {
    max-width: 10em;
    margin-top: var(--space-md);
    font-size: 2.4vw;
  }

  .b-hero__below {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: end;
  }

  .b-hero__below .lead {
    grid-column: 1 / span 6;
  }

  .b-hero__below {
    align-items: start;
  }

  .b-hero__face {
    grid-column: 8 / span 5;
    justify-self: center;
  }
}

/* The stage label: what exists today, said before anything else. */
.stage {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  margin-bottom: var(--space-md);
  padding: 8px 12px;
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.stage__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--signal);
}

.stage--ink {
  margin: var(--space-sm) 0 0;
  border-color: var(--lichen);
  color: var(--limestone);
}

@media (min-width: 1024px) {
  .b-hero__top {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    padding-block: var(--space-xl);
  }

  .b-hero__title {
    grid-column: 1 / span 6;
  }

  .b-hero__text {
    grid-column: 8 / span 5;
  }
}

/* Statement: one sentence, a screen to itself. */

.statement {
  display: flex;
  align-items: center;
  min-height: 72vh;
  padding-block: var(--section);
}

.statement__line {
  max-width: 14em;
  font-size: clamp(2.5rem, 1rem + 5.4vw, 5.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.statement__sub {
  max-width: 30em;
  margin-top: var(--space-lg);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--lichen);
  text-wrap: balance;
}

/* Hold and show: the HELD face at 3x, whole pixels, beside the sentence. */

.hold__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.hold__text {
  display: grid;
  gap: var(--space-md);
  max-width: 36rem;
}

.hold__title {
  max-width: 11em;
  margin-bottom: var(--space-sm);
  font-size: clamp(2.5rem, 1rem + 4.2vw, 4.75rem);
}

.hold .body-lg {
  color: var(--stone);
}

.hold__face {
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
  margin: 0;
}

.hold__bezel {
  display: grid;
  gap: 18px;
  justify-items: center;
  padding: 24px 24px 20px;
  background-color: var(--graphite);
}

.hold__bezel .eink {
  width: 256px;
  border: 0;
}

.hold__confirm {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

.hold__ring {
  width: 22px;
  height: 22px;
  border: 3px solid #3FAE5A;
  border-radius: 50%;
}

.hold__face figcaption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--stone);
  text-align: center;
}

@media (min-width: 1024px) {
  .hold__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .hold__text {
    grid-column: 1 / span 6;
  }

  .hold__face {
    grid-column: 8 / span 5;
  }

  .hold__bezel .eink {
    width: 256px;
  }

  /* The face, its CONFIRM line and the footnote fit one 900 px tall screen below the header. */
  .hold {
    padding-block: var(--space-xl);
  }
}

/* Waitlist steps */

.steps {
  display: grid;
  gap: 12px;
  margin-top: var(--space-sm);
}

.steps li {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 12px;
  align-items: baseline;
}

.steps__n {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

/* The problem: dated cases, each with its source */

.b-problem {
  border-bottom: 1px solid var(--stone);
}

.cases {
  border-top: 1px solid var(--ink);
}

.case {
  display: grid;
  gap: 10px;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--stone);
}

.case__when {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lichen);
}

.case__what {
  max-width: 36em;
  font-size: 1.125rem;
  line-height: 1.5;
}

.case .src {
  justify-self: start;
}

/* The case that names the problem: the person who had to run to the computer. */
.case--lead .case__what {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.b-turn {
  max-width: 34em;
  margin-top: var(--space-xl);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

@media (min-width: 1024px) {
  .b-turn {
    margin-left: calc((100% + var(--gutter)) / 12 * 6);
  }
}

/* The handle scene. Without the script, and under reduced motion, both frames stand side by side. */

.throw {
  background-color: var(--ink);
  color: var(--limestone);
}

.throw__stage {
  padding-block: var(--section);
}

.throw__grid {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

.throw__text {
  display: grid;
  gap: var(--space-md);
  max-width: 34rem;
}

.throw__title {
  font-size: clamp(3.25rem, 1.5rem + 5.5vw, 6rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.throw .body-lg {
  color: var(--stone);
}

.throw__state {
  display: none;
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.throw__frames {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gutter);
}

.throw__frame {
  width: 100%;
  background-color: var(--lichen);
}

.throw .plate__cap {
  color: var(--stone);
}

.throw.is-live .throw__frames {
  grid-template-columns: minmax(0, 1fr);
}

.throw.is-live .throw__frame {
  grid-area: 1 / 1;
}

.throw.is-live .throw__frame--off {
  opacity: var(--off, 0);
}

.throw.is-live .throw__state {
  display: block;
}

.throw__on,
.throw__off {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.throw__on::before,
.throw__off::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: var(--signal);
}

.throw__off,
.throw.is-off .throw__on {
  display: none;
}

.throw.is-off .throw__off {
  display: inline-flex;
}

.throw.is-off .throw__off::before {
  background-color: transparent;
  border: 1.5px solid var(--signal);
}

@media (min-width: 1024px) {
  .throw__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .throw__text {
    grid-column: 1 / span 5;
  }

  .throw__plate {
    grid-column: 6 / span 7;
  }

  .throw.is-live .throw__plate {
    grid-column: 7 / span 6;
  }

  /* Sticky stage: the picture holds still while the handle throws. */
  .throw.is-live .throw__track {
    height: 240vh;
  }

  .throw.is-live .throw__stage {
    position: sticky;
    top: var(--header-h);
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--header-h));
    padding-block: var(--space-lg);
  }

  .throw.is-live .throw__frames {
    max-width: calc((100vh - var(--header-h) - 120px) * 1400 / 1407);
    margin-inline: auto;
  }
}

/* Five jobs */

.jobs__head {
  display: grid;
  gap: var(--space-md);
  max-width: 42rem;
}

.jobs__grid {
  display: grid;
  gap: var(--space-lg);
}

.jobs__list {
  border-top: 1px solid var(--ink);
}

.job {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--stone);
}

.job > p:not(.job__line) {
  max-width: 34em;
}

.job__name {
  font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
}

.job__line {
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--lichen);
}

.job__face {
  display: grid;
  gap: 10px;
  justify-items: start;
  margin-top: var(--space-xs);
}

.job__face figcaption,
.device__note {
  max-width: 30em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--lichen);
}

/* The e-paper faces are 1-bit drawings at the panel's 128 x 296 px. They scale by whole pixels. */
.eink {
  width: 192px;
  height: auto;
  image-rendering: pixelated;
  border: 12px solid var(--graphite);
  background-color: var(--white);
}

.receipt {
  display: grid;
  gap: 8px;
  padding: 18px;
  background-color: var(--white);
  border: 12px solid var(--graphite);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.receipt__row {
  display: flex;
  flex-wrap: wrap;
  column-gap: 14px;
}

.receipt__row span:first-child {
  min-width: 5.5em;
  color: var(--lichen);
}

.jobs__device {
  display: none;
}

@media (min-width: 1024px) {
  .jobs__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .jobs__head,
  .jobs__list {
    grid-column: 1 / span 7;
  }

  .jobs__grid {
    row-gap: var(--space-lg);
  }

  .jobs.is-live .job {
    min-height: 70vh;
    align-content: center;
  }

  .jobs.is-live .job__face {
    display: none;
  }

  .jobs.is-live .jobs__device {
    display: block;
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
  }

  .device {
    position: sticky;
    top: calc(var(--header-h) + var(--space-md));
    display: grid;
    gap: var(--space-sm);
    justify-items: center;
  }

  .device__screen {
    display: grid;
    padding: 18px;
    background-color: var(--graphite);
  }

  .device__screen > * {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 220ms var(--ease-out);
  }

  .device__screen > .is-on {
    opacity: 1;
  }

  .device .eink {
    width: auto;
    /* 2x the panel when the screen has room (whole pixels), smaller only on short screens. */
    height: min(592px, calc(100vh - var(--header-h) - 150px));
    border: 0;
  }

  .device .receipt {
    align-content: start;
    border: 0;
  }

  .device__note {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .device__screen > * {
    transition: none;
  }
}

/* On the wire */

.wire__head {
  margin-bottom: var(--space-lg);
}

.path {
  margin: 0 0 var(--space-xl);
}

.path__row {
  display: grid;
  justify-items: stretch;
}

.path__node {
  display: grid;
  gap: 4px;
  padding: 20px 22px;
  border: 1px solid var(--ink);
  background-color: var(--white);
}

.path__k {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}

.path__v {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--lichen);
}

.path__node--breaker {
  border-color: var(--ink);
  background-color: var(--ink);
  color: var(--limestone);
}

.path__node--breaker .path__k {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.path__node--breaker .path__k::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: var(--signal);
}

.path__node--breaker .path__v {
  color: var(--stone);
}

.path__wire {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-left: 34px;
}

.path__wire::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--ink);
}

.path__port {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--lichen);
}

.path__port {
  color: var(--ink);
}

.path__inside {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  border-top: 1px solid var(--ink);
  padding-top: var(--space-md);
}

.path__inside dt {
  font-weight: 600;
}

.path__inside dd {
  margin-top: 4px;
  color: var(--lichen);
}

@media (min-width: 900px) {
  .path__row {
    grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1.1fr) 96px minmax(0, 1fr);
    align-items: stretch;
  }

  .path__wire {
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    padding: 0;
  }

  .path__wire::before {
    left: 0;
    right: 0;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .path__port {
    position: relative;
    top: calc(50% - 26px);
  }

  .path__inside {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
}

/* The trust boundary */

.rooms {
  display: grid;
  margin: var(--space-lg) 0;
}

.room {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding: 24px;
  border: 1px solid var(--lichen);
}

.room__k {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}

.room__v {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
}

.room__can {
  color: var(--stone);
}

.room--supervisor {
  border-color: var(--signal);
}

.rooms__line {
  display: flex;
  align-items: center;
  min-height: 72px;
  padding-left: 22px;
  border-left: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--stone);
  position: relative;
}

.rooms__line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed var(--signal);
}

.rooms__line span {
  position: relative;
  padding-right: 12px;
  background-color: var(--ink);
}

.facts {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.facts li {
  display: grid;
  gap: 6px;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--lichen);
}

.facts__k {
  font-weight: 600;
}

.facts li p:not(.facts__k) {
  color: var(--stone);
}

@media (min-width: 900px) {
  .rooms {
    grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr);
  }

  .rooms__line {
    justify-content: center;
    padding: 0;
    min-height: 0;
    text-align: center;
  }

  .rooms__line::before {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    border-top: 0;
    border-left: 2px dashed var(--signal);
  }

  .rooms__line span {
    max-width: 168px;
    padding: 12px 0;
    line-height: 1.5;
  }

  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
}

/* Violoop, side by side */

.vs__head {
  margin-bottom: var(--space-lg);
}

.vs__quote {
  margin: 0 0 var(--space-lg);
  padding-left: var(--space-md);
  border-left: 4px solid var(--signal);
}

.vs__quote blockquote p {
  max-width: 26em;
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.vs__quote figcaption {
  margin-top: var(--space-sm);
  color: var(--lichen);
}

.vs__proof {
  max-width: 40em;
  margin-bottom: var(--space-xl);
  font-size: 1.125rem;
}

.vs__table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--ink);
}

.vs__table thead th {
  padding: 16px 16px 16px 0;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: left;
}

.vs__table thead th:last-child::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  margin-left: -20px;
  background-color: var(--signal);
}

.vs__table tbody th,
.vs__table tbody td {
  padding: 16px 16px 16px 0;
  border-top: 1px solid var(--stone);
  text-align: left;
  vertical-align: top;
}

.vs__table tbody th {
  width: 24%;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--lichen);
}

/* Both answers in full ink: the comparison is fair, Breaker only gets the weight. */

.vs__table tbody td:last-child {
  font-weight: 500;
}

.vs__note {
  max-width: 40em;
  margin-top: var(--space-lg);
  font-size: 1.125rem;
}

/* Phones: each row becomes a small block, the two answers labelled. */
@media (max-width: 767px) {
  .vs__table thead {
    display: none;
  }

  .vs__table,
  .vs__table tbody,
  .vs__table tr,
  .vs__table tbody th,
  .vs__table tbody td {
    display: block;
    width: auto;
  }

  .vs__table tr {
    padding-block: var(--space-sm);
    border-top: 1px solid var(--stone);
  }

  .vs__table tbody th,
  .vs__table tbody td {
    padding: 4px 0;
    border-top: 0;
  }

  .vs__table tbody td::before {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lichen);
  }

  .vs__table tbody td:nth-child(2)::before {
    content: "Violoop";
  }

  .vs__table tbody td:last-child::before {
    content: "Breaker";
  }
}

/* Limits */

.limits__list {
  border-top: 1px solid var(--ink);
}

.limits__list li {
  display: grid;
  gap: 6px;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--stone);
}

.limits__k {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.limits__list li p:not(.limits__k) {
  max-width: 36em;
  color: var(--lichen);
}

/* Where it stands */

.status-band .b-split__head {
  margin-bottom: var(--space-lg);
}

.builds {
  display: grid;
  gap: var(--space-lg);
}

.build {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  margin: 0;
}

.build figcaption {
  display: grid;
  gap: var(--space-xs);
  max-width: 36em;
}

.build__name {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
}

.status__record {
  max-width: 44rem;
  margin-top: var(--space-xl);
}

@media (min-width: 1024px) {
  .builds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
}

/* Price */

.price .b-split__head {
  margin-bottom: var(--space-lg);
}

.tiers {
  display: grid;
  gap: var(--gutter);
}

.tier {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: 28px 24px;
  border-top: 4px solid var(--stone);
  background-color: var(--paper);
}

.tier--lead {
  border-top-color: var(--signal);
  background-color: var(--white);
}

.tier__act {
  justify-self: start;
  margin-top: var(--space-xs);
}

.tier__tag {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lichen);
}

.tier__name {
  font-weight: 600;
}

.tier__price {
  font-size: clamp(3rem, 2rem + 3vw, 4.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.tier__per {
  font-size: 0.3em;
  letter-spacing: 0;
  color: var(--lichen);
}

.tier__what {
  max-width: 24em;
  color: var(--lichen);
}

.price__note {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--ink);
}

@media (min-width: 768px) {
  .tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tier {
    padding: 36px 32px;
    min-height: 280px;
  }
}

/* FAQ */

.faq__list {
  border-top: 1px solid var(--ink);
}

.qa {
  border-bottom: 1px solid var(--stone);
}

.qa summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 16px 48px 16px 0;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

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

.qa summary::before,
.qa summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 16px;
  height: 1.5px;
  background-color: var(--ink);
  transition: transform 200ms var(--ease-out);
}

.qa summary::after {
  transform: rotate(90deg);
}

.qa[open] summary::after {
  transform: rotate(0deg);
}

.qa p {
  max-width: 36em;
  padding-bottom: var(--space-md);
  color: var(--lichen);
}

@media (hover: hover) and (pointer: fine) {
  .qa summary:hover {
    color: var(--kok);
  }
}

/* Waitlist */

.wl {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.wl__field {
  display: grid;
  gap: 10px;
}

.wl__label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}

.wl__row {
  display: grid;
  gap: var(--space-sm);
}

.wl__input {
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid var(--stone);
  border-radius: 0;
  background-color: var(--ink);
  color: var(--limestone);
  font: inherit;
  font-size: 1.25rem;
  caret-color: var(--signal);
}

.wl__input:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.wl__input[aria-invalid="true"] {
  border-color: var(--signal);
}

.wl__err {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1rem;
  color: var(--limestone);
}

.wl__err[hidden] {
  display: none;
}

.wl__err::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background-color: var(--signal);
}

.wl__status {
  min-height: 1.5em;
  font-size: 1.125rem;
  font-weight: 500;
}

.wl__privacy {
  max-width: 34em;
  font-size: 0.9375rem;
  color: var(--stone);
}

.wl__privacy a {
  color: var(--limestone);
  text-decoration-color: currentColor;
}

/* Failed: the field stays, the message gets a hollow marker so it never reads as the sent state. */
.wl.is-failed .wl__status {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--signal);
}

.wl.is-failed .wl__status::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--signal);
  transform: translateY(1px);
}

.wl.is-sent .wl__field {
  display: none;
}

.wl.is-sent .wl__status {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  outline: none;
}

.wl.is-sent .wl__status::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: var(--signal);
}

.wl__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.waitlist .b-button:focus-visible {
  outline-color: var(--limestone);
}

@media (min-width: 560px) {
  .wl__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
  }

  /* The error goes under the field, across the row. */
  .wl__err {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 12px;
  }

  .wl__input {
    border-right: 0;
  }

  .wl__button {
    min-height: 56px;
  }
}

/* Anchors and scrollIntoView: no section or heading comes to rest under the sticky header. The offset sits on the
   targets, so the page-wide scroll-padding is set to 0 here to avoid counting the header twice. */
html {
  scroll-padding-top: 0;
}

main [id] {
  scroll-margin-top: calc(var(--header-h) + var(--space-md));
}

/* Launch film: shown only once the film file exists (the section carries [hidden] until then). */
.film[hidden] {
  display: none;
}

.film__title {
  margin-bottom: var(--space-md);
}

.film__frame {
  margin: 0;
}

.film__frame video {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--graphite);
}

.film__cap {
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--lichen);
}