/*
 * One stylesheet for the whole apex site. An external file rather than a
 * <style> block because `MarketingSiteStack`'s response-headers policy sets
 * `style-src 'self'` with no `unsafe-inline`, and this site holds itself to
 * that line rather than loosening it.
 *
 * The palette and the type ramp are the app's own (ADR-042, ADR-061), and the
 * artwork is the app's own device (ADR-036, ADR-038): three lobes, overlapping,
 * bleeding off the edges, with the meeting colours painted where they cross.
 * A visitor who downloads the app should recognise it immediately.
 */

/* ---------------------------------------------------------------- fonts --
 * All three families are served from this origin. They are Google Fonts by
 * publication, not by delivery: the licence is OFL and the files sit beside
 * this stylesheet, so no visitor's address reaches a third party before the
 * page paints, and the CSP's `font-src 'self'` needs no loosening.
 *
 * The latin subsets only, which is what an Australian-English site renders a
 * glyph from. Inter arrives as one variable file covering every weight the
 * site uses, so four static faces became a single 47 KB request. The three
 * files together are about 83 KB; the same three families as TrueType, which
 * is the form `apps/mobile` bundles them in, would have been over two
 * megabytes.
 *
 * Licences are alongside them: OFL-Inter.txt, OFL-BarlowCondensed.txt,
 * OFL-DMMono.txt. The OFL requires the notice travel with the files.
 */
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Inter-Variable-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/BarlowCondensed-ExtraBold-latin.woff2") format("woff2");
}

@font-face {
  font-family: "DM Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/DMMono-Regular-latin.woff2") format("woff2");
}

:root {
  --cream: #fff8ed;
  --cream-sunk: #fff1d9;
  --white: #ffffff;
  --ink: #241a2e;
  --ink-600: #4a4055;
  --ink-400: #71657b;
  --hairline: #ead9ce;
  --rule: #d8c0ae;
  --accent: #c2185b;
  --accent-ink: #ffffff;

  /* Banner pastels — the grounds a section may take. */
  --lilac: #f9d0ff;
  --lime: #dbffa8;
  --blossom: #f7defa;

  /* The three lobes. Fixed meanings: sand, green, water (ADR-038). */
  --sand: #ffcc00;
  --green: #43f07d;
  --water: #00f6ff;

  /* Where they meet, lightened 45% toward white. Never computed — sampled. */
  --meet-sand-green: #f6ab94;
  --meet-sand-water: #ff8ca2;
  --meet-green-water: #8dbced;
  --meet-all: #ebcbf0;

  --body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", var(--body);
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: 80px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* A visitor who has asked their device to stop moving things is asked again by
 * nothing on this site. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
}

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

/* Keyboard focus must be visible on every ground this site uses, including the
 * one dark panel. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* --------------------------------------------------------------- layout -- */
.section {
  padding: 116px var(--gutter);
  position: relative;
  overflow: hidden;
}

.section--tight {
  padding-block: 96px;
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.ground-lilac {
  background: var(--lilac);
}

.ground-lime {
  background: var(--lime);
}

.ground-blossom {
  background: var(--blossom);
}

.ground-cream {
  background: var(--cream);
}

/* ------------------------------------------------------------ typography -- */
.display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}

.display--hero {
  font-size: clamp(3.5rem, 9vw, 8.375rem);
}

.display--section {
  font-size: clamp(2.5rem, 5vw, 4.75rem);
}

.display--close {
  font-size: clamp(3rem, 7vw, 6.5rem);
}

.display--stat {
  font-size: clamp(2.5rem, 4vw, 4rem);
  color: var(--accent);
}

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

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 0;
}

.eyebrow--on-colour {
  color: var(--ink);
  opacity: 0.62;
}

.lede {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-600);
  margin: 0;
  max-width: 34rem;
}

.lede--on-colour {
  color: var(--ink);
}

.mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- controls -- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 16px 34px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
}

