/* ============================================================
   Mapelle. Website.
   The colours are the app's own: the fog over the map, the deep
   blues of its screens, the mint of your arrow, and the blue to
   teal of its icon. The site should read as part of the app.
   ============================================================ */

:root {
  --fog: #0A1722;
  --deep: #0E2937;
  --mid: #163A52;
  --sea: #1F5670;
  --line: rgba(196, 230, 255, 0.14);
  --line-strong: rgba(196, 230, 255, 0.28);

  --text: #F4FBFF;
  --text-soft: rgba(228, 239, 247, 0.76);
  --text-dim: rgba(228, 239, 247, 0.5);

  --mint: #62F1C5;
  --mint-ink: #06202A;
  --icon-a: #0A7BF0;
  --icon-b: #10CFC0;

  --max: 1120px;
  --pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--fog);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(98, 241, 197, 0.32); }

/* ---------- top bar ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--pad);
  border-bottom: 1px solid transparent;
}

/* Nothing on the site glides until the page stands as written: script.js puts "ready" on <html> then.
   Why: Safari can work out a first look for the page before the style sheets have arrived, and a glide
   then sets off from the browser's own defaults. The top links came up blue, with a dark line under the bar. */
.ready .nav { transition: background 220ms ease, border-color 220ms ease; }

/* Once the page has moved under it, the bar gets a dark ground of its own. */
.nav.stuck {
  background: rgba(10, 23, 34, 0.94); /* nearly solid: words passing under it must not show through where the blur is not drawn */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

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

.brand img { width: 28px; height: 28px; }

/* The app's own wordmark: heavy, narrow, leaning. */
.brand span {
  font-family: 'Avenir Next Condensed', 'AvenirNextCondensed-Heavy', 'Arial Narrow', 'Inter', sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 19px;
  letter-spacing: 0.09em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 34px);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-soft);
}

.ready .nav-links a { transition: color 160ms ease; }
.nav-links a:hover { color: var(--text); }
.nav-links .here { color: var(--mint); }

@media (max-width: 640px) {
  .nav-links .wide { display: none; }
}

/* ---------- the map under fog ---------- */

.fog {
  display: block;
  width: 100%;
  height: 100%;
  /* A finger moving up and down still scrolls the page. Across, it wipes the fog. */
  touch-action: pan-y;
}

/* ---------- the opening ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--fog);
}

.hero-map {
  position: absolute;
  inset: 0;
}

/* The words sit on fog that has been left alone, so they are always read. */
.hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 23, 34, 0.9) 0%, rgba(10, 23, 34, 0.62) 34%, rgba(10, 23, 34, 0) 62%),
    linear-gradient(180deg, rgba(10, 23, 34, 0.55) 0%, rgba(10, 23, 34, 0) 22%, rgba(10, 23, 34, 0) 80%, rgba(10, 23, 34, 0.9) 100%);
}

.hero-words {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 120px var(--pad) 96px;
  pointer-events: none;
}

.hero h1 {
  margin: 0;
  font-size: clamp(40px, 6.6vw, 88px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 30px rgba(10, 23, 34, 0.6);
}

/* On a wide screen each of the heading's two lines stays one line. */
@media (min-width: 900px) {
  .hero h1 { white-space: nowrap; }
}

.mint { color: var(--mint); }

.hero-sub {
  margin: 22px 0 0;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--text-soft);
  font-weight: 500;
  max-width: 520px;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.facts li { display: flex; align-items: center; gap: 9px; }

.facts li::before {
  content: '';
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--mint);
}

.hint {
  margin: 34px 0 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-soft);
  animation: breathe 2.4s ease-in-out infinite;
}

/* It is only shown once the fog is there to be wiped (fog.js puts "fog-on" on <html>), and it is worded
   for a finger on a screen that has no mouse. */
html:not(.fog-on) .hint { visibility: hidden; }
.by-finger { display: none; }
@media (hover: none) {
  .by-mouse { display: none; }
  .by-finger { display: inline; }
}

