/* fitharmony.app - the marketing site, from the Claude Design handoff of 2026-09-26
   (design_handoff_website). The tokens are the app's own (tokens.css, dark set only:
   the phone illustrations are drawn in fixed dark colours, so the page is dark
   whatever the visitor's system setting). */

:root {
  color-scheme: dark;

  --ground: #100F0E;
  --surface-1: #1A1817;
  --surface-2: #232120;
  --surface-3: #2E2B29;
  --hairline: rgba(255, 255, 255, 0.06);
  --hairline-2: rgba(255, 255, 255, 0.09);

  --text-primary: #F5F1EC;
  --text-secondary: #B3ABA3;
  --text-tertiary: #8B847C;

  --state-strong: #6FCF8E;
  --state-strong-fill: #5FBF7E;
  --state-watch: #E8A33D;
  --state-watch-fill: #D99429;
  --state-strain: #E0685E;
  --state-strain-fill: #D4564C;

  --bob-surface: #221D18;
  --bob-hairline: #3D3129;
  --bob-text: #FAF3E8;
  --bob-glow: rgba(255, 217, 168, 0.06);

  --zone-1: #4A6E8A; --zone-2: #5E8F7E; --zone-3: #C4A36A;
  --zone-4: #D98A5C; --zone-5: #C75E52;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-pill: 999px;

  --glass-fill: rgba(255, 255, 255, 0.07);
  --glass-stroke: rgba(255, 255, 255, 0.16);
  --glass-specular: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --glass-blur: blur(22px) saturate(180%);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}

@media (prefers-reduced-transparency: reduce) {
  :root { --glass-fill: var(--surface-2); --glass-blur: none; }
}

/* ---- base ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--text-primary);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
  /* Said out loud, because a superuser's page also loads Bootstrap (in a layer,
     for the catalogue tools) and its reboot would otherwise set them. */
  font-size: 16px; font-weight: 400; line-height: normal; text-align: left;
}
a { color: var(--text-secondary); text-decoration: none; }
a:hover { color: var(--text-primary); }
:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; border-radius: 6px; }
img, svg { display: block; }
[hidden] { display: none !important; }

.page { overflow-x: clip; min-height: 100vh; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 20; padding: 10px 16px;
  border-radius: var(--radius-pill); background: var(--text-primary); color: var(--ground);
  font: 600 13px/16px var(--font-sans);
}
.skip:focus { top: 12px; color: var(--ground); }

/* Anchor targets land below the sticky bar. */
[id] { scroll-margin-top: 72px; }

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

/* ---- type ------------------------------------------------------------ */

.t-metric-lg { font: 600 22px/28px var(--font-sans); font-variant-numeric: tabular-nums; }
.t-metric-md { font: 600 17px/22px var(--font-sans); font-variant-numeric: tabular-nums; }
.t-label { font: 500 13px/16px var(--font-sans); letter-spacing: 0.01em; }
.t-caption {
  font: 500 11px/14px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase;
}
.plain { text-transform: none; letter-spacing: 0; }
.ink-1 { color: var(--text-primary); }
.ink-2 { color: var(--text-secondary); }
.ink-3 { color: var(--text-tertiary); }
.ink-good { color: var(--state-strong); }

.kicker { margin: 0 0 16px; color: var(--text-tertiary); }
.title {
  font: 600 clamp(32px, 4.2vw, 50px)/1.06 var(--font-sans); letter-spacing: -0.03em;
  margin: 0; text-wrap: balance;
}
.title-sm {
  font: 600 clamp(28px, 3.4vw, 40px)/1.08 var(--font-sans); letter-spacing: -0.03em;
  margin: 0; text-wrap: balance;
}
.lead {
  font: 400 18px/29px var(--font-sans); color: var(--text-secondary);
  margin: 20px 0 0; max-width: 30em; text-wrap: pretty;
}
.lead-sm {
  font: 400 17px/27px var(--font-sans); color: var(--text-secondary);
  margin: 16px 0 0; max-width: 28em; text-wrap: pretty;
}

/* ---- layout ---------------------------------------------------------- */

.wrap { max-width: 1160px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.band { border-top: 1px solid var(--hairline); }
.band-pad { padding-top: 104px; padding-bottom: 104px; }
.split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 64px; align-items: center;
}
/* Text comes first in the page, for reading order and for search. Where the
   design puts the phone on the left, it moves there only once the grid has
   two columns (2 x 440 + 64 gap + 48 padding). */
@media (min-width: 992px) { .split.flip > .art { order: -1; } }
.art { display: flex; justify-content: center; }