.button--primary {
  background: var(--ink);
  color: var(--cream);
}

.button--primary:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.button--ghost {
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
}

.button--ghost:hover {
  background: var(--white);
  color: var(--ink);
}

.button--green {
  background: var(--green);
  color: #150e1b;
}

.button--green:hover {
  background: var(--sand);
  color: #150e1b;
}

.button--compact {
  min-height: 44px;
  padding: 12px 22px;
  font-size: 0.9375rem;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.chip {
  border: 1.5px solid rgba(36, 26, 46, 0.18);
  background: rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ------------------------------------------------------------------- nav -- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px var(--gutter);
  position: relative;
  z-index: 3;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-size: 1.3125rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark strong {
  font-weight: 800;
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 0.9375rem;
  font-weight: 500;
}

.nav a {
  color: var(--ink);
  text-decoration: none;
}

.nav a:hover {
  text-decoration: underline;
}

.nav a[aria-current="page"] {
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
}

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--lilac);
}

.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 60px;
  align-items: center;
  padding: 60px var(--gutter) 120px;
  position: relative;
  z-index: 2;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 48rem;
}

/* The artwork. Absolutely placed and aria-hidden: it is decoration, and it must
 * never take a click from the page it sits behind. */
.field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.field--corner {
  inset: auto auto 0 0;
  width: 700px;
  height: 700px;
  transform: translate(-27%, 31%);
}

/* --------------------------------------------------------------- devices -- */
.phone {
  width: 310px;
  height: 630px;
  border-radius: 44px;
  padding: 10px;
  background: var(--ink);
  box-shadow: 0 44px 90px rgba(36, 26, 46, 0.32);
  justify-self: end;
}

.phone .placeholder {
  height: 100%;
  border-radius: 36px;
  border: none;
  background: var(--cream);
}

/* A marked stand-in, never a fake screenshot: it says what belongs here so the
 * page can be reviewed before the real captures exist. */
.placeholder {
  border-radius: 24px;
  border: 1.5px dashed rgba(36, 26, 46, 0.22);
  background: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* 0.45 measured about 3:1 on cream, which is under AA for text this size.
   * These labels are read by a reviewer deciding what image belongs here. */
  color: rgba(36, 26, 46, 0.62);
  line-height: 1.8;
  padding: 20px;
}

.placeholder--tall {
  min-height: 520px;
}

.placeholder--wide {
  min-height: 470px;
}

.placeholder--panel {
  min-height: 390px;
}

/* ------------------------------------------------------------- proof band -- */
.proof {
  border-bottom: 1px solid var(--hairline);
  padding: 50px var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin: 0;
}

.proof div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.proof dt {
  order: 2;
  font-size: 0.875rem;
  color: var(--ink-600);
  line-height: 1.5;
}

.proof dd {
  order: 1;
  margin: 0;
}

/* ---------------------------------------------------------------- formats -- */
.formats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.format {
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-height: 148px;
}

.format h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  margin: 0;
}

.format p {
  font-size: 0.8125rem;
  color: var(--ink-600);
  line-height: 1.45;
  margin: 0;
}

.tint-lilac {
  background: var(--lilac);
}

.tint-lime {
  background: var(--lime);
}

.tint-blossom {
  background: var(--blossom);
}

