/* SWIMR shared stylesheet */


:root {
  --ink: #0B0B0F;
  --cobalt: #0047AB;
  --white: #FFFFFF;
  --mist: #F5F5F7;
  --grey: #5E5E66;
  --line: #E4E4E9;
  --radius: 20px;
  --container: 1120px;
  --gutter: 20px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --card-shadow:
    0 1px 2px rgba(11, 11, 15, 0.04),
    0 8px 24px rgba(11, 11, 15, 0.06);
  --card-shadow-raised:
    0 2px 4px rgba(11, 11, 15, 0.05),
    0 18px 40px rgba(11, 11, 15, 0.10);
  --header-height: 64px;
  --wave-height: 16px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

p,
ul {
  margin: 0;
}

a {
  color: var(--cobalt);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

.site-header :focus-visible,
.hero :focus-visible {
  outline-color: var(--white);
}

.site-header.is-scrolled :focus-visible {
  outline-color: var(--cobalt);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--white);
  color: var(--cobalt);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* Header: a cobalt bar on every page. On Home it sits transparently over the hero.
   With JavaScript it sticks to the top and turns white once past the hero. */

.site-header {
  position: relative;
  z-index: 50;
  background-color: var(--cobalt);
  border-bottom: 1px solid transparent;
  color: var(--white);
  transition:
    background-color 250ms ease,
    border-color 250ms ease;
}

.js .site-header {
  position: sticky;
  top: 0;
}

.home .site-header {
  background-color: transparent;
  margin-bottom: calc(-1 * var(--header-height) - 1px);
}

/* Scrolled a little but still over the hero: solid cobalt, so the header never sits on the headline */
.home .site-header.is-solid {
  background-color: var(--cobalt);
}

.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.82);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-height);
}

/* Logo: white on cobalt, cobalt on the white scrolled header. Both images are stacked. */
.wordmark {
  position: relative;
  display: block;
  width: 105px;
  height: 22px;
}

.wordmark img {
  display: block;
  width: 105px;
  height: 22px;
  transition: opacity 250ms ease;
}

.wordmark .wordmark-dark {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.is-scrolled .wordmark-light {
  opacity: 0;
}

.is-scrolled .wordmark-dark {
  opacity: 1;
}

.site-nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
}

.site-nav a {
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 250ms ease;
}

.is-scrolled .site-nav a {
  color: var(--ink);
}

/* Nav and footer links: a thin underline that draws in from the left */
.site-nav a,
.footer-links a {
  position: relative;
  text-decoration: none;
}

.site-nav a::after,
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms var(--ease-out);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current="page"]::after,
.footer-links a:hover::after,
.footer-links a:focus-visible::after {
  transform: scaleX(1);
}

/* Sections */

.section {
  padding: 64px 0;
}

.section-mist {
  background: var(--mist);
}

/* Section headings are small labels */
.section h2 {
  color: var(--cobalt);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-title {
  margin-top: 10px;
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.lead {
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  line-height: 1.55;
  max-width: 38em;
}

/* Hero */

.hero {
  position: relative;
  padding: 56px 0 calc(56px + var(--wave-height));
  background-color: var(--cobalt);
  color: var(--white);
}

.home .hero {
  padding-top: calc(var(--header-height) + 56px);
}

/* Pool lane lines: lane ropes and a floor line, white at 5 to 6% opacity.
   The layer is one tile wider than the hero and drifts by one tile, clipped. */
.hero-lanes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-lanes::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='140'%3E%3Cpath d='M0 1h10' stroke='%23fff' stroke-opacity='.06' stroke-width='2'/%3E%3Cpath d='M0 71h16' stroke='%23fff' stroke-opacity='.05' stroke-width='2'/%3E%3C/svg%3E");
  /* Lane ropes 140px apart, the first just below the header */
  background-position: 0 71px;
}

/* Soft wave edge flowing into the white compatibility bar below */
.hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: calc(var(--wave-height) + 1px);
  overflow: hidden;
  pointer-events: none;
}

.hero-wave svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--white);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 40px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 11em;
}

.hero .lead {
  margin-top: 24px;
}

