/* ============================================================
   BOOT SCREEN — covers the GLB download
   ============================================================ */
/* بارگذاری مدل سه‌بعدی داخل خود صحنه می‌ماند و کل صفحه را نمی‌پوشاند.
   قبلاً این یک پوشش fixed روی کل صفحه بود، پس تا کامل‌شدن دانلود
   ۳.۳ مگابایتی اسکلت هیچ‌چیز — نه تیتر، نه دکمهٔ تماس — دیده نمی‌شد و
   LCP عملاً برابر زمان دانلود مدل بود. حالا فقط همین کادر منتظر است. */
.boot{
  position:absolute;inset:0;z-index:6;background:var(--stage-1);
  display:grid;place-items:center;
  transition:opacity .5s ease,visibility .5s;
}
.boot[hidden]{opacity:0;visibility:hidden;pointer-events:none;display:grid}
.boot__in{width:min(280px,76%);text-align:center}
.boot__logo{width:72px;height:72px;margin:0 auto 18px;border-radius:16px;background:#fff;padding:6px}
.boot__s{font-size:12.5px;color:var(--fg-3);margin-bottom:20px;line-height:1.7}
.boot__bar{height:2px;border-radius:2px;background:var(--surface-3);overflow:hidden;position:relative}
.boot__bar i{
  position:absolute;inset-block:0;inset-inline-start:0;width:0;
  background:linear-gradient(to right,var(--brand-600),var(--brand-300));
  transition:width .3s ease;
}
.boot__p{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);margin-top:10px;direction:ltr}

/* ============================================================
   HERO — the real 3D skeleton
   ============================================================ */
.hero{
  position:relative;padding-top:calc(var(--hud) + clamp(28px,4vw,56px));
  padding-bottom:clamp(40px,5vw,80px);overflow:hidden;
}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(80% 60% at 72% 18%,var(--brand-soft),transparent 62%),
    radial-gradient(70% 60% at 10% 92%,color-mix(in srgb,var(--l0) 22%,transparent),transparent 66%);
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right,var(--line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(70% 60% at 55% 45%,#000 5%,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 55% 45%,#000 5%,transparent 78%);
  opacity:.6;
}
.hero__grid{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(24px,4vw,52px);align-items:start;
}
.hero__col{min-width:0;padding-block-start:clamp(0px,2vw,26px)}
.hero__model{min-width:0;display:grid;gap:10px}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--brand-line);
  background:var(--brand-soft);font-size:12px;color:var(--brand);font-weight:600;
}
.hero h1{margin-bottom:20px;max-width:20ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--brand);display:block}
.hero__lede{margin-bottom:28px}
.hero__cta{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:32px}
.hero__facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.hero__fact{background:var(--surface);padding:14px 16px}
.hero__fact b{
  display:block;font-family:var(--font-display);font-size:23px;font-weight:800;
  line-height:1.1;margin-bottom:3px;
}
.hero__fact span{font-size:11.5px;color:var(--fg-3);line-height:1.5;display:block}