.tint-sand {
  background: var(--cream-sunk);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 46px;
  flex-wrap: wrap;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ------------------------------------------------------- the round panel -- */
.panel-dark {
  background: var(--ink);
  border-radius: 30px;
  padding: 66px 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 60px;
  align-items: center;
  position: relative;
  overflow: hidden;
  color: var(--cream);
}

.panel-dark .display,
.panel-dark .lede {
  color: var(--cream);
}

.panel-dark .lede {
  color: #c9afc0;
}

.panel-dark .mono {
  color: var(--green);
}

/* -------------------------------------------------------- the round page -- */
.rail {
  position: absolute;
  left: 199px;
  top: 620px;
  bottom: 380px;
  width: 3px;
  z-index: 1;
  background: linear-gradient(
    180deg,
    var(--green),
    var(--water) 38%,
    var(--meet-sand-water) 70%,
    var(--sand)
  );
}

.hole {
  padding: 88px var(--gutter);
  position: relative;
  z-index: 2;
}

.hole__grid {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 60px;
  max-width: 1280px;
  margin: 0 auto;
}

.hole__marker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

/* The ball, ringed in its own section's ground so it reads as sitting ON the
 * rail rather than floating over it. */
.ball {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  margin-left: 106px;
  border: 5px solid var(--cream);
  box-shadow: 0 0 0 2px rgba(36, 26, 46, 0.14);
}

.ground-lime .ball {
  border-color: var(--lime);
}

.ground-blossom .ball {
  border-color: var(--blossom);
}

.ground-lilac .ball {
  border-color: var(--lilac);
}

.hole__index {
  margin-left: 74px;
  color: rgba(36, 26, 46, 0.5);
}

/* ---------------------------------------------------------------- footer -- */
.footer {
  border-top: 1px solid var(--hairline);
  padding: 56px var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--ink-600);
}

.footer nav {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

.footer a {
  color: var(--ink-600);
}

/* ------------------------------------------------- the utility pages ----
 * `/download`, `/round` and `/squad/join` are single-card pages, not marketing
 * ones. They keep their own layout and simply inherit the palette above.
 */
.card {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 40px;
}

body:has(> .card) {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--lilac);
}

.card h1 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 3rem;
  line-height: 0.9;
  margin: 0 0 16px;
}

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

.card .lede {
  font-size: 1.125rem;
  color: var(--ink);
  max-width: none;
  margin-bottom: 16px;
}

.note {
  font-size: 0.875rem;
  color: var(--ink-400);
}

.code {
  font-family: var(--mono);
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  background: var(--cream-sunk);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 16px;
  display: inline-block;
}

.steps {
  padding-left: 1.2em;
  color: var(--ink-600);
}

.steps li {
  margin-bottom: 8px;
}

/* ------------------------------------------------------------ responsive --
 * Three layouts, not one scaled down. The hero's phone drops below the copy
 * before the copy gets narrow enough to break the display type, and the grids
 * step 4 -> 2 -> 1 rather than squeezing.
 */
@media (max-width: 1180px) {
  :root {
    --gutter: 48px;
  }

  .hero__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding-bottom: 90px;
  }

  .phone {
    justify-self: start;
  }

  .split {
    gap: 48px;
  }

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

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

  .rail {
    left: 60px;
  }

  .hole__grid {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 30px;
  }

  .ball {
    margin-left: 0;
  }

  .hole__index {
    margin-left: 0;
  }
}

@media (max-width: 860px) {
  :root {
    --gutter: 24px;
  }

  .section {
    padding-block: 72px;
  }

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

  /* The screenshot follows the copy that explains it, whichever side it was on
     at desktop width. */
  .split > .placeholder {
    order: 2;
  }

  .panel-dark {
    grid-template-columns: minmax(0, 1fr);
    padding: 44px 30px;
    gap: 32px;
  }

  .nav {
    gap: 18px;
  }

  .nav .nav__link {
    display: none;
  }

  .phone {
    width: 100%;
    max-width: 310px;
    height: 560px;
  }

  .rail {
    display: none;
  }

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

  .hole__marker {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }

  .placeholder--tall,
  .placeholder--wide,
  .placeholder--panel {
    min-height: 300px;
  }

  .proof {
    padding-block: 36px;
  }
}

@media (max-width: 560px) {
  .formats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .format {
    padding: 16px;
    min-height: 0;
  }

  .format p {
    display: none;
  }

  .card {
    padding: 28px;
  }
}

/* ------------------------------------------- placements without a style attr --
 * `style-src 'self'` has no `unsafe-inline`, which blocks inline `style`
 * attributes as well as `<style>` blocks. Everything positional lives here.
 */