.hero-note {
  display: inline-block;
  margin-top: 28px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Hero post: a stack of the main card, one card peeking out behind it and two floating labels.
   The stack floats, settles in and tilts as one group. */

.post-slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.post-stack {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 506px;
}

.activity-card {
  position: relative;
  background: var(--white);
  color: var(--ink);
  border-radius: 23px;
  box-shadow:
    0 2px 6px rgba(11, 11, 15, 0.08),
    0 32px 80px rgba(11, 11, 15, 0.30);
  padding: 22px;
}

.post-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.post-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cobalt);
}

.activity-card h2 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.activity-source {
  margin-top: 1px;
  color: var(--grey);
  font-size: 0.9375rem;
}

/* An abstract piece of pool: deep to lighter water, one diagonal lane rope and slow caustic light */
.water {
  position: relative;
  height: 120px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(155deg, #0047AB 0%, #1F67C4 55%, #4C8EDB 100%);
}

.water-caustics {
  position: absolute;
  top: -150px;
  left: -150px;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='1.3'%3E%3Cpath d='M38.4 3.5Q40.8 7.3 38.1 18.0Q35.5 28.7 20.9 31.2Q6.3 33.8 2.5 31.3Q-1.4 28.9 -4.0 18.0Q-6.5 7.1 -0.7 0.0Q5.1 -7.1 20.6 -3.7Q36.0 -0.3 38.4 3.5Z'/%3E%3Cpath d='M38.4 153.5Q40.8 157.3 38.1 168.0Q35.5 178.7 20.9 181.2Q6.3 183.8 2.5 181.3Q-1.4 178.9 -4.0 168.0Q-6.5 157.1 -0.7 150.0Q5.1 142.9 20.6 146.3Q36.0 149.7 38.4 153.5Z'/%3E%3Cpath d='M188.4 3.5Q190.8 7.3 188.1 18.0Q185.5 28.7 170.9 31.2Q156.3 33.8 152.5 31.3Q148.6 28.9 146.0 18.0Q143.5 7.1 149.3 0.0Q155.1 -7.1 170.6 -3.7Q186.0 -0.3 188.4 3.5Z'/%3E%3Cpath d='M188.4 153.5Q190.8 157.3 188.1 168.0Q185.5 178.7 170.9 181.2Q156.3 183.8 152.5 181.3Q148.6 178.9 146.0 168.0Q143.5 157.1 149.3 150.0Q155.1 142.9 170.6 146.3Q186.0 149.7 188.4 153.5Z'/%3E%3Cpath d='M77.1 2.2Q83.4 11.2 80.7 19.5Q78.0 27.8 66.6 31.1Q55.2 34.5 47.5 30.8Q39.8 27.0 39.8 13.4Q39.7 -0.2 46.4 -5.7Q53.1 -11.1 62.0 -9.0Q70.8 -6.9 77.1 2.2Z'/%3E%3Cpath d='M77.1 152.2Q83.4 161.2 80.7 169.5Q78.0 177.8 66.6 181.1Q55.2 184.5 47.5 180.8Q39.8 177.0 39.8 163.4Q39.7 149.8 46.4 144.3Q53.1 138.9 62.0 141.0Q70.8 143.1 77.1 152.2Z'/%3E%3Cpath d='M104.7 3.3Q111.6 12.8 101.5 24.4Q91.3 36.0 78.9 28.6Q66.5 21.2 67.4 11.9Q68.4 2.7 83.1 -1.7Q97.8 -6.2 104.7 3.3Z'/%3E%3Cpath d='M104.7 153.3Q111.6 162.8 101.5 174.4Q91.3 186.0 78.9 178.6Q66.5 171.2 67.4 161.9Q68.4 152.7 83.1 148.3Q97.8 143.8 104.7 153.3Z'/%3E%3Cpath d='M-2.7 10.9Q0.9 21.8 -7.8 30.7Q-16.4 39.7 -24.6 40.3Q-32.9 40.9 -38.7 32.2Q-44.5 23.6 -41.8 12.6Q-39.0 1.6 -22.7 0.8Q-6.3 0.1 -2.7 10.9Z'/%3E%3Cpath d='M147.3 10.9Q150.9 21.8 142.2 30.7Q133.6 39.7 125.4 40.3Q117.1 40.9 111.3 32.2Q105.5 23.6 108.2 12.6Q111.0 1.6 127.3 0.8Q143.7 0.1 147.3 10.9Z'/%3E%3Cpath d='M61.7 42.7Q66.1 51.6 59.4 62.1Q52.7 72.5 47.9 74.3Q43.0 76.1 32.7 68.4Q22.4 60.7 23.1 50.9Q23.7 41.2 31.0 35.4Q38.2 29.5 47.8 31.7Q57.4 33.9 61.7 42.7Z'/%3E%3Cpath d='M97.3 43.1Q104.3 52.1 97.9 62.7Q91.4 73.3 81.0 75.2Q70.6 77.1 62.5 66.5Q54.5 55.8 61.9 45.5Q69.2 35.3 79.8 34.7Q90.3 34.1 97.3 43.1Z'/%3E%3Cpath d='M123.3 43.0Q130.6 52.2 127.9 63.1Q125.2 73.9 111.2 74.2Q97.2 74.4 93.5 71.5Q89.8 68.6 87.4 58.6Q85.0 48.6 94.4 40.9Q103.8 33.3 110.0 33.5Q116.1 33.7 123.3 43.0Z'/%3E%3Cpath d='M15.5 48.3Q21.8 59.8 13.0 70.4Q4.2 81.0 -6.8 79.1Q-17.8 77.2 -18.7 58.0Q-19.7 38.9 -5.3 37.8Q9.1 36.8 15.5 48.3Z'/%3E%3Cpath d='M165.5 48.3Q171.8 59.8 163.0 70.4Q154.2 81.0 143.2 79.1Q132.2 77.2 131.3 58.0Q130.3 38.9 144.7 37.8Q159.1 36.8 165.5 48.3Z'/%3E%3Cpath d='M33.9 77.6Q39.3 87.1 32.7 98.6Q26.1 110.0 21.9 111.3Q17.6 112.6 8.2 108.1Q-1.1 103.6 -3.5 90.1Q-5.8 76.6 4.1 72.0Q14.1 67.3 21.2 67.8Q28.4 68.2 33.9 77.6Z'/%3E%3Cpath d='M183.9 77.6Q189.3 87.1 182.7 98.6Q176.1 110.0 171.9 111.3Q167.6 112.6 158.2 108.1Q148.9 103.6 146.5 90.1Q144.2 76.6 154.1 72.0Q164.1 67.3 171.2 67.8Q178.4 68.2 183.9 77.6Z'/%3E%3Cpath d='M73.8 87.0Q79.6 98.1 74.7 110.7Q69.8 123.3 61.5 123.1Q53.3 123.0 47.4 118.3Q41.6 113.7 39.3 102.9Q37.1 92.1 47.3 85.1Q57.5 78.1 62.7 76.9Q67.9 75.8 73.8 87.0Z'/%3E%3Cpath d='M114.5 83.2Q118.3 95.1 114.9 100.6Q111.5 106.1 103.1 110.2Q94.7 114.4 82.7 107.2Q70.8 99.9 72.1 90.5Q73.4 81.1 81.4 73.5Q89.4 65.8 100.1 68.6Q110.7 71.3 114.5 83.2Z'/%3E%3Cpath d='M-0.4 88.6Q10.0 101.9 -0.5 110.5Q-11.1 119.1 -22.3 114.8Q-33.5 110.5 -34.1 100.3Q-34.8 90.1 -22.8 82.7Q-10.8 75.2 -0.4 88.6Z'/%3E%3Cpath d='M149.6 88.6Q160.0 101.9 149.5 110.5Q138.9 119.1 127.7 114.8Q116.5 110.5 115.9 100.3Q115.2 90.1 127.2 82.7Q139.2 75.2 149.6 88.6Z'/%3E%3Cpath d='M58.1 -19.0Q64.5 -8.0 59.8 0.4Q55.1 8.8 44.7 8.5Q34.3 8.2 25.8 -2.0Q17.3 -12.2 22.1 -23.6Q26.8 -35.1 39.3 -32.6Q51.8 -30.0 58.1 -19.0Z'/%3E%3Cpath d='M58.1 131.0Q64.5 142.0 59.8 150.4Q55.1 158.8 44.7 158.5Q34.3 158.2 25.8 148.0Q17.3 137.8 22.1 126.4Q26.8 114.9 39.3 117.4Q51.8 120.0 58.1 131.0Z'/%3E%3Cpath d='M99.9 -34.5Q104.2 -26.9 97.6 -12.4Q90.9 2.0 81.4 1.5Q71.9 1.0 66.2 -2.4Q60.4 -5.8 58.6 -17.6Q56.8 -29.5 69.4 -36.7Q81.9 -43.9 88.7 -43.0Q95.5 -42.1 99.9 -34.5Z'/%3E%3Cpath d='M99.9 115.5Q104.2 123.1 97.6 137.6Q90.9 152.0 81.4 151.5Q71.9 151.0 66.2 147.6Q60.4 144.2 58.6 132.4Q56.8 120.5 69.4 113.3Q81.9 106.1 88.7 107.0Q95.5 107.9 99.9 115.5Z'/%3E%3Cpath d='M128.4 111.6Q138.7 120.1 131.1 135.0Q123.6 149.9 109.3 144.8Q95.1 139.6 94.7 125.8Q94.3 111.9 106.2 107.5Q118.1 103.1 128.4 111.6Z'/%3E%3Cpath d='M11.7 -22.4Q17.2 -12.6 10.0 -3.0Q2.9 6.6 -7.3 7.4Q-17.4 8.1 -21.0 3.2Q-24.6 -1.7 -26.1 -11.8Q-27.6 -21.8 -18.9 -29.3Q-10.3 -36.7 -2.0 -34.5Q6.2 -32.3 11.7 -22.4Z'/%3E%3Cpath d='M11.7 127.6Q17.2 137.4 10.0 147.0Q2.9 156.6 -7.3 157.4Q-17.4 158.1 -21.0 153.2Q-24.6 148.3 -26.1 138.2Q-27.6 128.2 -18.9 120.7Q-10.3 113.3 -2.0 115.5Q6.2 117.7 11.7 127.6Z'/%3E%3Cpath d='M161.7 -22.4Q167.2 -12.6 160.0 -3.0Q152.9 6.6 142.7 7.4Q132.6 8.1 129.0 3.2Q125.4 -1.7 123.9 -11.8Q122.4 -21.8 131.1 -29.3Q139.7 -36.7 148.0 -34.5Q156.2 -32.3 161.7 -22.4Z'/%3E%3Cpath d='M161.7 127.6Q167.2 137.4 160.0 147.0Q152.9 156.6 142.7 157.4Q132.6 158.1 129.0 153.2Q125.4 148.3 123.9 138.2Q122.4 128.2 131.1 120.7Q139.7 113.3 148.0 115.5Q156.2 117.7 161.7 127.6Z'/%3E%3C/g%3E%3C/svg%3E");
}

.water-rope {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.activity-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 0;
}

.activity-stats div {
  display: flex;
  flex-direction: column-reverse;
}

.activity-stats dt {
  margin-top: 2px;
  color: var(--grey);
  font-size: 0.875rem;
}

.activity-stats dd {
  margin: 0;
  color: var(--cobalt);
  font-size: clamp(1.25rem, 5.4vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.activity-stats .stat-number {
  display: inline-block;
  text-align: right;
}

.activity-stats .unit {
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0;
}

.post-actions {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--grey);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.post-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.post-action svg {
  width: 18px;
  height: 18px;
}

/* The card behind: taller than the main card so its lower edge, with the title, peeks out */
.post-back {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: -14px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 24px 7px;
  border-radius: 23px;
  background: var(--white);
  box-shadow: 0 16px 40px rgba(11, 11, 15, 0.16);
  opacity: 0.7;
  transform: translate(18px, 18px) rotate(-3deg) scale(0.96);
}

.post-avatar-soft {
  width: 22px;
  height: 22px;
  background: #A6BEE1;
}

.post-back-title {
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 22px;
}

@media (max-width: 719px) {
  .post-back {
    display: none;
  }
}

/* Floating labels, half outside the card's corners */
.float-label {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  background: var(--white);
  box-shadow:
    0 1px 2px rgba(11, 11, 15, 0.08),
    0 8px 24px rgba(11, 11, 15, 0.18);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.float-label svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cobalt);
}

.float-synced {
  top: -16px;
  left: -8px;
}

.float-likes {
  right: -8px;
  bottom: -16px;
  padding-left: 10px;
  font-variant-numeric: tabular-nums;
}

.float-heart {
  display: inline-flex;
}

/* Compatibility bar between the hero and How it works */

.compat {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.compat-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.compat-label {
  color: var(--grey);
  font-size: 0.875rem;
}

.compat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.compat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border: 1px solid #D4D4DC;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.compat-pill svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--cobalt);
}

/* How it works */

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

.steps li {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 12px;
}

/* The deeper hover shadow lives on its own layer so only its opacity animates */
.steps li::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--card-shadow-raised);
  opacity: 0;
}

