/* The Pirate Deal website: white, with almost-black writing, a room drawn in faint lines, and the game's own bright cards and pirates. */

@font-face { font-family: 'Fredoka'; src: url('/fonts/fredoka-700.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/nunito-700.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/nunito-900.ttf') format('truetype'); font-weight: 900; font-display: swap; }

:root {
  color-scheme: light;
  --page: #FFFFFF;
  --panel: #FFFFFF;
  --panel-edge: #E5E7EB;
  --ink: #15171C;
  --soft: #5B6270;
  --line: rgba(21, 23, 28, 0.08);
  --link: #0B78AD;
  --accent: #C2620A;
  /* The dirty tricks panel stays dark, so its words read over the card pictures. */
  --night: #0F2152;
  --gold: #FFDE59;
  --gold-edge: #F7931A;
  --white: #FFFFFF;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 700 17px/1.5 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  overflow-x: hidden;
}
/* A plain grid behind everything, faded to white in the middle of the screen. It stays put while the page scrolls past. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 56% at 50% 48%, var(--page) 28%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(to right, rgba(21, 23, 28, 0.07) 1px, transparent 1px) center / 56px 56px,
    linear-gradient(to bottom, rgba(21, 23, 28, 0.07) 1px, transparent 1px) center / 56px 56px,
    var(--page);
}
img { max-width: 100%; height: auto; }
a { color: var(--link); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 700; line-height: 1.2; margin: 0; color: var(--ink); }
h2 { font-size: clamp(28px, 5vw, 42px); text-align: center; text-wrap: balance; }
h3 { font-size: 22px; }
/* The small capitals above a heading. */
.eyebrow { margin: 0 0 10px; text-align: center; color: var(--accent); font-size: 13px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- The bar along the top ---------- */

.nav {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 clamp(16px, 3vw, 40px);
  transition: background 0.25s, box-shadow 0.25s;
}
/* Once the page has scrolled, the bar gets a background of its own. */
.nav.scrolled { background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: clamp(14px, 2.4vw, 30px); }
.nav-links a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 900; text-decoration: none; opacity: 0.86; transition: opacity 0.15s; }
.nav-links a:hover { opacity: 1; }
.nav-links svg { width: 20px; height: 20px; fill: none; stroke: var(--soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-links svg .fill { fill: var(--soft); stroke: none; }
.nav-home { line-height: 0; border-radius: 50%; transition: transform 0.2s; }
.nav-home:hover { transform: rotate(-12deg) scale(1.06); }
.nav-home img { width: 50px; height: 50px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.15)); }
.download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px 0 20px;
  border-radius: 14px;
  background: var(--gold);
  box-shadow: 0 4px 0 var(--gold-edge);
  color: #5A3300;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.15s;
}
.download:hover { transform: translateY(-2px); }
.download:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-edge); }
.download svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.download svg .solid { fill: currentColor; stroke: none; }

/* ---------- The top: the logo, and a hand of cards that turns ---------- */

.hero {
  /* How wide the middle card is; the whole hand is measured from it. */
  --w: clamp(190px, min(20vw, 30vh), 290px);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(100svh, 700px);
  padding-top: 80px;
  overflow: hidden;
}
.hero-main { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: clamp(16px, 4vh, 44px) 16px 30px; text-align: center; }
.logo { position: relative; line-height: 0; }
.logo img { width: min(56vw, 760px, 84vh); filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.08)); }
/* A cartoon shine: a slanted streak of light sweeps across the letters, quickly, every 4.5 seconds.
   It's cut to the shape of the letters by using the logo itself as a stencil. */