/* --- the 3D stage --- */
.stage{
  position:relative;aspect-ratio:1/1.10;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:
    radial-gradient(60% 55% at 50% 40%,rgba(40,172,155,.16),transparent 72%),
    linear-gradient(to bottom,var(--stage-2),var(--stage-1));
  touch-action:none;cursor:grab;
}
.stage:active{cursor:grabbing}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage__corner{position:absolute;width:16px;height:16px;border:1px solid var(--stage-line);pointer-events:none}
.stage__corner:nth-of-type(1){inset-block-start:10px;inset-inline-start:10px;border-inline-end:0;border-block-end:0}
.stage__corner:nth-of-type(2){inset-block-start:10px;inset-inline-end:10px;border-inline-start:0;border-block-end:0}
.stage__corner:nth-of-type(3){inset-block-end:10px;inset-inline-start:10px;border-inline-end:0;border-block-start:0}
.stage__corner:nth-of-type(4){inset-block-end:10px;inset-inline-end:10px;border-inline-start:0;border-block-start:0}
.stage__hint{
  position:absolute;inset-block-start:14px;inset-inline-start:16px;
  /* leave room for the tool buttons at the other end, and wrap rather
     than running off the edge of the stage */
  max-width:calc(100% - 90px);
  font-size:11.5px;line-height:1.5;color:var(--stage-fg);pointer-events:none;
  display:flex;align-items:flex-start;gap:7px;
}
.stage__hint svg{width:14px;height:14px}
.stage__meta{
  position:absolute;inset-block-end:12px;inset-inline:14px;
  display:flex;justify-content:space-between;gap:10px;
  font-family:var(--font-mono);font-size:10.5px;color:var(--stage-fg);
  pointer-events:none;direction:ltr;
}
.stage__label{
  position:absolute;z-index:3;pointer-events:none;
  padding:5px 11px;border-radius:var(--r-pill);
  background:var(--brand);color:var(--on-brand);
  font-size:11.5px;font-weight:700;white-space:nowrap;
  opacity:0;transition:opacity var(--t-fast);
  translate:-50% -140%;box-shadow:var(--shadow-2);
}
.stage__label.is-on{opacity:1}
.stage__tools{
  position:absolute;inset-block-start:12px;inset-inline-end:12px;z-index:3;
  display:flex;flex-direction:column;gap:6px;
}
.stage__tools .iconbtn{
  width:32px;height:32px;color:var(--stage-fg);border-color:var(--stage-line);
  background:rgba(7,14,19,.62);backdrop-filter:blur(8px);
}
.stage__tools .iconbtn:hover{color:#E8EFEC;background:rgba(12,26,34,.9);border-color:rgba(211,228,224,.3)}

@media (max-width:620px){
  /* four facts in three columns leaves one orphan; two by two reads
     as a block instead of a mistake */
  .hero__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  /* width:100% is load-bearing: margin-inline:auto cancels a grid
     item's default stretch, and the stage has nothing but an
     absolutely positioned canvas inside, so it would size to zero. */
  .stage{width:100%;max-width:460px;margin-inline:auto;aspect-ratio:1/1.05}
}

/* ============================================================
   SERVICES OVERVIEW
   ============================================================ */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:clamp(14px,1.6vw,20px)}
.svc__card{
  position:relative;display:flex;flex-direction:column;gap:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;transition:all var(--t-fast);overflow:hidden;
}
.svc__card:hover{border-color:var(--brand-line);transform:translateY(-3px);box-shadow:var(--shadow-2)}
.svc__card::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:0;height:2px;
  background:var(--c,var(--brand));transform:scaleX(0);transform-origin:var(--o,left);
  transition:transform var(--t-med);
}
.svc__card:hover::after{transform:scaleX(1)}
.svc__n{
  font-family:var(--font-mono);font-size:11px;color:var(--fg-3);
  margin-bottom:16px;direction:ltr;
}
.svc__ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);margin-bottom:16px;
}
.svc__ico svg{width:22px;height:22px}
.svc__card h3{font-size:17px;margin-bottom:8px}
.svc__card p{font-size:12.5px;color:var(--fg-3);line-height:1.8;margin-bottom:16px;flex:1}
.svc__go{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:700;color:var(--brand);font-family:var(--font-display);
}
.svc__go svg{width:14px;height:14px;transition:translate var(--t-fast)}
.svc__card:hover .svc__go svg{translate:-4px 0}
html[dir="ltr"] .svc__card:hover .svc__go svg{translate:4px 0}

/* ============================================================
   ANALYSER SHELL — shared by all six modules
   ============================================================ */
.mod{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,392px);gap:clamp(20px,2.6vw,40px);align-items:start}
.mod--wide{grid-template-columns:minmax(0,1fr)}
@media (max-width:1080px){.mod{grid-template-columns:minmax(0,1fr)}}

.views{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.views{grid-template-columns:minmax(0,1fr)}}

/* photo/video annotation surface */
.annot{position:relative;background:var(--bg-2);border-radius:var(--r);overflow:hidden;line-height:0}
.annot img,.annot video{width:100%;height:auto;display:block}
.annot canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.annot__tag{
  position:absolute;inset-block-start:8px;inset-inline-start:8px;
  padding:3px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:700;
  background:color-mix(in srgb,var(--bg) 72%,transparent);color:var(--fg-2);
  backdrop-filter:blur(6px);line-height:1.6;
}