.step-body {
  padding: 20px 16px 16px;
}

.steps h3 {
  font-size: 1.25rem;
}

.steps p {
  margin-top: 8px;
  color: var(--grey);
}

/* Visual panels. The static styles are each animation's final state, which is what
   shows without JavaScript or with reduced motion. */

.step-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(0, 71, 171, 0.06);
  color: var(--cobalt);
  font-variant-numeric: tabular-nums;
}

.count {
  display: inline-block;
  text-align: right;
}

.mini-card {
  background: var(--white);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(11, 11, 15, 0.05),
    0 6px 16px rgba(11, 11, 15, 0.07);
}

/* 1. Your swims, synced */

/* Narrow panels (three columns on smaller laptops) tighten the sync visual, below */
.visual-sync {
  gap: 20px;
  container-type: inline-size;
}

.sync-watch {
  position: relative;
  flex: none;
  width: 64px;
  height: 88px;
}

.watch {
  position: relative;
  display: block;
  width: 64px;
  height: 88px;
}

.sync-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  /* How far the pulses grow, kept inside the panel */
  --ping-max: 1.55;
  --ping-soft-max: 1.5;
}

.sync-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 14px;
  white-space: nowrap;
}

.sync-distance {
  color: var(--cobalt);
  font-size: 0.9375rem;
  font-weight: 700;
}