.logo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) 47.3%, rgba(255, 255, 255, 0.8) 48%, rgba(255, 255, 255, 0.8) 52%, rgba(255, 255, 255, 0) 52.7%) 0 0 / 300% 100% no-repeat;
  -webkit-mask: url(/img/logo.svg) center / 100% 100% no-repeat;
  mask: url(/img/logo.svg) center / 100% 100% no-repeat;
  animation: shine 4.5s 1s infinite;
}
/* 100% puts the streak off to the left of the letters, 0% off to the right. */
@keyframes shine {
  0% { background-position: 100% 0; animation-timing-function: linear; }
  11%, 100% { background-position: 0% 0; }
}
.tagline { max-width: 34em; margin: clamp(14px, 3vh, 28px) 0 0; color: var(--soft); text-wrap: balance; }
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(14px, 2.6vh, 24px); }

/* The hand: every card turns around one spot far below it, so they fan out in an arc. */
.hand { position: relative; z-index: 1; flex: none; height: calc(var(--w) * 1.12); margin-top: auto; }
/* The cards fade away at the bottom rather than stopping at a hard line. */
.hero::after { content: ''; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: calc(var(--w) * 0.4); background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--page)); pointer-events: none; }
.hand img {
  position: absolute;
  left: 50%;
  bottom: calc(var(--w) * -0.32);
  width: var(--w);
  margin-left: calc(var(--w) / -2);
  transform-origin: 50% 260%;
  transform: rotate(calc(var(--slot, 0) * 14deg)) scale(var(--big, 1));
  opacity: var(--show, 1);
  z-index: var(--z, 1);
  filter: drop-shadow(0 16px 24px rgba(16, 24, 40, 0.22));
  transition: transform 0.85s cubic-bezier(0.3, 1.25, 0.45, 1), opacity 0.45s;
  cursor: pointer;
}
.hand img:nth-child(1) { --slot: -4; --show: 0; }
.hand img:nth-child(2) { --slot: -3; --z: 2; }
.hand img:nth-child(3) { --slot: -2; --z: 3; }
.hand img:nth-child(4) { --slot: -1; --z: 4; }
.hand img:nth-child(5) { --slot: 0; --z: 5; --big: 1.06; }
.hand img:nth-child(6) { --slot: 1; --z: 4; }
.hand img:nth-child(7) { --slot: 2; --z: 3; }
.hand img:nth-child(8) { --slot: 3; --z: 2; }
.hand img:nth-child(9) { --slot: 4; --show: 0; }
.js .hand { animation: rise 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.05) both; }
@keyframes rise { from { transform: translateY(70%); } }

/* Pirates drifting round the edges. */
.floaters img { position: absolute; z-index: 0; width: clamp(90px, 8vw, 130px); animation: drift 7s ease-in-out infinite; }
.floaters .f1 { left: 5%; top: 24%; --tilt: -8deg; }
.floaters .f2 { right: 6%; top: 19%; --tilt: 7deg; animation-delay: -2s; animation-duration: 8s; }
.floaters .f3 { left: 11%; top: 52%; --tilt: 6deg; width: clamp(70px, 6vw, 100px); animation-delay: -4s; animation-duration: 9s; opacity: 0.85; }
.floaters .f4 { right: 12%; top: 48%; --tilt: -6deg; width: clamp(70px, 6vw, 100px); animation-delay: -1s; animation-duration: 7.5s; opacity: 0.85; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(var(--tilt)); }
  50% { transform: translate(6px, -16px) rotate(calc(var(--tilt) * -0.4)); }
}

