/* timnuman.com — shared styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
}
img {
  max-width: 100%;
}

:root {
  --gutter: 120px;
  /* Tim Numan */
  --paper: #f5f3ee;
  --ink: #17171a;
  --ink-2: #3f3e3a;
  --muted: #5b5a55;
  --line: #e2ded5;
  --chip: #f0ede6;
  --accent: #b4410e;
  /* Routines */
  --cream: #fffbf5;
  --r-ink: #393c54;
  --r-ink-2: #4a4c66;
  --r-muted: #5b5d78;
  --sunrise: linear-gradient(160deg, #ffe3b8 0%, #ffd9ce 55%, #d9e8f5 100%);
  --evening: linear-gradient(180deg, #3b3f70 0%, #232645 60%, #171a33 100%);
  --icon-shadow: drop-shadow(0 0 0.7px rgba(20, 22, 40, 0.55)) drop-shadow(0 1px 2px rgba(20, 22, 40, 0.16))
    drop-shadow(0 18px 30px rgba(20, 22, 40, 0.24));
}
@media (max-width: 1100px) {
  :root {
    --gutter: 56px;
  }
}
@media (max-width: 640px) {
  :root {
    --gutter: 20px;
  }
}
/* The Routines pages keep the hero's 40px all the way down. */
@media (max-width: 640px) {
  body.rt {
    --gutter: 40px;
  }
}

.wrap {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.btn {
  display: inline-block;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: 999px;
  font-size: 17px;
  white-space: nowrap;
}

/* ---------- Tim Numan (home) ---------- */
body.tn {
  font-family: 'Geist', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
}
body.tn a {
  color: var(--ink);
}
body.tn a:hover {
  color: var(--accent);
}
.serif {
  font-family: 'Domine', Georgia, serif;
  font-weight: 400;
}
.tn section.block {
  padding-top: 104px;
  padding-bottom: 104px;
  border-top: 1px solid var(--line);
}
.tn h2.title {
  margin: 0;
  font-size: 52px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.intro {
  padding-top: 112px;
  padding-bottom: 120px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.eyebrow {
  font-size: 17px;
  color: var(--muted);
  display: flex;
  gap: 12px;
  align-items: center;
}
.eyebrow::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
}
.intro h1 {
  margin: 0;
  font-size: 72px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 1120px;
}
.intro h1 em {
  font-style: normal;
  color: var(--accent);
}
.intro p {
  margin: 0;
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 760px;
}
.actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
body.tn .btn-dark {
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
}
body.tn .btn-dark:hover {
  color: var(--paper);
  background: #000;
}
body.tn .btn-line {
  border: 1px solid var(--ink);
  padding: 15px 27px;
  font-weight: 500;
}

#work {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card > img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center 70%;
  background: #f7f7f7;
  border-bottom: 1px solid var(--line);
}
.card .body {
  flex-grow: 1;
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.meta {
  font-size: 15px;
  color: var(--muted);
}
.card h3 {
  margin: 0;
  font-size: 36px;
  line-height: 1.15;
}
.card p,
.small p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
}
.chips {
  margin-top: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}
.chips span {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--chip);
}
.small {
  border-top: 1px solid var(--ink);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.small .meta {
  font-size: 13px;
}
.small h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}
.small p {
  font-size: 17px;
}

#projects {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
a.project {
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
a.project .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
a.project h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
}
a.project p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}
a.project .meta {
  font-size: 13px;
}

#about {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
}
#about .col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
#about p {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-2);
}
.toolkit {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 12px;
}
.toolkit .label {
  font-size: 16px;
  color: var(--muted);
}
.toolkit .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 16px;
}
.toolkit .tags span {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #d4cfc4;
}

#contact {
  background: var(--ink);
  color: var(--paper);
  padding-top: 104px;
  padding-bottom: 56px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
#contact .row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
}
#contact h2 {
  margin: 0;
  font-size: 68px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