/* Hairline rows (the readiness list, the feature index, the questions). */
.lines { display: flex; flex-direction: column; margin-top: 28px; max-width: 30em; }
.line {
  padding: 14px 0; border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; gap: 16px;
}
.lines > .line:last-child { border-bottom: 1px solid var(--hairline); }
.line > :last-child { text-align: right; }

/* ---- nav ------------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(16, 15, 14, 0.72);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--hairline);
}
.topbar-inner {
  max-width: 1160px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text-primary); }
.brand:hover { color: var(--text-primary); }
.brand-tile {
  width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2);
  border: 1px solid var(--hairline-2); display: flex; align-items: center; justify-content: center;
}
.brand-name { font: 600 17px/1 var(--font-sans); letter-spacing: -0.01em; }
.topbar-links { display: flex; align-items: center; gap: 22px; }
.pill {
  display: inline-block; padding: 9px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-2); color: var(--text-primary); background: none;
}
@media (max-width: 439px) {
  .topbar-links { gap: 16px; }
  .topbar-wide { display: none; }
}

/* The owner's catalogue tools - superusers only. */
.admin-bar { border-bottom: 1px solid var(--hairline); background: var(--surface-1); }
.admin-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 10px; padding-bottom: 10px; }
.admin-bar button { font: 500 13px/16px var(--font-sans); cursor: pointer; }

/* ---- hero ------------------------------------------------------------ */

.hero { padding-top: 88px; padding-bottom: 96px; }
.hero .kicker { margin-bottom: 20px; }
.hero h1 {
  font: 600 clamp(44px, 6.2vw, 76px)/1.02 var(--font-sans); letter-spacing: -0.035em;
  margin: 0; text-wrap: balance;
}
.hero .lead { font-size: 19px; line-height: 30px; margin-top: 24px; }
.download { display: flex; align-items: center; gap: 20px; margin-top: 36px; flex-wrap: wrap; }
.store { display: block; transition: transform 140ms ease; }
.store:active { transform: scale(0.98); }
.store img { height: 52px; width: auto; }

/* ---- phone ----------------------------------------------------------- */
/* Illustrations, not screenshots: the only place type goes under 11px. */

.phone {
  width: 300px; height: 620px; border-radius: 50px; background: #0A0909; padding: 10px;
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  flex: none; position: relative;
}
@media (max-width: 359px) { .phone { zoom: 0.88; } }
.screen {
  width: 100%; height: 100%; border-radius: 40px; overflow: hidden;
  background: var(--ground); position: relative;
}
.status {
  height: 46px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px 0 32px; flex: none;
}
.status-time { font: 600 13px/1 var(--font-sans); }
.status-island { width: 84px; height: 26px; border-radius: 14px; background: #000; }
.status-batt { width: 22px; height: 11px; border-radius: 3px; border: 1px solid var(--text-secondary); }
.tabbar {
  position: absolute; left: 14px; right: 14px; bottom: 12px; height: 52px; z-index: 2;
  border-radius: 26px; background: var(--glass-fill);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke); box-shadow: var(--glass-specular);
  display: flex; justify-content: space-around; align-items: center;
}
.tab-on {
  width: 34px; height: 34px; border-radius: 17px; background: rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: center;
}
.tab-on > span { width: 12px; height: 12px; border-radius: 3px; border: 1.6px solid var(--text-primary); }
.tab-dot { width: 12px; height: 12px; border-radius: 6px; border: 1.6px solid var(--text-tertiary); }
.tab-rect { width: 14px; height: 10px; border-radius: 2px; border: 1.6px solid var(--text-tertiary); }

.p-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.p-back { font: 500 10px/1 var(--font-sans); color: var(--text-secondary); }
.p-h { font: 600 22px/1.1 var(--font-sans); letter-spacing: -0.02em; padding: 2px 2px 4px; }
.p-cap {
  font: 500 9px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.p-mini {
  font: 500 8px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-tertiary); margin-top: 4px;
}
.p-card { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 16px; padding: 12px; }
.p-sub { font: 500 10px/1.3 var(--font-sans); color: var(--text-secondary); margin-top: 2px; }
.p-between { display: flex; justify-content: space-between; align-items: baseline; }
.p-track { height: 4px; border-radius: 2px; background: var(--surface-3); margin-top: 6px; }
.p-track > span { display: block; height: 100%; border-radius: 2px; }
.p-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.p-unit { font: 500 8px/1 var(--font-sans); color: var(--text-tertiary); }
.p-stack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin-top: 10px; }