/* The buttons to the App Store and Google Play. */
.store {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 52px;
  padding: 0 18px 0 14px;
  border: 1.5px solid #A6A6A6;
  border-radius: 12px;
  background: #000;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s;
}
.store:hover { transform: translateY(-2px); }
/* Until launch day the buttons don't lead anywhere, so they don't lift or look clickable. */
.store:not([href]) { cursor: default; }
.store:not([href]):hover { transform: none; }
.soon-note { margin: 12px 0 0; color: var(--soft); font-size: 15px; font-weight: 900; letter-spacing: 0.02em; }
.store svg { flex: none; width: 26px; height: 26px; }
.store span { display: flex; flex-direction: column; align-items: flex-start; font: 600 21px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing: -0.01em; }
.store small { margin-bottom: 3px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.store-google small { text-transform: uppercase; font-size: 10px; }

/* ---------- A real game, filmed, in a phone on a big dark panel ---------- */

.watch { max-width: 1240px; padding-top: clamp(40px, 6vw, 72px); }
.watch-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding: clamp(28px, 4vw, 56px) clamp(28px, 6vw, 96px);
  overflow: hidden;
  border-radius: 36px;
  background: var(--night);
  color: var(--white);
  box-shadow: 0 24px 50px rgba(16, 24, 40, 0.22);
}
/* The game's own colours glowing softly behind the phone. */
.watch-glow { position: absolute; inset: -20%; background: url('/img/gameplay-poster.webp') 75% 50% / cover no-repeat; filter: blur(60px) saturate(1.3); opacity: 0.45; }
.watch-copy { position: relative; }
.kicker { margin: 0 0 6px; color: var(--gold); font-size: 13px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.watch h2 { color: var(--white); text-align: left; font-size: clamp(38px, 5.4vw, 68px); line-height: 1.02; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); }
.watch-text { max-width: 24em; margin: 16px 0 0; color: #DCE4F7; font-size: 18px; }
.watch-phone { position: relative; width: clamp(240px, 22vw, 300px); }
.watch-phone video { display: block; width: 100%; height: auto; border-radius: 13.5% / 6.2%; background: #2A8CD0; }
.watch-toggle { position: absolute; right: -14px; bottom: 26px; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 50%; background: rgba(6, 14, 36, 0.6); color: var(--white); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.watch-toggle:hover { background: rgba(6, 14, 36, 0.8); }
.watch-toggle svg { width: 20px; height: 20px; }
.watch-toggle .pause { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.watch-toggle .play { fill: currentColor; display: none; }
.watch-toggle.paused .pause { display: none; }
.watch-toggle.paused .play { display: block; }

/* ---------- The sections ---------- */

section { max-width: 1080px; margin: 0 auto; padding: clamp(64px, 9vw, 110px) 16px 0; }
.sub { margin: 12px auto 0; max-width: 34em; text-align: center; color: var(--soft); text-wrap: balance; }
.card { background: var(--panel); border: 2px solid var(--panel-edge); border-bottom-width: 5px; border-radius: 22px; }
/* Sections rise into view as the page scrolls to them. */
.js .reveal { opacity: 0; transform: translateY(50px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.3, 1); }
.js .reveal.in { opacity: 1; transform: none; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; margin-top: 34px; }
.step { padding: 12px 12px 20px; }
.step img { display: block; width: 100%; border-radius: 14px; }
.step h3 { margin: 16px 6px 4px; }
.step p { margin: 0 6px; color: var(--soft); }

/* The phones: a wide panel of its own. */
.band { max-width: none; padding-left: 12px; padding-right: 12px; }
.band-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) 0 clamp(36px, 5vw, 56px);
  border-radius: 36px;
  background: #F2F5F9;
}
.band h2 { padding: 0 16px; }
.phones {
  display: flex;
  gap: clamp(16px, 4vw, 40px);
  margin-top: 30px;
  padding: 10px 16px 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.phones::-webkit-scrollbar { display: none; }
.phone { flex: 1 0 min(70vw, 270px); max-width: 300px; margin: 0 auto; scroll-snap-align: center; }
/* A phone: the same edge all the way round, so the screen sits exactly in the middle. */
.phone-frame { position: relative; padding: 8px; border-radius: 15.5% / 7.3%; background: #16324A; box-shadow: 0 16px 30px rgba(16, 24, 40, 0.25); }
.phone-frame img { display: block; width: 100%; border-radius: 13.5% / 6.2%; }
.phone-frame::after {
  content: '';
  position: absolute;
  top: calc(8px + 1.25%);
  left: 50%;
  width: 30%;
  aspect-ratio: 126 / 37;
  border-radius: 999px;
  transform: translateX(-50%);
  background: #0B1620;
}
.phone figcaption { margin-top: 18px; color: var(--ink); text-align: center; font-weight: 900; }

/* ---------- Tap a pirate ---------- */

.cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 44vw), 1fr)); gap: 12px; margin-top: 44px; }
.pirate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px 14px;
  background: var(--panel);
  border: 2px solid var(--panel-edge);
  border-bottom-width: 5px;
  border-radius: 22px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pirate:active { transform: translateY(3px); border-bottom-width: 2px; margin-bottom: 3px; }