.sync-time {
  color: var(--grey);
  font-size: 0.875rem;
  font-weight: 500;
}

.sync-check {
  flex: none;
  width: 22px;
  height: 22px;
}

.sync-check path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

@container (max-width: 290px) {
  .sync-watch,
  .watch {
    width: 52px;
    height: 72px;
  }

  .sync-ring {
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    --ping-max: 1.2;
    --ping-soft-max: 1.15;
  }

  .sync-row {
    gap: 7px;
    padding: 8px 9px 8px 11px;
  }
}

/* 2. A feed that is only swimming */

.visual-feed {
  flex-direction: column;
  gap: 8px;
  padding: 0 20px;
}

.feed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 248px;
  height: 52px;
  padding: 0 14px 0 12px;
}

.feed-avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.feed-avatar-1 { background: var(--cobalt); }
.feed-avatar-2 { background: #5987C8; }
.feed-avatar-3 { background: #A6BEE1; }

.feed-lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.feed-name {
  display: block;
  width: 72px;
  height: 8px;
  border-radius: 4px;
  background: var(--line);
}

.feed-name-short { width: 52px; }
.feed-name-mid { width: 62px; }

.feed-stat {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

.feed-like {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--cobalt);
  font-size: 0.8125rem;
  font-weight: 600;
}

.feed-heart {
  position: relative;
  width: 18px;
  height: 18px;
}

.feed-heart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 3. Your swimming in one place */

.visual-week {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 0 24px;
}

.week-total {
  display: flex;
  flex-direction: column;
}

.week-label {
  color: var(--grey);
  font-size: 0.75rem;
  font-weight: 500;
}

.week-value {
  color: var(--cobalt);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.week-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  height: 112px;
}

.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--grey);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
}

