/* SyncFix website: one stylesheet for the landing and the document pages.

   The colours are the app icon's. Navy is its tile, the soft periwinkle is its ring
   (the workout as it reached Apple Health) and white is its piece (what SyncFix adds).
   The page keeps that meaning: soft for what arrived, bright for what SyncFix writes.
   Amber marks estimates, as it does in the app. The fonts are the system's own, with
   SF Rounded for headings where the browser offers it, so nothing is fetched from a
   third party. */

:root {
  color-scheme: dark;
  --tile-top: #1F3266;
  --bg: #0C1533;
  --raised: #131F47;
  --line: rgba(157, 178, 230, .18);
  --soft: #9DB2E6;
  --bright: #FFFFFF;
  --text: #D9E0F3;
  --dim: #97A5CD;
  --estimate: #E89B4F;
  --bezel: #05081A;
  --display: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 40px);
}

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

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

/* The top of every page is the icon's tile: its gradient runs from the header down into the page.
   The colour under the gradient is the one the page starts with, because Safari tints its
   status bar with the body's background colour. */
body {
  --fade: 360px;
  min-height: 100vh;
  margin: 0;
  background: var(--tile-top) linear-gradient(var(--tile-top), var(--bg) var(--fade)) no-repeat;
  color: var(--text);
  font: 17px/1.5 var(--body);
}

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

a {
  color: var(--bright);
  text-decoration-color: var(--soft);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { text-decoration-color: currentColor; }

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

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--bright);
  text-wrap: balance;
  overflow-wrap: break-word;
}

p { margin: 0; }

.wrap {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The two voices of the page. */
.arrived { color: var(--soft); }
.added { color: var(--bright); }
.estimate { color: var(--estimate); }

/* ---------- Header ---------- */

.site-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 22px/1 var(--display);
  letter-spacing: -.01em;
  color: var(--bright);
  text-decoration: none;
}
.brand img { width: 32px; height: 32px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  margin-left: auto;
  font-size: 15px;
}
.site-nav a { color: var(--text); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--bright); }
.site-nav .lang {
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--bright);
}
.site-nav .lang:hover { border-color: var(--soft); }

/* On a phone the header keeps the language switch; the other links are in the footer. */
@media (max-width: 640px) {
  .site-nav a:not(.lang) { display: none; }
}

/* ---------- Hero ---------- */

.home { --fade: 860px; }
.hero { overflow: hidden; }

.hero-grid {
  display: grid;
  gap: 8px;
  padding-block: clamp(20px, 5vw, 56px) clamp(48px, 8vw, 96px);
}

.hero h1 {
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 1.03;
  letter-spacing: -.03em;
}
.hero h1 span { display: block; }
.hero h1 span + span { margin-top: .12em; }
/* Russian words run longer. */
:lang(ru) .hero h1 { font-size: clamp(32px, 4.8vw, 54px); line-height: 1.06; }

.lede {
  max-width: 33em;
  margin-top: 24px;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.45;
}

.availability {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 32px;
  font-size: 15px;
  color: var(--dim);
}
/* A plain note until the app is in the store; as a link it becomes the page's one button. */
.availability .store {
  padding: 12px 20px;
  border: 1px solid var(--soft);
  border-radius: 999px;
  color: var(--bright);
  font: 600 17px/1 var(--body);
  text-decoration: none;
}
.availability a.store { border-color: var(--bright); background: var(--bright); color: var(--bg); }
.availability a.store:hover { border-color: var(--soft); background: var(--soft); }

/* The icon's ring rises behind the phone. On load the piece runs one lap around it and settles
   back into its place, the way a sync finishes. */
.stage {
  --phone: min(260px, 64vw);
  --ring: min(340px, 88vw);
  position: relative;
  display: grid;
  place-items: center;
  margin-top: 40px;
  padding-top: calc(var(--ring) * .42);
}

.halo {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--ring);
  max-width: none;
  translate: -50% 0;
  overflow: visible;
}
.halo.ring { opacity: .26; }
.halo.piece { animation: lap 1.7s .5s backwards; }
/* Both layers share a centre, so turning the piece's layer carries it along the ring. It runs a
   little past its place and comes back to it. */
