@font-face {
  font-family: Big Shoulders;
  src: url("./BigShoulders-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: Red Hat Display;
  src: url("./RedHatDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Red Hat Display;
  src: url("./RedHatDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #101116;
  --panel: #1c1d23;
  --panel-raised: #23242b;
  --text: #f5f5f7;
  --muted: #b0b1ba;
  --accent: #ff9508;
  --accent-soft: #ffb349;
  --danger: #ff8a7a;
  --line: #34353e;
  --court: #5b452b;
  --cut: 12px;
  --gutter: clamp(16px, 5vw, 72px);
  --body: "Red Hat Display", sans-serif;
  --display: "Big Shoulders", "Arial Narrow", sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
}
button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline-offset: 5px;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
}
[hidden] {
  display: none !important;
}
svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
p {
  margin: 0 0 1.2rem;
}
h1,
h2 {
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.02;
  margin: 0;
  text-transform: uppercase;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  padding: 12px;
  background: var(--accent);
  color: var(--bg);
  z-index: 20;
}
.skip-link:focus {
  top: 16px;
}

/* Header */
.site-header {
  height: 88px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid #282930;
}
.brand img {
  display: block;
  width: 88px;
  height: 72px;
  object-fit: contain;
}
.login {
  font-weight: 700;
  font-size: 14px;
  padding: 10px 0;
}
.login:hover,
.claim-login a:hover,
.announcement a:hover,
.faq-list a:hover,
.text-link:hover {
  color: var(--accent);
}

/* Layout: the card rides alongside the reading column on wide screens and
   drops right under the headline on narrow ones. The story and the FAQ run
   across the full width under them. */
.invite-layout {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(24px, min(7vw, 8vh), 96px) var(--gutter) 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  grid-template-areas:
    "intro card"
    "announcement card"
    "story story"
    "faq faq";
  grid-template-rows: auto 1fr auto auto;
  column-gap: clamp(40px, 6vw, 96px);
}
.court-lines {
  position: absolute;
  top: -260px;
  right: -180px;
  width: 720px;
  height: 720px;
  border: 1px solid var(--court);
  border-radius: 50%;
  opacity: 0.4;
  pointer-events: none;
}
.court-lines:after {
  content: "";
  position: absolute;
  inset: 180px;
  border: 1px solid var(--court);
  border-radius: 50%;
}
.invite-intro,
.claim-card,
.announcement,
.faq {
  position: relative;
}
/* The opening (label, headline, intro) and the claim card share the first screen: the headline
   scales with the viewport's height as well as its width, and a name makes it smaller, since
   "Back on the court, <name>." runs longer. */
.invite-intro {
  grid-area: intro;
  margin-bottom: clamp(28px, 5vh, 56px);
}
.category {
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: clamp(10px, 2vh, 20px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.invite-intro h1 {
  font-size: clamp(44px, min(8vw, 13vh), 118px);
  letter-spacing: -1px;
}
.invite-intro h1.is-named {
  font-size: clamp(40px, min(5.2vw, 10vh), 104px);
}
.invite-intro h1 span {
  display: block;
}
.invite-intro h1 span:last-child {
  color: var(--accent);
}
.intro {
  margin: clamp(14px, 3vh, 28px) 0 0;
  max-width: 560px;
  font-size: 18px;
  color: var(--muted);
}

/* Claim card. It sticks within its rail, which spans the intro and the announcement
   only: sticky alone would carry it down the whole page, over the story. */
.card-rail {
  grid-area: card;
}
.claim-card {
  position: sticky;
  top: 32px;
  padding: 32px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 24px),
    calc(100% - 24px) 100%,
    0 100%
  );
}
.claim-card h2 {
  font-size: 44px;
  margin-bottom: 14px;
}
.claim-text {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 24px;
}
.code-box {
  margin-bottom: 20px;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px dashed var(--court);
}
.code-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.code-box output {
  display: block;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  overflow-wrap: anywhere;
}
.button {
  min-height: 56px;
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  cursor: pointer;
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}
.button:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 4px white;
}
.primary {
  color: var(--bg);
  background: var(--accent);
}
.primary:hover {
  background: var(--accent-soft);
}
.claim-button {
  width: 100%;
}
.claim-button:disabled {
  cursor: progress;
  background: var(--panel-raised);
  color: var(--muted);
}
.claim-button:disabled svg {
  display: none;
}
.turnstile:not(:empty) {
  margin-top: 16px;
}
.claim-status {
  min-height: 1.6em;
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.claim-status:empty {
  min-height: 0;
  margin: 0;
}
.claim-status.is-error {
  color: var(--danger);
}
.code-entry {
  margin-top: 24px;
}
.code-entry label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}
.code-entry input {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--accent);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 16px;
}
.code-entry input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}
.code-entry input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 0;
}
.claim-login {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.claim-login a,
.announcement a,
.faq-list a {
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}

/* Announcement */
.announcement {
  grid-area: announcement;
  margin-bottom: 72px;
  padding-left: 28px;
  border-left: 3px solid var(--accent);
  max-width: 680px;
}
.announcement h2 {
  font-size: clamp(34px, 4vw, 52px);
  margin-bottom: 24px;
}
.announcement h3 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.announcement p,
.announcement ul {
  font-size: 17px;
}
/* List items lead with their own emoji, so the list draws no bullets. */
.announcement ul {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
}
.announcement li {
  margin-bottom: 0.7rem;
}
/* A quotation: a raised panel with a large opening quote mark and the speaker's name under it. */
.announcement-quote {
  position: relative;
  margin: 0 0 36px;
  padding: 64px 28px 24px;
  background: var(--panel);
  border-top: 3px solid var(--accent);
}
.announcement-quote::before {
  content: "“";
  position: absolute;
  top: 12px;
  left: 24px;
  font-family: var(--display);
  font-size: 96px;
  line-height: 1;
  color: var(--accent);
}
.announcement-quote blockquote {
  margin: 0;
}
.announcement-quote p {
  font-size: 18px;
}
.announcement-quote blockquote p:last-child {
  margin-bottom: 0;
}
.announcement-quote figcaption {
  margin-top: 20px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}
.announcement-quote figcaption::before {
  content: "— ";
  color: var(--accent);
}
/* The image closing the announcement, in its flow: on wide screens it ends the last
   column rather than hanging under all of them. */
.announcement-image {
  margin: 0;
  break-inside: avoid;
}
.announcement-image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
.announcement-image figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}
.announcement strong {
  font-weight: 700;
  color: var(--accent-soft);
}
/* Sections are spaced with padding rather than margins, which a column break would cut. */
.announcement section {
  break-inside: avoid;
  padding-bottom: 40px;
}
.announcement section:last-child {
  padding-bottom: 0;
}
.announcement section > :last-child {
  margin-bottom: 0;
}