.week-bar {
  display: block;
  width: 100%;
  max-width: 22px;
  /* --h is the share of the tallest day; 0.84 leaves room for the day label */
  height: calc(var(--h) * 0.84);
  border-radius: 6px 6px 3px 3px;
  background: var(--cobalt);
  transform-origin: bottom center;
}

.week-bar.week-rest {
  height: 6px;
  border-radius: 3px;
  background: #D5D5DC;
}

/* About and Contact, on cobalt */

.section-cobalt {
  position: relative;
  padding-top: calc(64px + var(--wave-height));
  background: var(--cobalt);
  color: var(--white);
}

.section-cobalt h2 {
  color: rgba(255, 255, 255, 0.7);
}

.section-cobalt a {
  color: var(--white);
}

.section-cobalt :focus-visible {
  outline-color: var(--white);
}

/* Mirrors the hero's wave: the grey section above flows down into the cobalt */
.closing-wave {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: calc(var(--wave-height) + 1px);
  overflow: hidden;
  pointer-events: none;
}

.closing-wave svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--mist);
  transform: scaleY(-1);
}

.closing {
  display: grid;
  gap: 48px;
}

#about,
#contact {
  scroll-margin-top: calc(var(--header-height) + 32px);
}

.closing p {
  margin-top: 16px;
}

