/* Homepage (rebuilt 2026-10). Tokens, fonts, buttons, nav and footer come from brand.css.
   The page is one ink ground; shapes and section breaks are fields of diagonal hairlines
   (the brand guide's cover and back page) cut into stepped outlines with clip-path. */
*, *::before, *::after {
  box-sizing: border-box;
}

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

/* the phone's size is shared by the hero and its decorations */
body.cs-page {
  --phone-w: clamp(280px, 24vw, 360px);
  --phone-h: calc(var(--phone-w) * 1670 / 886);
  /* theme colours: these are the dark values; [data-theme="light"] (the homepage's default) overrides */
  --cs-page: var(--cs-ink);
  --cs-text: var(--cs-white);
  --cs-text-soft: rgba(255, 255, 255, .86);
  --hatch-line: rgba(255, 255, 255, .5);
  --claim: var(--cs-yellow);
  --blip: var(--cs-teal);
  --ticket-bg: #352f4d;
  --ticket-perf: rgba(255, 255, 255, .28);
  --ticket-edge: drop-shadow(1px 0 0 rgba(255, 255, 255, .16)) drop-shadow(-1px 0 0 rgba(255, 255, 255, .16)) drop-shadow(0 1px 0 rgba(255, 255, 255, .16)) drop-shadow(0 -1px 0 rgba(255, 255, 255, .16));
  --hatch-white: repeating-linear-gradient(-58deg, transparent 0 12px, var(--hatch-line) 12px 13px);
  margin: 0;
  background-color: var(--cs-page);
  color: var(--cs-text);
  color-scheme: dark;
  font-family: var(--cs-body);
  -webkit-font-smoothing: antialiased;
}

/* light mode: paper page, ink type and hairlines; CLAIM goes purple and the pitch line
   dark teal (brand yellow and teal are too faint on paper for text) */
[data-theme="light"] body.cs-page {
  --cs-page: #f8f8f8;
  --cs-text: var(--cs-ink);
  --cs-text-soft: rgba(45, 39, 66, .8);
  --hatch-line: rgba(45, 39, 66, .4);
  --claim: var(--cs-purple);
  --blip: #0b7380;
  --ticket-bg: #fff;
  --ticket-perf: rgba(45, 39, 66, .25);
  --ticket-edge: drop-shadow(0 0 1px rgba(45, 39, 66, .22)) drop-shadow(0 14px 22px rgba(45, 39, 66, .12));
  color-scheme: light;
}

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

/* ---- Hero: PICK YOUR TEAM beside the phone, a stepped band behind it, CLAIM YOUR SHARE below right ---- */
.cs-hero {
  --gap: clamp(28px, 3vw, 56px);
  /* each word column; the widest word ("Share") is 2.01em of Bebas Neue */
  --col: calc((min(100vw - 2 * var(--cs-gutter), 1440px) - var(--phone-w) - 2 * var(--gap)) / 2);
  --fs: min(240px, var(--col) / 2.08);
  --pick-h: calc(var(--fs) * .84 * 3);
  --claim-top: calc(var(--phone-h) * .42);
  --band-t: clamp(36px, 3.4vw, 56px);
  --pad-top: clamp(32px, 4vw, 64px);
  position: relative;
  overflow: hidden;
  padding: var(--pad-top) var(--cs-gutter) clamp(180px, 16vw, 250px);
}

.cs-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--phone-w) minmax(0, 1fr);
  grid-template-rows: auto calc(var(--band-t) + 64px) auto;
  column-gap: var(--gap);
  max-width: 1440px;
  margin: 0 auto;
}

.cs-hero-words {
  margin: 0;
  font-family: var(--cs-display);
  font-size: var(--fs);
  font-weight: 400;
  line-height: .84;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.cs-hero-words span {
  display: block;
}

.cs-hero-pick {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  text-align: right;
}

.cs-hero-claim {
  grid-column: 3;
  grid-row: 1 / 4;
  align-self: start;
  justify-self: start;
  margin-top: var(--claim-top);
  color: var(--claim);
}

.cs-hero-blip {
  grid-column: 1;
  grid-row: 3;
  justify-self: end;
  /* lower, and nudged right under the phone (it sits below the phone's bottom edge) */
  margin: 96px calc(-1 * clamp(40px, 5vw, 72px)) 0 0;
  /* the ticket's outline and shadow: drop-shadow follows the notched shape, a border would not */
  filter: var(--ticket-edge);
}

/* the pitch line on a ticket stub: notches top and bottom at the tear line, a dashed
   perforation between them, and a stub end filled with teal hairlines */
.cs-ticket {
  --stub: clamp(48px, 4.4vw, 64px);
  --notch: 13px;
  --tear: calc(100% - var(--stub));
  max-width: calc(18ch + var(--stub));
  margin: 0;
  padding: 26px calc(var(--stub) + 26px) 26px 28px;
  border-radius: 14px;
  background:
    repeating-linear-gradient(to bottom, var(--ticket-perf) 0 6px, transparent 6px 12px) var(--tear) var(--notch) / 2px calc(100% - 2 * var(--notch)) no-repeat,
    repeating-linear-gradient(-58deg, transparent 0 7px, var(--cs-teal) 7px 9px) right 0 top 0 / calc(var(--stub) - 10px) 100% no-repeat,
    var(--ticket-bg);
  -webkit-mask:
    radial-gradient(circle var(--notch) at var(--tear) 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--tear) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at var(--tear) 0, transparent 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--tear) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  color: var(--blip);
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

.cs-phone {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: start;
  width: var(--phone-w);
  border: calc(var(--phone-w) * .035) solid #15121f;
  border-radius: calc(var(--phone-w) * .13);
  background-color: #15121f;
}

.cs-phone-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 886 / 1670;
  border-radius: calc(var(--phone-w) * .1);
  background-color: #15121f;
  object-fit: cover;
}