#contact p {
  margin: 0;
  font-size: 19px;
  color: #d9d6cd;
}
#contact .links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 20px;
  text-align: right;
}
body.tn #contact a {
  color: var(--paper);
}
body.tn #contact .social a,
body.tn #contact footer a {
  color: #d9d6cd;
}
#contact .social {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  font-size: 16px;
}
#contact footer {
  padding-top: 28px;
  border-top: 1px solid #3a3a3f;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #bdbab1;
}
#contact footer div {
  display: flex;
  gap: 20px 24px;
  flex-wrap: wrap;
}

/* ---------- Routines ---------- */
body.rt {
  font-family: 'Nunito', system-ui, sans-serif;
  background: var(--cream);
  color: var(--r-ink);
}
body.rt a {
  color: var(--r-ink);
}
body.rt a:hover {
  color: #b8651f;
}
.baloo {
  font-family: 'Baloo 2', system-ui, sans-serif;
}

.band {
  background: var(--sunrise);
  color: var(--r-ink);
  font-family: 'Nunito', system-ui, sans-serif;
  padding-top: 72px;
  padding-bottom: 72px;
  display: flex;
  gap: 0;
  align-items: center;
}
.band .text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.band p {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--r-ink-2);
  max-width: 560px;
}
.band .actions {
  gap: 20px;
}
.band .btn {
  background: var(--r-ink);
  color: var(--cream);
  font-weight: 800;
}
.band .btn:hover {
  color: var(--cream);
  background: #2a2c40;
}
.band .soon {
  font-size: 17px;
  font-weight: 700;
  color: var(--r-muted);
}

/* Logo + "Routines" lock-up */
.lockup {
  margin: 0 0 32px;
  display: flex;
  align-items: center;
  gap: 36px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: 80px;
  line-height: 1;
  color: var(--r-ink);
}
.lockup img {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  margin: -20px 0 -20px -14px;
  transform: rotate(-10deg);
  filter: var(--icon-shadow);
}
.lockup span {
  padding-top: 0.12em;
}

/* Phones */
.phone {
  position: relative;
  width: 236px;
}
.phone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 981;
  filter: drop-shadow(0 26px 24px rgba(57, 60, 84, 0.3));
}

