/* BlueSec SOC Agent Challenge landing. Every measurement comes from the
   design handoff: the 1440px desktop frame and the 360px phone frame. Type
   sizes were fitted to the frames' glyph extents, so they are deliberate. */

:root {
  --bg: #000000;
  --fg: #ffffff;
  --acc: #4ac6cc;
  --acc-deep: #1689b9;
  --acc-ink: #00191c;
  --red: #e70138;
  --alert: #ff4468;
  --dim: rgba(255, 255, 255, 0.8);
  --muted: #949494;
  /* Every rule on the page is one teal hairline; the inner rules are softer. */
  --line: #4ac6cc;
  --line-soft: rgba(74, 198, 204, 0.4);
  --header-bg: rgba(0, 0, 0, 0.9);
  --veil: rgba(0, 0, 0, 0.62);
  --gutter: 40px;
  /* The grid lines sit at the frame edges; copy is inset from them. */
  --inset: 32px;
  --frame: min(1560px, 100% - var(--gutter) * 2);
  --sans: "TT Positive", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Section headings; the phone frame sets them at 36px. */
  --title: clamp(36px, 4.445vw, 64px);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--acc);
  text-decoration: none;
}

a:hover {
  color: var(--fg);
}

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

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

::selection {
  background: var(--acc);
  color: var(--acc-ink);
}

/* Background stack: canvas, vignette, attack scrim, tear bar. Only the hero is
   transparent, so the scene and its glitches play behind the first screen. */

.scene,
.veil,
.scrim,
.tear {
  position: fixed;
  pointer-events: none;
}

.scene {
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.veil {
  inset: 0;
  z-index: 1;
  background: radial-gradient(85% 65% at 68% 45%, transparent 0%, var(--veil) 70%, var(--bg) 100%);
}

.scrim {
  inset: 0;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(
    80% 60% at 50% 50%,
    rgba(238, 10, 78, 0.28),
    rgba(120, 0, 25, 0.55) 60%,
    rgba(40, 0, 10, 0.8)
  );
}

.tear {
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  z-index: 3;
  opacity: 0;
  background: var(--red);
  mix-blend-mode: screen;
}

/* The through-lines of the frame, pinned to its edges. */
.grid-lines {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--frame);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  z-index: 31;
  pointer-events: none;
}

.page {
  position: relative;
  z-index: 4;
}

.wrap {
  width: var(--frame);
  margin: 0 auto;
  padding: 0 var(--inset);
}

/* ---------------------------------------------------------------- header */

.topbar {
  position: sticky;
  top: 0;
  /* Above the ticker plate (32): the header is the last thing anything covers. */
  z-index: 34;
  padding: 21px 0 14px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* False Positive community lockup: mark plus a two-line wordmark. */
.brand__fp {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--fg);
}

.brand__fp:hover {
  color: var(--fg);
  opacity: 0.75;
}

/* The logo exported from the mockup, the same file the platform shows: its
   lettering is drawn, so it looks the same wherever the fonts load or not. */
.brand__fp-logo {
  display: block;
  width: auto;
  height: 42px;
}

.brand__sep {
  width: 1px;
  height: 31px;
  background: var(--line-soft);
}

/* The mockup's file, as on the platform, at the size the mockup draws it. */
.brand__mark {
  display: block;
  height: 35px;
  width: auto;
}

/* The frame sets the header copy on a baseline below the logos' centre. */
.topbar__info,
.lang {
  padding-top: 9px;
}

.topbar__info {
  font-size: 20px;
  line-height: 20px;
  color: var(--fg);
  white-space: nowrap;
}

.lang {
  display: flex;
  align-items: baseline;
  justify-self: end;
  gap: 4px;
  font-size: 20px;
  line-height: 20px;
  color: var(--fg);
}

.lang__btn {
  color: var(--acc);
}