.pirate:hover img, .pirate.talking img { transform: translateY(-4px); }
.pirate img { position: relative; width: 78%; padding: 4px 6px 0; border-radius: 50% 50% 16px 16px; background: var(--c); transition: transform 0.18s; }
/* A little speaker, as on the shop's emotes. */
.pirate::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #EAF8FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 9.5v5h3.5L12 18.5v-13L7.5 9.5z' fill='%231CB0F6' stroke='%231CB0F6' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11' stroke='%231CB0F6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.name { margin-top: 10px; font: 700 18px/1.2 'Fredoka', sans-serif; }
.pirate .line { margin-top: 3px; color: var(--soft); font-size: 14px; line-height: 1.3; text-wrap: balance; }
.bubble {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(100% - 26px);
  width: max-content;
  max-width: 170px;
  padding: 7px 13px;
  background: var(--white);
  border: 2px solid #E5E5E5;
  border-bottom-width: 4px;
  border-radius: 16px;
  font: 700 16px/1.2 'Fredoka', sans-serif;
  color: #3F4A52;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.4);
  transform-origin: 30% 100%;
}
.bubble::after {
  content: '';
  position: absolute;
  left: 26%;
  bottom: -9px;
  width: 13px;
  height: 13px;
  background: var(--white);
  border-right: 3px solid #E5E5E5;
  border-bottom: 3px solid #E5E5E5;
  transform: rotate(45deg);
  border-bottom-right-radius: 3px;
}
.talking .bubble { opacity: 1; transform: translateX(-50%) scale(1); animation: pop 0.34s cubic-bezier(0.3, 1.6, 0.6, 1); }
@keyframes pop { from { opacity: 0; transform: translateX(-50%) scale(0.4); } }
.more { margin: 22px 0 0; text-align: center; font: 700 22px/1.2 'Fredoka', sans-serif; color: var(--soft); }