.about-text {
  max-width: 560px;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.contact-text {
  font-size: 1.125rem;
}

.section-cobalt .button-light {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--white);
  color: var(--cobalt);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 200ms ease;
}

.section-cobalt .button-light:hover {
  background: rgba(255, 255, 255, 0.88);
}

.section-cobalt .button-light:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* Text pages */

.page {
  padding: 56px 0 64px;
}

.prose {
  max-width: 680px;
}

.prose h1 {
  font-size: clamp(2.25rem, 7vw, 3.25rem);
  letter-spacing: -0.02em;
}

.prose h2 {
  margin-top: 48px;
  font-size: 1.375rem;
  letter-spacing: -0.015em;
}

.prose p,
.prose ul {
  margin-top: 14px;
}

.prose ul {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 8px;
}

.prose li::marker {
  color: var(--cobalt);
}

.prose .lead {
  margin-top: 20px;
}

.meta {
  margin-top: 12px;
  color: var(--grey);
  font-size: 0.9375rem;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 48px;
  color: var(--grey);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.footer-wordmark {
  justify-self: start;
}

.footer-wordmark img {
  display: block;
  width: 86px;
  height: 18px;
}

.footer-legal {
  margin-top: 12px;
  max-width: 46em;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--grey);
  transition: color 250ms ease;
}

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

.footer-copy {
  margin-top: 16px;
}

/* Larger screens */

@media (min-width: 720px) {
  :root {
    --gutter: 32px;
  }

  .section {
    padding: 96px 0;
  }

  :root {
    --wave-height: 24px;
  }

  .hero {
    padding: 96px 0 calc(96px + var(--wave-height));
  }

  .home .hero {
    padding-top: calc(var(--header-height) + 96px);
  }

  .section-cobalt {
    padding-top: calc(96px + var(--wave-height));
  }

  .activity-card {
    padding: 24px;
  }

  .water {
    height: 136px;
  }

  .float-synced {
    left: -20px;
  }

  .float-likes {
    right: -16px;
  }

  .page {
    padding: 80px 0 96px;
  }

  .site-nav ul {
    gap: 32px;
  }

  .compat-inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "mark  links"
      "legal links"
      "copy  links";
    column-gap: 48px;
  }

  .footer-wordmark { grid-area: mark; }
  .footer-legal { grid-area: legal; }
  .footer-copy { grid-area: copy; }

  .footer-links {
    grid-area: links;
    align-self: start;
    justify-content: flex-end;
    margin-top: 0;
  }
}

@media (min-width: 960px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
  }

  .hero-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 64px;
  }

  /* The post is taller than the text column. contain: size keeps it out of the row height,
     so the hero stays as tall as before; the post overflows evenly above and below and
     stays vertically centred against the text. */
  .post-slot {
    align-self: stretch;
    align-items: flex-end;
    contain: size;
  }

  /* Hero typography on desktop: a slightly smaller headline (about 10% below the
     previous 72px cap) and a quieter subline, so the headline clearly leads. */
  .hero h1 {
    font-size: clamp(2.5rem, 5.4vw, 4.05rem);
  }

  .hero .lead {
    max-width: 27em;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.25rem;
    text-wrap: balance;
  }

  .closing {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 64px;
  }
}

/* Motion. Everything below runs only when the visitor has not asked for reduced motion. */

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 16px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}

@keyframes settle-back {
  from {
    opacity: 0;
    transform: none;
  }
}

@keyframes label-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes heart-beat {
  40% {
    transform: scale(1.25);
  }
}

@keyframes caustic-drift {
  to {
    transform: translate(150px, 150px);
  }
}

@keyframes lane-drift {
  to {
    transform: translateX(16px);
  }
}

@keyframes ping {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  12% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: scale(var(--ping-max));
  }
}

@keyframes ping-soft {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  15% {
    opacity: 0.16;
  }
  100% {
    opacity: 0;
    transform: scale(var(--ping-soft-max));
  }
}