/* Not in the mockup: the one way from the landing to the platform besides the form. */
.topbar__end {
  display: flex;
  align-items: baseline;
  justify-self: end;
  gap: 28px;
}

.platform-links {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-top: 9px;
  font-size: 20px;
  line-height: 20px;
}

.platform-links__link {
  color: var(--fg);
}

.platform-links__link:hover,
.platform-links__link:focus-visible {
  color: var(--acc);
}

.lang__btn.is-active {
  color: var(--fg);
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
}

.hero__body {
  padding-top: 120px;
  padding-bottom: 120px;
}

/* The negative indent puts the ink, not the box, on the content edge. */
.headline {
  margin-left: -0.065em;
  font-size: clamp(40px, 7.5vw, 108px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: 0;
}

.headline__line {
  display: block;
  white-space: nowrap;
}

.headline__line--strong {
  font-weight: 700;
}

/* The prompt is drawn, not typed: the frame's chevron is not a glyph. */
.headline__prompt {
  display: inline-block;
  width: 0.561em;
  height: 0.592em;
  margin: 0 0.445em 0 0.071em;
  vertical-align: -0.035em;
  fill: var(--acc);
}

.hero__details {
  display: grid;
  grid-template-columns: 428px minmax(0, 1fr);
  margin-top: 55px;
}

.lede {
  max-width: 340px;
  margin-top: 6px;
  font-size: 18px;
  line-height: 19px;
}

.venues {
  display: grid;
  gap: 20px;
  margin-top: 1px;
  font-size: 18px;
  line-height: 22px;
}

.venues__row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
}