/* the section break: a hairline band that enters low on the left, steps up behind the
   phone and leaves high on the right, between TEAM. and CLAIM */
.cs-hero-band {
  --y-left: calc(var(--pick-h) + 32px);
  --y-right: calc(var(--claim-top) - 32px - var(--band-t));
  --rise: calc(var(--y-left) - var(--y-right));
  position: absolute;
  z-index: 1;
  top: var(--y-right);
  left: calc(50% - 50vw);
  width: 100vw;
  height: calc(var(--rise) + var(--band-t));
  background: var(--hatch-white);
  clip-path: polygon(0 var(--rise), 50% var(--rise), 50% 0, 100% 0, 100% var(--band-t), calc(50% + var(--band-t)) var(--band-t), calc(50% + var(--band-t)) calc(var(--rise) + var(--band-t)), 0 calc(var(--rise) + var(--band-t)));
}

/* white field in the top-right corner, its edge stepping in like the guide's cover */
.cs-hero-hatch-tr {
  position: absolute;
  top: calc(-1 * var(--pad-top));
  right: calc(50% - 50vw);
  width: min(24vw, 360px);
  height: calc(var(--claim-top) - 96px - var(--band-t) + var(--pad-top));
  background: var(--hatch-white);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 64% 100%, 64% 58%, 30% 58%, 30% 26%, 0 26%);
}

/* purple field along the bottom-left edge, stepping out like the guide's back page */
.cs-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(44vw, 640px);
  height: clamp(110px, 12vw, 180px);
  background: repeating-linear-gradient(-58deg, transparent 0 11px, var(--cs-purple) 11px 13px);
  clip-path: polygon(0 0, 22% 0, 22% 34%, 48% 34%, 48% 66%, 76% 66%, 76% 100%, 0 100%);
}

/* ---- Steps: copy beside a screenshot floating on a coloured hairline field ---- */
.cs-step {
  position: relative;
  overflow: hidden;
  padding: clamp(150px, 13vw, 200px) var(--cs-gutter) clamp(72px, 8vw, 120px);
}

/* the first step follows the hero's purple corner field directly: no speed lines, less space */
.cs-hero + .cs-step {
  padding-top: clamp(72px, 7vw, 112px);
}

.cs-hero + .cs-step::before {
  content: none;
}

/* stepped speed lines (guide p.14) running in from the copy's edge */
.cs-step::before {
  content: "";
  position: absolute;
  top: clamp(48px, 5vw, 72px);
  left: 0;
  width: min(32vw, 420px);
  height: 62px;
  background:
    linear-gradient(var(--accent) 0 0) left 0 top 0 / 22% 2px no-repeat,
    linear-gradient(var(--accent) 0 0) left 0 top 15px / 40% 2px no-repeat,
    linear-gradient(var(--accent) 0 0) left 0 top 30px / 58% 2px no-repeat,
    linear-gradient(var(--accent) 0 0) left 0 top 45px / 78% 2px no-repeat,
    linear-gradient(var(--accent) 0 0) left 0 top 60px / 100% 2px no-repeat;
}

.cs-step-flip::before {
  left: auto;
  right: 0;
  background-position: right 0 top 0, right 0 top 15px, right 0 top 30px, right 0 top 45px, right 0 top 60px;
}

.cs-step-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.cs-step-flip .cs-step-copy {
  order: 2;
}

.cs-bars {
  display: block;
  width: 46px;
  height: 40px;
  margin-bottom: 22px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 18px);
}

