/* LiftVerify website. Matches the Figma frames "Web / Home", "Web / Privacy",
   "Web / Terms" and "Web / Support" (light and dark). Colors are the Figma
   variables; the page follows the device's light or dark setting. */

@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --text-primary: #222222;
  --text-secondary: #717171;
  --primary-main: #7c4dff;
  --primary-text: #6a3de8;
  --primary-soft: #f3efff;
  --background-default: #ffffff;
  --background-paper: #ffffff;
  --background-paper2: #f7f7f7;
  --divider: #ebebeb;
  --success-main: #008a05;
  /* Purple surfaces with white text (Get the app, the final card). */
  --primary-fill: #7c4dff;
  /* Secondary text on the lavender email card; Figma's #717171 is 4.3:1 there. */
  --text-on-soft: #6d6d6d;
  --button-on-white: #5b2fd6;
  /* Inside the app screens drawn on the Home page. */
  --app-soft: #efe8ff;
  --app-accent: #7c4dff;
  --app-accent-text: #5b2fd1;
  --app-muted: #737373;
  --app-rest: rgba(227, 227, 232, 0.6);
  --app-short: #e3e3e8;
  --app-done-check: #ffffff;
  --app-success-soft: #ebf7ec;
  --app-success-text: #00750a;
  --app-warning-soft: #fff5e6;
  --app-warning-text: #b25e00;
  --app-note-text: #9a5000;
  --app-figure: #222222;
  --app-radio-off: #b0b0b0;
  --app-glow-pink: rgba(217, 70, 239, 0.07);
  --app-glow-purple: rgba(124, 77, 255, 0.1);
  --app-gradient: linear-gradient(178.69deg, #5b2eff 0%, #9333ea 50%, #c026d3 100%);
  --app-thumb: linear-gradient(135deg, #5b2eff 0%, #9333ea 50%, #c026d3 100%);
  --app-selected-border: #5b2eff;
  --app-selected-bg: linear-gradient(90deg, #faf8ff, #fef7ff);
  --app-continue: #2b2d31;
  --app-continue-shadow: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f2f3f5;
    --text-secondary: #b5bac1;
    --primary-main: #8b6cff;
    --primary-text: #c4b5fd;
    --primary-soft: #3a3452;
    --background-default: #313338;
    --background-paper: #2b2d31;
    --background-paper2: #1e1f22;
    --divider: #3f4147;
    --success-main: #23a55a;
    /* Figma uses #8b6cff, where white text is 3.7:1. */
    --primary-fill: #7c4dff;
    --text-on-soft: #b5bac1;
    --app-soft: #2e2450;
    --app-accent: #b9a4ff;
    --app-accent-text: #c9b8ff;
    --app-muted: #9a9ea8;
    --app-rest: rgba(58, 58, 64, 0.6);
    --app-short: #3a3a40;
    --app-done-check: #1f1c2b;
    --app-success-soft: #1f3a2b;
    --app-success-text: #3dd68c;
    --app-warning-soft: #3d3322;
    --app-warning-text: #f0b232;
    --app-note-text: #f0b232;
    --app-figure: #f2f3f5;
    --app-radio-off: #80848e;
    --app-glow-pink: rgba(217, 70, 239, 0.18);
    --app-glow-purple: rgba(124, 77, 255, 0.3);
    --app-gradient: linear-gradient(178.69deg, #8b6cff 0%, #d946ef 100%);
    --app-thumb: linear-gradient(135deg, #8b6cff 0%, #d946ef 100%);
    --app-selected-border: #8b6cff;
    --app-selected-bg: linear-gradient(90deg, #3a3452, #452f55);
    --app-continue: linear-gradient(171.95deg, #5b2eff 0%, #9333ea 50%, #c026d3 100%);
    --app-continue-shadow: 0 5.333px 6.667px rgba(0, 0, 0, 0.45);
  }
}

*,
*::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(--background-default);
  color: var(--text-primary);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: normal;
  overflow-wrap: break-word;
}

h1,
h2,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
}

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--text-primary);
  color: var(--background-default);
  font-weight: 700;
  text-decoration: none;
}

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

/* Checkmarks: one drawing, colored per use. */
.check {
  flex: none;
}

.check circle {
  fill: currentColor;
}

.check path {
  fill: none;
  stroke: #ffffff;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

button.button {
  cursor: default;
}

.button-large {
  padding: 16px 28px;
  font-size: 17px;
}

.button-dark {
  background: var(--text-primary);
  color: var(--background-default);
}

.button-outline {
  padding: 16px 28px;
  border: 1.5px solid var(--divider);
  color: var(--text-primary);
  cursor: pointer;
}

.button-white {
  background: #ffffff;
  color: var(--button-on-white);
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 16px 40px;
  background: var(--background-default);
  border-bottom: 1px solid var(--divider);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 7.158px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav ul {
  display: flex;
  gap: 28px;
}

.site-nav a {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.site-nav a:hover,
.site-footer a:hover {
  text-decoration: underline;
}

.button-get-app {
  padding: 10px 20px;
  background: var(--primary-fill);
  color: #ffffff;
  font-size: 15px;
}

/* Footer */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 24px;
  background: var(--background-paper2);
  border-top: 1px solid var(--divider);
  text-align: center;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  color: var(--primary-text);
  font-size: 15px;
  font-weight: 500;
}

.site-footer a {
  text-decoration: none;
}

.footer-email {
  color: var(--text-secondary);
  font-size: 15px;
}

/* Figma uses text/tertiary (#b0b0b0), which is 2:1 on this background. */
.footer-copyright {
  color: var(--text-secondary);
  font-size: 13px;
}

/* Home: hero */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1280px;
  min-height: 820px;
  margin: 0 auto;
  padding: 72px 80px 88px;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  flex: 0 1 520px;
  min-width: 0;
}

.rep-checks {
  display: flex;
  gap: 12px;
  color: var(--primary-main);
}

.rep-checks .check {
  width: 40px;
  height: 40px;
}

.hero h1 {
  font-size: 64px;
  font-weight: 900;
  line-height: 66px;
  letter-spacing: -0.015em;
}

.hero h1 span {
  color: var(--primary-main);
}

.hero-lede {
  color: var(--text-secondary);
  font-size: 21px;
  line-height: 32px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
}

.trust li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.trust .check {
  width: 18px;
  height: 18px;
  color: var(--success-main);
}

.hero-visual {
  position: relative;
  flex: none;
  width: 560px;
  height: 660px;
}

.glow-ring {
  position: absolute;
  left: 30px;
  top: 100px;
  width: 500px;
  height: 500px;
  border: 13px solid var(--primary-main);
  border-radius: 50%;
  background: var(--primary-soft);
  box-shadow: 0 0 50px rgba(124, 77, 255, 0.55);
}

.hero-phone {
  position: absolute;
  left: 125px;
  top: 0;
  width: 310px;
}

.phone-image {
  width: 100%;
  height: auto;
  border-radius: 50px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
}

.floating-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  background: var(--background-paper);
  border: 1px solid var(--divider);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  white-space: nowrap;
}

.floating-chip .check {
  width: 28px;
  height: 28px;
}

.floating-chip span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-secondary);
  font-size: 13px;
}

.floating-chip strong {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
}

.chip-depth {
  left: 0;
  top: 430px;
}

.chip-depth .check {
  color: var(--success-main);
}

.chip-sure {
  left: 370px;
  top: 160px;
}

.chip-sure .check {
  color: var(--primary-main);
}

/* Figma places this bubble 10px past the 560px visual; there's room for it. */
.chip-fairly {
  left: 344px;
  top: 470px;
}

.floating-chip .info {
  flex: none;
  width: 28px;
  height: 28px;
}

.info circle {
  fill: #d38105;
}

.info path {
  fill: #ffffff;
}

/* Home: features */
.feature {
  scroll-margin-top: 0;
}

.feature-alt {
  background: var(--background-paper2);
}

.feature-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 96px;
  max-width: 1280px;
  min-height: 744px;
  margin: 0 auto;
  padding: 72px 80px;
}

.feature-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 0 1 480px;
  min-width: 0;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.eyebrow .check {
  width: 20px;
  height: 20px;
  color: var(--primary-main);
}