/* ---------- What else there is ---------- */

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; margin-top: 30px; }
.feature { display: flex; align-items: center; gap: 14px; padding: 14px; }
.feature > img, .lang-mark { flex: none; width: 66px; height: 66px; object-fit: contain; }
.feature h3 { font-size: 20px; }
.feature p { margin: 2px 0 0; font-size: 15px; line-height: 1.35; color: var(--soft); }
.lang-mark { display: flex; align-items: center; justify-content: center; border-radius: 18px; background: #1CB0F6; color: var(--white); font: 700 24px/1 'Fredoka', 'PingFang SC', 'Microsoft YaHei', sans-serif; }

.cta { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: clamp(64px, 9vw, 110px); }
.cta img { display: block; width: 150px; margin: 0 auto 6px; }
.cta p { margin: 10px auto 22px; max-width: 28em; color: var(--soft); text-wrap: balance; }

.footer { padding: 26px 16px 34px; border-top: 1px solid var(--line); background: var(--page); text-align: center; }
.footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font-weight: 900; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer p { margin: 12px 0 0; color: var(--soft); font-size: 14px; }

/* ---------- Smaller screens ---------- */

/* Tablets and small laptops: the pirates come in, and the panel stacks. */
@media (max-width: 1100px) {
  /* Only as tall as what's in it, so there's no gap above the cards on a tablet held upright. */
  .hero { --w: clamp(190px, min(30vw, 32vh), 270px); min-height: 0; }
  .hand { margin-top: 40px; }
  .floaters .f3, .floaters .f4 { display: none; }
  .floaters .f1 { left: 3%; top: 20%; }
  .floaters .f2 { right: 3%; top: 16%; }
  .logo img { width: min(66vw, 680px, 80vh); }
  /* The words above, the phone under them. */
  .watch-panel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .watch h2 { text-align: center; }
  .watch-text { margin-left: auto; margin-right: auto; }
}
/* Phones: the coin and the Download button up top; three cards in the hand. */
@media (max-width: 700px) {
  html { scroll-padding-top: 74px; }
  .nav { height: 68px; }
  .nav-links { display: none; }
  .nav-home img { width: 44px; height: 44px; }
  .download { height: 40px; padding: 0 14px 0 16px; font-size: 15px; }
  .hero { --w: min(52vw, 210px); min-height: 0; padding-top: 68px; }
  .hero-main { padding: 26px 16px 0; }
  .logo img { width: 100%; }
  .tagline { font-size: 15.5px; }
  .store { height: 46px; padding: 0 14px 0 11px; gap: 7px; }
  .store svg { width: 22px; height: 22px; }
  .store span { font-size: 18px; }
  .hand { height: calc(var(--w) * 1.18); margin-top: 34px; }
  .hand img { transform: rotate(calc(var(--slot, 0) * 19deg)) scale(var(--big, 1)); }
  .floaters { display: none; }
  .watch-panel { padding: 30px 20px 26px; border-radius: 26px; gap: 26px; }
  .watch h2 { font-size: clamp(34px, 10vw, 44px); }
  .watch-text { font-size: 16px; }
  .watch-phone { width: min(72vw, 270px); }
  .band-inner { border-radius: 26px; }
}

/* ---------- The Help, Delete and lost pages ---------- */

.page-top { padding: 26px 16px 28px; border-bottom: 2px solid var(--panel-edge); background: #F2F5F9; text-align: center; }
.page-top a { display: inline-block; line-height: 0; }
.page-top img { width: min(62vw, 260px); }
.page { max-width: 720px; margin: 0 auto; padding: 34px 16px 56px; }
.page h1 { font-size: clamp(30px, 6vw, 40px); text-align: center; text-wrap: balance; }
.page .intro { margin: 8px auto 26px; text-align: center; color: var(--soft); text-wrap: balance; }
.page h2 { font-size: 24px; text-align: left; margin: 30px 0 10px; }
.page section, .page .plain { padding: 0; }
.faq { margin: 0 0 8px; padding: 0; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 10px; height: 10px; margin-right: 3px; border-right: 3px solid var(--accent); border-bottom: 3px solid var(--accent); border-radius: 2px; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s; }
.faq[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq div { padding: 0 16px 14px; color: var(--soft); }
.faq p { margin: 0 0 8px; }
.faq p:last-child { margin: 0; }
.faq strong, .card-text strong { color: var(--ink); }
.button {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 16px;
  background: #58CC02;
  box-shadow: 0 4px 0 #3F9A00;
  color: var(--white);
  font-weight: 900;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.button:active { transform: translateY(3px); box-shadow: 0 1px 0 #3F9A00; }
.contact { margin-top: 30px; padding: 20px 18px 24px; text-align: center; }
.contact h2 { margin: 0 0 6px; text-align: center; }
.contact p { margin: 0 0 16px; color: var(--soft); }
.card-text { padding: 16px 18px; color: var(--soft); }
.card-text > *:first-child { margin-top: 0; }
.card-text > *:last-child { margin-bottom: 0; }
.how { margin: 0; padding-left: 24px; }
.how li { margin: 6px 0; }
.page ul { margin: 6px 0; padding-left: 22px; }
.page li { margin: 5px 0; }
.lost { text-align: center; }
.lost img { display: block; width: 190px; margin: 10px auto 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}