/* ---------- hero ---------- */
.hero{position:relative;padding-block:72px 96px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;background:
    radial-gradient(ellipse at 26% 18%,rgba(22,62,102,.12),transparent 55%),
    radial-gradient(ellipse at 82% 64%,rgba(14,90,112,.10),transparent 52%)}
.hero-bg canvas{display:block}
.hero-bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(220,235,247,.92) 30%,rgba(220,235,247,.55) 48%,rgba(220,235,247,0) 66%)}
[dir="rtl"] .hero-bg::after{background:linear-gradient(270deg,var(--bg) 0%,rgba(220,235,247,.92) 30%,rgba(220,235,247,.55) 48%,rgba(220,235,247,0) 66%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
@media (min-width:960px){.hero .wrap{grid-template-columns:1.05fr 1fr;gap:48px}}
.hero-copy{display:grid;gap:24px;align-content:start}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.hero-note{font-size:14px;color:var(--faint);max-width:52ch}

.scan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;display:grid;grid-template-columns:minmax(0,190px) 1fr;gap:24px;align-items:center}
@media (max-width:520px){.scan{grid-template-columns:1fr;justify-items:center}}
.scan svg.map{width:100%;max-width:190px;height:auto;display:block}
.map .bone{stroke:var(--teal);stroke-opacity:.45;stroke-width:1.4;fill:none;stroke-linecap:round}
.map .ref{stroke:var(--muted);stroke-opacity:.45;stroke-width:1;stroke-dasharray:3 4}
.map .node{fill:var(--teal)}
.map .ring{fill:none;stroke-width:1.6;transition:r .2s, stroke-width .2s}
.map .ring.warn{stroke:var(--warn)}
.map .ring.ok{stroke:var(--ok)}
.map .ring.crit{stroke:var(--crit)}
.map .ring.on{stroke-width:2.6}
.scan-side{display:grid;gap:16px;width:100%}
.scan-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:13px}
.scan-head b{color:var(--text);font-weight:600;font-size:15px}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metric{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:2px}
.metric .k{font-size:13px}
.metric .v{font-family:var(--mono);color:var(--teal);font-size:26px;line-height:1.15;font-weight:500}
.metric .r{font-family:var(--mono);font-size:13px;color:var(--muted)}
.findings{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.findings li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--text);cursor:default;transition:background .15s}
.findings li:hover,.findings li:focus-visible{background:var(--surface-2)}
.scan-more{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;text-decoration:none;padding-inline:10px}
.scan-more:hover{text-decoration:underline}
.scan-foot{font-size:13px;color:var(--faint);border-top:1px solid var(--line);padding-top:12px}

/* measurement overlay and scanner (static without motion) */
.map .measure{stroke:var(--brass);stroke-width:1.2}
.map .angle{fill:var(--brass);font:500 14px var(--mono)}
.map .scanner{opacity:0}
.map .scanner line{stroke:var(--teal);stroke-width:1.2}
.h-line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.h-line>span{display:block}

/* page-load sequence: copy rises in, then the card "scans" the body and reports what it measured */
@media (prefers-reduced-motion:no-preference){
  .appear{animation-duration:1.05s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-delay:var(--d,.08s)}
  .appear--mask{animation-name:in-mask}
  .appear--soft{animation-name:in-soft}
  .appear--btn{animation-name:in-btn}
  .appear--side{animation-name:in-side}
  [dir="rtl"] .appear--side{animation-name:in-side-rtl}
  .appear--card{animation-name:in-card}
  .appear.is-in{animation:none;opacity:1;transform:none}

  .map .bone{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.3s ease-out .35s forwards}
  .map .scanner{animation:scan 1.8s cubic-bezier(.45,0,.55,1) .7s both}
  .map .node{opacity:0;transform-box:fill-box;transform-origin:center;animation:node-pop .5s ease-out 1.4s forwards}
  .map .ref{opacity:0;animation:fade .5s ease-out 2.4s forwards}
  .map .measure{stroke-dashoffset:90;animation:measure .7s ease-out 2.45s both}
  .map .angle{opacity:0;animation:fade .4s ease-out 2.85s forwards}
  .map .ring{opacity:0;animation:fade .5s ease-out 2.5s forwards}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes scan{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(372px);opacity:0}}