.feature h2 {
  font-size: 48px;
  font-weight: 900;
  line-height: 54px;
  letter-spacing: -0.01em;
}

.feature-text > p:not(.eyebrow) {
  color: var(--text-secondary);
  font-size: 19px;
  line-height: 30px;
}

.text-link {
  color: var(--primary-text);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

.feature-visual {
  position: relative;
  flex: none;
  width: 460px;
  height: 600px;
}

.soft-circle {
  position: absolute;
  left: 10px;
  top: 80px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: var(--primary-soft);
}

.feature-visual .phone-goal {
  left: 91px;
  top: 9.5px;
}

/* Home: See your progress */
.feature-progress .feature-inner {
  gap: 72px;
  min-height: 888px;
  padding: 104px 80px;
}

.progress-text {
  flex-basis: 470px;
  gap: 22px;
}

.progress-text h2 {
  font-size: 64px;
  line-height: 66px;
  letter-spacing: -0.015em;
}

.progress-text h2 span {
  color: var(--primary-main);
}

.feature-text > p.progress-lede {
  font-size: 21px;
  line-height: 31px;
}

.points {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.points .check {
  width: 24px;
  height: 24px;
  color: var(--success-main);
}

.points span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 22px;
}

.points b {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.feature-text > p.progress-account {
  font-size: 14px;
  line-height: 20px;
}

.progress-text .text-link {
  font-size: 16px;
}

.progress-visual {
  position: relative;
  flex: none;
  width: 560px;
  height: 680px;
}

.progress-glow {
  position: absolute;
  left: 10px;
  top: 70px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: var(--primary-soft);
}

.progress-ring {
  position: absolute;
  left: 58.6px;
  top: 118.6px;
  width: 442.8px;
  height: 442.8px;
  border: 10px solid var(--primary-main);
  border-radius: 50%;
  opacity: 0.35;
}

/* Phones drawn in code. Sizes are the Figma desktop frames; phone layouts
   scale them down. */
.phone {
  position: absolute;
  padding: 6px;
  background: #0f0f14;
  border: 2px solid #474754;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
  transform-origin: 0 0;
}

.phone-small {
  width: 256px;
  height: 535px;
  border-radius: 41px;
}

.phone-history {
  left: 10px;
  top: 0;
}

.phone-rep {
  left: 294px;
  top: 145px;
}

.phone-goal {
  width: 278px;
  height: 581px;
  padding: 7px;
  border-radius: 44px;
}

.phone-island {
  position: absolute;
  left: 90px;
  top: 13px;
  width: 72px;
  height: 20px;
  border-radius: 99px;
  background: #050508;
}

.phone-goal .phone-island {
  left: 98px;
  top: 15px;
  width: 78px;
  height: 22px;
}

.phone-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 33px;
}

.phone-goal .phone-screen {
  border-radius: 35px;
}

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--background-default);
  color: var(--text-primary);
  font-size: 8px;
  line-height: normal;
  white-space: nowrap;
}

.app p {
  margin: 0;
}

.app svg {
  overflow: visible;
}

.app-glow {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 35.5%;
  background:
    radial-gradient(60% 60% at 92% 0, var(--app-glow-pink), transparent),
    radial-gradient(70% 75% at 20% 0, var(--app-glow-purple), transparent);
}

.app-status,
.app-topbar {
  position: relative;
  flex: none;
  font-weight: 500;
}

.app-status {
  padding: 8.615px 17.231px;
  font-size: 9.231px;
}

.app-topbar {
  display: flex;
  align-items: center;
  gap: 3.692px;
  padding: 4.923px 12.308px;
  font-size: 10.462px;
}

.app-topbar p {
  flex: 1;
  text-align: center;
}

.app-lead,
.app-trail {
  flex: none;
  width: 23.385px;
  height: 23.385px;
  padding: 4.923px;
}

.app-back {
  display: block;
  width: 13.506px;
  height: 13.506px;
  fill: var(--text-primary);
}

.app-chip {
  flex: none;
  padding: 1.846px 6.154px;
  border-radius: 100px;
  font-size: 7.38px;
  font-weight: 500;
}

.app-chip.is-success {
  background: var(--app-success-soft);
  color: var(--app-success-text);
}

.app-chip.is-warning {
  background: var(--app-warning-soft);
  color: var(--app-warning-text);
}

/* History screen */
.hist-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 13.538px;
  min-height: 0;
  padding: 4.923px 12.308px;
  overflow: hidden;
}

.hist-summary {
  display: flex;
  align-items: center;
  gap: 9.846px;
  padding: 11.077px;
  border-radius: 13.538px;
  background: var(--app-soft);
}

.hist-ring {
  position: relative;
  flex: none;
  width: 44.308px;
  height: 44.308px;
}

.hist-ring svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hist-ring circle,
.hist-ring path {
  fill: none;
  stroke: var(--app-accent);
  stroke-width: 4.923px;
}

.hist-ring-track {
  stroke-opacity: 0.18;
}

.hist-ring-arc {
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}

.hist-ring-label {
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  font-size: 9.231px;
  font-weight: 700;
  text-align: center;
}

.hist-summary-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.846px;
}

.hist-summary-text b {
  font-size: 14.769px;
  font-weight: 700;
}

.hist-month,
.hist-label {
  color: var(--text-secondary);
  font-size: 8px;
}

.hist-summary-text .hist-month:first-child,
.hist-label {
  font-weight: 500;
}

.hist-up {
  color: var(--app-accent-text);
  font-weight: 700;
}

.hist-streak {
  padding: 2.462px 6.154px;
  border-radius: 61.538px;
  background: var(--background-default);
  font-size: 7.385px;
  font-weight: 500;
}

.hist-week,
.hist-recent {
  display: flex;
  flex-direction: column;
  gap: 6.154px;
}

.hist-recent {
  gap: 7.385px;
}

.hist-days {
  display: flex;
  justify-content: space-between;
}

.hist-weekday {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.692px;
  color: var(--text-secondary);
  font-size: 6.769px;
  font-weight: 500;
}

.hist-day {
  display: block;
  width: 18.462px;
  height: 18.462px;
  border-radius: 50%;
}

.hist-day rect {
  fill: var(--app-accent);
}

.hist-day path {
  fill: none;
  stroke: var(--app-done-check);
  stroke-width: 1.477px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hist-day.is-rest {
  background: var(--app-rest);
}

.hist-day.is-today {
  border: 1.231px dashed var(--app-accent);
}

.hist-card {
  display: flex;
  flex-direction: column;
  gap: 6.154px;
  padding: 8.615px 8.615px 8.615px 9.846px;
  border: 0.615px solid var(--divider);
  border-radius: 11.077px;
  background: var(--background-default);
}

.hist-card-top,
.hist-card-bottom,
.hist-actions {
  display: flex;
  align-items: center;
}

.hist-card-top {
  gap: 6.154px;
}

.hist-card-bottom {
  justify-content: space-between;
}

.hist-card-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.231px;
}

.hist-card-text b {
  font-size: 9.846px;
  font-weight: 700;
}

.hist-card-text span {
  color: var(--text-secondary);
}

.hist-chevron {
  color: var(--text-secondary);
  font-size: 13.538px;
  font-weight: 500;
}

.hist-bars {
  display: flex;
  gap: 3.077px;
}

.hist-bar {
  width: 16px;
  height: 3.692px;
  border-radius: 1.846px;
  background: var(--app-accent);
  transform-origin: 0 50%;
}

.hist-bar.is-short {
  background: var(--app-short);
}

.hist-actions {
  gap: 4.923px;
}

.hist-watch {
  display: flex;
  align-items: center;
  gap: 3.692px;
  padding: 4.308px 8.615px 4.308px 7.385px;
  border-radius: 61.538px;
  background: var(--app-soft);
  color: var(--app-accent-text);
  font-weight: 700;
}

.hist-watch svg {
  width: 4.923px;
  height: 6.154px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.923px;
  stroke-linejoin: round;
}

.hist-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.846px;
  width: 20.923px;
  height: 20.923px;
  border-radius: 50%;
  background: var(--background-paper2);
}

.hist-more i {
  width: 2.462px;
  height: 2.462px;
  border-radius: 50%;
  background: var(--text-secondary);
}