/* Story: chapters numbered in the accent, paragraphs at a reading measure, and the
   screenshots, cards and scoreboard wider than it. */
.story {
  grid-area: story;
  position: relative;
  margin: 8px 0 96px;
  padding-top: 72px;
  border-top: 1px solid var(--line);
  counter-reset: chapter;
}
.story .announcement-image {
  max-width: 760px;
  margin: 0 auto 72px;
  text-align: center;
}
.story-head {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.story-head h2 {
  font-size: clamp(48px, 7vw, 104px);
  letter-spacing: -1px;
}
.story-intro {
  margin: 24px 0 0;
  font-size: 20px;
  color: var(--muted);
}
.story-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}
.story-nav a,
.tag {
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.story-nav a {
  padding: 8px 16px;
  background: var(--panel);
  font-size: 14px;
  font-weight: 700;
}
.story-nav a:hover {
  background: var(--accent);
  color: var(--bg);
}
/* Everything in a chapter sits on the page's centre line, as the story's opening does. */
.chapter {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 88px;
  text-align: center;
}
.chapter > * {
  margin-left: auto;
  margin-right: auto;
}
.chapter h3 {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 18px;
  margin: 0 0 24px;
  font-family: var(--display);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 900;
  line-height: 1.02;
  text-transform: uppercase;
}
.chapter h3::before {
  counter-increment: chapter;
  content: counter(chapter, decimal-leading-zero);
  font-size: 0.55em;
  color: var(--accent);
}
.chapter h4 {
  margin: 48px 0 12px;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--accent);
}
.chapter > p,
.chapter > ul:not(.levels) {
  max-width: 720px;
  font-size: 17px;
}
.chapter > ul:not(.levels) {
  list-style: none;
  padding: 0;
}
.chapter strong {
  font-weight: 700;
  color: var(--accent-soft);
}
/* Before and after: two screenshots side by side, each in the same 16:9 frame cropped
   from its top left corner, or portrait for the phone pair. story.js enlarges them. */
.compare {
  margin: 28px auto 12px;
}
.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.compare.is-phone .shots {
  max-width: 560px;
  margin: 0 auto;
}
.shot {
  position: relative;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
  background: var(--panel);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.is-phone .shot img {
  aspect-ratio: 9 / 19.5;
}
.tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 3px 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
}
.tag.is-new {
  background: var(--accent);
  color: var(--bg);
}
.zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.zoom:hover img {
  filter: brightness(1.12);
}
.compare figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}
/* The interface levels, as three cards. */
.levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1040px;
  margin: 28px auto;
  padding: 0;
  list-style: none;
}
.levels li {
  padding: 28px 24px 24px;
  background: var(--panel);
  border-top: 3px solid var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.level-icon {
  display: block;
  font-size: 34px;
  line-height: 1;
  margin-bottom: 16px;
}
.levels strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
}
.levels p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}
/* The numbers, as the arena scoreboard: the figures glow in the accent. */
.scoreboard {
  max-width: 1040px;
  margin: 32px auto 40px;
  text-align: left;
  padding: 8px clamp(20px, 4vw, 44px) 16px;
  background: var(--panel);
  border-top: 4px solid var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}