.hint.done { animation: none; opacity: 0; transition: opacity 400ms ease; }

@keyframes breathe {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

/* On a phone, or any screen taller than it is wide, the map has the top of the
   screen and the words the bottom, as in the app. (fog.js lays the arrow's way
   out for the same two shapes: keep the two in step.) */
@media (max-width: 760px), (max-aspect-ratio: 20/21) {
  .hero { align-items: flex-end; }
  .hero-shade {
    background:
      linear-gradient(180deg, rgba(10, 23, 34, 0.5) 0%, rgba(10, 23, 34, 0) 16%, rgba(10, 23, 34, 0) 42%, rgba(10, 23, 34, 0.92) 62%, rgba(10, 23, 34, 1) 100%);
  }
  /* The map keeps at least this much of the top to itself, however short the screen. */
  .hero-words { padding: 300px var(--pad) 44px; }
  /* Sized by the screen's width so that each of the heading's two lines stays one line. */
  .hero h1 { font-size: clamp(30px, 9.4vw, 54px); }
  .hint { margin-top: 22px; }
}

/* ---------- the parts of the page ---------- */

.part {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 122px) var(--pad);
}

.part h2 {
  margin: 0;
  font-size: clamp(32px, 5vw, 62px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.03em;
  /* Lines of about the same length, so no word is left on a line by itself. */
  text-wrap: balance;
}

.part p { margin: 0; }

.lede {
  margin-top: 20px !important;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--text-soft);
  max-width: 560px;
}

/* Parts come up into place as they are scrolled to. script.js sets a part waiting ("wait") a little below
   its place, and lets it go when it is scrolled to. With no script every part is simply in its place. */
.rise.wait { opacity: 0; transform: translateY(26px); }
.ready .rise { transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }

/* The story: one long sentence in big words. */
.story p {
  font-size: clamp(26px, 3.9vw, 50px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.025em;
  max-width: 980px;
  text-wrap: balance;
}

.story .quiet { color: var(--text-dim); }

.story .after {
  margin-top: 28px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-soft);
  max-width: 560px;
}

/* How it works: three steps, each a number and a few words. No boxes. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(40px, 6vw, 76px);
}

.step { border-top: 2px solid var(--line-strong); padding-top: 22px; }

.step b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--mint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.step h3 {
  margin: 12px 0 0;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.step p { margin-top: 10px; color: var(--text-soft); font-size: 16.5px; }

@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; }
}

/* A part with words on one side and a piece of map on the other. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

.split.flip .split-words { order: 2; }

.map-piece {
  position: relative;
  height: clamp(300px, 40vw, 470px);
  border-radius: 28px;
  overflow: hidden;
  background: var(--fog);
  box-shadow: 0 30px 80px rgba(2, 10, 16, 0.55), 0 0 0 1px var(--line);
}

.map-note {
  margin-top: 14px !important;
  font-size: 14px;
  color: var(--text-dim);
  font-weight: 600;
}

/* A list of plain statements, each with the mint mark the app uses. */
.points {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  max-width: 560px;
}

.points li {
  position: relative;
  padding-left: 30px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-soft);
}

.points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: var(--mint);
}

.points strong { color: var(--text); font-weight: 700; }

@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split.flip .split-words { order: 0; }
  .map-piece { height: clamp(260px, 72vw, 400px); }
}

/* Looking back: the same things said big, in two columns of words. */
.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 72px);
  margin-top: clamp(36px, 5vw, 60px);
}