.venues dt {
  padding-top: 1px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* A document link without an address stays text: the address arrives later,
   through LINKS in app.js, and the words must read the same either way. */
.doc-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a.doc-link[href]:hover {
  color: var(--acc);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 54px;
}

/* 408 by 68 including the border: the same width as a form column. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
  width: 408px;
  max-width: 100%;
  height: 68px;
  padding: 0 24px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary {
  border-color: var(--acc);
  background: rgba(74, 198, 204, 0.2);
  color: var(--acc);
}

.btn--primary:hover {
  background: var(--acc);
  color: var(--acc-ink);
}

.btn--ghost {
  border-color: var(--muted);
  color: var(--fg);
}

.btn--ghost:hover {
  color: var(--acc);
}

/* The log floats in the bottom-right corner: taken out of the flow it cannot
   open a gap above the ticker, and the strip stays put as lines come and go. */
.terminal {
  position: absolute;
  right: calc((100% - var(--frame)) / 2 + var(--inset));
  bottom: 69px;
  max-width: calc(var(--frame) - var(--inset) * 2);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
  pointer-events: none;
}

.terminal__text {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  white-space: pre;
  color: var(--acc);
  opacity: 0.9;
}

.ticker {
  position: relative;
  z-index: 32;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
}

.ticker__track {
  display: flex;
  width: max-content;
  padding: 12px 0 11px;
  font-size: 20px;
  line-height: 20px;
  color: var(--fg);
  animation: fp-marquee 90s linear infinite;
}

.ticker__row {
  display: flex;
}

/* -------------------------------------------------------------- sections */

.section {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.title {
  font-size: var(--title);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: 0;
}

.title > span,
.title > b {
  display: block;
}

.title b,
.feature__title b,
.stage__title b {
  font-weight: 700;
}

/* ------------------------------------------------------------- mechanics */

.mechanics .wrap {
  padding-top: 123px;
  padding-bottom: 87px;
}

.mechanics__stats {
  display: grid;
  grid-template-columns: 440fr 460fr 396fr;
  align-items: start;
  margin-top: 61px;
}

.stat {
  display: flex;
  align-items: flex-start;
  gap: 17px;
}

.stat__value {
  margin-top: 16.5px;
  font-size: clamp(108px, 12.57vw, 181px);
  font-weight: 400;
  line-height: 0.7;
  letter-spacing: 0.02em;
}

.stat__label {
  max-width: 150px;
  margin-top: 48.5px;
  font-size: 18px;
  line-height: 22px;
}

/* The frame sets each caption at its own distance from its number. */
.stat:nth-child(2) .stat__label {
  margin-left: -2.4px;
}

.stat--quoted {
  gap: 0;
  margin-left: 12.6px;
}

.stat__paren {
  flex: none;
  width: 44px;
  height: 167.4px;
  fill: var(--fg);
}

.stat--quoted .stat__label {
  max-width: 250px;
  margin: 48px 0 0 10.5px;
}

/* ------------------------------------------------------------------ task */

.task__inner {
  position: relative;
  padding-top: 122px;
  padding-bottom: 118px;
}

.task__body {
  max-width: 570px;
  margin-top: 60px;
  font-size: 18px;
  line-height: 22px;
}

.task__note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 620px;
  margin-top: 40px;
  font-size: 18px;
  line-height: 22px;
}

.task__note-icon {
  flex: none;
  width: 23px;
  height: 23px;
  margin: 0.5px 0 0 1.5px;
  color: var(--acc);
}

.task__chevrons {
  position: absolute;
  top: 218px;
  right: 0;
  width: 670px;
  height: 280.5px;
}

/* -------------------------------------------------------------- features */

.features {
  padding: 0;
}

.features__grid {
  display: grid;
  grid-template-columns: 440fr 460fr 460fr;
  padding: 0;
}

.feature {
  padding: 121.5px var(--inset) 118px;
  border-left: 1px solid var(--line-soft);
}

.feature:first-child {
  border-left: 0;
}

.feature__icon {
  display: block;
  height: 28.5px;
  width: auto;
  overflow: visible;
  fill: none;
  stroke: var(--acc);
  stroke-width: 3;
}

.feature:first-child .feature__icon {
  margin-left: 3px;
}

.feature:nth-child(2) .feature__icon {
  margin-left: 2px;
}

.feature:nth-child(3) .feature__icon {
  margin: -0.5px 0 0.5px 1px;
}

.feature__icon-dot {
  fill: var(--acc);
  stroke: none;
}

.feature__title {
  margin-top: 23.5px;
  font-size: 28px;
  font-weight: 300;
  line-height: 0.91;
}

.feature__title span,
.feature__title b {
  display: block;
}

.feature__body {
  margin-top: 23.8px;
  font-size: 18px;
  line-height: 22px;
}

/* The frame breaks the last card's copy at a narrower measure. */
.feature:nth-child(3) .feature__body {
  max-width: 360px;
}

/* ---------------------------------------------------------------- stages */

.stages > .wrap {
  padding-top: 119px;
  padding-bottom: 61px;
}

.stages__list {
  width: var(--frame);
  margin: 0 auto;
}

.stage {
  display: grid;
  grid-template-columns: 84px minmax(0, 574px) minmax(0, 1fr);
  padding: 19px var(--inset) 40px;
  border-top: 1px solid var(--line-soft);
}

.stage:last-child {
  padding-bottom: 120px;
}

.stage__num {
  margin-top: -1px;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: -0.04em;
  color: var(--acc);
}

.stage__title {
  font-size: 28px;
  font-weight: 300;
  line-height: 25px;
}

.stage__title span,
.stage__title b {
  display: block;
}

.stage__body {
  display: grid;
  gap: 12px;
  font-size: 18px;
  line-height: 22px;
}

.schedule {
  display: grid;
  gap: 12px;
}

.schedule div {
  display: grid;
  grid-template-columns: 115px minmax(0, 440px);
}

/* ---------------------------------------------------------- registration */

.registration > .wrap {
  position: relative;
  z-index: 1;
  padding-top: 119px;
  padding-bottom: 114px;
}

.registration__fork {
  position: absolute;
  top: 0;
  right: calc((100% - var(--frame)) / 2);
  width: 316px;
  height: 316px;
}

.reg {
  max-width: 848px;
  margin-top: 61.5px;
}

/* One grid for both columns: the left one fills five rows, the right one four.
   A reason that wraps to a second line grows its row in both columns, so the
   two move down together instead of drifting apart. */
.reg__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  gap: 40px 32px;
}