.scoreboard figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 30px;
  font-weight: 900;
  text-transform: uppercase;
}
.scoreboard figcaption span {
  font-size: 22px;
  color: var(--accent);
}
.scoreboard dl {
  margin: 0;
}
.scoreboard dl > div {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 24px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.scoreboard dl > div:last-child {
  border-bottom: 0;
}
.scoreboard dt {
  font-family: var(--display);
  font-size: clamp(44px, 6vw, 64px);
  font-weight: 900;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(255, 149, 8, 0.35);
}
.scoreboard dd {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}
.scoreboard dd strong {
  display: block;
  margin-bottom: 2px;
  font-size: 18px;
  color: var(--text);
}
/* The enlarged screenshot */
.lightbox {
  max-width: 96vw;
  max-height: 96vh;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}
.lightbox::backdrop {
  background: rgba(16, 17, 22, 0.9);
}
.lightbox img {
  display: block;
  max-width: 96vw;
  max-height: calc(96vh - 48px);
  width: auto;
  height: auto;
  margin: 0 auto;
  cursor: zoom-out;
}
.lightbox p {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--muted);
  text-align: center;
}
.lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--accent);
  color: var(--bg);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* FAQ */
/* Centred under the story, like it. */
.faq {
  grid-area: faq;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.faq h2 {
  font-size: clamp(34px, 4vw, 52px);
  margin-bottom: 28px;
}
.faq-list {
  text-align: left;
}
.faq-list {
  border-top: 1px solid var(--line);
  margin-bottom: 32px;
}
details {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  list-style: none;
  font-weight: 700;
}
summary::-webkit-details-marker {
  display: none;
}
summary span {
  color: var(--accent);
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
  transition: transform 0.15s ease;
}
details[open] summary span {
  transform: rotate(45deg);
}
details p {
  color: var(--muted);
  font-size: 15px;
  margin: 14px 36px 0 0;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
}
.text-link svg {
  color: var(--accent);
}

/* Footer */
footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--line);
}
.footer-brand {
  width: 64px;
  height: 52px;
  object-fit: contain;
}
footer p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Wide and ultra-wide screens: the page widens, the announcement's sections sit side
   by side, and the FAQ runs in columns, so the text no longer makes one long column. */
@media (min-width: 1600px) {
  .invite-layout,
  footer {
    max-width: 2400px;
  }
  .announcement,
  .faq {
    max-width: none;
  }
  .announcement-body {
    columns: 3 440px;
    column-gap: 56px;
  }
  .faq-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    column-gap: 56px;
    align-items: start;
  }
}

@media (max-width: 900px) {
  .invite-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "card"
      "announcement"
      "story"
      "faq";
    grid-template-rows: none;
    padding-top: clamp(20px, 4vh, 40px);
  }
  .chapter {
    padding-top: 64px;
  }
  .invite-intro {
    margin-bottom: 24px;
  }
  .claim-card {
    position: relative;
    top: 0;
    margin-bottom: 56px;
  }
  .court-lines {
    top: -200px;
    right: -320px;
  }
}
@media (max-width: 520px) {
  .site-header {
    height: 60px;
  }
  .brand img {
    width: 58px;
    height: 48px;
  }
  .category {
    font-size: 13px;
  }
  .invite-intro {
    margin-bottom: 18px;
  }
  .invite-intro h1 {
    font-size: clamp(38px, min(12.5vw, 6.6vh), 64px);
  }
  .invite-intro h1.is-named {
    font-size: clamp(34px, min(10.5vw, 5.8vh), 56px);
  }
  .intro {
    font-size: 15px;
    line-height: 1.5;
  }
  .claim-card {
    padding: 20px 18px;
  }
  .claim-card h2 {
    font-size: 30px;
    margin-bottom: 8px;
  }
  .claim-text {
    font-size: 14px;
    margin-bottom: 16px;
  }
  .code-entry {
    margin-top: 16px;
  }
  .claim-login {
    margin-top: 16px;
    padding-top: 14px;
  }
  .announcement {
    padding-left: 18px;
  }
  .shots,
  .levels {
    grid-template-columns: minmax(0, 1fr);
  }
  .compare.is-phone .shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .scoreboard dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .story-intro {
    font-size: 17px;
  }
  details p {
    margin-right: 0;
  }
  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  summary span {
    transition: none;
  }
}