/* The phones sit centred in the space between the text and the right edge (= right edge of the EN/NL switch). */
.band .text {
  flex: 0 1 auto;
  max-width: 560px;
}
.stage {
  flex: 1 1 0;
  min-width: 517px;
  display: flex;
  justify-content: center;
}
.duo {
  position: relative;
  width: 517px;
  height: 534px;
  flex-shrink: 0;
}
/* Tapping the phones swaps them: the back one pulls out to the right, then slides in front. */
.duo {
  touch-action: pan-y; /* sideways swipes are ours (hero.js), up and down still scrolls */
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.duo img {
  -webkit-user-drag: none;
  pointer-events: none;
}
.duo:focus-visible {
  outline: 3px solid rgba(57, 60, 84, 0.4);
  outline-offset: 8px;
  border-radius: 40px;
}
.duo .phone {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  --front: translate(52px, 52px) rotate(-3deg) scale(1.02);
  --back: translate(246px, 16px) rotate(7deg) scale(0.95);
  transform: var(--back);
}
.band[data-sky='day'] .duo .morning,
.band[data-sky='night'] .duo .evening {
  transform: var(--front);
  z-index: 2;
  --k: 1;
}
/* Parallax on the phones (--sy, --mx from hero.js): the front one moves more than the back one. */
.duo .phone {
  --k: 0.4;
  translate: calc(var(--mx, 0) * var(--k) * -8px) calc(var(--sy, 0) * var(--k) * -0.08px);
}
.duo.swapped .phone {
  animation: to-back 0.9s both;
}
.band[data-sky='day'] .duo.swapped .morning,
.band[data-sky='night'] .duo.swapped .evening {
  animation-name: to-front;
}
@keyframes to-front {
  0% {
    transform: var(--back);
    z-index: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  45% {
    transform: translate(370px, 24px) rotate(13deg) scale(0.98);
    z-index: 1;
    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
  }
  50% {
    z-index: 2;
  }
  100% {
    transform: var(--front);
    z-index: 2;
  }
}
@keyframes to-back {
  0% {
    transform: var(--front);
    z-index: 2;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  45% {
    transform: translate(-16px, 70px) rotate(-8deg) scale(0.92);
    z-index: 2;
    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
  }
  50% {
    z-index: 1;
  }
  100% {
    transform: var(--back);
    z-index: 1;
  }
}

/* Sky behind the intro: a gradient plus cloud, moon and star sprites placed by hero.js.
   Each sprite has a scroll depth --d (share of the scroll it lags; negative runs ahead) and a pointer shift --p,
   from --sy and --mx set by hero.js. Clouds also drift slowly sideways. */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.9s;
}
.sky,
.sky .bg,
.sky .set {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sky {
  z-index: -1;
  --u: clamp(7px, 1vw, 14px);
} /* sprite unit: sizes and heights scale with it */
.sky .bg {
  background: center / cover no-repeat;
  transition: opacity 0.9s ease;
  transform: translate3d(0, calc(var(--sy, 0) * 0.35px), 0);
}
.sky .sky-day.bg {
  background-image: url(/assets/sky-day.webp);
}
.sky .sky-night.bg {
  background-image: url(/assets/sky-night.webp);
}
.sky .set {
  transition:
    opacity 1.1s ease,
    translate 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.band[data-sky='day'] .sky .sky-night,
.band[data-sky='night'] .sky .sky-day {
  opacity: 0;
}
.band[data-sky='day'] .sky .sky-night.set {
  translate: 0 40px;
}
.band[data-sky='night'] .sky .sky-day.set {
  translate: 0 -40px;
}
.sky .set img {
  position: absolute;
  height: auto;
  max-width: none;
  width: calc(var(--w) * var(--u));
  transform: translate3d(calc(var(--mx, 0) * var(--p) * -1px), calc(var(--sy, 0) * var(--d) * 1px), 0);
}
.sky .cloud {
  animation: drift var(--t) ease-in-out var(--delay) infinite alternate;
}
.sky .star {
  animation: twinkle var(--t) ease-in-out var(--delay) infinite alternate;
}
@keyframes drift {
  from {
    translate: calc(var(--dx) * -1) 0;
  }
  to {
    translate: var(--dx) 0;
  }
}
@keyframes twinkle {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sky .set img {
    animation: none;
  }
}

/* Night: light text on the dark sky */
.band[data-sky='night'] {
  color: #f4f1fa;
}
.band[data-sky='night'] .lockup {
  color: #fffbf5;
}
.band[data-sky='night'] p {
  color: #dcd9f0;
}
.band[data-sky='night'] .soon {
  color: #e6e3f5;
}
.band[data-sky='night'] .btn {
  background: #fffbf5;
  color: var(--r-ink);
}
.band .lockup,
.band p,
.band .soon,
.band .btn {
  transition:
    color 0.9s,
    background-color 0.9s;
}

@media (prefers-reduced-motion: reduce) {
  .duo.swapped .phone {
    animation: none;
  }
}

/* Routines page */
.rt .band {
  padding-bottom: 280px;
}
/* Home: no cards overlap the intro, so the clouds sit 128px lower and their hidden part falls below the band. */
.tn .band {
  padding-bottom: 152px;
}
.tn .sky .set {
  bottom: -128px;
}
/* The intro's text and phones stay together in a centred column of at most 1160px; the sky stays full width. */
.band {
  padding-left: max(var(--gutter), calc(50% - 580px));
  padding-right: max(var(--gutter), calc(50% - 580px));
}
.features {
  position: relative;
  margin-top: -128px;
  padding-bottom: 120px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.feature {
  background: #fff;
  border: 1px solid #f1e6d6;
  border-radius: 28px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 18px 40px -16px rgba(57, 60, 84, 0.22);
}
.feature .ico {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}
.feature p {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--r-ink-2);
}

.inside {
  padding-bottom: 120px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.inside h2 {
  margin: 0;
  font-weight: 800;
  font-size: 52px;
  line-height: 1.05;
  text-align: center;
}
.hand {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.hand figure {
  margin: 0;
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
.hand .phone {
  width: 240px;
  transform-origin: 50% 100%;
}
.hand figure:nth-child(4n + 1) .phone {
  transform: translateY(20px) rotate(-6deg);
}
.hand figure:nth-child(4n + 2) .phone {
  transform: translateY(3px) rotate(-2deg);
}
.hand figure:nth-child(4n + 3) .phone {
  transform: translateY(3px) rotate(2deg);
}
.hand figure:nth-child(4n) .phone {
  transform: translateY(20px) rotate(6deg);
}
/* Copies of the gallery either side of it, so the swipe loops; only used while it scrolls. */
.hand figure.clone {
  display: none;
}
.hand figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.hand figcaption b {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
}
.hand figcaption span {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--r-ink-2);
}
/* Pagination for the swipeable gallery (made by hero.js, shown below 1100px) */
.inside .dots {
  display: none;
  justify-content: center;
  margin-top: -32px;
}
/* Each button is its dot plus 4px either side, so the dots sit one dot apart. */
.inside .dots button {
  height: 28px;
  padding: 0 4px;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.inside .dots button::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d5d1e4;
  transition:
    width 0.3s,
    background-color 0.3s;
}
.inside .dots button[aria-current='true']::before {
  width: 22px;
  background: var(--r-ink);
}

.night {
  background:
    radial-gradient(2px 2px at 8% 14%, #fff6dc 50%, transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 6%, #fff6dc 50%, transparent 60%),
    radial-gradient(2px 2px at 71% 9%, #fff6dc 50%, transparent 60%),
    radial-gradient(1.5px 1.5px at 93% 22%, #fff6dc 50%, transparent 60%),
    radial-gradient(1.5px 1.5px at 4% 62%, #fff6dc 50%, transparent 60%),
    radial-gradient(2px 2px at 97% 74%, #fff6dc 50%, transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 96%, #fff6dc 50%, transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 40%, #fff6dc 50%, transparent 60%), var(--evening);
  color: #f4f1fa;
}
#support {
  padding-top: 96px;
  padding-bottom: 56px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
#support .cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}
#support .cols > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#support h2 {
  margin: 0;
  font-weight: 800;
  font-size: 40px;
  line-height: 1.1;
}
#support p {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  color: #cfcde6;
}
body.rt #support .cols a {
  font-size: 19px;
  font-weight: 800;
  color: #ffe3b8;
}
#support address {
  font-style: normal;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: #b9b8d6;
}
.rt-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 600;
  color: #b9b8d6;
}
.rt-footer div {
  display: flex;
  gap: 20px;
}
body.rt .rt-footer a {
  color: #b9b8d6;
}
#support .rt-footer {
  padding-top: 28px;
  border-top: 1px solid rgba(244, 241, 250, 0.16);
}

/* Privacy page */
.p-head {
  padding-top: 72px;
  padding-bottom: 64px;
  background: linear-gradient(180deg, #ffe3b8 0%, #ffd9ce 60%, #fffbf5 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.p-head .back {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  align-self: flex-start;
}
.p-head .back img {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 0 0.7px rgba(20, 22, 40, 0.55)) drop-shadow(0 1px 2px rgba(20, 22, 40, 0.16))
    drop-shadow(0 4px 8px rgba(20, 22, 40, 0.24));
}
.p-head h1 {
  margin: 0;
  font-weight: 800;
  font-size: 80px;
  line-height: 1;
}
.p-head .date {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--r-muted);
}
.policy {
  padding-top: 24px;
  padding-bottom: 104px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: calc(780px + 2 * var(--gutter));
}
.policy > p {
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
  color: var(--r-ink-2);
}
.policy section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.policy h2 {
  margin: 0;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
}
.policy section p,
.policy ul {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--r-ink-2);
}
.policy ul {
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.policy strong {
  font-weight: 800;
  color: var(--r-ink);
}
.p-footer {
  padding-top: 40px;
  padding-bottom: 40px;
  background: linear-gradient(180deg, #3b3f70 0%, #232645 100%);
}

/* ---------- Responsive ---------- */
@media (max-width: 1430px) {
  .lockup {
    font-size: 64px;
    gap: 28px;
  }
  .lockup img {
    width: 120px;
    height: 120px;
    margin: -16px 0 -16px -11px;
  }
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1100px) {
  .band {
    flex-direction: column;
    align-items: stretch;
  }
  .band {
    gap: 40px;
  }
  .band .text {
    max-width: none;
  }
  .stage {
    min-width: 0;
  }
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Swipe one phone at a time; the side padding lets the first and last phone sit in the middle. */
  .hand {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 12px calc(50vw - 125px) 32px;
    margin: 0 calc(-1 * var(--gutter));
    gap: 24px;
    scrollbar-width: none;
  }
  .hand::-webkit-scrollbar {
    display: none;
  }
  .hand figure {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .hand figure.clone {
    display: flex;
  }
  /* Fanned by scroll position (hero.js sets --o, the distance from the middle in phones, and --a, its size): the middle phone stands straight, the rest lean out to their own side. */
  .hand figure:nth-child(n) .phone {
    transform: translateY(calc(var(--a, 0) * 20px)) rotate(calc(var(--o, 0) * 6deg));
    will-change: transform;
  }
  .inside .dots {
    display: flex;
  }
  .intro h1 {
    font-size: 56px;
  }
  #about {
    gap: 48px;
  }
}
@media (max-width: 800px) {
  .grid-2,
  .grid-3,
  #about,
  #support .cols {
    grid-template-columns: 1fr;
  }
  .card .body {
    padding: 28px;
  }
  .card > img {
    height: 220px;
  }
  #contact .links {
    text-align: left;
  }
  #contact .social {
    justify-content: flex-start;
  }
}
@media (max-width: 640px) {
  .band {
    padding-top: 48px;
    gap: 32px;
  }
  .rt .band {
    padding-bottom: 220px;
  }
  .tn .band {
    padding-bottom: 92px;
  }
  .lockup {
    font-size: 40px;
    gap: 16px;
    margin: 12px 0 16px;
  }
  .lockup img {
    width: 76px;
    height: 76px;
    margin: -8px 0 -8px -7px;
  }
  .band p {
    font-size: 18px;
  }
  .duo {
    zoom: 0.62;
  }
  .features {
    grid-template-columns: 1fr;
  }
  .intro {
    padding-top: 72px;
    padding-bottom: 80px;
  }
  .intro h1 {
    font-size: 40px;
  }
  .intro p {
    font-size: 19px;
  }
  .tn section.block {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .tn h2.title,
  .inside h2 {
    font-size: 38px;
  }
  .card h3 {
    font-size: 28px;
  }
  a.project {
    padding: 28px;
  }
  #contact {
    padding-top: 72px;
  }
  #contact h2 {
    font-size: 44px;
  }
  .p-head h1 {
    font-size: 44px;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .p-head {
    padding-top: 48px;
  }
}

/* Language switch */
body {
  position: relative;
}
.lang {
  position: absolute;
  top: 24px;
  right: var(--gutter);
  z-index: 10;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(57, 60, 84, 0.08);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.lang a {
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: #5b5d78 !important;
}
.lang a:hover {
  color: #393c54 !important;
  background: rgba(255, 255, 255, 0.6);
}
.lang a[aria-current] {
  background: #393c54;
  color: #fffbf5 !important;
}
@media (max-width: 640px) {
  .lang {
    top: 14px;
    font-size: 13px;
  }
  .lang a {
    padding: 5px 10px;
  }
}

/* Breadcrumbs, top left, mirroring the language switch */
.crumbs {
  position: absolute;
  top: 24px;
  left: calc(var(--gutter) - 16px);
  z-index: 10;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(57, 60, 84, 0.08);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
}
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.crumbs li {
  display: flex;
  align-items: center;
}
.crumbs li > span {
  color: #a5a7bc;
  padding: 0 2px;
}
.crumbs a {
  display: block;
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: #5b5d78 !important;
  white-space: nowrap;
}
.crumbs a:hover {
  color: #393c54 !important;
  background: rgba(255, 255, 255, 0.6);
}
.crumbs a[aria-current] {
  color: #393c54 !important;
}
@media (max-width: 640px) {
  .crumbs {
    top: 14px;
    left: calc(var(--gutter) - 12px);
    font-size: 13px;
  }
  .crumbs a {
    padding: 5px 8px;
  }
}
/* On a phone the two pills sit as far from the top and sides as Safari's toolbar does from the bottom and sides
   (28px), and the hero text lines up with the breadcrumb text (40px), on the homepage and the Routines pages alike. */
@media (max-width: 640px) {
  .crumbs,
  .lang {
    top: 28px;
  }
  .crumbs {
    left: 28px;
  }
  .lang {
    right: 28px;
  }
  .band {
    --gutter: 40px;
    padding-top: 110px;
  }
}
@media (max-width: 400px) {
  .crumbs li:not(:last-child):not(:nth-last-child(2)) {
    display: none;
  }
}
/* room for crumbs */
.band,
.p-head {
  padding-top: 104px;
}
@media (max-width: 640px) {
  .p-head {
    padding-top: 76px;
  }
  .band {
    padding-top: 96px;
  }
}
/* alignment v2 */
/* The icon's bottom-left corner, the breadcrumb text, the intro and the button text share one left edge. */
.band .actions .btn {
  margin-left: -10px;
}
@media (max-width: 640px) {
  .band .actions .btn {
    margin-left: -10px;
  }
}

/* "A look inside" on a phone: exactly one full screen (lvh: Safari's bars collapsed, so the next section never
   peeks in), with heading, gallery, caption and dots together. The phones take what is left of the height (--pw is
   the phone width: screen height minus everything else, at the screenshot's aspect), as wide as the screen allows
   with the neighbours still peeking in. The top padding clears Safari's status bar and address pill. Captions are
   wider than a phone and fade out as their phone leaves the middle. */
@media (max-width: 640px) {
  .features {
    padding-bottom: 64px;
  }
  .inside {
    --pw: min(100vw - 120px, calc((100lvh - 368px) * 0.46 + 16px));
    box-sizing: border-box;
    height: 100vh;
    height: 100lvh;
    justify-content: center;
    padding-top: 104px;
    padding-bottom: 24px;
    gap: 16px;
  }
  .inside > * {
    flex-shrink: 0;
  }
  .inside h2 {
    font-size: 40px;
  }
  .hand {
    padding: 8px calc(50vw - var(--pw) / 2 - 5px);
    gap: 16px;
  }
  .hand figure {
    width: calc(var(--pw) + 10px);
    gap: 28px;
  }
  .hand .phone {
    width: var(--pw);
  }
  .hand figcaption {
    width: min(330px, 100vw - 2 * var(--gutter));
    gap: 2px;
    opacity: calc(1 - var(--a, 0) * 1.5);
  }
  .hand figcaption b {
    font-size: 21px;
  }
  .hand figcaption span {
    font-size: 15px;
    line-height: 1.45;
  }
  .inside .dots {
    margin-top: -4px;
  }
}

/* ---------- Routines: how it works, privacy, FAQ, launch ---------- */
.how,
.faq {
  padding-bottom: 120px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.how h2,
.trust h2,
.faq h2,
.launch h2 {
  margin: 0;
  font-weight: 800;
  font-size: 52px;
  line-height: 1.05;
  text-align: center;
}
.how ol {
  margin: 0 auto;
  padding: 0;
  max-width: 1160px;
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.how li {
  counter-increment: step;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.how li::before {
  content: counter(step);
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--sunrise);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--r-ink);
}
.how h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}
.how p {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--r-ink-2);
}

.trust {
  padding-bottom: 120px;
}
.trust-card {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px;
  border-radius: 32px;
  background: #fff;
  border: 1px solid #f1e6d6;
  box-shadow: 0 18px 40px -16px rgba(57, 60, 84, 0.22);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 56px;
}
.trust h2 {
  font-size: 40px;
  line-height: 1.1;
  text-align: left;
}
.trust-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.trust p {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--r-ink-2);
}
.trust ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}
.trust ul li {
  display: flex;
  gap: 12px;
}
.trust ul li::before {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: #dff2ea
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323805f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}
.trust .trust-note {
  grid-column: 1 / -1;
  padding-top: 28px;
  border-top: 1px solid #f1e6d6;
  font-size: 16px;
}
body.rt .trust a,
body.rt .faq a {
  font-weight: 800;
  color: #b8651f;
}