.app-tabbar {
  position: relative;
  display: flex;
  flex: none;
  gap: 4.923px;
  padding: 4.923px 4.923px 16px;
  border-top: 0.615px solid var(--divider);
  background: var(--background-default);
}

.app-tabbar span {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 1.846px;
  padding: 2.462px 0;
  color: var(--app-muted);
  font-size: 6.769px;
}

.app-tabbar svg {
  width: 13.538px;
  height: 13.538px;
  fill: var(--app-muted);
}

.app-tabbar .is-current {
  color: var(--text-primary);
  font-weight: 500;
}

.app-tabbar .is-current svg {
  fill: var(--text-primary);
}

/* Rep detail screen */
.rep-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9.823px;
  min-height: 0;
  padding: 4.911px 12.278px;
  overflow: hidden;
}

.rep-tabs {
  display: flex;
  gap: 3.683px;
}

.rep-tab {
  position: relative;
  flex: 1;
  padding: 4.911px 0;
  border-radius: 6.139px;
  background: var(--background-paper2);
  color: var(--text-secondary);
  font-size: 8.595px;
  font-weight: 500;
  text-align: center;
}

.rep-tab.is-current {
  background: var(--text-primary);
  color: var(--background-default);
}

.rep-tab i {
  position: absolute;
  right: 3.68px;
  top: 3.68px;
  width: 3.683px;
  height: 3.683px;
  border-radius: 50%;
  background: var(--app-warning-text);
}

.rep-video {
  position: relative;
  flex: none;
  width: 214.868px;
  height: 165.755px;
}

.rep-video svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rep-video-bg {
  fill: #0b0b0d;
}

.rep-post {
  fill: #18181c;
}

.rep-floor {
  stroke: #26262b;
  stroke-width: 1.228px;
}

.rep-knee-line {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 0.614px;
  stroke-dasharray: 2.46 3.07;
}

.rep-knee-text {
  fill: rgba(255, 255, 255, 0.6);
  font-size: 6.753px;
}

.sk-bar {
  stroke: #d4d4da;
  stroke-width: 1.842px;
  stroke-linecap: round;
}

.sk-plate {
  fill: none;
  stroke: #6e6e78;
  stroke-width: 3.07px;
}

.sk-bone {
  stroke: #a98bff;
  stroke-width: 2.763px;
  stroke-linecap: round;
}

.sk-head {
  fill: none;
  stroke: #a98bff;
  stroke-width: 2.149px;
}

.sk-joint {
  fill: #ffffff;
  stroke: #a98bff;
  stroke-width: 1.842px;
}

.rep-pill {
  position: absolute;
  left: 28.4px;
  top: 135px;
  height: 14.396px;
  padding: 0 6.75px;
  border-radius: 7.198px;
  background: #2e7d32;
  color: #ffffff;
  font-size: 7.367px;
  font-weight: 500;
  line-height: 14.396px;
}

.rep-phases {
  display: flex;
  gap: 2.456px;
}

.rep-phase {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3.07px;
  color: var(--app-muted);
  font-size: 6.753px;
}

.rep-phase.is-lit {
  color: var(--text-primary);
}

.rep-phase-bar {
  height: 2.456px;
  border-radius: 1.228px;
  background: var(--primary-main);
  opacity: var(--lit, 0.2);
}

.rep-phase.is-lit .rep-phase-bar {
  opacity: var(--lit, 1);
}

.rep-scrubber {
  position: relative;
  flex: none;
  height: 12.278px;
}

.rep-track,
.rep-fill {
  position: absolute;
  left: 0;
  top: 4.91px;
  height: 2.456px;
  border-radius: 1.228px;
}

.rep-track {
  width: 100%;
  background: var(--divider);
}

.rep-fill {
  width: 103.4px;
  background: var(--app-gradient);
}

.rep-thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 12.278px;
  height: 12.278px;
  border-radius: 50%;
  background: var(--app-thumb);
  transform: translateX(97.2px);
}

.rep-note {
  padding: 6.139px 7.367px;
  border-radius: 7.367px;
  background: var(--app-warning-soft);
  color: var(--app-note-text);
  font-size: 7.981px;
  line-height: 11.05px;
  white-space: normal;
}

.rep-note[hidden] {
  display: none;
}

.rep-rows p {
  display: flex;
  align-items: flex-start;
  gap: 4.911px;
  padding: 6.753px 0;
  border-bottom: 0.614px solid var(--divider);
}

.rep-rows p:last-child {
  align-items: center;
  padding: 5.525px 0;
  border-bottom: 0;
}

.rep-rows span:first-child {
  flex: 1;
  color: var(--text-secondary);
  font-size: 8.595px;
}

.rep-rows b {
  font-size: 9.209px;
  font-weight: 500;
}

.rep-rows .is-yes {
  color: var(--app-success-text);
}

.rep-rows .app-chip.is-fairly {
  background: var(--app-warning-soft);
  color: var(--app-note-text);
}

.rep-again {
  flex: none;
  width: 214.868px;
  padding: 9.209px 13.506px;
  border: 0.614px solid var(--divider);
  border-radius: 61.391px;
  font-size: 9.82px;
  font-weight: 500;
  text-align: center;
}

/* Squat goal screen (Figma frame is 260 wide, so its sizes differ) */
.phone-goal .app-status {
  padding: 9.333px 18.667px;
  font-size: 10px;
}

.phone-goal .app-topbar {
  gap: 4px;
  padding: 5.333px 13.333px;
  font-size: 11.333px;
}

.phone-goal .app-lead,
.phone-goal .app-trail {
  width: 25.333px;
  height: 25.333px;
  padding: 5.333px;
}

.phone-goal .app-back {
  width: 14.667px;
  height: 14.667px;
}

.goal-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 13.333px;
  min-height: 0;
  padding: 5.333px 13.333px;
  white-space: normal;
}

.goal-head {
  display: flex;
  flex-direction: column;
  gap: 5.333px;
}

.goal-head b {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.1333px;
}

.goal-head span {
  color: var(--text-secondary);
  font-size: 10px;
}

.goal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.goal-card {
  display: flex;
  align-items: center;
  gap: 9.333px;
  padding: 10.667px 10.667px 10.667px 9.333px;
  border: 1px solid var(--divider);
  border-radius: 10.667px;
  background: var(--background-paper);
}

.goal-card.is-selected {
  border-color: var(--app-selected-border);
  background: var(--app-selected-bg);
}

.goal-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.goal-badge {
  padding: 2px 5.333px;
  border-radius: 66px;
  background: var(--app-soft);
  color: var(--app-accent-text);
  font-size: 7.333px;
  font-weight: 700;
}

.goal-text b {
  font-size: 10.667px;
  font-weight: 700;
}

.goal-depth {
  font-size: 9.333px;
  font-weight: 500;
  line-height: 12.667px;
}

.goal-about {
  color: var(--text-secondary);
  font-size: 8.667px;
  line-height: 12px;
}

.goal-radio {
  flex: none;
  width: 14.667px;
  height: 14.667px;
}

.goal-radio circle {
  fill: none;
  stroke: var(--app-radio-off);
  stroke-width: 1.333px;
}

.goal-radio.is-on circle {
  stroke: var(--app-selected-border);
}

.goal-radio .goal-radio-dot {
  fill: var(--app-selected-border);
  stroke: none;
}

.goal-note {
  color: var(--text-secondary);
  font-size: 8.667px;
  line-height: 12.667px;
}

/* 22.667px under the button is an iPhone's 34pt home-bar space, scaled to
   this 260px screen. */
.goal-footer {
  position: relative;
  flex: none;
  padding: 8px 13.333px 22.667px;
}

.goal-continue {
  display: block;
  padding: 10px 14.667px;
  border-radius: 66.667px;
  background: var(--app-continue);
  box-shadow: var(--app-continue-shadow);
  color: #ffffff;
  font-size: 10.67px;
  font-weight: 500;
  text-align: center;
}

/* Squat figures: each part turns around its joint, like the Figma frames.
   Still, they show each goal's depth. */
.squat-figure {
  position: relative;
  flex: none;
  width: 53.333px;
  height: 53.333px;
  border-radius: 9.333px;
  background: var(--background-paper2);
  overflow: hidden;
}