.reg__column {
  display: contents;
}

.reg__grid + .reg__field {
  margin-top: 40px;
}

.reg__field + .reg__field {
  margin-top: 40px;
}

.reg__column .reg__field + .reg__field {
  margin-top: 0;
}

.reg__field {
  position: relative;
  display: block;
}

.reg__field input,
.reg__field select {
  display: block;
  width: 100%;
  height: 43px;
  margin: 0;
  padding: 0 0 23px;
  border: 0;
  border-bottom: 1px solid var(--muted);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 18px;
  font-weight: 300;
  line-height: 19px;
  -webkit-appearance: none;
  appearance: none;
}

.reg__field input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.reg__field input:focus,
.reg__field select:focus {
  outline: none;
  border-bottom-color: var(--acc);
}

/* A select shows its label as the empty choice, in the placeholder colour. */
.reg__field select {
  padding-right: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='7'%3E%3Cpath d='M0 .5l7 6 7-6' fill='none' stroke='%23949494'/%3E%3C/svg%3E")
    right 5.5px / 14px 7px no-repeat;
  cursor: pointer;
}

.reg__field select:has(option[value=""]:checked) {
  color: var(--muted);
}

.reg__field option {
  background: var(--bg);
  color: var(--fg);
}

.reg__hint {
  position: absolute;
  top: 49px;
  left: 0;
  font-size: 14px;
  line-height: 16px;
  color: var(--muted);
}

/* An answer that breaks its rule (assets/registration.js marks it, the same way
   the platform renders the errors its API reports): a red line draws over the
   field's own, and the reason rises into the gap under it, where the nickname
   hint sits - the negative margin gives its height back, so nothing below
   moves. --alert reads brighter than --red on black: small text keeps 4.5:1. */