@keyframes lap {
  0% { transform: rotate(-360deg); animation-timing-function: cubic-bezier(.6, 0, .2, 1); }
  82% { transform: rotate(9deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(0); }
}

.phone {
  position: relative;
  width: var(--phone);
  padding: 9px;
  border-radius: calc(var(--phone) * .176);
  background: var(--bezel);
  box-shadow: 0 0 0 1px rgba(157, 178, 230, .4), 0 36px 70px -24px rgba(2, 5, 18, .9);
}
.phone img {
  width: 100%;
  height: auto;
  border-radius: calc((var(--phone) - 18px) * .154);
}
/* The Dynamic Island, which a simulator capture leaves out. */
.phone::after, .shot::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 30%;
  aspect-ratio: 126 / 37;
  margin-top: calc(3.4% + 9px);
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    gap: 40px;
  }
  /* With room on both sides the phone stands inside the ring. */
  .stage { --phone: 290px; --ring: 667px; margin-top: 0; padding-top: 24px; }
  .halo { top: 50%; translate: -50% -46%; }
}

/* ---------- Sections ---------- */

.section { padding-block: clamp(64px, 10vw, 120px); }
.section + .section { padding-top: 0; }

.section-head {
  max-width: 38em;
  margin-bottom: clamp(28px, 5vw, 48px);
}
.section-head h2 { font-size: clamp(28px, 4.2vw, 44px); }
.section-head p { margin-top: 14px; font-size: clamp(17px, 1.8vw, 19px); }

/* ---------- What reaches Apple Health ---------- */

.compare {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.compare th, .compare td {
  padding: 18px 16px 18px 0;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.compare thead th {
  padding-block: 0 14px;
  border-top: 0;
  font: 700 clamp(15px, 1.8vw, 19px)/1.25 var(--display);
}
.compare tbody th { width: 30%; color: var(--dim); }
.compare td:last-child, .compare th:last-child { padding-right: 0; }
.compare svg {
  width: 96px;
  height: 28px;
  margin-bottom: 8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The route is drawn from a real ride and needs more room than the other marks to read as one. */
.compare svg.route { height: auto; aspect-ratio: 96 / 44; stroke-width: 1.6; }
.compare svg .solid { fill: currentColor; stroke: none; }
.compare svg .faint { fill: currentColor; stroke: none; opacity: .3; }

.aside {
  max-width: 44em;
  margin-top: 28px;
  padding-left: 18px;
  border-left: 2px solid var(--soft);
  color: var(--text);
}

@media (max-width: 640px) {
  .compare { font-size: 15px; line-height: 1.35; }
  .compare th, .compare td { padding: 14px 10px 14px 0; }
  .compare tbody th { width: 27%; }
  .compare svg { width: 82px; }
}

/* ---------- Three steps ---------- */

.steps {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 28px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--raised);
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  width: 30px;
  height: 30px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--bg);
  font: 700 16px/30px var(--display);
  text-align: center;
}
.steps h3 { font-size: 22px; }
.steps p { margin-top: 8px; }

/* The top of a phone, cut off by the card. */
.shot {
  position: relative;
  width: 240px;
  max-width: 100%;
  margin: 28px auto 0;
  padding: 7px 7px 0;
  border-radius: 42px 42px 0 0;
  background: var(--bezel);
  box-shadow: 0 0 0 1px rgba(157, 178, 230, .4);
}
.shot::after { margin-top: calc(3.4% + 7px); }
.shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 700;
  object-fit: cover;
  object-position: top;
  border-radius: 35px 35px 0 0;
}

@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .shot img { aspect-ratio: 600 / 881; }
}

/* ---------- Estimates and the effort plate ---------- */

.estimates {
  display: grid;
  gap: 36px;
  align-items: center;
}
.estimates .section-head { margin-bottom: 0; }
.estimates .section-head p + p { margin-top: 16px; }

@media (min-width: 900px) {
  .estimates { grid-template-columns: 1.1fr .9fr; gap: 64px; }
}