.squat-figure svg {
  position: absolute;
  overflow: visible;
}

.squat-figure path,
.squat-figure circle {
  fill: none;
  stroke: var(--app-figure);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fig-knee-level {
  left: 4.667px;
  top: 33.99px;
  width: 44px;
  height: 1px;
}

.squat-parallel .fig-knee-level {
  top: 34.98px;
}

.squat-competition .fig-knee-level {
  top: 36.46px;
}

.squat-figure .fig-knee-level path {
  stroke: var(--app-accent);
  stroke-width: 1px;
  stroke-dasharray: 2 2;
  stroke-linecap: butt;
}

.fig-foot {
  left: 27.667px;
  top: 45.667px;
  width: 7.333px;
  height: 2px;
}

.fig-shin,
.fig-thigh {
  left: 16px;
  width: 25.333px;
  height: 25.333px;
}

.fig-shin {
  top: 34px;
}

.fig-thigh {
  top: 21.333px;
}

.fig-torso {
  left: 10.667px;
  top: 3.333px;
  width: 36px;
  height: 36px;
}

.squat-figure .fig-torso circle {
  stroke-width: 1.667px;
}

.fig-hip {
  left: 26px;
  top: 18.667px;
  width: 5.333px;
  height: 5.333px;
}

.squat-figure .fig-hip circle {
  fill: var(--app-accent);
  stroke: none;
}

.squat-everyday .fig-shin { rotate: 0.279rad; }
.squat-everyday .fig-thigh { rotate: -0.908rad; translate: 3.491px 0.491px; }
.squat-everyday .fig-torso { rotate: 0.454rad; translate: -6.49px 5.359px; }
.squat-everyday .fig-hip { translate: -6.49px 5.359px; }
.squat-parallel .fig-shin { rotate: 0.489rad; }
.squat-parallel .fig-thigh { rotate: -1.571rad; translate: 5.947px 1.483px; }
.squat-parallel .fig-torso { rotate: 0.628rad; translate: -6.72px 14.149px; }
.squat-parallel .fig-hip { translate: -6.72px 14.149px; }
.squat-competition .fig-shin { rotate: 0.698rad; }
.squat-competition .fig-thigh { rotate: -2.129rad; translate: 8.142px 2.963px; }
.squat-competition .fig-torso { rotate: 0.803rad; translate: -2.6px 22.342px; }
.squat-competition .fig-hip { translate: -2.6px 22.342px; }

/* Animations, from the Figma motion data. home.js adds .motion when the
   device allows motion; sections pause while off screen. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fade-in {
    from { opacity: 0; }
  }

  @keyframes rise-10 {
    from { translate: 0 10px; }
  }

  @keyframes rise-8 {
    from { translate: 0 8px; }
  }

  @keyframes rise-16 {
    from { translate: 0 16px; }
  }

  @keyframes phone-in {
    from { opacity: 0; translate: 0 40px; }
  }

  /* Hidden until it starts, so the round end doesn't show as a dot. */
  @keyframes ring-sweep {
    0% { stroke-dashoffset: 1; opacity: 0; }
    1% { opacity: 1; }
    100% { stroke-dashoffset: 0; }
  }

  @keyframes bar-fill {
    from { transform: scaleX(0.0625); }
  }

  /* Each bubble: pops in, stays about 6 s, fades out; 8.6 s loop. */
  @keyframes bubble-1-fade {
    0%, 5.81% { opacity: 0; animation-timing-function: ease-out; }
    11.05%, 86.05% { opacity: 1; animation-timing-function: ease-in; }
    91.28%, 100% { opacity: 0; }
  }

  @keyframes bubble-1-move {
    0%, 5.81% { translate: 0 16px; animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1); }
    12.79%, 86.05% { translate: 0 0; animation-timing-function: ease-in; }
    91.28%, 100% { translate: 0 -8px; }
  }

  @keyframes bubble-2-fade {
    0%, 12.79% { opacity: 0; animation-timing-function: ease-out; }
    18.02%, 87.79% { opacity: 1; animation-timing-function: ease-in; }
    93.02%, 100% { opacity: 0; }
  }

  @keyframes bubble-2-move {
    0%, 12.79% { translate: 0 16px; animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1); }
    19.77%, 87.79% { translate: 0 0; animation-timing-function: ease-in; }
    93.02%, 100% { translate: 0 -8px; }
  }

  @keyframes bubble-3-fade {
    0%, 19.77% { opacity: 0; animation-timing-function: ease-out; }
    25%, 89.53% { opacity: 1; animation-timing-function: ease-in; }
    94.77%, 100% { opacity: 0; }
  }

  @keyframes bubble-3-move {
    0%, 19.77% { translate: 0 16px; animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1); }
    26.74%, 89.53% { translate: 0 0; animation-timing-function: ease-in; }
    94.77%, 100% { translate: 0 -8px; }
  }

  @keyframes squat-everyday-shin {
    0% { rotate: 0rad; }
    9.3% { rotate: 0rad; }
    11.63% { rotate: 0rad; }
    13.95% { rotate: 0.003rad; }
    16.28% { rotate: 0.011rad; }
    18.6% { rotate: 0.026rad; }
    20.93% { rotate: 0.051rad; }
    23.26% { rotate: 0.088rad; }
    25.58% { rotate: 0.14rad; }
    27.91% { rotate: 0.191rad; }
    30.23% { rotate: 0.228rad; }
    32.56% { rotate: 0.253rad; }
    34.88% { rotate: 0.268rad; }
    37.21% { rotate: 0.276rad; }
    39.54% { rotate: 0.279rad; }
    41.86% { rotate: 0.279rad; }
    62.79% { rotate: 0.279rad; }
    65.12% { rotate: 0.278rad; }
    67.44% { rotate: 0.273rad; }
    69.77% { rotate: 0.257rad; }
    72.09% { rotate: 0.226rad; }
    74.42% { rotate: 0.174rad; }
    76.74% { rotate: 0.105rad; }
    79.07% { rotate: 0.054rad; }
    81.4% { rotate: 0.023rad; }
    83.72% { rotate: 0.007rad; }
    86.05% { rotate: 0.001rad; }
    88.37% { rotate: 0rad; }
    100% { rotate: 0rad; }
  }
  @keyframes squat-everyday-thigh {
    0% { rotate: 0rad; translate: 0px 0px; }
    9.3% { rotate: 0rad; translate: 0px 0px; }
    11.63% { rotate: -0.001rad; translate: 0.005px 0px; }
    13.95% { rotate: -0.011rad; translate: 0.041px 0px; }
    16.28% { rotate: -0.036rad; translate: 0.139px 0.001px; }
    18.6% { rotate: -0.085rad; translate: 0.33px 0.004px; }
    20.93% { rotate: -0.165rad; translate: 0.644px 0.016px; }
    23.26% { rotate: -0.286rad; translate: 1.112px 0.049px; }
    25.58% { rotate: -0.454rad; translate: 1.763px 0.123px; }
    27.91% { rotate: -0.622rad; translate: 2.409px 0.231px; }
    30.23% { rotate: -0.742rad; translate: 2.868px 0.329px; }
    32.56% { rotate: -0.823rad; translate: 3.173px 0.404px; }
    34.88% { rotate: -0.872rad; translate: 3.357px 0.453px; }
    37.21% { rotate: -0.897rad; translate: 3.452px 0.479px; }
    39.54% { rotate: -0.906rad; translate: 3.486px 0.489px; }
    41.86% { rotate: -0.908rad; translate: 3.491px 0.491px; }
    62.79% { rotate: -0.908rad; translate: 3.491px 0.491px; }
    65.12% { rotate: -0.905rad; translate: 3.481px 0.488px; }
    67.44% { rotate: -0.886rad; translate: 3.41px 0.468px; }
    69.77% { rotate: -0.834rad; translate: 3.215px 0.415px; }
    72.09% { rotate: -0.733rad; translate: 2.833px 0.321px; }
    74.42% { rotate: -0.567rad; translate: 2.197px 0.192px; }
    76.74% { rotate: -0.341rad; translate: 1.326px 0.07px; }
    79.07% { rotate: -0.175rad; translate: 0.68px 0.018px; }
    81.4% { rotate: -0.074rad; translate: 0.287px 0.003px; }
    83.72% { rotate: -0.022rad; translate: 0.085px 0px; }
    86.05% { rotate: -0.003rad; translate: 0.011px 0px; }
    88.37% { rotate: 0rad; translate: 0px 0px; }
    100% { rotate: 0rad; translate: 0px 0px; }
  }
  @keyframes squat-everyday-torso {
    0% { rotate: 0rad; translate: 0px 0px; }
    9.3% { rotate: 0rad; translate: 0px 0px; }
    11.63% { rotate: 0.001rad; translate: -0.012px 0px; }
    13.95% { rotate: 0.005rad; translate: -0.093px 0.001px; }
    16.28% { rotate: 0.018rad; translate: -0.313px 0.009px; }
    18.6% { rotate: 0.042rad; translate: -0.741px 0.05px; }
    20.93% { rotate: 0.083rad; translate: -1.441px 0.189px; }
    23.26% { rotate: 0.143rad; translate: -2.458px 0.563px; }
    25.58% { rotate: 0.227rad; translate: -3.79px 1.405px; }
    27.91% { rotate: 0.311rad; translate: -4.97px 2.602px; }
    30.23% { rotate: 0.371rad; translate: -5.694px 3.66px; }
    32.56% { rotate: 0.411rad; translate: -6.113px 4.456px; }
    34.88% { rotate: 0.436rad; translate: -6.339px 4.97px; }
    37.21% { rotate: 0.448rad; translate: -6.447px 5.242px; }
    39.54% { rotate: 0.453rad; translate: -6.485px 5.344px; }
    41.86% { rotate: 0.454rad; translate: -6.49px 5.359px; }
    62.79% { rotate: 0.454rad; translate: -6.49px 5.359px; }
    65.12% { rotate: 0.452rad; translate: -6.479px 5.329px; }
    67.44% { rotate: 0.443rad; translate: -6.399px 5.12px; }
    69.77% { rotate: 0.417rad; translate: -6.166px 4.57px; }
    72.09% { rotate: 0.367rad; translate: -5.643px 3.574px; }
    74.42% { rotate: 0.283rad; translate: -4.602px 2.172px; }
    76.74% { rotate: 0.17rad; translate: -2.909px 0.799px; }
    79.07% { rotate: 0.087rad; translate: -1.52px 0.211px; }
    81.4% { rotate: 0.037rad; translate: -0.645px 0.038px; }
    83.72% { rotate: 0.011rad; translate: -0.191px 0.003px; }
    86.05% { rotate: 0.001rad; translate: -0.024px 0px; }
    88.37% { rotate: 0rad; translate: 0px 0px; }
    100% { rotate: 0rad; translate: 0px 0px; }
  }
  @keyframes squat-everyday-hip {
    0% { translate: 0px 0px; }
    9.3% { translate: 0px 0px; }
    11.63% { translate: -0.012px 0px; }
    13.95% { translate: -0.093px 0.001px; }
    16.28% { translate: -0.313px 0.009px; }
    18.6% { translate: -0.741px 0.05px; }
    20.93% { translate: -1.441px 0.189px; }
    23.26% { translate: -2.458px 0.563px; }
    25.58% { translate: -3.79px 1.405px; }
    27.91% { translate: -4.97px 2.602px; }
    30.23% { translate: -5.694px 3.66px; }
    32.56% { translate: -6.113px 4.456px; }
    34.88% { translate: -6.339px 4.97px; }
    37.21% { translate: -6.447px 5.242px; }
    39.54% { translate: -6.485px 5.344px; }
    41.86% { translate: -6.49px 5.359px; }
    62.79% { translate: -6.49px 5.359px; }
    65.12% { translate: -6.479px 5.329px; }
    67.44% { translate: -6.399px 5.12px; }
    69.77% { translate: -6.166px 4.57px; }
    72.09% { translate: -5.643px 3.574px; }
    74.42% { translate: -4.602px 2.172px; }
    76.74% { translate: -2.909px 0.799px; }
    79.07% { translate: -1.52px 0.211px; }
    81.4% { translate: -0.645px 0.038px; }
    83.72% { translate: -0.191px 0.003px; }
    86.05% { translate: -0.024px 0px; }
    88.37% { translate: 0px 0px; }
    100% { translate: 0px 0px; }
  }
  @keyframes squat-parallel-shin {
    0% { rotate: 0rad; }
    9.3% { rotate: 0rad; }
    11.63% { rotate: 0.001rad; }
    13.95% { rotate: 0.006rad; }
    16.28% { rotate: 0.019rad; }
    18.6% { rotate: 0.046rad; }
    20.93% { rotate: 0.089rad; }
    23.26% { rotate: 0.154rad; }
    25.58% { rotate: 0.244rad; }
    27.91% { rotate: 0.335rad; }
    30.23% { rotate: 0.4rad; }
    32.56% { rotate: 0.443rad; }
    34.88% { rotate: 0.469rad; }
    37.21% { rotate: 0.483rad; }
    39.54% { rotate: 0.488rad; }
    41.86% { rotate: 0.489rad; }
    62.79% { rotate: 0.489rad; }
    65.12% { rotate: 0.487rad; }
    67.44% { rotate: 0.477rad; }
    69.77% { rotate: 0.449rad; }
    72.09% { rotate: 0.395rad; }
    74.42% { rotate: 0.305rad; }
    76.74% { rotate: 0.184rad; }
    79.07% { rotate: 0.094rad; }
    81.4% { rotate: 0.04rad; }
    83.72% { rotate: 0.012rad; }
    86.05% { rotate: 0.001rad; }
    88.37% { rotate: 0rad; }
    100% { rotate: 0rad; }
  }
  @keyframes squat-parallel-thigh {
    0% { rotate: 0rad; translate: 0px 0px; }
    9.3% { rotate: 0rad; translate: 0px 0px; }
    11.63% { rotate: -0.002rad; translate: 0.009px 0px; }
    13.95% { rotate: -0.018rad; translate: 0.072px 0px; }
    16.28% { rotate: -0.062rad; translate: 0.244px 0.002px; }
    18.6% { rotate: -0.147rad; translate: 0.577px 0.013px; }
    20.93% { rotate: -0.286rad; translate: 1.126px 0.05px; }
    23.26% { rotate: -0.495rad; translate: 1.941px 0.15px; }
    25.58% { rotate: -0.785rad; translate: 3.064px 0.376px; }
    27.91% { rotate: -1.076rad; translate: 4.162px 0.703px; }
    30.23% { rotate: -1.285rad; translate: 4.928px 0.998px; }
    32.56% { rotate: -1.424rad; translate: 5.431px 1.223px; }
    34.88% { rotate: -1.509rad; translate: 5.73px 1.37px; }
    37.21% { rotate: -1.552rad; translate: 5.883px 1.449px; }
    39.54% { rotate: -1.569rad; translate: 5.939px 1.478px; }
    41.86% { rotate: -1.571rad; translate: 5.947px 1.483px; }
    62.79% { rotate: -1.571rad; translate: 5.947px 1.483px; }
    65.12% { rotate: -1.566rad; translate: 5.93px 1.474px; }
    67.44% { rotate: -1.533rad; translate: 5.815px 1.414px; }
    69.77% { rotate: -1.443rad; translate: 5.499px 1.256px; }
    72.09% { rotate: -1.269rad; translate: 4.871px 0.974px; }
    74.42% { rotate: -0.981rad; translate: 3.805px 0.585px; }
    76.74% { rotate: -0.59rad; translate: 2.312px 0.213px; }
    79.07% { rotate: -0.302rad; translate: 1.189px 0.056px; }
    81.4% { rotate: -0.127rad; translate: 0.502px 0.01px; }
    83.72% { rotate: -0.038rad; translate: 0.149px 0.001px; }
    86.05% { rotate: -0.005rad; translate: 0.019px 0px; }
    88.37% { rotate: 0rad; translate: 0px 0px; }
    100% { rotate: 0rad; translate: 0px 0px; }
  }
  @keyframes squat-parallel-torso {
    0% { rotate: 0rad; translate: 0px 0px; }
    9.3% { rotate: 0rad; translate: 0px 0px; }
    11.63% { rotate: 0.001rad; translate: -0.02px 0px; }
    13.95% { rotate: 0.007rad; translate: -0.16px 0.002px; }
    16.28% { rotate: 0.025rad; translate: -0.539px 0.027px; }
    18.6% { rotate: 0.059rad; translate: -1.272px 0.149px; }
    20.93% { rotate: 0.114rad; translate: -2.45px 0.566px; }
    23.26% { rotate: 0.198rad; translate: -4.071px 1.668px; }
    25.58% { rotate: 0.314rad; translate: -5.892px 4.086px; }
    27.91% { rotate: 0.43rad; translate: -6.986px 7.357px; }
    30.23% { rotate: 0.514rad; translate: -7.223px 10.089px; }
    32.56% { rotate: 0.57rad; translate: -7.1px 12.04px; }
    34.88% { rotate: 0.604rad; translate: -6.912px 13.254px; }
    37.21% { rotate: 0.621rad; translate: -6.782px 13.884px; }
    39.54% { rotate: 0.627rad; translate: -6.728px 14.116px; }
    41.86% { rotate: 0.628rad; translate: -6.72px 14.149px; }
    62.79% { rotate: 0.628rad; translate: -6.72px 14.149px; }
    65.12% { rotate: 0.626rad; translate: -6.736px 14.081px; }
    67.44% { rotate: 0.613rad; translate: -6.843px 13.602px; }
    69.77% { rotate: 0.577rad; translate: -7.065px 12.312px; }
    72.09% { rotate: 0.507rad; translate: -7.222px 9.872px; }
    74.42% { rotate: 0.392rad; translate: -6.72px 6.204px; }
    76.74% { rotate: 0.236rad; translate: -4.736px 2.355px; }
    79.07% { rotate: 0.121rad; translate: -2.58px 0.63px; }
    81.4% { rotate: 0.051rad; translate: -1.108px 0.113px; }
    83.72% { rotate: 0.015rad; translate: -0.329px 0.01px; }
    86.05% { rotate: 0.002rad; translate: -0.041px 0px; }
    88.37% { rotate: 0rad; translate: 0px 0px; }
    100% { rotate: 0rad; translate: 0px 0px; }
  }
  @keyframes squat-parallel-hip {
    0% { translate: 0px 0px; }
    9.3% { translate: 0px 0px; }
    11.63% { translate: -0.02px 0px; }
    13.95% { translate: -0.16px 0.002px; }
    16.28% { translate: -0.539px 0.027px; }
    18.6% { translate: -1.272px 0.149px; }
    20.93% { translate: -2.45px 0.566px; }
    23.26% { translate: -4.071px 1.668px; }
    25.58% { translate: -5.892px 4.086px; }
    27.91% { translate: -6.986px 7.357px; }
    30.23% { translate: -7.223px 10.089px; }
    32.56% { translate: -7.1px 12.04px; }
    34.88% { translate: -6.912px 13.254px; }
    37.21% { translate: -6.782px 13.884px; }
    39.54% { translate: -6.728px 14.116px; }
    41.86% { translate: -6.72px 14.149px; }
    62.79% { translate: -6.72px 14.149px; }
    65.12% { translate: -6.736px 14.081px; }
    67.44% { translate: -6.843px 13.602px; }
    69.77% { translate: -7.065px 12.312px; }
    72.09% { translate: -7.222px 9.872px; }
    74.42% { translate: -6.72px 6.204px; }
    76.74% { translate: -4.736px 2.355px; }
    79.07% { translate: -2.58px 0.63px; }
    81.4% { translate: -1.108px 0.113px; }
    83.72% { translate: -0.329px 0.01px; }
    86.05% { translate: -0.041px 0px; }
    88.37% { translate: 0px 0px; }
    100% { translate: 0px 0px; }
  }
  @keyframes squat-competition-shin {
    0% { rotate: 0rad; }
    9.3% { rotate: 0rad; }
    11.63% { rotate: 0.001rad; }
    13.95% { rotate: 0.008rad; }
    16.28% { rotate: 0.027rad; }
    18.6% { rotate: 0.065rad; }
    20.93% { rotate: 0.127rad; }
    23.26% { rotate: 0.22rad; }
    25.58% { rotate: 0.349rad; }
    27.91% { rotate: 0.478rad; }
    30.23% { rotate: 0.571rad; }
    32.56% { rotate: 0.633rad; }
    34.88% { rotate: 0.671rad; }
    37.21% { rotate: 0.69rad; }
    39.54% { rotate: 0.697rad; }
    41.86% { rotate: 0.698rad; }
    62.79% { rotate: 0.698rad; }
    65.12% { rotate: 0.696rad; }
    67.44% { rotate: 0.681rad; }
    69.77% { rotate: 0.641rad; }
    72.09% { rotate: 0.564rad; }
    74.42% { rotate: 0.436rad; }
    76.74% { rotate: 0.262rad; }
    79.07% { rotate: 0.134rad; }
    81.4% { rotate: 0.057rad; }
    83.72% { rotate: 0.017rad; }
    86.05% { rotate: 0.002rad; }
    88.37% { rotate: 0rad; }
    100% { rotate: 0rad; }
  }
  @keyframes squat-competition-thigh {
    0% { rotate: 0rad; translate: 0px 0px; }
    9.3% { rotate: 0rad; translate: 0px 0px; }
    11.63% { rotate: -0.003rad; translate: 0.013px 0px; }
    13.95% { rotate: -0.025rad; translate: 0.103px 0px; }
    16.28% { rotate: -0.084rad; translate: 0.348px 0.005px; }
    18.6% { rotate: -0.199rad; translate: 0.824px 0.027px; }
    20.93% { rotate: -0.388rad; translate: 1.607px 0.102px; }
    23.26% { rotate: -0.67rad; translate: 2.762px 0.305px; }
    25.58% { rotate: -1.065rad; translate: 4.332px 0.764px; }
    27.91% { rotate: -1.459rad; translate: 5.83px 1.422px; }
    30.23% { rotate: -1.741rad; translate: 6.845px 2.009px; }
    32.56% { rotate: -1.931rad; translate: 7.493px 2.454px; }
    34.88% { rotate: -2.045rad; translate: 7.872px 2.743px; }
    37.21% { rotate: -2.104rad; translate: 8.063px 2.897px; }
    39.54% { rotate: -2.126rad; translate: 8.132px 2.955px; }
    41.86% { rotate: -2.129rad; translate: 8.142px 2.963px; }
    62.79% { rotate: -2.129rad; translate: 8.142px 2.963px; }
    65.12% { rotate: -2.123rad; translate: 8.122px 2.946px; }
    67.44% { rotate: -2.078rad; translate: 7.978px 2.828px; }
    69.77% { rotate: -1.957rad; translate: 7.58px 2.518px; }
    72.09% { rotate: -1.72rad; translate: 6.77px 1.961px; }
    74.42% { rotate: -1.329rad; translate: 5.348px 1.184px; }
    76.74% { rotate: -0.8rad; translate: 3.284px 0.433px; }
    79.07% { rotate: -0.41rad; translate: 1.696px 0.114px; }
    81.4% { rotate: -0.173rad; translate: 0.717px 0.02px; }
    83.72% { rotate: -0.051rad; translate: 0.213px 0.002px; }
    86.05% { rotate: -0.006rad; translate: 0.027px 0px; }
    88.37% { rotate: 0rad; translate: 0px 0px; }
    100% { rotate: 0rad; translate: 0px 0px; }
  }
  @keyframes squat-competition-torso {
    0% { rotate: 0rad; translate: 0px 0px; }
    9.3% { rotate: 0rad; translate: 0px 0px; }
    11.63% { rotate: 0.001rad; translate: -0.026px 0px; }
    13.95% { rotate: 0.009rad; translate: -0.211px 0.004px; }
    16.28% { rotate: 0.032rad; translate: -0.712px 0.049px; }
    18.6% { rotate: 0.075rad; translate: -1.675px 0.276px; }
    20.93% { rotate: 0.146rad; translate: -3.185px 1.044px; }
    23.26% { rotate: 0.253rad; translate: -5.108px 3.047px; }
    25.58% { rotate: 0.401rad; translate: -6.746px 7.29px; }
    27.91% { rotate: 0.55rad; translate: -6.757px 12.673px; }
    30.23% { rotate: 0.657rad; translate: -5.638px 16.825px; }
    32.56% { rotate: 0.728rad; translate: -4.362px 19.581px; }
    34.88% { rotate: 0.771rad; translate: -3.394px 21.2px; }
    37.21% { rotate: 0.793rad; translate: -2.843px 22.008px; }
    39.54% { rotate: 0.802rad; translate: -2.631px 22.301px; }
    41.86% { rotate: 0.803rad; translate: -2.6px 22.342px; }
    62.79% { rotate: 0.803rad; translate: -2.6px 22.342px; }
    65.12% { rotate: 0.8rad; translate: -2.663px 22.256px; }
    67.44% { rotate: 0.784rad; translate: -3.093px 21.649px; }
    69.77% { rotate: 0.738rad; translate: -4.156px 19.95px; }
    72.09% { rotate: 0.648rad; translate: -5.757px 16.507px; }
    74.42% { rotate: 0.501rad; translate: -6.952px 10.823px; }
    76.74% { rotate: 0.302rad; translate: -5.802px 4.274px; }
    79.07% { rotate: 0.154rad; translate: -3.348px 1.162px; }
    81.4% { rotate: 0.065rad; translate: -1.46px 0.209px; }
    83.72% { rotate: 0.019rad; translate: -0.436px 0.018px; }
    86.05% { rotate: 0.002rad; translate: -0.054px 0px; }
    88.37% { rotate: 0rad; translate: 0px 0px; }
    100% { rotate: 0rad; translate: 0px 0px; }
  }
  @keyframes squat-competition-hip {
    0% { translate: 0px 0px; }
    9.3% { translate: 0px 0px; }
    11.63% { translate: -0.026px 0px; }
    13.95% { translate: -0.211px 0.004px; }
    16.28% { translate: -0.712px 0.049px; }
    18.6% { translate: -1.675px 0.276px; }
    20.93% { translate: -3.185px 1.044px; }
    23.26% { translate: -5.108px 3.047px; }
    25.58% { translate: -6.746px 7.29px; }
    27.91% { translate: -6.757px 12.673px; }
    30.23% { translate: -5.638px 16.825px; }
    32.56% { translate: -4.362px 19.581px; }
    34.88% { translate: -3.394px 21.2px; }
    37.21% { translate: -2.843px 22.008px; }
    39.54% { translate: -2.631px 22.301px; }
    41.86% { translate: -2.6px 22.342px; }
    62.79% { translate: -2.6px 22.342px; }
    65.12% { translate: -2.663px 22.256px; }
    67.44% { translate: -3.093px 21.649px; }
    69.77% { translate: -4.156px 19.95px; }
    72.09% { translate: -5.757px 16.507px; }
    74.42% { translate: -6.952px 10.823px; }
    76.74% { translate: -5.802px 4.274px; }
    79.07% { translate: -3.348px 1.162px; }
    81.4% { translate: -1.46px 0.209px; }
    83.72% { translate: -0.436px 0.018px; }
    86.05% { translate: -0.054px 0px; }
    88.37% { translate: 0px 0px; }
    100% { translate: 0px 0px; }
  }

  /* Hero: the checks pop in and the phone slides in, once. */
  .motion .pop {
    animation: fade-in 0.35s ease-out both, rise-10 0.5s cubic-bezier(0.45, 1.45, 0.8, 1) both;
  }

  .motion .pop-1 { animation-delay: 0.15s; }
  .motion .pop-2 { animation-delay: 0.25s; }
  .motion .pop-3 { animation-delay: 0.35s; }
  .motion .pop-4 { animation-delay: 0.45s; }
  .motion .pop-5 { animation-delay: 0.55s; }
  .motion .pop-6 { animation-delay: 0.65s; }
  .motion .pop-7 { animation-delay: 0.75s; }

  .motion .hero-phone {
    animation: phone-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
  }

  .motion .chip-depth { animation: bubble-1-fade 8.6s infinite, bubble-1-move 8.6s infinite; }
  .motion .chip-sure { animation: bubble-2-fade 8.6s infinite, bubble-2-move 8.6s infinite; }
  .motion .chip-fairly { animation: bubble-3-fade 8.6s infinite, bubble-3-move 8.6s infinite; }

  /* History fills up once, the first time it's on screen. */
  .motion .hist-summary-text {
    animation: fade-in 0.35s ease-out 0.3s both, rise-8 0.5s cubic-bezier(0.45, 1.45, 0.8, 1) 0.3s both;
  }

  .motion .hist-ring-arc { animation: ring-sweep 1.2s ease-out 0.3s both; }
  .motion .hist-ring-label { animation: fade-in 0.4s ease-out 1.2s both; }

  .motion .done-1,
  .motion .done-2,
  .motion .done-3,
  .motion .hist-day.is-today {
    animation: fade-in 0.35s ease-out both, rise-8 0.5s cubic-bezier(0.45, 1.45, 0.8, 1) both;
  }

  .motion .done-1 { animation-delay: 0.8s; }
  .motion .done-2 { animation-delay: 1.04s; }
  .motion .done-3 { animation-delay: 1.28s; }
  .motion .hist-day.is-today { animation-delay: 1.4s; }

  .motion .hist-card {
    animation: fade-in 0.35s ease-out both, rise-16 0.5s cubic-bezier(0.45, 1.45, 0.8, 1) both;
  }

  .motion .card-1 { animation-delay: 1.2s; }
  .motion .card-2 { animation-delay: 1.45s; }
  .motion .card-3 { animation-delay: 1.7s; }

  .motion .hist-bar { animation: bar-fill 0.35s ease-out both; }
  .motion .bar-1-1 { animation-delay: 1.60s; }
  .motion .bar-1-2 { animation-delay: 1.67s; }
  .motion .bar-1-3 { animation-delay: 1.74s; }
  .motion .bar-1-4 { animation-delay: 1.81s; }
  .motion .bar-1-5 { animation-delay: 1.88s; }
  .motion .bar-2-1 { animation-delay: 1.85s; }
  .motion .bar-2-2 { animation-delay: 1.92s; }
  .motion .bar-2-3 { animation-delay: 1.99s; }
  .motion .bar-2-4 { animation-delay: 2.06s; }
  .motion .bar-2-5 { animation-delay: 2.13s; }
  .motion .bar-2-6 { animation-delay: 2.20s; }
  .motion .bar-3-1 { animation-delay: 2.10s; }
  .motion .bar-3-2 { animation-delay: 2.17s; }
  .motion .bar-3-3 { animation-delay: 2.24s; }
  .motion .bar-3-4 { animation-delay: 2.31s; }
  .motion .bar-3-5 { animation-delay: 2.38s; }

  .motion .feature-progress:not(.has-been-seen) .hist-body * {
    animation-play-state: paused;
  }

  /* Squat figures loop every 4.3 s. */
  .motion .fig-part {
    animation-duration: 4.3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .motion .squat-everyday .fig-shin { animation-name: squat-everyday-shin; }
  .motion .squat-everyday .fig-thigh { animation-name: squat-everyday-thigh; }
  .motion .squat-everyday .fig-torso { animation-name: squat-everyday-torso; }
  .motion .squat-everyday .fig-hip { animation-name: squat-everyday-hip; }
  .motion .squat-parallel .fig-shin { animation-name: squat-parallel-shin; }
  .motion .squat-parallel .fig-thigh { animation-name: squat-parallel-thigh; }
  .motion .squat-parallel .fig-torso { animation-name: squat-parallel-torso; }
  .motion .squat-parallel .fig-hip { animation-name: squat-parallel-hip; }
  .motion .squat-competition .fig-shin { animation-name: squat-competition-shin; }
  .motion .squat-competition .fig-thigh { animation-name: squat-competition-thigh; }
  .motion .squat-competition .fig-torso { animation-name: squat-competition-torso; }
  .motion .squat-competition .fig-hip { animation-name: squat-competition-hip; }

  .motion [data-animate]:not(.is-on-screen) .floating-chip,
  .motion [data-animate]:not(.is-on-screen) .fig-part {
    animation-play-state: paused;
  }
}