@keyframes node-pop{0%{opacity:0;transform:scale(2.6)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes measure{from{stroke-dasharray:90 90;stroke-dashoffset:90}to{stroke-dasharray:90 90;stroke-dashoffset:0}}
@keyframes in-mask{from{opacity:0;transform:translateY(60%)}}
@keyframes in-soft{from{opacity:0;transform:translateY(14px)}}
@keyframes in-btn{from{opacity:0;transform:translateY(18px) scale(.94)}}
@keyframes in-side{from{opacity:0;transform:translateX(22px)}}
@keyframes in-side-rtl{from{opacity:0;transform:translateX(-22px)}}
@keyframes in-card{from{opacity:0;transform:translateY(24px) scale(.98)}}

/* ---------- how it works ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:1fr;counter-reset:s}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;padding-block:28px;padding-inline:0 24px;display:grid;gap:10px;align-content:start;border-top:2px solid var(--line)}
@media (max-width:899px){.step{padding-inline-end:0}}
.step .n{font-family:var(--mono);font-size:14px;color:var(--teal)}
.step h3{font-family:var(--display);font-weight:600;font-size:22px}
.step p{font-size:15px;max-width:34ch}
.step.you{border-top-color:var(--plum)}
.step.you .n{color:var(--plum)}
.step .who{font-size:13px;color:var(--plum);font-weight:600}

/* ---------- two paths ---------- */
.paths{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:820px){.paths{grid-template-columns:1fr 1fr}}
.path{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;display:grid;gap:14px;align-content:start}
.path h3{font-family:var(--display);font-weight:600;font-size:22px}
.path-needs{font-family:var(--mono);font-size:14px;color:var(--teal)}
html[lang="fa"] .path-needs{font-family:var(--body)}
.path ul{margin:0;padding-inline-start:20px;display:grid;gap:6px}
.path a{justify-self:start;display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* ---------- measurements ---------- */
.measures{display:grid;gap:40px;grid-template-columns:1fr}
@media (min-width:700px){.measures{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.measures{grid-template-columns:repeat(4,1fr);gap:32px}}
.m-group h3{font-family:var(--display);font-weight:600;font-size:20px;padding-bottom:12px;border-bottom:2px solid var(--line)}
.m-group ul{list-style:none;margin:0;padding:0;display:grid}
.m-group li{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--line)}
.m-group li b{color:var(--text);font-weight:600;font-size:15px}
.m-group li span{font-family:var(--mono);font-size:13px;color:var(--teal)}
html[lang="fa"] .m-group li span{font-family:var(--body);font-size:14px}
.m-limit{margin-top:48px;max-width:72ch;font-size:15px;padding:16px 18px;border:1px dashed var(--line);border-radius:10px}
.m-limit b{color:var(--text)}

/* ---------- sample report ---------- */
.report-bar{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;margin-bottom:16px}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px}
.seg button{font:500 14px var(--body);color:var(--muted);background:transparent;border:0;border-radius:7px;padding:8px 14px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--text)}
.report-bar .hint{font-size:13px;color:var(--faint)}

.report{
  --r-bg:#E8F2FA; --r-surface:#F7FBFE; --r-line:#B7D0E3; --r-text:#0D2B3E; --r-muted:#2F4E64;
  --r-brass:#163E66; --r-teal:#0E5A70; --r-ok:#2C6B40; --r-warn:#8E4E10; --r-crit:#AA3A30;
  background:var(--r-bg);color:var(--r-muted);border:1px solid var(--r-line);border-radius:16px;padding:32px;display:grid;gap:28px;transition:background .25s,color .25s
}
@media (max-width:600px){.report{padding:20px}}
.report.print{
  --r-bg:#FFFFFF; --r-surface:#F2F6FA; --r-line:#CBD8E3; --r-text:#0D1F2B; --r-muted:#3D5262;
  --r-brass:#163E66; --r-teal:#0B4F63; --r-ok:#2B5E36; --r-warn:#7A420D; --r-crit:#8E2F27;
  color-scheme:light
}
.report h3{font-family:var(--display);color:var(--r-brass);font-size:24px;font-weight:600}
.report h4{color:var(--r-text);font-size:16px;font-weight:600}
.r-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid var(--r-line);padding-bottom:20px}
.r-top .meta{font-size:14px}
.r-grid{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:900px){.r-grid{grid-template-columns:300px 1fr}}
.r-metrics{display:grid;gap:10px;align-content:start}
.r-metric{background:var(--r-surface);border-radius:10px;padding:14px 16px;display:grid;gap:2px}
.r-metric .k{font-size:13px}
.r-metric .v{font-family:var(--mono);color:var(--r-teal);font-size:32px;font-weight:500;line-height:1.15}
.r-metric .r{font-family:var(--mono);font-size:13px}
.r-est{font-size:13px}
.r-find{display:grid;gap:0}
.r-f{display:grid;gap:6px;padding:16px 0;border-top:1px solid var(--r-line)}
.r-f:first-child{border-top:0;padding-top:0}
.r-f .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center}
.r-f p{font-size:15px;max-width:62ch}
.r-f .next{color:var(--r-text)}
.report .pill.ok{color:var(--r-ok);background:color-mix(in srgb,var(--r-ok) 13%,transparent)}
.report .pill.warn{color:var(--r-warn);background:color-mix(in srgb,var(--r-warn) 15%,transparent)}
.report .pill.crit{color:var(--r-crit);background:color-mix(in srgb,var(--r-crit) 14%,transparent)}
.refer{border:1px solid color-mix(in srgb,var(--r-crit) 45%,transparent);border-radius:10px;padding:12px 14px;color:var(--r-text);font-size:15px}
.r-more{font-size:14px;padding-top:16px;border-top:1px solid var(--r-line)}