/* Bob's phone and pricing card: the one lit surface. */
.bob-screen { background: var(--bob-surface); display: flex; flex-direction: column; }
.bob-screen .status-time { color: var(--bob-text); }
.bob-screen .status-batt { border-color: var(--bob-text); opacity: 0.6; }
.bob-head { padding: 10px 16px 12px; border-bottom: 1px solid var(--bob-hairline); flex: none; }
.bob-thread { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 80%; padding: 9px 12px; font: 400 11px/1.45 var(--font-sans); color: var(--bob-text); }
.bubble.me { align-self: flex-end; background: rgba(255, 255, 255, 0.1); border-radius: 16px 16px 5px 16px; }
.bubble.bob {
  align-self: flex-start; max-width: 86%; background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bob-hairline); border-radius: 16px 16px 16px 5px;
}
.composer {
  display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bob-hairline); border-radius: 22px; padding: 5px 5px 5px 14px;
}
.band-bob { background: linear-gradient(180deg, var(--ground), #15120F 50%, var(--ground)); }

/* ---- two-up (friends | maps) ------------------------------------------ */

.two-up { gap: 64px 48px; align-items: start; }
.two-up > div { display: flex; flex-direction: column; gap: 40px; }
.panel {
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-md);
}
.friend { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.friend + .friend { border-top: 1px solid var(--hairline); }
.avatar {
  width: 40px; height: 40px; border-radius: 20px; background: var(--surface-2);
  border: 1px solid var(--hairline-2); display: flex; align-items: center; justify-content: center;
  font: 600 14px/1 var(--font-sans); color: var(--text-secondary); flex: none;
}
.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 14px; }

/* ---- widgets & watch --------------------------------------------------- */

.glance { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 48px; align-items: center; }
.widget {
  width: 170px; height: 170px; border-radius: 26px; background: var(--surface-1);
  border: 1px solid var(--hairline); padding: 16px; display: flex; flex-direction: column;
  justify-content: space-between; flex: none;
}
.live {
  width: 360px; max-width: 100%; border-radius: 26px; background: var(--surface-1);
  border: 1px solid var(--hairline-2); padding: 18px 20px; flex: none;
}
.island {
  width: 250px; height: 37px; border-radius: 20px; background: #000; border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px; flex: none;
  font: 600 14px/1 var(--font-sans); font-variant-numeric: tabular-nums;
}
.watch {
  width: 176px; height: 214px; border-radius: 54px; background: #0A0909; padding: 12px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 60px rgba(0, 0, 0, 0.5);
}
.watch-face {
  width: 100%; height: 100%; border-radius: 42px; background: #000; padding: 18px 14px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.tabular { font-variant-numeric: tabular-nums; }

/* ---- pip --------------------------------------------------------------- */

.pips {
  padding: 40px 24px 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; align-items: end;
}
.pip-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.pip-box { width: 70px; height: 84px; }
svg.pip { width: 100%; height: 100%; overflow: visible; }
.pip .part { transform-box: fill-box; }
.pip .breath { transform-origin: center bottom; animation: pipBreath 3.2s ease-in-out infinite; }
.pip .breath.slow { animation-duration: 4.6s; }
.pip .blink { transform-origin: center; animation: pipBlink 5.4s infinite; }
.pip .wave { transform-origin: left bottom; animation: pipWave 1.1s ease-in-out infinite; }
.pip .sway { transform-origin: left top; animation: pipSway 2.6s ease-in-out infinite; }
.pip .hop { animation: pipHop 2.8s ease-in-out infinite; }
@keyframes pipBreath { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.04); } }
@keyframes pipBlink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.1); } }
@keyframes pipWave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-34deg); } }
@keyframes pipSway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(8deg); } }
@keyframes pipHop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-5px); } }

/* ---- the full list ------------------------------------------------------ */

.index {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 0 48px; margin-top: 48px; align-items: start;
}
/* Each group folds. Open as served (and on wide screens); site.js folds them on a
   phone, where thirteen open groups would be the longest thing on the page. */
.index details { border-top: 1px solid var(--hairline); }
.index summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px;
  padding: 16px 0;
}
.index summary::-webkit-details-marker { display: none; }
.index summary h3 { margin: 0; flex: 1; font: 600 15px/20px var(--font-sans); color: var(--text-primary); }
.index summary::after { content: "+"; color: var(--text-tertiary); width: 12px; text-align: right; }
.index details[open] summary::after { content: "\2212"; }
.index ul { list-style: none; margin: 0 0 20px; padding: 0; }
.index li { padding: 10px 0; }
.index li + li { border-top: 1px solid var(--hairline); }
.index li strong { display: block; font: 500 15px/20px var(--font-sans); color: var(--text-primary); }
.index li span { display: block; margin-top: 3px; font: 400 14px/20px var(--font-sans); color: var(--text-secondary); }