.effort {
  position: relative;
  padding: 22px 22px 16px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--raised);
}
.effort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--bright);
}
/* The switch comes first in the markup so the notes after it can follow its state. */
label.effort-row {
  flex-direction: row-reverse;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.effort .sub {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--estimate);
}
.effort .sub.mine { color: var(--dim); }
.switch:checked + span .when-off, .switch:not(:checked) + span .when-on { display: none; }
.switch {
  flex: none;
  position: relative;
  width: 51px;
  height: 31px;
  margin: 0;
  border-radius: 999px;
  background: rgba(235, 235, 245, .2);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background .2s;
}
.switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  transition: translate .2s;
}
.switch:checked { background: #6A93BD; }
.switch:checked::before { translate: 20px 0; }
.effort-value {
  color: var(--bright);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.effort svg {
  display: none;
  width: 100%;
  height: 80px;
  margin-top: 4px;
  overflow: visible;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.effort .plate { stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.effort .plate, .effort rect { transition: fill .2s; }
.effort rect { fill: rgba(235, 235, 245, .22); }
.effort circle { fill: var(--estimate); }
.effort [type=range] { width: 100%; margin-top: 16px; }
.effort-hint { margin-top: 8px; font-size: 13px; color: var(--dim); }

/* With the script running, the drawn plate takes over and the slider stays for the keyboard. */
.effort.live svg { display: block; }
.effort.live [type=range] {
  position: absolute;
  inset: auto 22px 44px;
  width: auto;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.effort.live:has([type=range]:focus-visible) svg {
  outline: 2px solid var(--soft);
  outline-offset: 2px;
  border-radius: 40px;
}

/* ---------- Private by design ---------- */

.private h2 { font-size: clamp(36px, 6.4vw, 64px); line-height: 1.04; letter-spacing: -.03em; }
.private h2 span { display: block; }
.private p {
  max-width: 36em;
  margin-top: 22px;
  font-size: clamp(17px, 1.8vw, 19px);
}
.private p + p { margin-top: 14px; }

/* ---------- Facts and questions ---------- */

.closing {
  display: grid;
  gap: clamp(48px, 8vw, 72px);
}
@media (min-width: 900px) {
  .closing { grid-template-columns: .85fr 1.15fr; gap: 72px; }
}
.closing h2 { margin-bottom: 20px; font-size: 28px; }

.facts { margin: 0; }
.facts div {
  display: grid;
  grid-template-columns: minmax(96px, 34%) 1fr;
  gap: 16px;
  padding-block: 14px;
  border-top: 1px solid var(--line);
}
.facts dt { color: var(--dim); }
.facts dd { margin: 0; color: var(--bright); }

.faq details { border-top: 1px solid var(--line); }
.faq summary, .toc summary {
  position: relative;
  padding: 16px 36px 16px 0;
  cursor: pointer;
  list-style: none;
  color: var(--bright);
  font-weight: 600;
}
.faq summary::-webkit-details-marker, .toc summary::-webkit-details-marker { display: none; }
.faq summary::after, .toc summary::after {
  content: "+";
  position: absolute;
  top: 11px;
  right: 2px;
  font: 400 26px/1 var(--body);
  color: var(--soft);
  transition: rotate .2s;
}
.faq details[open] summary::after, .toc[open] summary::after { rotate: 45deg; }
.faq details p { max-width: 40em; padding-bottom: 20px; }

/* ---------- Footer ---------- */

.site-footer {
  padding-block: 36px 56px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--dim);
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--bright); }
.site-footer p { max-width: 62em; margin-top: 20px; font-size: 13px; }

/* ---------- Document pages: privacy, terms, support ---------- */

.doc {
  max-width: 760px;
  padding-block: clamp(28px, 6vw, 64px) clamp(64px, 10vw, 120px);
}
.doc h1 { font-size: clamp(30px, 8.4vw, 52px); letter-spacing: -.03em; }
/* On the narrowest phones a long word in the title is hyphenated rather than pushing the page sideways. */
@media (max-width: 360px) {
  .doc h1 { -webkit-hyphens: auto; hyphens: auto; }
}
.doc .updated { margin-top: 16px; color: var(--dim); }
.doc .summary { margin-top: 24px; font-size: clamp(18px, 2vw, 21px); line-height: 1.45; }
.doc h2 {
  margin-top: 56px;
  font-size: clamp(22px, 3vw, 28px);
  scroll-margin-top: 24px;
}
.doc p, .doc ul, .doc ol { margin-block: 16px 0; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li + li { margin-top: 10px; }
.doc li::marker { color: var(--soft); }
.doc strong { font-weight: 600; color: var(--bright); }

/* Legal texts number their sections, so one can be cited. */
.doc.numbered { counter-reset: section; }
.doc.numbered h2 { counter-increment: section; }
.doc.numbered h2::before { content: counter(section) ". "; color: var(--soft); }

.toc {
  margin-top: 32px;
  padding-inline: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--raised);
}
.toc summary::after { right: 0; }
.toc ol, .toc ul { margin: 0; padding: 0 0 18px 1.5em; }
.toc li + li { margin-top: 8px; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--bright); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .halo.piece { animation: none; }
  .effort .plate, .effort rect, .switch, .switch::before, .faq summary::after, .toc summary::after { transition: none; }
}