.faq-list {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq details {
  background: #fff;
  border: 1px solid #f1e6d6;
  border-radius: 20px;
}
.faq summary {
  padding: 22px 28px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 19px;
  font-weight: 800;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 28px;
  line-height: 1;
  color: var(--r-muted);
  transition: rotate 0.2s;
}
.faq details[open] summary::after {
  rotate: 45deg;
}
/* Opening and closing slide the answer in and out (hero.js adds .closing before an item closes); browsers without ::details-content just open. */
.faq details::details-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.3s ease,
    opacity 0.3s ease;
}
.faq details[open]::details-content {
  grid-template-rows: 1fr;
  opacity: 1;
}
.faq details p {
  min-height: 0;
  overflow: hidden;
  transition: padding-bottom 0.3s ease;
}
.faq details:not([open]) p,
.faq details.closing p {
  padding-bottom: 0;
}
.faq details.closing::details-content {
  grid-template-rows: 0fr;
  opacity: 0;
}
.faq details.closing summary::after {
  rotate: 0deg;
}
@media (prefers-reduced-motion: reduce) {
  .faq details::details-content {
    transition: none;
  }
}
.faq details p {
  margin: 0;
  padding: 0 28px 24px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--r-ink-2);
}

/* The FAQ with the household on iPhone (morning), iPad (evening) and Apple Watch (one step) beside it */
.faq-body {
  display: grid;
  grid-template-columns: minmax(0, 700px) 560px;
  justify-content: center;
  align-items: center;
  gap: 64px;
}
.faq-body .faq-list {
  max-width: none;
}
.devices {
  position: relative;
  width: 560px;
  height: 520px;
  margin: 0;
}
.devices img {
  position: absolute;
  display: block;
  height: auto;
}
.devices .device {
  filter: drop-shadow(0 26px 28px rgba(35, 38, 69, 0.32));
  animation: drift-by linear both;
  animation-timeline: view();
  transition: scale 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.devices .device:hover {
  scale: 1.05;
}
.devices .ipad {
  width: 440px;
  top: 40px;
  right: 0;
  rotate: 4deg;
  --shift: 10px;
}
.devices .iphone {
  width: 172px;
  left: 18px;
  bottom: 0;
  rotate: -8deg;
  --shift: 24px;
}
.devices .watch {
  width: 138px;
  right: 34px;
  bottom: -18px;
  rotate: 11deg;
  --shift: 40px;
}
@keyframes drift-by {
  from {
    translate: 0 var(--shift);
  }
  to {
    translate: 0 calc(var(--shift) * -1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .devices img {
    animation: none;
  }
}
@media (max-width: 1300px) {
  .faq-body {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .faq-body .faq-list {
    max-width: 780px;
  }
  .devices {
    justify-self: center;
    order: -1;
  }
}
@media (max-width: 640px) {
  .devices {
    zoom: 0.52;
  }
}

.launch {
  padding-top: 96px;
  padding-bottom: 104px;
  background: var(--sunrise);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.launch p {
  margin: 0 0 12px;
  max-width: 560px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--r-ink-2);
}
.launch .btn {
  background: var(--r-ink);
  color: var(--cream);
  font-weight: 800;
}
body.rt .launch .btn:hover {
  color: var(--cream);
  background: #2a2c40;
}

@media (max-width: 1100px) {
  .how ol {
    grid-template-columns: 1fr;
    max-width: 560px;
    gap: 36px;
  }
  .trust-card {
    grid-template-columns: 1fr;
    padding: 40px;
  }
}
@media (max-width: 640px) {
  .how,
  .faq,
  .trust {
    padding-bottom: 72px;
    gap: 36px;
  }
  .how h2,
  .faq h2,
  .launch h2 {
    font-size: 38px;
  }
  .trust h2 {
    font-size: 32px;
  }
  .trust-card {
    padding: 28px;
    margin: 0 calc(20px - var(--gutter));
    border-radius: 28px;
  }
  .faq summary {
    padding: 18px 22px;
    font-size: 17px;
  }
  .faq details p {
    padding: 0 22px 20px;
    font-size: 16px;
  }
  .launch {
    padding-top: 72px;
    padding-bottom: 80px;
  }
  .launch p {
    font-size: 18px;
  }
}

/* The beta sign-up form (notify.js), in the intro and at the bottom of the Routines page */
.sr,
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.notify {
  display: flex;
  flex-direction: column;
  gap: 24px; /* the same as the space above it in the intro */
  width: 100%;
  max-width: 520px;
}
/* A plain text field next to the button, not one pill around both, so it doesn't read as a toggle. */
.notify-row {
  display: flex;
  gap: 10px;
}
.notify input[type='email'] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 20px;
  border: 1.5px solid transparent;
  border-radius: 16px;
  background: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--r-ink);
  outline: none;
  box-shadow: 0 1px 3px rgba(57, 60, 84, 0.12);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.notify input[type='email']::placeholder {
  color: #8a8ca3;
}
.notify input[type='email']:focus {
  border-color: var(--r-ink);
  box-shadow: 0 0 0 3px rgba(57, 60, 84, 0.15);
}
.notify .btn {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  background: var(--r-ink);
  color: var(--cream);
}
.notify .btn:hover {
  background: #2a2c40;
}
.notify .btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.notify .notify-msg {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}
.notify .notify-msg:empty {
  display: none;
}
.notify[data-state='ok'] .notify-row {
  display: none;
}
.notify[data-state='invalid'] .notify-msg,
.notify[data-state='failed'] .notify-msg {
  color: #b3401f;
}
.notify .soon {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--r-ink-2);
}
.band .notify .btn {
  margin-left: 0;
}
.band[data-sky='night'] .notify .btn {
  background: #fffbf5;
  color: var(--r-ink);
}
.band[data-sky='night'] .notify .soon {
  color: #dcd9f0;
}
.band[data-sky='night'] .notify .notify-msg {
  color: #fffbf5;
}
.launch .notify {
  align-items: center;
}
.launch .notify-row {
  width: 100%;
}
body.rt .launch .notify .soon a {
  color: var(--r-ink);
  font-weight: 800;
}
@media (max-width: 640px) {
  .notify-row {
    flex-direction: column;
  }
  .notify input[type='email'] {
    padding: 16px 20px;
  }
  .notify .btn {
    width: 100%;
  }
}

/* Side by side, the text and the phones are centred as one group with a fixed gap, instead of the text pinned left
   and the phones centred in what is left: that sat the whole intro some 40px left of the page's middle. */
@media (min-width: 1101px) {
  .band {
    justify-content: center;
  }
  .stage {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: var(--hero-gap, 64px);
    /* The tilted icon sticks out past the text on the left; the back phone ends inside its box on the right.
       A negative margin here moves the centred group right by half of it, so it looks centred. */
    margin-right: -40px;
  }
}

/* No lonely last words: headings and running text wrap with a little more care. */
h1,
h2,
h3,
p,
li,
figcaption,
summary {
  text-wrap: pretty;
}