/* ---- pricing ------------------------------------------------------------ */

.plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px; margin-top: 48px;
}
.plan { border-radius: var(--radius-md); padding: 28px; }
.plan-free { background: var(--surface-1); border: 1px solid var(--hairline); }
.plan-ai {
  background: var(--bob-surface); border: 1px solid var(--bob-hairline);
  box-shadow: inset 0 1px 0 var(--bob-glow); color: var(--bob-text);
}
.plan ul { list-style: none; margin: 20px 0 0; padding: 0; }
.plan li {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--hairline); font: 500 15px/20px var(--font-sans);
}
.plan-ai li { border-top-color: var(--bob-hairline); }
.plan li::after { content: "\2713"; font: 600 14px/20px var(--font-sans); color: var(--state-strong); }
.plan-ai li::after { color: var(--bob-text); }
.plan-note { font: 400 13px/19px var(--font-sans); opacity: 0.7; margin: 16px 0 0; }

/* ---- questions ---------------------------------------------------------- */

.faq { margin-top: 40px; max-width: 760px; }
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between;
  gap: 16px; font: 500 17px/24px var(--font-sans); color: var(--text-primary);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-tertiary); font-weight: 400; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p {
  margin: 0; padding: 0 0 20px; max-width: 40em; font: 400 16px/26px var(--font-sans);
  color: var(--text-secondary); text-wrap: pretty;
}

/* ---- download ----------------------------------------------------------- */

.cta { padding-top: 120px; padding-bottom: 104px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta-card {
  position: relative; width: min(100%, 560px); background: var(--surface-1);
  border: 1px solid var(--hairline); border-radius: 28px; padding: 48px 32px 40px;
}
.cta-pip { position: absolute; left: 50%; top: -80px; width: 70px; height: 84px; margin-left: -35px; pointer-events: none; }
.cta-card h2 {
  font: 600 clamp(30px, 4vw, 44px)/1.08 var(--font-sans); letter-spacing: -0.03em;
  margin: 0; text-wrap: balance;
}
.cta-card p {
  font: 400 17px/27px var(--font-sans); color: var(--text-secondary);
  margin: 14px auto 0; max-width: 26em; text-wrap: pretty;
}
.cta-card .store { display: inline-block; margin-top: 28px; }

/* ---- footer ------------------------------------------------------------- */

.foot { border-top: 1px solid var(--hairline); }
.foot .wrap {
  padding-top: 28px; padding-bottom: 40px; display: flex; justify-content: space-between;
  align-items: center; gap: 20px 24px; flex-wrap: wrap;
}
.foot-links { display: flex; gap: 12px 24px; flex-wrap: wrap; }

/* Product news by email - the old page's signup, kept. */
.news { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.news label { margin: 0 4px 0 0; }
.news input, .news button { margin: 0; }
.news input {
  width: 220px; max-width: 100%; padding: 9px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-2); background: var(--surface-1); color: var(--text-primary);
  font: 400 13px/16px var(--font-sans);
}
.news input::placeholder { color: var(--text-tertiary); }
.news button { font: 500 13px/16px var(--font-sans); cursor: pointer; }
.pill:hover, .news button:hover { border-color: var(--text-tertiary); }

.notice {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30;
  max-width: calc(100% - 32px); display: flex; align-items: center; gap: 14px;
  padding: 12px 12px 12px 18px; border-radius: var(--radius-pill); background: var(--surface-2);
  border: 1px solid var(--hairline-2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.notice button {
  border: 0; background: none; color: var(--text-secondary); cursor: pointer;
  font: 500 18px/1 var(--font-sans); padding: 4px 6px;
}

/* ---- works with -------------------------------------------------------- */

.works {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px; margin-top: 48px;
}
.work { padding: 28px; }
.work h3 { margin: 0; }
.work p { margin: 10px 0 0; font: 400 16px/25px var(--font-sans); color: var(--text-secondary); text-wrap: pretty; }

/* ---- cookie consent ------------------------------------------------------ */
/* Both answers look the same: declining must be as easy as accepting. */

.consent {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 25;
  width: min(600px, calc(100% - 32px)); padding: 16px 18px; border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--hairline-2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
}
.consent p { margin: 0; flex: 1 1 280px; color: var(--text-secondary); line-height: 19px; }
.consent a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 8px; }
.consent button { font: 500 13px/16px var(--font-sans); cursor: pointer; }
.linkish { background: none; border: 0; padding: 0; margin: 0; color: var(--text-secondary); cursor: pointer; }
.linkish:hover { color: var(--text-primary); }