/* Home: final call to action */
.final-cta {
  max-width: 1280px;
  margin: 0 auto;
  padding: 88px 80px 96px;
}

.final-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 72px 64px;
  background: var(--primary-fill);
  border-radius: 32px;
  box-shadow: 0 20px 60px rgba(124, 77, 255, 0.35);
  color: #ffffff;
  text-align: center;
}

.final-card img {
  width: 72px;
  height: 72px;
  border-radius: 16.106px;
}

.final-card h2 {
  font-size: 52px;
  font-weight: 900;
  line-height: 58px;
  letter-spacing: -0.01em;
}

/* Figma fades this to 85%, which is 3.9:1 (light) and 3.1:1 (dark). */
.final-card p {
  font-size: 20px;
  line-height: 28px;
}

/* Privacy, Terms and Support */
.page {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
  max-width: 752px;
  margin: 0 auto;
  padding: 64px 16px 96px;
}

.page-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page h1 {
  font-size: 44px;
  font-weight: 700;
  line-height: 52px;
}

.updated {
  color: var(--text-secondary);
  font-size: 15px;
}

.page .short-version {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 28px;
  background: var(--background-paper2);
  border-radius: 20px;
}

.page .short-version h2 {
  font-size: 20px;
  font-weight: 700;
}

.page .short-version ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page .short-version li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 17px;
  line-height: 26px;
}