@keyframes slide-in-x {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}

@keyframes slide-in-y {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes heart-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}

@keyframes count-pop {
  40% {
    transform: translateY(-2px) scale(1.15);
  }
}

@keyframes grow {
  from {
    transform: scaleY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance: 700ms each, 90ms apart */
  .hero h1,
  .hero .lead,
  .hero-note,
  .post-stack {
    animation: rise 700ms var(--ease-out) both;
  }

  .hero .lead {
    animation-delay: 90ms;
  }

  .hero-note {
    animation-delay: 180ms;
  }

  /* The post group rises in, then floats like something resting on water */
  .post-stack {
    animation:
      rise 700ms var(--ease-out) 270ms both,
      float 6s ease-in-out 970ms infinite;
  }

  /* Hero post sequence, after the entrance: the card behind settles with the main card,
     the stats count up (main.js, 400 to 1800ms), then the labels arrive */
  .post-back {
    animation: settle-back 900ms var(--ease-out) 270ms both;
  }

  .float-synced {
    animation: label-in 450ms var(--ease-out) 1900ms both;
  }

  .float-likes {
    animation: label-in 450ms var(--ease-out) 2500ms both;
  }

  .float-heart {
    animation: heart-beat 450ms ease-out 2750ms;
  }

  .water-caustics {
    animation: caustic-drift 20s linear infinite;
  }

  .hero-lanes::before {
    animation: lane-drift 12s linear infinite;
  }

  /* Scroll reveals, added by main.js */
  .js .reveal {
    opacity: 0;
    translate: 0 20px;
    transition:
      opacity 700ms var(--ease-out) var(--reveal-delay, 0ms),
      translate 700ms var(--ease-out) var(--reveal-delay, 0ms),
      transform 300ms var(--ease-out);
  }

  .js .reveal.is-visible {
    opacity: 1;
    translate: 0 0;
  }

  .js .compat-inner.reveal:not(.is-visible) {
    translate: 0 8px;
  }

  .steps li {
    transition: transform 300ms var(--ease-out);
  }

  .steps li::after {
    transition: opacity 300ms var(--ease-out);
  }

  /* How it works visuals: start once the card is revealed, play once, hold */
  .step {
    --visual-start: calc(var(--reveal-delay, 0ms) + 250ms);
  }

  .js .step.is-visible .sync-ring-once {
    animation: ping 1000ms cubic-bezier(0.2, 0.6, 0.3, 1) var(--visual-start) 2 both;
  }

  .js .step.is-visible .sync-ring-loop {
    animation: ping-soft 4s ease-out calc(var(--visual-start) + 2800ms) infinite both;
  }

  .js .step.is-visible .sync-row {
    animation: slide-in-x 600ms var(--ease-out) calc(var(--visual-start) + 1900ms) both;
  }

  .js .step.is-visible .sync-check path {
    animation: draw 450ms ease-out calc(var(--visual-start) + 2350ms) both;
  }

  .js .step.is-visible .feed-row {
    animation: slide-in-y 600ms var(--ease-out) var(--visual-start) both;
  }

  .js .step.is-visible .feed-row:nth-child(2) {
    animation-delay: calc(var(--visual-start) + 150ms);
  }

  .js .step.is-visible .feed-row:nth-child(3) {
    animation-delay: calc(var(--visual-start) + 300ms);
  }

  .js .step.is-visible .heart-fill {
    animation: heart-pop 450ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--visual-start) + 1100ms) both;
  }

  .js .step.is-visible .feed-count {
    animation: count-pop 400ms ease-out calc(var(--visual-start) + 1100ms);
  }

  .js .step.is-visible .week-bar {
    animation: grow 700ms var(--ease-out) calc(var(--visual-start) + var(--i, 0) * 70ms) both;
  }

  .week-day:nth-child(2) .week-bar { --i: 1; }
  .week-day:nth-child(3) .week-bar { --i: 2; }
  .week-day:nth-child(4) .week-bar { --i: 3; }
  .week-day:nth-child(5) .week-bar { --i: 4; }
  .week-day:nth-child(6) .week-bar { --i: 5; }
  .week-day:nth-child(7) .week-bar { --i: 6; }

  @media (hover: hover) {
    .steps li:hover {
      transform: translateY(-4px);
    }

    .steps li:hover::after {
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}