.field--squad {
  inset: -190px -170px auto auto;
  width: 760px;
  height: 760px;
}

.panel-dark__copy,
.panel-dark__action {
  position: relative;
  z-index: 2;
}

.stack--centred {
  align-items: center;
  text-align: center;
}

.stack--centred .lede {
  text-align: center;
}

/* ---------------------------------------------------- the round page ----
 * The same device, cropped differently: the page IS the round, so each hole
 * takes its own ground and the colour changes as a visitor moves down it.
 */
.tee {
  padding-block: 70px 90px;
  min-height: 560px;
}

.field--tee {
  inset: -290px -300px auto auto;
  width: 1080px;
  height: 1080px;
}

.field--green {
  inset: 10px 0 auto 0;
  width: 100%;
  height: 640px;
}

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

.ball--green {
  background: var(--green);
}

.ball--water {
  background: var(--water);
}

.ball--sand {
  background: var(--sand);
}

.ball--pink {
  background: var(--meet-sand-water);
}

.ball--lilac {
  background: var(--meet-all);
}

/*
 * Only the glass moves: a bounded rock about the shape's own centre, tens of
 * seconds per cycle, never a full turn (ADR-038 §4). A shape rotating without
 * end is a spinner. The reduced-motion block at the top of this file stops it
 * outright for anyone who has asked for that.
 */
@keyframes drift {
  0%,
  100% {
    transform: rotate(-3.5deg) translateY(0);
  }

  50% {
    transform: rotate(3.5deg) translateY(-14px);
  }
}

.glass {
  animation: drift 28s ease-in-out infinite;
  transform-origin: center;
}

/* ------------------------------------------------------------- overrides --
 * `.nav a` sets the link colour for the row, and a button inside that row is
 * still an `a` — so the button's own colour has to win here or the label
 * renders ink-on-ink and disappears. It did.
 */
.nav a.button--primary {
  color: var(--cream);
}

.nav a.button--primary:hover {
  color: var(--accent-ink);
}

/*
 * The panel's artwork sits behind copy rather than beside it, so it is carried
 * at a weight the text can survive. At full strength the lede was competing
 * with a bright water lobe and losing.
 */
.panel-dark .field {
  opacity: 0.42;
}

/* 0.62 put this under 4.5:1 on the lime and blossom grounds. */
.eyebrow--on-colour {
  opacity: 0.72;
}

/*
 * Above the sections, not beneath them. Each `.hole` establishes its own
 * stacking context at z-index 2 to sit over the page's artwork, which also put
 * every section's ground over the rail and left the balls floating on nothing.
 * Safe to raise: the rail occupies the left gutter, where no content sits, and
 * it takes no pointer events.
 */
.rail {
  z-index: 3;
  pointer-events: none;
}

/*
 * The rail is absolute against the body, so the body has to be the thing it
 * measures. Without this it resolves against the initial containing block --
 * the viewport -- and stops one screen down, leaving every ball below the fold
 * sitting on nothing.
 */
body {
  position: relative;
}

/*
 * `--accent` on `--lilac` measures 4.33:1. That clears AA for the hero headline,
 * which is large text at 3:1, and fails it for a 12px label. So on a lilac
 * ground the small mono label drops to ink, which measures 12.28:1.
 */
.ground-lilac .mono--accent {
  color: var(--ink);
}

/*
 * A text link in a row is still a tap target. These measured 21-23px tall,
 * under WCAG 2.5.8's 24px floor and well under the 48px this project asks of
 * its own primary controls. Padding rather than a height, so the row keeps its
 * baseline alignment.
 */
.nav__link,
.footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
}

/*
 * A bare `.button` is a button. `/squad/join` and `/download` use the class with
 * no modifier, and without a default fill it rendered as plain accent text --
 * a link wearing a button's padding. The modifiers above still override it.
 */
.button {
  background: var(--ink);
  color: var(--cream);
}