.r-options{display:grid;gap:14px}
.options{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.opt{background:var(--r-surface);border:1px solid var(--r-line);border-radius:12px;padding:16px;display:grid;gap:8px;align-content:start}
.opt.rec{border-color:color-mix(in srgb,var(--r-brass) 55%,transparent)}
.opt .lbl{font-size:13px;font-weight:600;color:var(--r-brass)}
.pick-note{font-size:14px;color:var(--r-text);padding:8px 12px;border-inline-start:3px solid var(--r-brass);background:color-mix(in srgb,var(--r-brass) 10%,transparent);border-radius:0 8px 8px 0}
[dir="rtl"] .pick-note{border-radius:8px 0 0 8px}
.pick-note b{font-weight:600}
.report.print .opt button[aria-pressed="true"]{color:#FFFFFF}
html[lang="fa"] :is(.opt .facts,.metric .r,.r-metric .r){font-family:var(--body)}
.opt .facts{font-family:var(--mono);font-size:13px;color:var(--r-muted)}
.opt p{font-size:14px}
.opt button{justify-self:start;font:600 14px var(--body);color:var(--r-text);background:transparent;border:1px solid var(--r-line);border-radius:8px;padding:8px 14px;cursor:pointer;margin-top:4px}
.opt button:hover{border-color:var(--r-brass)}
.opt button[aria-pressed="true"]{background:var(--r-brass);border-color:var(--r-brass);color:#FFFFFF}
.chosen{font-size:14px;color:var(--r-text);min-height:1.6em}
.r-nutri{background:var(--r-surface);border-radius:10px;padding:14px 16px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;font-size:14px}
.r-nutri b{color:var(--r-text)}
.r-nutri .v{font-family:var(--mono);color:var(--r-teal);font-size:18px}
.r-foot{font-size:13px;border-top:1px solid var(--r-line);padding-top:16px}

/* ---------- partner ---------- */
.partner .wrap{display:grid;gap:40px;grid-template-columns:1fr}
@media (min-width:900px){.partner .wrap{grid-template-columns:.9fr 1.1fr;align-items:center}}
.partner .section-head{margin-bottom:0}
.said{display:grid;gap:14px}
.line{display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:19px;line-height:1.5}
html[lang="fa"] .line{line-height:1.8}
.line .mk{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-weight:700;font-size:14px;margin-top:3px}
.line.yes .mk{background:rgba(44,107,64,.16);color:var(--ok)}
.line.yes p{color:var(--text)}
.line.no .mk{background:rgba(170,58,48,.16);color:var(--crit)}
.line.no p{color:var(--faint);text-decoration:line-through;text-decoration-color:rgba(170,58,48,.5)}
.said .cap{font-size:14px;color:var(--faint);padding-inline-start:40px}

/* ---------- data ---------- */
.data-grid{display:grid;gap:48px;grid-template-columns:1fr}
@media (min-width:900px){.data-grid{grid-template-columns:.8fr 1.2fr}}
.big-no{display:grid;gap:12px;align-content:start}
.big-no .q{font-size:18px;color:var(--text)}
.big-no .a{font-family:var(--display);font-weight:600;font-size:88px;line-height:1;color:var(--text)}
.big-no p{max-width:40ch}
.facts-list{list-style:none;margin:0;padding:0;display:grid}
.facts-list li{display:grid;grid-template-columns:1fr;gap:4px;padding:18px 0;border-top:1px solid var(--line)}
@media (min-width:640px){.facts-list li{grid-template-columns:200px 1fr;gap:24px}}
.facts-list li:last-child{border-bottom:1px solid var(--line)}
.facts-list b{color:var(--text);font-weight:600}

/* ---------- pricing ---------- */
.plans{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:960px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{border-radius:16px;padding:28px;display:grid;gap:14px;grid-template-rows:auto auto auto 1fr auto;background:var(--surface);border:1px solid var(--line)}
.plan.main{border:2px solid var(--brass)}
.plan h3{font-family:var(--display);font-size:22px;font-weight:600}
.plan .price{font-size:20px;color:var(--text);font-weight:600}
.plan .price .todo{font-size:1em}
/* prices use the text face (Plex Sans / Vazirmatn) rather than Plex Mono, whose dotted zero looks odd in long prices */
.plan .price .num,.addon .price .num{font-family:var(--body)}
.plan-for{font-size:15px;color:var(--teal)}
.plan ul{margin:0;padding-inline-start:20px;display:grid;gap:6px;align-content:start}
.plan .btn{justify-self:start}
.plan-notes{margin:28px 0 0;padding-inline-start:20px;display:grid;gap:8px;font-size:15px}

/* ---------- mirror band (3D scene drawn by mirror-scene.js) ---------- */
/* full-bleed background: the scene fills the section, edges fade into the page, text sits on top */
.mirror-band{position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:start;
  min-height:clamp(600px,160vw,820px);padding-block:48px}
.mirror-stage{position:absolute;inset:0;z-index:-1;background:var(--bg)}
.mirror-stage canvas{display:block;width:100%;height:100%}
.mirror-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,var(--bg) 0,rgba(220,235,247,.75) 22%,transparent 42%,transparent 85%,var(--bg) 100%)}
.mirror-band .wrap{width:100%}
.mirror-copy{max-width:30rem}
.mirror-copy p{max-width:44ch}
.mirror-copy .mirror-note{margin-top:12px;font-size:14px;color:var(--muted)}
@media (min-width:900px){
  .mirror-band{align-items:center;min-height:clamp(560px,82vh,780px);padding-block:72px}
  /* the scene is drawn toward the inline end (mirror-scene.js), the copy side gets a soft shade for legibility */
  .mirror-band::after{background:
    linear-gradient(to bottom,var(--bg),transparent 16%,transparent 84%,var(--bg)),
    linear-gradient(to right,rgba(220,235,247,.9),transparent 48%)}
  html[dir="rtl"] .mirror-band::after{background:
    linear-gradient(to bottom,var(--bg),transparent 16%,transparent 84%,var(--bg)),
    linear-gradient(to left,rgba(220,235,247,.9),transparent 48%)}
}

/* ---------- individuals band ---------- */
.solo-band{border-top:1px solid var(--line);padding-block:40px;background:var(--surface)}
.solo-band .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.solo-band h2{font-family:var(--display);font-weight:600;font-size:24px;margin-bottom:6px}
.solo-band p{max-width:60ch}

/* ---------- faq ---------- */
.faq{display:grid;max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding-block:22px;padding-inline:0 40px;color:var(--text);font-size:18px;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;inset-inline-end:8px;top:50%;width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 0 24px;max-width:66ch;display:grid;gap:10px}

/* ---------- closing ---------- */
.closing{text-align:start}
.closing .wrap{display:grid;gap:24px;justify-items:start}
.closing .tagline{font-family:var(--display);font-weight:600;font-size:clamp(26px,4vw,40px);color:var(--text);line-height:1.2;letter-spacing:-.01em}
html[lang="fa"] .closing .tagline{line-height:1.5}

/* ---------- touch targets ---------- */
@media (max-width:860px){.seg button,.opt button{min-height:44px}}

/* report: three findings first, the rest behind a button; print version shows everything */
.r-extra{display:none}
.r-extra.open,.report.print .r-extra{display:contents}
.r-toggle{justify-self:start;margin-top:8px;min-height:44px;padding:0 4px;background:none;border:0;font:600 14px var(--body);color:var(--r-brass);text-decoration:underline;cursor:pointer}
.report.print .r-toggle{display:none}
@media print{.r-extra{display:contents}.r-toggle{display:none}}

/* measurements: four group cards, the full list of 20 folded */
.m-sum{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (min-width:900px){.m-sum{grid-template-columns:repeat(4,1fr)}}
.m-sum li{display:grid;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.m-sum b{font-family:var(--display);font-weight:600;font-size:18px;color:var(--text)}
html[lang="fa"] .m-sum b{font-family:var(--body)}
.m-sum span{font-size:14px;color:var(--teal)}
.m-all>summary{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;font-weight:600;color:var(--brass);cursor:pointer}
.m-all[open]>summary{margin-bottom:24px}
.m-all>summary{list-style:none;gap:8px}
.m-all>summary::-webkit-details-marker{display:none}
.m-all>summary::after{content:"+";font-size:20px;line-height:1}
.m-all[open]>summary::after{content:"−"}

/* plan cards in two columns (individual products: homepage pricing and for-you.html) */
@media (min-width:760px){.plans.two{grid-template-columns:repeat(2,1fr);max-width:860px}}
.solo-plans{margin-top:56px;padding-top:40px;border-top:1px solid var(--line);display:grid;gap:12px}
.solo-plans .h-sub{font-family:var(--display);font-weight:600;font-size:24px;color:var(--text)}
html[lang="fa"] .solo-plans .h-sub{font-family:var(--body)}
.solo-plans>p{max-width:62ch}
.solo-plans .plans{margin-top:12px}

/* trainer plans: one feature list, then five tiers by number of clients */
.tier-feats{display:grid;gap:12px;justify-items:start;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 28px;margin-bottom:16px}
.tier-feats b{color:var(--text);font-size:18px}
.tier-feats ul{margin:0;padding-inline-start:20px;display:grid;gap:6px}
.plans.tiers{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
@media (min-width:960px){.plans.tiers{grid-template-columns:repeat(5,1fr)}}
.plan.tier{grid-template-rows:auto auto;padding:22px;gap:8px}
.plan.tier h3{font-size:18px}
.plan.tier .price{font-size:16px}
.plan.tier .per{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.faq-ask{margin-top:24px;color:var(--muted)}