.reg__field::after {
  content: "";
  position: absolute;
  top: 42px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--alert);
  box-shadow: 0 0 10px color-mix(in srgb, var(--alert) 70%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.reg__field.is-invalid::after {
  transform: scaleX(1);
  animation: reg-signal 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.reg__field.is-invalid .reg__hint {
  display: none;
}

.reg__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 -22px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: var(--alert);
  animation: reg-reason 0.24s ease-out 0.12s both;
}

.reg__consent .reg__error {
  margin: 6px 0 0;
}

.reg__error::before {
  content: "!";
  flex: none;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  line-height: 11px;
  text-align: center;
}

.reg__consent.is-invalid input {
  border-color: var(--alert);
  box-shadow: 0 0 8px color-mix(in srgb, var(--alert) 50%, transparent);
}

/* Focus brings the first wrong field into view clear of the fixed header. */
.reg__field input,
.reg__field select,
.reg__consent input {
  scroll-margin-top: 160px;
}

@keyframes reg-signal {
  from {
    transform: scaleX(0);
  }
}

@keyframes reg-reason {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reg__field.is-invalid::after,
  .reg__error {
    animation: none;
  }
}

.reg__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.reg__submit {
  margin-top: 60px;
}

.reg__consent {
  display: flex;
  align-items: flex-start;
  gap: 12.5px;
  max-width: 612px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: var(--muted);
  cursor: pointer;
}

.reg__submit + .reg__consent {
  margin-top: 40px;
}

.reg__consent input {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0.8px 0 0;
  border: 1px solid var(--muted);
  border-radius: 4px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.reg__consent input:checked {
  border-color: var(--acc);
  background: var(--acc)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Cpath d='M3 6l3.5 3.5L12 4' fill='none' stroke='%23000'/%3E%3C/svg%3E")
    center / 15px 15px no-repeat;
}

.reg__consent input:focus-visible {
  outline: 1px solid var(--acc);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------- faq */

.faq > .wrap {
  position: relative;
  z-index: 1;
  padding-top: 119px;
  padding-bottom: 60.5px;
}

.faq__question {
  position: absolute;
  top: 0;
  right: calc((100% - var(--frame)) / 2);
  width: 244.67px;
  height: 372px;
}

.faq__list {
  position: relative;
  z-index: 1;
  width: var(--frame);
  margin: 0 auto;
  border-top: 1px solid var(--line-soft);
}

/* The questions take two thirds of the frame, cut off by a soft rule. */
.faq__item {
  width: calc(900 / 1360 * 100%);
  border-right: 1px solid var(--line-soft);
  background: var(--bg);
}

.faq__item + .faq__item {
  border-top: 1px solid var(--line-soft);
}

.faq__item summary {
  position: relative;
  display: block;
  padding: 31px 80px 32px var(--inset);
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.02em;
  list-style: none;
  cursor: pointer;
}

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

.faq__item summary::after {
  content: "";
  position: absolute;
  top: 36.5px;
  right: 30.5px;
  width: 23px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='13'%3E%3Cpath d='M1.5 1.5l10 10 10-10' fill='none' stroke='%234AC6CC' stroke-width='3'/%3E%3C/svg%3E")
    center / 23px 13px no-repeat;
}

.faq__item[open] summary::after {
  transform: rotate(180deg);
}

.faq__item p {
  max-width: calc(750px + var(--inset) * 2);
  margin-top: -12px;
  padding: 0 var(--inset) 32px;
  font-size: 18px;
  line-height: 22px;
}

/* ---------------------------------------------------------------- footer */

.footer {
  position: relative;
  background: var(--bg);
}

.footer__inner {
  display: grid;
  /* 492, 512 and 292px on the 1440px frame, shrinking with it. */
  grid-template-columns: 492fr 512fr 292fr;
  padding-top: 55px;
  padding-bottom: 55.6px;
  font-size: 18px;
  line-height: 30.2px;
}

.footer__inner > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer .doc-link {
  color: var(--fg);
}

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

@keyframes fp-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes fp-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.fp-in--1 {
  animation: fp-in 0.9s 0.05s both;
}

.fp-in--2 {
  animation: fp-in 0.9s 0.13s both;
}

.fp-in--3 {
  animation: fp-in 0.9s 0.21s both;
}

.fp-in--4 {
  animation: fp-in 0.9s 0.3s both;
}

/* ------------------------------------------------------------ in between */

/* Between the frames the desktop layout keeps its structure; the widest rows
   stack before they would overflow. */
@media (max-width: 1100px) {
  /* The date no longer fits between the logos and the platform links: it
     drops to its own row, the way the phone frame sets the header. */
  .topbar__inner {
    grid-template-columns: 1fr auto;
    row-gap: 13px;
  }

  .topbar__info {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 0;
    text-align: center;
  }

  .topbar__end {
    grid-row: 1;
    grid-column: 2;
    gap: 16px;
  }

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

  .mechanics__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }

  .stat--quoted {
    grid-column: 1 / -1;
  }

  .stage {
    grid-template-columns: 84px minmax(0, 1fr);
    row-gap: 16px;
  }

  .stage__body {
    grid-column: 2;
  }

  .task__chevrons,
  .registration__fork,
  .faq__question {
    opacity: 0.35;
  }

  .faq__item {
    width: 100%;
    border-right: 0;
  }
}

@media (max-width: 900px) {
  /* No room to move the tunnel aside beside the copy, so it steps back instead. */
  .scene {
    opacity: 0.55;
  }

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

  .feature {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .feature:first-child {
    border-top: 0;
  }

  .reg__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    row-gap: 40px;
  }

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

/* ----------------------------------------------------------------- phone */

@media (max-width: 700px) {
  /* Lines the desktop frame breaks by hand run on in the phone frame. */
  .br-desktop {
    display: none;
  }

  :root {
    --gutter: 12px;
    --inset: 12px;
    --bg: #070808;
  }

  .topbar {
    padding: 16px 0 15.5px;
  }

  /* Three rows: logos and languages, the platform links, the date. */
  .topbar__inner {
    grid-template-columns: 1fr auto;
    row-gap: 13.2px;
    column-gap: 12px;
  }

  .brand {
    gap: 12px;
  }

  .brand__fp {
    gap: 7px;
  }

  .brand__fp-logo {
    height: 23.2px;
  }

  .brand__sep {
    height: 17px;
  }

  .brand__mark {
    height: 19px;
  }

  /* The platform's phone header first — languages beside the logos, the
     platform links under them — then the date centred on a row of its own. */
  .topbar__info {
    grid-column: 1 / -1;
    grid-row: 3;
    padding-top: 0;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
  }

  .topbar__end {
    display: contents;
  }

  .lang {
    grid-row: 1;
    grid-column: 2;
    padding-top: 2px;
    font-size: 16px;
    line-height: 16px;
  }

  .platform-links {
    grid-row: 2;
    grid-column: 1 / -1;
    gap: 16px;
    padding-top: 0;
    font-size: 16px;
    line-height: 16px;
  }


  .hero__body {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .headline {
    margin-left: 0;
    font-size: 40px;
  }

  .headline__prompt {
    display: none;
  }

  .hero__details {
    gap: 24px;
    margin-top: 24px;
  }

  .lede {
    max-width: none;
    margin-top: 0;
    font-size: 14px;
    line-height: 17px;
  }

  .venues {
    gap: 24px;
    font-size: 14px;
    line-height: 17px;
  }

  .venues__row {
    grid-template-columns: 76px minmax(0, 205px);
  }

  .doc-link {
    text-underline-offset: 3px;
  }

  .actions {
    flex-direction: column;
    gap: 24px;
    margin-top: 39px;
  }

  .btn {
    width: 100%;
    height: 66px;
    font-size: 16px;
    letter-spacing: 0;
  }

  .terminal {
    display: none;
  }

  .ticker__track {
    padding: 15px 0 14px;
  }

  .mechanics .wrap {
    padding-top: 61.5px;
    padding-bottom: 45.5px;
  }

  .mechanics__stats {
    grid-template-columns: 162px minmax(0, 1fr);
    row-gap: 32.5px;
    margin-top: 34px;
  }

  .stat {
    flex-direction: column;
    gap: 19px;
  }

  .stat__value {
    margin-top: 0;
    font-size: 108px;
  }

  .stat__label {
    max-width: 140px;
    margin-top: 0;
    margin-left: 1.5px;
    font-size: 14px;
    line-height: 17px;
  }

  .stat:nth-child(2) .stat__label {
    margin-left: 0.5px;
  }

  .stat--quoted {
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: 296.3px;
    margin-left: 7.6px;
  }

  .stat__paren {
    width: 26.4px;
    height: 100.4px;
  }

  .stat--quoted .stat__label {
    align-self: flex-start;
    max-width: 180px;
    margin: 21px auto 0 40px;
  }

  .task__inner {
    padding-top: 61.5px;
    padding-bottom: 57px;
  }

  .task__body {
    max-width: none;
    margin-top: 24px;
    font-size: 14px;
    line-height: 17px;
  }

  .task__note {
    gap: 10.8px;
    margin-top: 24px;
    font-size: 14px;
    line-height: 17px;
  }

  .task__note-icon {
    width: 18px;
    height: 18px;
    margin: -4px 0 0;
  }

  .task__note-icon circle {
    stroke-width: 2.6;
  }

  .task__chevrons {
    position: static;
    display: block;
    width: calc(100% + var(--inset) * 2);
    height: auto;
    margin: 24px calc(var(--inset) * -1) 0;
  }

  .feature {
    padding: 60px var(--inset) 58px;
  }

  .feature__icon,
  .feature:first-child .feature__icon,
  .feature:nth-child(2) .feature__icon,
  .feature:nth-child(3) .feature__icon {
    height: 23.5px;
    margin: 0;
    stroke-width: 2;
  }

  .feature__title {
    margin-top: 24px;
    font-size: 24px;
  }

  .feature__body {
    max-width: 300px;
    margin-top: 24px;
    font-size: 14px;
    line-height: 17px;
  }

  .stages > .wrap {
    padding-top: 59px;
    padding-bottom: 39.5px;
  }

  .stage {
    grid-template-columns: 76px minmax(0, 1fr);
    row-gap: 12px;
    padding: 12px var(--inset) 23px;
  }

  .stage:last-child {
    padding-bottom: 60px;
  }

  .stage__num {
    margin-top: 1px;
    font-size: 14px;
  }

  .stage__title {
    font-size: 24px;
    line-height: 22px;
  }

  .stage__body {
    gap: 8px;
    font-size: 14px;
    line-height: 17px;
  }

  /* The date sits a little further from the schedule than paragraphs do. */
  .schedule {
    gap: 12.3px;
    margin-top: 4px;
  }

  .schedule div {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.7px;
  }

  .registration > .wrap {
    padding-top: 59px;
    padding-bottom: 135.5px;
  }

  .registration__fork {
    top: auto;
    bottom: 0;
    width: 141px;
    height: 141px;
  }

  .reg {
    margin-top: 40.5px;
  }

  .reg__grid {
    gap: 32px;
  }

  .reg__grid + .reg__field,
  .reg__field + .reg__field {
    margin-top: 32px;
  }

  .reg__field input,
  .reg__field select {
    height: 35px;
    padding-bottom: 19px;
    font-size: 14px;
    line-height: 15px;
  }

  .reg__field select {
    background-position: right 4.5px;
  }

  .reg__hint {
    top: 39px;
    font-size: 12px;
    line-height: 14px;
  }

  .reg__field::after {
    top: 34px;
  }

  .reg__error {
    gap: 6px;
    margin: 4px 0 -18px;
    font-size: 12px;
    line-height: 14px;
  }

  .reg__error::before {
    width: 12px;
    height: 12px;
    border-width: 1.25px;
    font-size: 8px;
    line-height: 9.5px;
  }

  .reg__submit {
    margin-top: 40px;
  }

  .reg__submit + .reg__consent {
    margin-top: 41px;
  }

  .reg__consent {
    margin-top: 13px;
    line-height: 16px;
  }

  /* The phone frame wraps the first consent at a narrower measure. */
  .reg__submit + .reg__consent > span {
    max-width: 270px;
  }

  .faq > .wrap {
    padding-top: 59px;
    padding-bottom: 40px;
  }

  .faq__question {
    display: none;
  }

  .faq__item summary {
    padding: 23.4px 48px 20.5px var(--inset);
    font-size: 14px;
    line-height: 18.7px;
  }

  /* The phone frame spaces its items a little unevenly; these follow it. */
  .faq__item:nth-child(1) summary {
    padding-bottom: 17.4px;
  }

  .faq__item:nth-child(3) summary {
    padding-bottom: 21.4px;
  }

  .faq__item summary::after {
    top: 25px;
    right: 10.5px;
    width: 19px;
    height: 11px;
    background-size: 19px 11px;
  }

  .faq__item p {
    max-width: calc(274px + var(--inset) * 2);
    margin-top: -9.4px;
    padding-bottom: 23.5px;
    font-size: 14px;
    line-height: 17px;
  }

  .footer__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 32.3px;
    padding-bottom: 35.7px;
    font-size: 14px;
    line-height: 29px;
  }

  .footer__community {
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .ticker__track,
  .fp-in--1,
  .fp-in--2,
  .fp-in--3,
  .fp-in--4 {
    animation: none;
  }
}