/* the marker legend under an annotated photo */
.mkey{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:11.5px;color:var(--fg-3);margin-top:10px}
.mkey i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-inline-end:5px;vertical-align:-1px}

/* ============================================================
   CLINICAL TESTS
   ============================================================ */
.tests{display:flex;flex-direction:column;gap:12px}
.test{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.test__h{
  display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;
  transition:background var(--t-fast);
}
.test__h:hover{background:var(--surface-2)}
.test__toggle{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  font-size:11.5px;color:var(--fg-3);white-space:nowrap;
}
.test__chev{width:14px;height:14px;transition:rotate var(--t-fast)}
.test.is-open .test__chev{rotate:-90deg}
html[dir="ltr"] .test.is-open .test__chev{rotate:90deg}
/* a safety question is not a test: no demo, no collapse, its own tone */
.tests--flags .test{border-inline-start:3px solid var(--warn)}
.tests--flags .test__h{cursor:default}
.tests--flags .test__h:hover{background:transparent}
.test__n{flex:1;min-width:0}
.test__n b{display:block;font-size:14px;font-weight:700;font-family:var(--font-display)}
.test__n span{display:block;font-size:11.5px;color:var(--fg-3);margin-top:2px}
.test__st{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-2);color:var(--fg-3);font-size:11px;
}
.test__st svg{width:13px;height:13px}
.test[data-answer="pos"] .test__st{background:var(--bad);border-color:var(--bad);color:#fff}
.test[data-answer="neg"] .test__st{background:var(--ok);border-color:var(--ok);color:#fff}
.test__b{display:none;padding:0 16px 16px;border-top:1px solid var(--line)}
.test.is-open .test__b{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:18px;padding-top:16px}
@media (max-width:640px){.test.is-open .test__b{grid-template-columns:minmax(0,1fr)}}
.test__demo{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;aspect-ratio:1/1;position:relative;
}
.test__demo svg,.test__demo video{width:100%;height:100%;display:block;object-fit:contain}
.test__how{font-size:12.5px;color:var(--fg-2);line-height:1.85;margin-bottom:14px}
.test__how ol{list-style:decimal;padding-inline-start:20px;margin-top:8px}
.test__how li{margin-bottom:5px;color:var(--fg-3)}
.test__q{font-size:13px;font-weight:700;margin-bottom:10px}
.test__ans{display:flex;gap:8px;flex-wrap:wrap}

/* ============================================================
   PAIN MARKERS ON THE 3D SKELETON
   ============================================================ */
.painlist{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto;padding-inline-end:4px}
.painitem{
  display:grid;grid-template-columns:1fr auto auto;gap:11px;align-items:center;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 13px;
}
.painitem__n{font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.painitem__s{display:flex;align-items:center;gap:8px}
.painitem__s input{width:74px}
.painitem__v{
  font-family:var(--font-mono);font-size:13px;width:26px;text-align:center;
  color:var(--c,var(--l3));font-weight:500;
}
.painitem__x{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;color:var(--fg-3)}
.painitem__x:hover{background:var(--surface-3);color:var(--bad)}
.painitem__x svg{width:13px;height:13px}

/* ============================================================
   GAIT
   ============================================================ */
.gait__strip{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-top:12px;
}
.phase{background:var(--surface);padding:11px 10px;transition:background var(--t-fast)}
.phase[data-on="1"]{background:var(--brand-soft)}
.phase i{display:block;height:2px;border-radius:2px;background:var(--surface-3);margin-bottom:9px}
.phase[data-on="1"] i{background:var(--brand)}
.phase b{display:block;font-size:11.5px;font-weight:700;margin-bottom:2px}
.phase span{display:block;font-size:10px;color:var(--fg-3);direction:ltr}
@media (max-width:640px){.gait__strip{grid-template-columns:repeat(2,1fr)}}

.chart{width:100%;height:auto;display:block;background:var(--bg-2);border-radius:var(--r)}

/* ============================================================
   FOOT SCAN + INSOLE
   ============================================================ */
.feet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:640px){.feet{grid-template-columns:minmax(0,1fr)}}
.insole3d{
  position:relative;aspect-ratio:16/10;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;touch-action:none;
  background:linear-gradient(to bottom,var(--stage-2),var(--stage-1));
}
.insole3d canvas{position:absolute;inset:0;width:100%;height:100%}
.total{
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:17px 20px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  background:var(--surface-2);margin-block:16px;
}
.total span{font-size:12px;color:var(--fg-3)}
.total b{
  display:block;font-family:var(--font-mono);font-size:27px;font-weight:500;
  letter-spacing:-.03em;line-height:1.1;margin-top:6px;direction:ltr;
}

/* ============================================================
   ABOUT / DOCTOR
   ============================================================ */
.about{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,3.4vw,56px);align-items:center}
@media (max-width:900px){.about{grid-template-columns:minmax(0,1fr)}}
.about__photo{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2);
}
.about__photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;aspect-ratio:4/5}
.about__photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--bg) 60%,transparent),transparent 46%);
}
.about__badge{
  position:absolute;z-index:2;inset-block-end:16px;inset-inline-start:16px;inset-inline-end:16px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(10px);border:1px solid var(--line-2);
  border-radius:var(--r);padding:12px 15px;
}
.about__badge b{display:block;font-family:var(--font-display);font-size:15px;font-weight:800}
.about__badge span{display:block;font-size:11.5px;color:var(--fg-3);margin-top:2px}
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:26px}
.cred{background:var(--surface);padding:15px 17px;display:flex;gap:12px;align-items:flex-start}
.cred svg{width:17px;height:17px;color:var(--brand);flex:none;margin-top:3px}
.cred b{display:block;font-size:13px;font-weight:700;margin-bottom:3px}
.cred span{display:block;font-size:11.5px;color:var(--fg-3);line-height:1.7}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:clamp(14px,1.8vw,22px)}
.ccard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;display:flex;flex-direction:column;gap:11px;
  transition:border-color var(--t-fast);
}
.ccard:hover{border-color:var(--brand-line)}
.ccard__i{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);
}
.ccard__i svg{width:19px;height:19px}
.ccard b{font-family:var(--font-display);font-size:14px;font-weight:700}
.ccard p{font-size:12.5px;color:var(--fg-3);line-height:1.85}
.ccard a{color:var(--brand);font-weight:600}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  border-top:1px solid var(--line);background:var(--bg-2);
  padding-block:clamp(40px,5vw,64px) 28px;
}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(150px,1fr));gap:clamp(22px,3vw,44px)}
.foot__brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.foot__brand img{width:46px;height:46px;border-radius:11px;background:#fff;padding:4px;flex:none}
.foot__brand b{font-family:var(--font-display);font-size:16px;font-weight:800;display:block;line-height:1.3}
.foot__brand span{font-size:11.5px;color:var(--fg-3)}
.foot h4{margin-bottom:12px;font-size:13px}
.foot li{margin-bottom:8px}
.foot li a{font-size:12.5px;color:var(--fg-3);transition:color var(--t-fast)}
.foot li a:hover{color:var(--brand)}
.foot__legal{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  font-size:11.5px;color:var(--fg-3);line-height:1.85;
}
.foot__legal a{color:var(--fg-2);text-decoration:underline;text-underline-offset:2px}

/* The "go" chevron always points the way the text reads. */
html[dir="ltr"] .svc__go svg{scale:-1 1}

/* ============================================================
   ANATOMICAL LAYER SWITCHER
   ============================================================ */
.layers{
  display:grid;gap:8px;margin-bottom:16px;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
}
.layers__h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.layers__h b{font-family:var(--font-display);font-size:13px}
.layers__h .tag{margin-inline-start:auto}
.layers__btn{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border:1px solid var(--line);border-radius:var(--r);
  font-size:13px;color:var(--fg-2);text-align:start;
  transition:all var(--t-fast);
}
.layers__btn:hover{border-color:var(--line-2);color:var(--fg)}
.layers__btn:disabled{opacity:.5;cursor:progress}
.layers__btn[aria-pressed="true"]{
  background:var(--brand-soft);border-color:var(--brand-line);color:var(--fg);font-weight:600;
}
.layers__swatch{
  width:12px;height:12px;border-radius:3px;flex:none;
  border:1px solid rgba(0,0,0,.25);
}
.layers__swatch--bones{background:#e6e0d2}
.layers__swatch--muscles{background:#b1454a}
.layers__swatch--joints{background:#7fb6c9}
.painitem__n small{display:block;font-size:10.5px;color:var(--fg-3);margin-top:1px}

/* --- peeling: hide a structure to reach the one behind it --- */
.layers__hidden{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 11px;border-radius:var(--r);
  background:var(--brand-soft);border:1px solid var(--brand-line);
  font-size:12px;color:var(--fg-2);
}
.layers__hidden span{flex:1;min-width:0}
.stage.is-peeling{cursor:crosshair}
.stage.is-peeling canvas{cursor:crosshair}
.stage__tools .iconbtn[aria-pressed="true"]{
  background:var(--brand);border-color:var(--brand);color:var(--on-brand);
}




/* ==================================================================
   The landing model: glass buttons, caption, drawn overlay

   The model sits at the top of the page. Under it a caption says what
   is being shown, and under that a row of glass buttons — one per
   condition — switches it. Nothing here depends on scrolling.
   ================================================================== */

/* --- the SVG drawn over the canvas: angles and arrows --- */
.stage__overlay{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  width:100%;height:100%;overflow:visible;
}
.ov__line{stroke-width:1.6;stroke-dasharray:7 5;opacity:.95}
.ov__arc{stroke-width:2}
.ov__deg{
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  paint-order:stroke;stroke:rgba(6,14,18,.85);stroke-width:4px;stroke-linejoin:round;
}
.ov__shaft{stroke-width:2.4;stroke-linecap:round}
.ov__spinarc{stroke-width:2.6;stroke-linecap:round}
.ov__tag{
  font-size:11.5px;font-weight:700;
  paint-order:stroke;stroke:rgba(6,14,18,.85);stroke-width:4px;stroke-linejoin:round;
}

/* --- the caption under the model --- */
.tour__caption{
  display:grid;gap:6px;
  padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);
}
.tour__caphead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tour__service{
  padding:3px 11px;border-radius:var(--r-pill);
  background:var(--brand-soft);border:1px solid var(--brand-line);
  color:var(--brand);font-size:11.5px;font-weight:700;white-space:nowrap;
}
.tour__count{font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}
.tour__title{
  font-family:var(--font-display);font-size:clamp(18px,2vw,23px);
  font-weight:800;line-height:1.3;margin:0;
}
.tour__note{color:var(--fg-2);margin:0;line-height:1.75;font-size:13.5px}
/* The sound/affected switch lives on the model now, in the top
   corner opposite the reset and spin controls. .stage__tools uses
   inset-inline-end, which is the left in a right-to-left page, so
   this takes inset-inline-start and the two sit facing each other —
   and they swap together when the language does. */
.tour__compare{
  position:absolute;z-index:3;
  inset-block-start:12px;inset-inline-start:12px;
  font-size:11.5px;padding:5px 11px;
  color:#EDF3F1;
  background:rgba(9,18,23,.72);
  border:1px solid rgba(211,228,224,.26);
  -webkit-backdrop-filter:blur(9px) saturate(1.2);
  backdrop-filter:blur(9px) saturate(1.2);
  box-shadow:0 1px 6px rgba(0,0,0,.34);
}
.tour__compare:hover{border-color:var(--brand);background:rgba(19,74,70,.86)}
.tour__compare svg{width:14px;height:14px}

/* --- the glass buttons ---
   Frosted rather than solid so the page behind stays present: this is
   a control surface over the model, not a separate panel. The blur is
   a progressive enhancement; the translucent background alone still
   reads correctly where backdrop-filter is unsupported. */
/* The picker lives inside the stage, over the model, so it costs no
   page height at all. It sits at the bottom where the framing rarely
   puts anatomy, scrolls inside itself when the list is taller than the
   room it has, and lets pointer events through everywhere except on
   the buttons — otherwise it would swallow drags meant for the model. */
/* No container and no headings: the panel sits over the model, and
   every row of chrome is a row of anatomy nobody can see. What is
   left is the buttons themselves, floating at the bottom of the
   stage. Each one carries its own background, so it stays legible
   over bright bone as well as over the dark ground. */
.picker{
  position:absolute;z-index:4;pointer-events:none;
  inset-inline:12px;inset-block-end:30px;
  display:flex;flex-wrap:wrap;gap:5px;align-items:flex-end;
  justify-content:center;
  max-height:30%;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;
}
.picker::-webkit-scrollbar{width:5px}
.picker::-webkit-scrollbar-thumb{background:var(--stage-line);border-radius:3px}
.glass{
  pointer-events:auto;
  font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;
  padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap;
  color:#EDF3F1;
  /* Dark and frosted rather than light: with the surrounding panel
     gone these sit directly on white bone, and a pale chip would
     disappear into it. */
  background:rgba(9,18,23,.72);
  border:1px solid rgba(211,228,224,.26);
  -webkit-backdrop-filter:blur(9px) saturate(1.2);
  backdrop-filter:blur(9px) saturate(1.2);
  box-shadow:0 1px 6px rgba(0,0,0,.34);
  transition:background var(--t-fast),border-color var(--t-fast),
             color var(--t-fast),transform var(--t-fast);
}
.glass:hover{
  transform:translateY(-1px);
  border-color:var(--brand);
  background:rgba(19,74,70,.86);
}
.glass:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.glass[aria-pressed="true"]{
  color:var(--on-brand);
  background:color-mix(in srgb,var(--brand) 88%,transparent);
  border-color:var(--brand);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent),0 2px 10px var(--brand-soft);
}

.stage.is-loading::after{
  content:"";position:absolute;inset-block-end:0;inset-inline:0;height:2px;z-index:4;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  animation:tourload 1.1s linear infinite;
}
@keyframes tourload{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

@media (max-width:1000px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  /* width:100% is load-bearing: margin-inline:auto cancels a grid
     item's default stretch, and the stage has nothing but an
     absolutely positioned canvas inside, so it would size to zero. */
  .hero__model .stage{width:100%;max-width:520px;margin-inline:auto}
}
@media (max-width:620px){
  .glass{font-size:11px;padding:5px 10px}
  /* On a phone the stage is only ~356px tall, so a wrapped block of
     thirteen chips eats a third of it and still has to scroll. One
     row that swipes sideways costs a tenth of that.

     It needs pointer-events of its own to be swipeable at all, and
     touch-action:pan-x because the stage sets touch-action:none for
     the model — without it the strip cannot scroll on touch. */
  .picker{
    max-height:none;inset-inline:0;inset-block-end:24px;
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    justify-content:flex-start;
    padding-inline:8px;gap:6px;
    pointer-events:auto;touch-action:pan-x;
    scrollbar-width:none;
  }
  .picker::-webkit-scrollbar{display:none}
  .glass{flex:0 0 auto}
  .tour__note{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .stage.is-loading::after{animation:none}
  .glass:hover{transform:none}
}

/* ============================================================
   NOSCRIPT + پیوند به صفحه‌های راهنما
   ============================================================ */
.nojs{
  max-width:var(--wrap,1200px);margin:0 auto;
  padding:calc(var(--hud) + 28px) clamp(18px,4vw,32px) 32px;
  line-height:1.9;
}
.nojs h2{font-family:var(--font-display);font-size:22px;margin:0 0 12px}
.nojs p{color:var(--fg-2);margin:0 0 14px;max-width:66ch}
.nojs ul{margin:0 0 18px;padding-inline-start:1.3em}
.nojs li{margin-bottom:6px}
.nojs a{color:var(--brand)}

/* پیوند «راهنمای کامل» زیر هر ماژول — این‌ها لینک‌های داخلی خزیدنی به
   صفحه‌های محتوایی‌اند، پس باید در HTML باشند نه تزریق‌شده با JS. */
.readmore{margin:22px 0 0;font-size:14px}
.readmore a{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--brand);text-decoration:none;font-weight:600;
  border-bottom:1px solid transparent;padding-bottom:2px;
}
.readmore a::after{content:"←";font-size:1.05em;line-height:1}
.readmore a:hover,.readmore a:focus-visible{border-bottom-color:currentColor}
[dir="ltr"] .readmore a::after{content:"→"}