.page .short-version .check {
  width: 22px;
  height: 22px;
  color: var(--primary-main);
}

.page section:not(.short-version, .email-card) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page section:not(.short-version, .email-card) h2 {
  font-size: 22px;
  font-weight: 700;
}

.page section:not(.short-version, .email-card) p,
.page section:not(.short-version, .email-card) li {
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 27px;
}

.page section:not(.short-version, .email-card) ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page section:not(.short-version, .email-card) li::before,
.email-card li::before {
  content: "• ";
}

.page section:not(.short-version, .email-card) a,
.email-card a {
  color: var(--primary-text);
}

.support-intro {
  color: var(--text-secondary);
  font-size: 19px;
  line-height: 28px;
}

.email-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 28px;
  background: var(--primary-soft);
  border-radius: 20px;
}

.email-card-label {
  color: var(--text-on-soft);
  font-size: 15px;
  font-weight: 500;
}

.email-card-address {
  font-size: 26px;
  font-weight: 700;
}

.email-card h2 {
  /* Figma: a 6pt spacer between two 8pt gaps. */
  margin-top: 14px;
  font-size: 16px;
  font-weight: 500;
}

.email-card ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.email-card li {
  color: var(--text-on-soft);
  font-size: 16px;
  line-height: 24px;
}

/* Between phone and desktop: shrink the side margins and gaps first. */
@media (max-width: 1279px) {
  .hero {
    padding-inline: 40px;
  }

  .feature-inner,
  .final-cta {
    padding-inline: 40px;
  }

  .feature-inner {
    gap: clamp(40px, 6vw, 96px);
  }

  .feature-progress .feature-inner {
    gap: 40px;
    padding-inline: 40px;
  }
}

