/* ==========================================================================
   FROZEN COPY of the v1 design system, used only by the landing (/index.html)
   until the landing is rebuilt on v2 (redesign Phase 7). Do not edit — the
   app has moved to shared/theme.css v2.
   ==========================================================================
   GetFit — shared design system.
   Consumed by BOTH the landing (/index.html) and the app (/app/).
   Extracted verbatim from the landing; never fork these values.
   Radius scale: 999px pills · 20px cards · 2px hairline ends · 50% dots · --oct
   ========================================================================== */

/* ───────── fonts: self-hosted. Google Fonts is unreliable from Iran. ───────── */
@font-face{font-family:"Estedad";src:url("../assets/fonts/Estedad-var.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+200C,U+FB50-FDFF,U+0020-007F,U+2010-2027}
@font-face{font-family:"Vazirmatn";src:url("../assets/fonts/Vazirmatn-var.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+200C,U+FB50-FDFF,U+0020-007F,U+2010-2027}

/* ───────── reset ───────── */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,p,ul,ol,li,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
svg{display:block}
button{font:inherit;color:inherit;background:none;border:0}

/* ───────── tokens: one design system, shared by the landing and the app ─────
   These used to be the GetFit brand palette here and an iOS override at the top
   of app/app.css — two palettes in two files. They live in one place now; the
   app no longer overrides anything. What the two surfaces still do differently
   is the TYPE SCALE: the landing sets fluid display sizes, the app the fixed iOS
   ramp, which is the same split apple.com and an iOS app have.
   ───────────────────────────────────────────────────────────────────────── */
:root{

  /* Apple's dark semantic palette */
  --ios-bg:#000000;              /* systemBackground            */
  --ios-bg-2:#1C1C1E;            /* secondarySystemBackground   */
  --ios-bg-3:#2C2C2E;            /* tertiarySystemBackground    */
  --ios-fill:rgba(120,120,128,.36);
  --ios-fill-2:rgba(120,120,128,.24);
  --ios-fill-3:rgba(118,118,128,.16);
  --sep:rgba(84,84,88,.65);      /* separator                   */
  --sep-opaque:#38383A;          /* opaqueSeparator             */
  --label:#FFFFFF;
  --label-2:rgba(235,235,245,.60);
  --label-3:rgba(235,235,245,.30);
  --blue:#0A84FF;                /* systemBlue   (dark)         */
  --green:#30D158;
  --red:#FF453A;
  --orange:#FF9F0A;

  /* the remap: brand token → iOS value */
  --void:var(--ios-bg);
  --carbon:var(--ios-bg-2);
  --graphite:var(--ios-bg-3);
  --steel:var(--sep-opaque);
  --silver:var(--label-2);
  --platinum:var(--label);
  --signal:var(--blue);
  --signal-lo:#0768CC;
  --signal-hi:#409CFF;

  /* iOS motion. The sheet curve is the one UIKit uses for presentation. */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.25,.1,.25,1);
  --dur-sheet:420ms;
  --dur-ctl:200ms;

  /* iOS radii and metrics */
  --r-ctl:10px;
  --r-card:12px;
  --r-sheet:14px;
  --hair:.5px;
  --tap:44px;                    /* the HIG minimum touch target */

  /* SF for Latin and numerals; Vazirmatn carries the Persian, because SF's
     Arabic coverage is thin and Android has no SF at all. That pairing is what
     a Persian iOS app actually renders as. */
  --display:-apple-system,"SF Pro Display",system-ui,"Vazirmatn",Tahoma,sans-serif;
  --body:-apple-system,"SF Pro Text",system-ui,"Vazirmatn",Tahoma,sans-serif;

  /* layout metrics and the brand mark, used by the landing */
  --white:#FFFFFF;
  --gut:clamp(20px,5vw,64px);
  --maxw:1320px;
  --oct:polygon(23.99% 5.30%,26.20% 3.39%,28.58% 1.91%,31.14% 0.85%,33.88% 0.21%,36.79% 0.00%,63.21% 0.00%,66.12% 0.21%,68.86% 0.85%,71.42% 1.91%,73.80% 3.39%,76.01% 5.30%,94.70% 23.99%,96.61% 26.20%,98.09% 28.58%,99.15% 31.14%,99.79% 33.88%,100.00% 36.79%,100.00% 63.21%,99.79% 66.12%,99.15% 68.86%,98.09% 71.42%,96.61% 73.80%,94.70% 76.01%,76.01% 94.70%,73.80% 96.61%,71.42% 98.09%,68.86% 99.15%,66.12% 99.79%,63.21% 100.00%,36.79% 100.00%,33.88% 99.79%,31.14% 99.15%,28.58% 98.09%,26.20% 96.61%,23.99% 94.70%,5.30% 76.01%,3.39% 73.80%,1.91% 71.42%,0.85% 68.86%,0.21% 66.12%,0.00% 63.21%,0.00% 36.79%,0.21% 33.88%,0.85% 31.14%,1.91% 28.58%,3.39% 26.20%,5.30% 23.99%);
}

/* ───────── base — Persian: letter-spacing 0, generous leading ───────── */
html{-webkit-text-size-adjust:100%}
body{
  background:var(--void);color:var(--platinum);
  font-family:var(--body);font-size:clamp(15.5px,1.05vw,17.5px);
  font-weight:400;line-height:1.85;letter-spacing:0;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
:where(h1,h2,h3,p,li,span,a,button,td,th){letter-spacing:0}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
section{padding-block:clamp(64px,8vw,124px);position:relative}
.latin{font-family:var(--display);unicode-bidi:isolate;letter-spacing:-.01em}
.fig{font-variant-numeric:tabular-nums;unicode-bidi:isolate}

/* ───────── type ───────── */
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.35;text-wrap:balance}
.d1{font-size:clamp(1.95rem,4.4vw,3.7rem);font-weight:900;line-height:1.38}
.d2{font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.36}
.d3{font-size:clamp(1.28rem,1.95vw,1.75rem);font-weight:700;line-height:1.44}
.lead{font-size:clamp(1.02rem,1.35vw,1.26rem);line-height:1.8;max-width:44ch;color:var(--silver)}
.body{line-height:1.85;max-width:52ch;color:var(--silver)}
.eyebrow{font-size:.84rem;font-weight:600;line-height:1.6;color:var(--signal)}

/* chrome text — guarded so it can never render invisible */
.chrome{color:var(--platinum)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .chrome{
    background:linear-gradient(174deg,#FFF 0%,#C4C4CC 40%,#74747E 53%,#F2F2F5 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
}

/* ───────── hairline light rule ───────── */
.hr{height:var(--hair);border:0;background:var(--sep)}

/* ───────── buttons ─────────
   Solid, not gradient: iOS fills its buttons flat, and the founding brief
   banned blue gradients. The shine sweep that used to run across these is gone
   with it — it was the one piece of the page that looked like a template. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-ctl);min-height:50px;padding:0 22px;
  font-family:var(--body);font-weight:600;font-size:17px;line-height:1.4;
  color:#fff;background:var(--blue);cursor:pointer;box-shadow:none;
  transition:opacity .12s linear}
.btn:hover{opacity:.9}
.btn:active{opacity:.72}
.btn--ghost{background:var(--ios-fill-2);color:var(--blue);box-shadow:none}
.btn--ghost:hover{opacity:.9;box-shadow:none}

/* ───────── cards ───────── */
.vals{display:grid;grid-template-columns:1.22fr 1fr 1fr;gap:clamp(20px,2.2vw,30px)}
.card{position:relative;overflow:hidden;border-radius:var(--r-card);
  padding:clamp(22px,2.2vw,30px);
  background:var(--ios-bg-2);box-shadow:none;
  border:var(--hair) solid var(--sep);
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
@media (hover:hover){
  .card:hover{border-color:var(--label-3);transform:translateY(-2px)}
}
/* The landing leads its values grid with an accented card. Scoped to .vals:
   unscoped, this highlighted whichever .card happened to be first in ANY
   container — the app's stat tiles picked up a blue ring they never asked for. */
.vals > .card:first-child{border-color:color-mix(in srgb,var(--blue) 55%,transparent)}
.card h3{margin-block:0 10px}
.vals > .card:first-child .body{font-size:1.05em}

/* ───────── tick (completion mark) ───────── */
.tick{width:1.05em;height:1.05em;stroke:var(--blue);stroke-width:2.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
/* ───────── reveal (JS-enhanced; full content without JS) ───────── */
.js .rv{opacity:0;transform:translateY(20px)}
.js .rv.in{opacity:1;transform:none;
  transition:opacity .34s var(--ease),transform .34s var(--ease);
  transition-delay:calc(var(--d,0) * 45ms)}

/* This file had no reduced-motion block at all, so the reveal ran for people
   who had explicitly asked for no motion. */
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv.in{opacity:1;transform:none;transition:none;transition-delay:0s}
  .card,.card:hover{transition:none;transform:none}
}