.pair h3 {
  margin: 0;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.pair p { margin-top: 10px; color: var(--text-soft); font-size: 16.5px; }

.pair > div { border-top: 2px solid var(--line-strong); padding-top: 22px; }

@media (max-width: 720px) {
  .pair { grid-template-columns: 1fr; }
}

/* Yours alone: the darkest part of the page, with the icon's colours behind the heading. */
.own {
  position: relative;
  background: linear-gradient(180deg, var(--fog) 0%, var(--deep) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.own h2 span {
  background: linear-gradient(100deg, #6FC3FF 0%, var(--mint) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The end: free, forever. */
.end {
  text-align: center;
  padding-bottom: clamp(80px, 12vw, 160px);
}

.end h2 { font-size: clamp(44px, 9vw, 120px); line-height: 0.98; }

.end .lede { margin-left: auto; margin-right: auto; }

/* Where the app stands. It is said, not offered: it must not look like a button, because there is nothing to press yet. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px !important;
  font-weight: 800;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: -0.01em;
  color: var(--text);
}

.status::before {
  content: '';
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--mint);
}

.end .small {
  margin-top: 18px !important;
  font-size: 15px;
  color: var(--text-dim);
}

.end .small a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- foot ---------- */

.foot {
  border-top: 1px solid var(--line);
  background: #081119;
}

.foot-cols {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px var(--pad) 28px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
}

.foot-tag { margin: 14px 0 0; color: var(--text-dim); font-size: 15px; max-width: 280px; }

.foot h4 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

.foot-col a {
  display: block;
  padding: 5px 0;
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 500;
}

.foot-col a:hover { color: var(--text); }

.foot-bottom {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--pad) 44px;
  color: var(--text-dim);
  font-size: 13.5px;
}

.foot-bottom p { margin: 0 0 6px; }

@media (max-width: 760px) {
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-col-brand { grid-column: 1 / -1; }
}

/* ---------- the reading pages (support, privacy, terms) ---------- */

.doc-top {
  max-width: 820px;
  margin: 0 auto;
  padding: 150px var(--pad) 10px;
}

.doc-top h1 {
  margin: 0;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.doc-top p { margin: 16px 0 0; color: var(--text-soft); font-size: 18px; max-width: 600px; }

.doc-date { color: var(--text-dim) !important; font-size: 15px !important; font-weight: 600; }

.doc {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px var(--pad) 110px;
  font-size: 17px;
  color: var(--text-soft);
}

.doc h2 {
  margin: 54px 0 12px;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}

.doc h3 { margin: 30px 0 8px; font-size: 18px; font-weight: 800; color: var(--text); }

.doc p { margin: 0 0 14px; }

.doc ul { margin: 0 0 16px; padding-left: 22px; }

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

.doc strong { color: var(--text); font-weight: 700; }

.doc a, .doc-top a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }

/* The short version at the top of the privacy page. */
.short {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.short li {
  position: relative;
  padding-left: 30px;
  margin: 0;
  color: var(--text);
  font-weight: 600;
}

.short li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: var(--mint);
}

/* Who to write to: plain lines, not boxes. */
.ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 820px;
  margin: 0 auto;
  padding: 34px var(--pad) 0;
}

.ways a {
  display: block;
  border-top: 2px solid var(--line-strong);
  padding-top: 18px;
  text-decoration: none;
  color: var(--text);
}

.ways a:hover { border-top-color: var(--mint); }

.ways strong { display: block; font-size: 19px; font-weight: 900; letter-spacing: -0.01em; }

.ways span { display: block; margin-top: 6px; color: var(--text-soft); font-size: 15.5px; }

@media (max-width: 700px) {
  .ways { grid-template-columns: 1fr; }
}

/* Questions that open. */
.faq { border-top: 1px solid var(--line); }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 34px 20px 0;
  position: relative;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

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

.faq summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -8px;
  border-right: 2.5px solid var(--mint);
  border-bottom: 2.5px solid var(--mint);
  transform: rotate(45deg);
}

.ready .faq summary::after { transition: transform 200ms ease; }

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

.faq details p { margin: 0 0 20px; max-width: 680px; }

/* ---------- less movement, for those who ask for it ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ready .rise, .rise.wait { opacity: 1; transform: none; transition: none; }
  .hint { animation: none; opacity: 0.9; }
}