/* Mish website: one stylesheet for every page. Colours, font and shapes match the app.
   Scroll effects use the browser's own scroll animations (no JavaScript). Browsers without them,
   and phones set to reduce motion, simply show everything still. */

/* ---------- Font (stored with the site, so visitors never connect to Google) ---------- */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Colours and shapes (light, then dark following the visitor's phone) ---------- */

:root {
  color-scheme: light dark;
  --page: #F3F2F8;
  --card: #FFFFFF;
  --card-border: transparent;
  --primary: #6C3CF0;
  --primary-soft: rgba(108, 60, 240, 0.1);
  --face: #ECE6FF;
  --text: #16141C;
  --text-2: #6E6A7C;
  --line: rgba(22, 20, 28, 0.1);
  --shadow: 0 1px 2px rgba(22, 20, 28, 0.04), 0 10px 28px rgba(58, 31, 184, 0.08);
  --glow: 0.42;
  --night: #16141C;
  --map-bg: #E6E2F2;
  --map-road: #FFFFFF;
  --map-green: #D3EBD8;
  --brand: linear-gradient(135deg, #3A1FB8 0%, #7B4DFF 52%, #3CCBF4 100%);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0C0B10;
    --card: #1B1921;
    --card-border: rgba(255, 255, 255, 0.06);
    --primary: #9C7CFF;
    --primary-soft: rgba(156, 124, 255, 0.14);
    --face: #2B2440;
    --text: #FFFFFF;
    --text-2: #A7A2B7;
    --line: rgba(255, 255, 255, 0.12);
    --shadow: none;
    --glow: 0.62;
    --night: #1B1921;
    --map-bg: #17151D;
    --map-road: #27232F;
    --map-green: #15261D;
  }
}

/* ---------- Basics ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main {
  overflow-x: hidden; /* moving cards never cause sideways scrolling */
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 8px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3,
.lead {
  text-wrap: balance;
}

.wrap {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

/* The "mish." wordmark: lowercase, heavy, tight, with a violet full stop */
.wordmark {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
}

.wordmark span {
  color: var(--primary);
}

.section {
  padding-top: 48px;
  padding-bottom: 48px;
}

.section-title {
  margin-bottom: 28px;
  text-align: center;
  font-weight: 800;
  font-size: clamp(30px, 8vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
}

.icon svg {
  width: 22px;
  height: 22px;
}

/* ---------- 1. Hero: the floating pin, the wordmark and the tagline ---------- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  padding-top: 36px;
  padding-bottom: 40px;
  text-align: center;
}

.mark {
  position: relative;
  width: 220px;
  height: 190px;
  margin: 0 auto;
}

.mark .glow {
  position: absolute;
  inset: -34px -46px -14px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #6C3CF0, rgba(123, 77, 255, 0.62) 38%, rgba(60, 203, 244, 0.22) 66%, rgba(60, 203, 244, 0) 100%);
  opacity: var(--glow);
}

/* Location "ping" rings on the ground under the pin, like the app when it's finding missions */
.ring {
  position: absolute;
  left: 50%;
  border: 2px solid var(--primary);
  border-radius: 50%;
  opacity: 0;
  animation: ping 3.3s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

.mark .ring {
  top: 152px;
  width: 136px;
  height: 42px;
  margin: -21px 0 0 -68px;
}

.ring.r2 {
  animation-delay: 1.1s;
}

.ring.r3 {
  animation-delay: 2.2s;
}

.mark .pin {
  position: absolute;
  left: 10px;
  top: 0;
  width: 200px;
  animation: bob 3.3s ease-in-out infinite;
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes ping {
  0% {
    transform: scale(0.2);
    opacity: 0.75;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

.hero-wordmark {
  margin-top: 6px;
  font-size: clamp(80px, 25vw, 144px);
}

.tagline {
  margin-top: 14px;
  font-weight: 700;
  font-size: clamp(20px, 5.6vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.tagline span {
  color: var(--primary);
}

.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
}

.soon .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  animation: breathe 2.6s ease-in-out infinite;
}

@keyframes breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(123, 77, 255, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(123, 77, 255, 0);
  }
}

/* ---------- 2. The statement that lights up as you scroll ---------- */

.statement {
  padding-top: 24px;
  padding-bottom: 56px;
}

.lit {
  max-width: 900px;
  margin: 0 auto;
  font-weight: 800;
  font-size: clamp(32px, 8.4vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.lit span {
  display: inline-block;
}

.lit .hl {
  color: var(--primary);
}

.statement-foot {
  max-width: 900px;
  margin: 26px auto 0;
}

.more-below {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: -10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--primary);
  font-weight: 800;
  font-size: 19px;
  text-decoration: none;
}

.more-below svg {
  width: 20px;
  height: 20px;
  animation: nudge 1.8s ease-in-out infinite;
}

@keyframes nudge {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(4px);
  }
}

.aside {
  margin-top: 2px;
  color: var(--text-2);
  font-weight: 600;
}

/* ---------- 3. How it works: a phone that changes as you scroll ---------- */

.how-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the sliding words must never widen the column */
  grid-template-areas:
    "title"
    "phone"
    "steps";
  justify-items: center;
  gap: 28px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 48px 20px;
  text-align: center;
}

.how-title {
  grid-area: title;
  margin: 0;
}

.how-steps {
  grid-area: steps;
  width: 100%;
  max-width: 440px;
}

.steps {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step h3 {
  font-weight: 800;
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.step p {
  margin-top: 6px;
  color: var(--text-2);
}

.dots {
  position: relative;
  display: none;
  gap: 10px;
  width: max-content;
  margin: 16px auto 0;
}

.dots i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
}

.phone {
  grid-area: phone;
  position: relative;
  height: min(62vh, 540px);
  height: min(62svh, 540px);
  aspect-ratio: 9 / 19;
  padding: 2.4%;
  border-radius: 17% / 8%;
  background: #0E0D12;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -30px rgba(58, 31, 184, 0.45);
}

/* The camera cut-out at the top */
.phone::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 3.6%;
  left: 36%;
  width: 28%;
  height: 3.2%;
  border-radius: 999px;
  background: #000000;
}

.phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 15% / 7%;
  background: var(--page);
  container-type: size;
  text-align: left;
}

/* The four screens sit side by side; scrolling slides them along like a finger swipe */
.screens {
  display: flex;
  width: 400%;
  height: 100%;
}

.screen {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 4cqw;
  width: 25%;
  height: 100%;
  padding: 20cqw 6cqw 7cqw;
}

/* Little pieces of the app, drawn to fit the phone */
.app-title {
  font-weight: 800;
  font-size: 9cqw;
  letter-spacing: -0.03em;
}

.app-card {
  padding: 5cqw;
  border: 1px solid var(--card-border);
  border-radius: 6cqw;
  background: var(--card);
  box-shadow: var(--shadow);
}

.app-card.dim {
  opacity: 0.55;
}

.app-tag {
  display: inline-block;
  padding: 1.2cqw 2.8cqw;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  font-size: 3.4cqw;
}

.app-h {
  margin-top: 2.6cqw;
  font-weight: 800;
  font-size: 5.4cqw;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.app-sub {
  margin-top: 1.4cqw;
  color: var(--text-2);
  font-weight: 600;
  font-size: 3.6cqw;
}

.app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4cqw;
}

.app-faces {
  display: flex;
  padding-left: 1.6cqw;
}

.app-faces i,
.app-face {
  display: grid;
  place-items: center;
  width: 8cqw;
  height: 8cqw;
  margin-left: -1.6cqw;
  border: 0.6cqw solid var(--card);
  border-radius: 2.6cqw;
  background: var(--face);
  color: var(--primary);
  font-style: normal;
  font-weight: 800;
  font-size: 3.4cqw;
}

.app-btn {
  padding: 2.2cqw 4.6cqw;
  border-radius: 3.4cqw;
  background: var(--primary);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 3.8cqw;
}

.app-btn.wide {
  display: block;
  margin-top: 4cqw;
  padding: 3.2cqw;
  text-align: center;
  font-size: 4.4cqw;
}

/* Screen 2: a little map with the pin pinging */
.app-map {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: 6cqw;
  background:
    linear-gradient(112deg, transparent 44%, var(--map-road) 44% 49%, transparent 49%),
    linear-gradient(18deg, transparent 62%, var(--map-road) 62% 65.5%, transparent 65.5%),
    linear-gradient(80deg, transparent 20%, var(--map-road) 20% 22.5%, transparent 22.5%),
    radial-gradient(circle at 78% 18%, var(--map-green) 0 22%, transparent 22.5%),
    radial-gradient(circle at 12% 88%, var(--map-green) 0 18%, transparent 18.5%),
    var(--map-bg);
}

.app-map .ring {
  top: 58%;
  width: 34cqw;
  height: 11cqw;
  margin: -5.5cqw 0 0 -17cqw;
  border-width: 0.6cqw;
}

.app-map .map-pin {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 40cqw;
  margin-left: -20cqw;
  translate: 0 -73.5%;
  animation: bob 3.3s ease-in-out infinite;
}

.here {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  font-weight: 800;
  font-size: 5.4cqw;
}

.here svg {
  width: 5.4cqw;
  height: 5.4cqw;
  color: var(--primary);
}

/* Screen 3: the photo post with a drawn sunrise */
.post-head {
  display: flex;
  align-items: center;
  gap: 3cqw;
}

.post-head .app-face {
  width: 10cqw;
  height: 10cqw;
  margin: 0;
  border: 0;
  font-size: 4.4cqw;
}

.post-head .app-h {
  margin: 0;
  font-size: 4.4cqw;
}

.post-head .app-sub {
  margin: 0;
  font-size: 3.2cqw;
}

.post-photo {
  position: relative;
  flex: none;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4cqw;
  background: linear-gradient(180deg, #2A1A6E 0%, #6C3CF0 32%, #E27DB8 60%, #FFB978 80%, #FFE2A8 100%);
}

.sun {
  position: absolute;
  bottom: 20%;
  left: 50%;
  width: 30cqw;
  height: 30cqw;
  margin-left: -15cqw;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF7DE 0 38%, #FFD68A 55%, rgba(255, 214, 138, 0) 71%);
}

.hill {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 36%;
  background: #1C1336;
  clip-path: polygon(0 58%, 16% 34%, 30% 44%, 52% 6%, 70% 36%, 86% 24%, 100% 42%, 100% 100%, 0 100%);
}

.post-actions {
  display: flex;
  gap: 3.4cqw;
  color: var(--text);
}

.post-actions svg {
  width: 6cqw;
  height: 6cqw;
}

.post-actions .liked {
  color: var(--primary);
  fill: var(--primary);
}

/* Screen 4: the streak */
.sc4 {
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
}

.streak-fire {
  font-size: 18cqw;
  line-height: 1;
}

.streak-num {
  margin-top: 1cqw;
  font-weight: 800;
  font-size: 30cqw;
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.streak-label {
  color: var(--text-2);
  font-weight: 700;
  font-size: 5cqw;
}

.round {
  display: flex;
  gap: 2.4cqw;
  margin-top: 8cqw;
}

.round i {
  width: 8.5cqw;
  height: 8.5cqw;
  border: 0.8cqw solid var(--line);
  border-radius: 50%;
}

.round i.on {
  border-color: var(--primary);
  background: var(--primary);
}

.sc4 .app-sub {
  margin-top: 2.6cqw;
}

.app-pill {
  margin-top: 6cqw;
  padding: 2cqw 4.4cqw;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
  font-size: 4.2cqw;
}

@media (min-width: 900px) {
  .how-stage {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title phone"
      "steps phone";
    justify-items: start;
    column-gap: 80px;
    row-gap: 24px;
    align-content: center;
    text-align: left;
  }

  .how-title {
    align-self: end;
  }

  .how-steps {
    align-self: start;
    max-width: 520px;
  }

  .dots {
    margin-left: 0;
  }

  .step h3 {
    font-size: 36px;
  }

  .step p {
    margin-top: 10px;
    font-size: 18px;
  }

  .phone {
    height: min(86vh, 720px);
  }
}

/* ---------- 4. Example missions, dealt out like a hand of cards ---------- */

.missions {
  display: grid;
  gap: 14px;
  max-width: 360px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.mission {
  --from: translateY(56px);
  position: relative;
  padding: 18px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow);
  transform: var(--fan);
  transition: translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mission:nth-child(1) {
  --fan: rotate(-2deg);
}

.mission:nth-child(2) {
  --fan: rotate(1.5deg) translateX(4px);
}

.mission:nth-child(3) {
  --fan: rotate(-1deg);
}

.mission-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tag {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.streak {
  font-size: 14px;
  font-weight: 800;
}

.mission h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.place {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: var(--text-2);
  font-size: 14px;
}

.place svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.mission-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
}

.faces {
  display: flex;
  padding-left: 6px;
}

/* People without a photo: a soft violet square with a violet initial, like the app */
.faces span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: -6px;
  border: 2px solid var(--card);
  border-radius: 10px;
  background: var(--face);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.done {
  color: var(--primary);
}

@media (min-width: 760px) {
  .missions {
    display: flex;
    justify-content: center;
    max-width: none;
    padding: 18px 0 8px;
  }

  .mission {
    flex: none;
    width: 276px;
    margin: 0 -8px;
  }

  .mission:nth-child(1) {
    --fan: rotate(-6deg) translateY(18px);
    --from: translateX(260px) translateY(40px);
  }

  .mission:nth-child(2) {
    --fan: translateY(-6px);
    --from: translateY(40px);
    z-index: 1;
  }

  .mission:nth-child(3) {
    --fan: rotate(6deg) translateY(18px);
    --from: translateX(-260px) translateY(40px);
  }
}

@media (hover: hover) {
  .mission:hover {
    z-index: 2;
    translate: 0 -12px;
  }
}

/* ---------- 5. Made for crews: a grid of tiles ---------- */

.bento {
  display: grid;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.tile {
  padding: 22px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow);
}

.tile h3 {
  margin-top: 16px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.tile p {
  margin-top: 4px;
  color: var(--text-2);
  font-size: 15px;
}

.rsvp {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.rsvp span {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-2);
  font-weight: 700;
  font-size: 13px;
}

.rsvp .in {
  border-color: var(--primary);
  background: var(--primary);
  color: #FFFFFF;
}

.rsvp .maybe {
  border-color: transparent;
  background: var(--primary-soft);
  color: var(--primary);
}

/* Story rings: a violet glow for new stories, a faint line once watched */
.stories {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.stories span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 3px;
  border-radius: 16px;
  background: var(--brand);
}

.stories span.seen {
  background: var(--line);
}

.stories b {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 2px solid var(--card);
  border-radius: 13px;
  background: var(--face);
  color: var(--primary);
  font-weight: 800;
  font-size: 15px;
}

.level {
  margin-top: 16px;
}

.level-top {
  display: flex;
  justify-content: space-between;
  color: var(--text-2);
  font-weight: 700;
  font-size: 13px;
}

.level-top b {
  color: var(--text);
}

.bar {
  height: 10px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.bar i {
  display: block;
  width: 74%;
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
}

@media (min-width: 760px) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
  }

  .tile.wide {
    grid-column: span 2;
  }
}

/* ---------- 6. Privacy ---------- */

.night {
  position: relative;
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
  padding: 44px 24px;
  border-radius: var(--radius-lg);
  background: var(--night);
  color: #FFFFFF;
}

.night::before {
  content: "";
  position: absolute;
  top: -230px;
  right: -230px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(123, 77, 255, 0.85), rgba(90, 60, 230, 0.4) 45%, rgba(60, 203, 244, 0.12) 70%, rgba(60, 203, 244, 0) 100%);
  opacity: 0.55;
}

.night > * {
  position: relative;
}

.eyebrow {
  display: block;
  margin-bottom: 10px;
  color: #B9A4FF;
  font-weight: 800;
  font-size: 15px;
}

.night h2 {
  font-weight: 800;
  font-size: clamp(38px, 11vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.checks {
  display: grid;
  gap: 16px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.checks li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 600;
}

.checks svg {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 9px;
  background: rgba(156, 124, 255, 0.22);
  color: #C6B5FF;
}

@media (min-width: 760px) {
  .night {
    padding: 64px 56px;
  }

  .checks {
    grid-template-columns: 1fr 1fr;
    gap: 22px 40px;
  }
}

/* ---------- 7. The gradient "Townsville, you're first" card ---------- */

.first {
  position: relative;
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
  padding: 44px 24px 46px;
  border-radius: var(--radius-lg);
  background: var(--brand);
  color: #FFFFFF;
  text-align: center;
}

/* Two faint rings in the corners, echoing the pin's ping */
.first::before,
.first::after {
  content: "";
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
}

.first::before {
  top: -90px;
  right: -70px;
  width: 240px;
  height: 240px;
}

.first::after {
  bottom: -120px;
  left: -80px;
  width: 260px;
  height: 260px;
}

.first h2 {
  position: relative;
  font-weight: 800;
  font-size: clamp(32px, 9vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.first p {
  position: relative;
  margin-top: 12px;
  font-weight: 600;
  font-size: 17px;
  opacity: 0.92;
}

/* ---------- Inner pages (Support, Delete account, policies, page not found) ---------- */

.site-header {
  padding: 18px 0 6px;
}

.header-mark {
  display: inline-block;
  font-size: 28px;
}

.page {
  max-width: 680px;
  padding-top: 28px;
  padding-bottom: 64px;
}

.page h1 {
  font-weight: 800;
  font-size: clamp(38px, 10.5vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.lead {
  margin-top: 12px;
  color: var(--text-2);
  font-size: 18px;
}

.page h2 {
  margin: 44px 0 14px;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.page p + p {
  margin-top: 12px;
}

.page strong {
  font-weight: 700;
}

/* The house button: soft violet, solid violet icon square, bold label, chevron */
.action {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
  text-decoration: none;
  transition: transform 0.15s ease;
}

.action:active {
  transform: scale(0.98);
}

.action-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #FFFFFF;
}

.action-icon svg {
  width: 21px;
  height: 21px;
}

.action-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.action-text b {
  font-weight: 800;
  font-size: 16px;
}

.action-text span {
  font-weight: 600;
  font-size: 14px;
  opacity: 0.85;
}

.chev {
  flex: none;
  width: 20px;
  height: 20px;
}

/* Quick answers that open and close */
.faq {
  display: grid;
  gap: 10px;
}

.qa {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow);
}

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

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

.qa summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: -4px 4px 0 0;
  border-right: 2px solid var(--text-2);
  border-bottom: 2px solid var(--text-2);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.qa[open] summary::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.qa summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.qa .answer {
  padding: 0 18px 18px;
  color: var(--text-2);
}

/* Numbered steps, each in its own row */
.numbered {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.numbered li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow);
  font-weight: 600;
  counter-increment: step;
}

.numbered li::before {
  content: counter(step);
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.numbered b {
  font-weight: 800;
}

/* Policy pages: comfortable reading, violet bullets, yellow blanks */
.doc .updated {
  margin-top: 10px;
  color: var(--text-2);
  font-weight: 600;
  font-size: 14px;
}

.doc > p,
.doc li {
  line-height: 1.65;
}

.doc > p {
  margin-top: 14px;
}

.doc h2 {
  scroll-margin-top: 20px;
}

.doc h3 {
  margin: 26px 0 8px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.doc ul,
.doc ol {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.doc ul li {
  position: relative;
  padding-left: 20px;
}

.doc ul li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

.doc ol {
  counter-reset: item;
}

.doc ol li {
  position: relative;
  padding-left: 34px;
  counter-increment: item;
}

.doc ol li::before {
  content: counter(item);
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
  font-size: 13px;
}

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

.summary {
  margin-top: 26px;
  padding: 20px 22px 22px;
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
}

.doc .summary-title {
  margin: 0 0 4px;
  color: var(--primary);
  font-size: 18px;
}

.summary ul {
  margin-top: 10px;
}

/* Blanks still to fill in: highlighted in yellow (never published) */
mark {
  padding: 0 0.25em;
  border-radius: 4px;
  background: #FFE66D;
  color: #16141C;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Filled in and waiting for the owner's OK: green (removed once approved) */
mark.done {
  background: #BDF3CB;
  color: #0F3A1C;
}

mark.done a {
  color: inherit;
}

.table-wrap {
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow);
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table-wrap th,
.table-wrap td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.table-wrap th {
  color: var(--text-2);
  font-weight: 800;
  font-size: 13px;
}

.table-wrap tr:last-child td {
  border-bottom: 0;
}

.table-wrap td:last-child {
  white-space: nowrap;
}

/* Page not found */
.lost {
  display: grid;
  place-content: center;
  min-height: 72vh;
  min-height: 72svh;
  padding-top: 24px;
  padding-bottom: 48px;
  text-align: center;
}

.lost h1 {
  margin-top: 8px;
  font-weight: 800;
  font-size: clamp(36px, 10vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.lost .action {
  width: max-content;
  margin: 26px auto 0;
  padding-right: 18px;
  text-align: left;
}

/* ---------- Footer (every page) ---------- */

.site-footer {
  padding: 8px 0 44px;
  color: var(--text-2);
  font-size: 14px;
  text-align: center;
}

.footer-mark {
  display: inline-block;
  font-size: 30px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 4px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-2);
  font-weight: 600;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--primary);
}

/* ---------- Scroll effects (only where the browser supports them and motion is welcome) ---------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Hero: the intro gently shrinks and fades as you scroll away */
    .hero {
      view-timeline-name: --hero;
    }

    .hero-inner {
      animation: hero-out linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }

    /* Statement: each line lights up as it reaches the middle of the screen */
    .lit span {
      animation: light-up linear both;
      animation-timeline: view();
      animation-range: cover 5% cover 35%;
    }

    .statement-foot {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }

    html {
      scroll-behavior: smooth;
    }

    /* How it works on computers: the phone stays put and its screens swipe along with your scroll.
       (Phones and tablets get the swipeable carousel instead, further down.) */
    @media (pointer: fine) {
      .how {
        height: 240vh;
        view-timeline-name: --how;
      }

      .how-stage {
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100svh;
        align-content: center;
        gap: 20px;
        padding-top: 0;
        padding-bottom: 0;
      }

      .steps-window {
        overflow: hidden;
      }

      .steps {
        display: flex;
        gap: 0;
        width: 400%;
      }

      .step {
        flex: none;
        width: 25%;
        padding: 0 4px;
      }

      .dots {
        display: flex;
      }

      .screens,
      .steps {
        animation: swipe linear both;
        animation-timeline: --how;
        animation-range: contain 0% contain 100%;
      }

      /* The phone can also be dragged sideways with the mouse (how-it-works.js) */
      .phone {
        cursor: grab;
        -webkit-user-select: none;
        user-select: none;
      }

      .phone:active {
        cursor: grabbing;
      }

      .phone img {
        -webkit-user-drag: none;
      }

      .dots::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--primary);
        animation: thumb linear both;
        animation-timeline: --how;
        animation-range: contain 0% contain 100%;
      }

      /* While the phone is being dragged, the dot follows the mouse instead of the page */
      .dots.dragging::after {
        animation: none;
        transform: translateX(var(--thumb, 0px));
      }

      .dots.settling::after {
        transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
      }
    }

    /* Missions: dealt out of one pile into a fan */
    .mission {
      animation: deal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    /* Tiles, privacy points and the Townsville card rise in as they arrive */
    .tile,
    .checks li,
    .night h2 {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }

    .tile:nth-child(3n + 2) {
      animation-range: entry 10% entry 90%;
    }

    .tile:nth-child(3n) {
      animation-range: entry 20% entry 100%;
    }

    .first {
      animation: grow linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .qa {
      interpolate-size: allow-keywords;
    }

    .qa::details-content {
      height: 0;
      overflow: clip;
      transition: height 0.3s ease, content-visibility 0.3s allow-discrete;
    }

    .qa[open]::details-content {
      height: auto;
    }
  }
}

@keyframes hero-out {
  to {
    opacity: 0.2;
    transform: scale(0.95);
  }
}

@keyframes light-up {
  from {
    opacity: 0.28;
  }
  to {
    opacity: 1;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(44px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes swipe {
  0%,
  6% {
    transform: translateX(0);
  }
  30%,
  38% {
    transform: translateX(-25%);
  }
  62%,
  70% {
    transform: translateX(-50%);
  }
  94%,
  100% {
    transform: translateX(-75%);
  }
}

@keyframes thumb {
  0%,
  6% {
    transform: translateX(0);
  }
  30%,
  38% {
    transform: translateX(18px);
  }
  62%,
  70% {
    transform: translateX(36px);
  }
  94%,
  100% {
    transform: translateX(54px);
  }
}

@keyframes deal {
  from {
    opacity: 0;
    transform: var(--from);
  }
  35% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: var(--fan);
  }
}

@keyframes grow {
  from {
    opacity: 0.5;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Phones and tablets: How it works is swiped sideways (how-it-works.js) ---------- */

@media (pointer: coarse) {
  /* Up/down stays with the page; sideways swipes anywhere in the section move the phone's screens */
  .how-stage {
    touch-action: pan-y;
  }

  .steps-window {
    overflow: hidden;
  }

  .steps {
    display: flex;
    gap: 0;
    width: 400%;
  }

  .step {
    flex: none;
    width: 25%;
    padding: 0 4px;
  }

  .dots {
    display: flex;
  }

  .dots::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--primary);
    transform: translateX(var(--thumb, 0px));
  }

  .dots.settling::after {
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

/* ---------- Calm version for people who turn animations off on their phone ---------- */

@media (prefers-reduced-motion: reduce) {
  .ring,
  .mark .pin,
  .map-pin,
  .soon .dot,
  .more-below svg {
    animation: none;
  }

  .ring.r1 {
    opacity: 0.35;
    transform: scale(1);
  }

  .mission {
    transition: none;
  }
}