.cs-step-title {
  margin: 0 0 20px;
  font-family: var(--cs-display);
  font-size: clamp(52px, 6.4vw, 96px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: .01em;
}

.cs-step-text {
  max-width: 36ch;
  margin: 0;
  color: var(--cs-text-soft);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}

.cs-step-media {
  position: relative;
  justify-self: center;
}

/* the field runs from behind the screenshot off the outer edge of the page */
.cs-step-field {
  position: absolute;
  top: -14%;
  bottom: -14%;
  left: 30%;
  width: 100vw;
  background: repeating-linear-gradient(-58deg, transparent 0 11px, var(--accent) 11px 13px);
  clip-path: polygon(0 26%, 96px 26%, 96px 0, 100% 0, 100% 100%, 192px 100%, 192px 74%, 0 74%);
}

.cs-step-flip .cs-step-field {
  left: auto;
  right: 30%;
  clip-path: polygon(0 0, calc(100% - 96px) 0, calc(100% - 96px) 26%, 100% 26%, 100% 74%, calc(100% - 192px) 74%, calc(100% - 192px) 100%, 0 100%);
}

.cs-step-media img,
.cs-step-media video {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 560px;
  border-radius: 16px;
}

/* light mode: an edge and a soft shadow so the light app screens stand off the page */
[data-theme="light"] .cs-step-media img,
[data-theme="light"] .cs-step-media video {
  box-shadow: 0 0 0 1px rgba(45, 39, 66, .12), 0 18px 40px rgba(45, 39, 66, .14);
}

.cs-step-media .cs-step-img-wide {
  width: 460px;
}

.cs-step-media .cs-step-video {
  width: 420px;
  aspect-ratio: 720 / 776;
  background-color: #fff;
  object-fit: cover;
}

/* ---- Built on Solana ---- */
.cs-chain {
  position: relative;
  overflow: hidden;
  /* the bottom padding always clears the yellow lines (offset + 83px tall) plus a gap */
  padding: clamp(104px, 12vw, 176px) var(--cs-gutter) calc(clamp(28px, 4vw, 56px) + 83px + 48px);
  background-color: var(--cs-purple);
  color: var(--cs-white);
}

.cs-chain::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: min(42vw, 560px);
  height: 100%;
  background: repeating-linear-gradient(-58deg, transparent 0 13px, rgba(255, 255, 255, .5) 13px 14px);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%, 0 64%, 20% 64%, 20% 30%, 38% 30%);
  pointer-events: none;
}

/* stepped yellow lines along the bottom-left edge */
.cs-chain::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: clamp(28px, 4vw, 56px);
  width: min(30vw, 360px);
  height: 83px;
  background:
    linear-gradient(var(--cs-yellow) 0 0) left 0 top 0 / 30% 3px no-repeat,
    linear-gradient(var(--cs-yellow) 0 0) left 0 top 16px / 44% 3px no-repeat,
    linear-gradient(var(--cs-yellow) 0 0) left 0 top 32px / 58% 3px no-repeat,
    linear-gradient(var(--cs-yellow) 0 0) left 0 top 48px / 72% 3px no-repeat,
    linear-gradient(var(--cs-yellow) 0 0) left 0 top 64px / 86% 3px no-repeat,
    linear-gradient(var(--cs-yellow) 0 0) left 0 top 80px / 100% 3px no-repeat;
}

.cs-chain-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}

.cs-chain-title {
  max-width: 14ch;
  margin: 0 0 28px;
  text-wrap: balance;
  font-family: var(--cs-display);
  font-size: clamp(64px, 9.4vw, 152px);
  font-weight: 400;
  line-height: .86;
  letter-spacing: .01em;
}

.cs-chain-text {
  max-width: 40ch;
  margin: 0 0 40px;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 300;
  line-height: 1.45;
}

.cs-chain-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
}

.cs-chain .cs-btn {
  box-shadow: 5px 5px 0 var(--cs-ink);
}

.cs-chain .cs-btn:hover {
  box-shadow: 3px 3px 0 var(--cs-ink);
}

.cs-chain-link {
  color: var(--cs-white);
  font-size: 17px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.cs-chain-link:hover {
  color: var(--cs-yellow);
}

.cs-chain-link:focus-visible {
  outline: 3px solid var(--cs-yellow);
  outline-offset: 4px;
}

/* ---- Tablet and phone ---- */
@media screen and (max-width: 991px) {
  body.cs-page {
    --phone-w: min(62vw, 320px);
  }

  .cs-hero {
    --fs: min(27vw, 200px);
    padding-bottom: clamp(150px, 30vw, 220px);
  }

  .cs-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .cs-hero-pick {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    text-align: left;
  }

  .cs-phone {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    margin-top: 32px;
  }

  .cs-hero-claim {
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
    margin-top: 32px;
    text-align: right;
  }

  .cs-hero-blip {
    grid-column: 1;
    grid-row: 4;
    justify-self: center;
    width: min(100%, 320px);
    margin: 32px 0 0;
  }

  .cs-ticket {
    max-width: 320px;
  }

  /* one step, behind the middle of the phone */
  .cs-hero-band {
    --rise: calc(var(--band-t) * 1.4);
    top: calc(var(--pick-h) + 32px + var(--phone-h) * .42);
  }

  .cs-hero-hatch-tr {
    width: 40vw;
    height: calc(var(--pick-h) * .62 + var(--pad-top));
  }

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

@media screen and (max-width: 767px) {
  .cs-step-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-step-flip .cs-step-copy {
    order: 0;
  }

  /* the field reaches 40px above the screenshot; keep it clear of the copy */
  .cs-step-media {
    margin-top: 32px;
  }

  .cs-step-field {
    top: -40px;
    bottom: -40px;
  }

  .cs-step-field {
    left: 22%;
  }

  .cs-step-flip .cs-step-field {
    right: 22%;
  }

  .cs-chain::before {
    width: 46vw;
    height: 200px;
  }
}