/* Phone layout, from the "Web / Home / Phone" frames. Also used for tablets
   and for desktop browsers zoomed to 200%. */
@media (max-width: 1099px) {
  .site-header {
    padding: 16px;
  }

  .site-nav ul {
    display: none;
  }

  .hero {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    max-width: 600px;
    min-height: 0;
    padding: 40px 16px 56px;
  }

  .hero-text {
    flex: none;
    gap: 20px;
  }

  .rep-checks {
    gap: 8px;
  }

  .rep-checks .check {
    width: 30px;
    height: 30px;
  }

  .hero h1 {
    font-size: 44px;
    line-height: 46px;
  }

  .hero-lede {
    font-size: 18px;
    line-height: 27px;
  }

  .hero-actions {
    flex-direction: column;
    align-self: stretch;
  }

  .hero-actions .button {
    width: 100%;
    white-space: normal;
  }

  .trust {
    gap: 8px 14px;
  }

  /* Phone frame: 358 x 470, scaled to the screen. */
  .hero-visual {
    width: 100%;
    max-width: 358px;
    height: auto;
    aspect-ratio: 358 / 470;
    margin: 0 auto;
  }

  .glow-ring {
    left: 5.31%;
    top: 18.09%;
    width: 89.39%;
    height: auto;
    aspect-ratio: 1;
    border-width: 8.32px;
    box-shadow: 0 0 32px rgba(124, 77, 255, 0.55);
  }

  .hero-phone {
    left: 20.11%;
    width: 59.78%;
  }

  .phone-image {
    border-radius: 34.5px;
  }

  .chip-depth {
    top: 63.83%;
  }

  /* Figma places this chip past the right edge, where the screen cuts it off. */
  .chip-sure {
    left: auto;
    right: -8px;
    top: 25.53%;
  }

  /* Right-aligned, as in Figma, so it stays on narrow screens. */
  .chip-fairly {
    left: auto;
    right: 0;
    top: 84.04%;
  }

  .feature-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    max-width: 600px;
    min-height: 0;
    padding: 40px 16px;
  }

  .feature-text {
    flex: none;
  }

  .feature h2 {
    font-size: 32px;
    line-height: 36px;
  }

  .feature-text > p:not(.eyebrow) {
    font-size: 17px;
    line-height: 26px;
  }

  /* Phone frame: 358 x 440. */
  .feature-visual {
    width: 358px;
    height: 440px;
    margin: 0 auto;
  }

  .soft-circle {
    left: 29px;
    top: 70px;
    width: 300px;
    height: 300px;
  }

  .feature-visual .phone-goal {
    left: 77px;
    top: 7.5px;
    transform: scale(0.7338);
  }

  .feature-progress .feature-inner {
    gap: 32px;
    min-height: 0;
    padding: 48px 16px;
  }

  .progress-text {
    gap: 16px;
  }

  .progress-text h2 {
    font-size: 40px;
    line-height: 42px;
  }

  .feature-text > p.progress-lede {
    font-size: 18px;
    line-height: 27px;
  }

  .feature-text > p.progress-account {
    font-size: 14px;
    line-height: 20px;
  }

  /* Phone frame: 358 x 420. */
  .progress-visual {
    width: 358px;
    height: 420px;
    margin: 0 auto;
  }

  .progress-glow {
    left: 9px;
    top: 40px;
    width: 340px;
    height: 340px;
  }

  .progress-ring {
    left: 39.6px;
    top: 70.6px;
    width: 278.8px;
    height: 278.8px;
    border-width: 6px;
  }

  .phone-history {
    left: 12px;
    top: 0;
    transform: scale(0.625);
  }

  .phone-rep {
    left: 186px;
    top: 86.7px;
    transform: scale(0.625);
  }

  .final-cta {
    max-width: 600px;
    padding: 40px 16px 48px;
  }

  .final-card {
    padding: 40px 24px;
  }

  .final-card img {
    width: 56px;
    height: 56px;
    border-radius: 12.527px;
  }

  .final-card h2 {
    font-size: 32px;
    line-height: 36px;
  }

  .final-card p {
    font-size: 17px;
    line-height: 28px;
  }

  .final-card .button {
    white-space: normal;
  }

  .page {
    padding-top: 40px;
    padding-bottom: 64px;
  }

  .page h1 {
    font-size: 36px;
    line-height: 42px;
  }

  .page .short-version,
  .email-card {
    padding: 22px 20px;
  }

  .email-card-address {
    font-size: 22px;
  }
}

/* Narrow phones: shrink the drawn phones to fit. */
@media (max-width: 389px) {
  .feature-visual,
  .progress-visual {
    zoom: 0.89;
  }
}

/* Very narrow screens, such as a phone zoomed in. */
@media (max-width: 359px) {
  .feature-visual,
  .progress-visual {
    zoom: 0.8;
  }

  .brand {
    font-size: 18px;
  }

  .button-get-app {
    padding: 8px 14px;
  }

  .hero h1 {
    font-size: 36px;
    line-height: 40px;
  }

  .rep-checks {
    flex-wrap: wrap;
  }
}