/* =====================================================================
   PAGE: PRODUCT · VIRA — public/assets/css/pages/product-vira.css (step 11.6)
   From design/product-vira-preview.html. Shared product rules: product.css; colours: product-skins.css (.pd-p--vira,
   incl. --pd-accent-mid / --pd-accent-pale for the sample charts). Only --fv-* tokens and --pd-* skin variables; every class starts with "pd-".
   ===================================================================== */
.pd-head{max-width:760px;margin-bottom:48px}
.pd-k{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pd-accent);margin-bottom:12px}
[dir=rtl] .pd-k{letter-spacing:0;font-size:13px}
.pd-sample{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fv-muted);padding:3px 8px;border:1px dashed var(--fv-line);background:var(--fv-paper)}
[dir=rtl] .pd-sample{letter-spacing:0;font-size:12px}
.pd-note{margin-top:28px;padding-inline-start:18px;border-inline-start:3px solid var(--pd-accent);font-size:var(--fv-fs-small);color:var(--fv-muted);max-width:78ch}
/* product mark (temporary typographic logo; replaced by public/assets/img/products/vira-logo.svg) */
.pd-mark{display:inline-flex;align-items:center;gap:12px;font-family:var(--fv-font-display);font-weight:500;font-size:34px;line-height:1;color:var(--fv-ink);letter-spacing:.01em}
.pd-mark::before{content:"";width:14px;height:14px;background:var(--pd-accent);flex-shrink:0}
.pd-mark__tag{font-family:var(--fv-font-body);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pd-accent);padding-inline-start:14px;margin-inline-start:4px;border-inline-start:1px solid var(--fv-line)}
[dir=rtl] .pd-mark__tag{font-family:var(--fv-font-fa);letter-spacing:0;font-size:13px}
/* tick list */
.pd-list b{font-weight:600}
/* screenshot frame + placeholder (Ali adds the real image later) */
.pd-shot--sm{box-shadow:none}
.pd-shot--sm .pd-shot__todo{aspect-ratio:16/7;padding:14px;margin:8px}
.pd-shot__cap{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--fv-line);font-size:12.5px;color:var(--fv-muted)}
/* 1 hero */
.pd-hero__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:64px;align-items:center}
.pd-hero .fv-h1{font-size:clamp(40px,4.6vw,66px);margin-block:32px 24px}
[dir=rtl] .pd-hero .fv-h1{font-size:clamp(32px,3.4vw,50px)}
.pd-hero .fv-lead{max-width:54ch}
.pd-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:44px;border-top:1px solid var(--fv-line)}
.pd-proof div{padding-block:18px;padding-inline-end:16px}
.pd-proof div + div{padding-inline-start:20px;border-inline-start:1px solid var(--fv-line)}
.pd-proof .fv-num{display:block;font-size:30px;color:var(--pd-accent);white-space:nowrap;margin-bottom:6px}
[dir=rtl] .pd-proof .fv-num{font-size:24px}
.pd-proof span:not(.fv-num){font-size:13.5px;color:var(--fv-muted)}
.pd-hero__line{margin-top:18px;text-align:center;font-family:var(--fv-font-display);font-size:19px;color:var(--pd-accent)}
[dir=rtl] .pd-hero__line{font-family:var(--fv-font-fa);font-weight:700;font-size:16px}
/* 2 problem */
.pd-prob__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.pd-prob__q{list-style:none;counter-reset:q;border-top:1px solid var(--fv-ink)}
.pd-prob__q li{counter-increment:q;display:grid;grid-template-columns:40px 1fr;gap:8px;padding-block:18px;border-bottom:1px solid var(--fv-line);font-size:18px;line-height:1.45}
.pd-prob__q li::before{content:counter(q,decimal-leading-zero);font-family:var(--fv-font-display);font-size:14px;color:var(--pd-accent);padding-top:4px}
[dir=rtl] .pd-prob__q li::before{content:counter(q,persian);font-family:var(--fv-font-fa)}
.pd-prob__close{margin-top:28px;padding-inline-start:20px;border-inline-start:3px solid var(--pd-accent);color:var(--fv-ink);font-size:var(--fv-fs-lead)}
/* 3 how it works */
.pd-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;list-style:none;counter-reset:s}
.pd-steps li{counter-increment:s;position:relative;padding-block:28px 30px;border-top:1px solid var(--fv-ink)}
.pd-steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--fv-font-display);font-size:34px;line-height:1;color:var(--pd-accent);margin-bottom:18px}
[dir=rtl] .pd-steps li::before{content:counter(s,persian);font-family:var(--fv-font-fa);font-size:28px}
.pd-steps h3{font-size:19px;font-weight:600;margin-bottom:10px}
.pd-steps p{font-size:15.5px;color:var(--fv-muted)}
/* 4 three layers */
.pd-layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.pd-layer{display:flex;flex-direction:column;background:var(--fv-white);border:1px solid var(--fv-line);border-top:3px solid var(--pd-accent)}
.pd-layer__body{flex:1;padding:26px 26px 20px}
.pd-layer h3{font-size:19px;font-weight:600;line-height:1.35;margin-bottom:10px}
.pd-layer h3 span{color:var(--pd-accent)}
.pd-layer p{font-size:15px;color:var(--fv-muted)}
.pd-layer__viz{min-height:236px;display:flex;flex-direction:column;justify-content:space-between;padding:18px 22px 20px;border-top:1px solid var(--fv-line);background:var(--fv-paper)}
.pd-layer__vizhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.pd-legend{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;font-size:12px;color:var(--fv-muted)}
.pd-legend li{display:inline-flex;align-items:center;gap:6px}
.pd-legend i{width:10px;height:10px;display:inline-block}
.pd-legend i.pd-lg-line{height:0;border-top:2.5px solid var(--pd-accent)}
.pd-legend i.pd-lg-tick{width:2px;height:12px;background:var(--fv-ink)}
.pd-legend__row{margin-top:12px}
.pd-chart{display:block;width:100%;height:auto;direction:ltr}
.pd-ch-grid{stroke:var(--fv-line);stroke-width:1}
.pd-ch-axis{stroke:var(--fv-muted);stroke-width:1}
.pd-ch-bar{fill:var(--pd-accent-pale)}
.pd-ch-line{fill:none;stroke:var(--pd-accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.pd-ch-dot{fill:var(--pd-accent)}
.pd-c1{background:var(--pd-accent)}
.pd-c2{background:var(--pd-accent-mid)}
.pd-c3{background:var(--pd-accent-pale)}
.pd-c4{background:var(--fv-line)}
.pd-c5{background:var(--fv-green)}
.pd-cbar{display:flex;gap:2px;height:22px;direction:ltr}
.pd-cbar i{display:block;height:100%}
.pd-crow{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center;font-size:12.5px;color:var(--fv-muted)}
.pd-crow + .pd-crow{margin-top:10px}
.pd-shots3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px}
/* 5 targets & score */
.pd-score__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px;align-items:start}
.pd-score__steps{list-style:none;border-top:1px solid var(--fv-ink)}
.pd-score__steps li{padding-block:16px;border-bottom:1px solid var(--fv-line);font-size:15.5px;color:var(--fv-muted)}
.pd-score__steps b{display:block;font-size:17px;font-weight:600;color:var(--fv-ink);margin-bottom:4px}
.pd-sc{background:var(--fv-white);border:1px solid var(--fv-line);padding:20px 22px}
.pd-sc__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.pd-sc__name{font-size:14px;font-weight:600}
.pd-sc__st{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--fv-muted)}
.pd-sc__st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fv-green)}
.pd-sc--mid .pd-sc__st::before{background:var(--pd-accent)}
.pd-sc--low .pd-sc__st::before{background:var(--fv-white);border:1.5px solid var(--fv-ink)}
.pd-sc__n{display:flex;align-items:baseline;gap:6px}
.pd-sc__n .fv-num{font-size:36px;color:var(--pd-accent)}
.pd-sc__n small{font-size:14px;color:var(--fv-muted)}
.pd-sc__meter{height:6px;background:var(--fv-line);margin-block:12px 14px;direction:ltr}
.pd-sc__meter i{display:block;height:100%;background:var(--pd-accent)}
.pd-sc dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px}
.pd-sc dt{color:var(--fv-muted)}
.pd-sc dd{text-align:end;font-weight:600}
.pd-ar__head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:64px;margin-bottom:20px;padding-top:28px;border-top:1px solid var(--fv-line)}
.pd-ar__head h3{font-family:var(--fv-font-display);font-weight:500;font-size:26px;line-height:1.2}
[dir=rtl] .pd-ar__head h3{font-family:var(--fv-font-fa);font-weight:700;font-size:21px}
.pd-ar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pd-ar .pd-sc{display:flex;flex-direction:column}
.pd-ar .pd-sc h4{font-size:17px;font-weight:600;line-height:1.35;margin-bottom:8px}
.pd-ar .pd-sc p{font-size:14.5px;color:var(--fv-muted);margin-bottom:16px}
.pd-sc__box{margin-top:auto;padding-top:14px;border-top:1px solid var(--fv-line)}
.pd-ar__foot{margin-top:14px;font-size:13px;color:var(--fv-muted)}
.pd-ar__shot{margin-top:28px}
.pd-layer__more{margin-top:auto;display:block;padding:18px 26px;border-top:1px solid var(--fv-line);background:var(--fv-paper);font-size:14.5px;font-weight:600;color:var(--pd-accent)}
.pd-layer__more:hover{background:var(--pd-accent-soft)}
.pd-layer__more:focus-visible{outline:2px solid var(--fv-green);outline-offset:-2px}
/* 6 levels */
.pd-lv__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.pd-lv__grid > div > p{color:var(--fv-muted);margin-bottom:28px}
.pd-cmp{background:var(--fv-white);border:1px solid var(--fv-line);padding:22px 24px;margin-bottom:24px}
.pd-cmp__head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.pd-cmp__head b{font-size:14px;font-weight:600}
.pd-cmp__row{display:grid;grid-template-columns:90px minmax(0,1fr) 40px;gap:12px;align-items:center;font-size:13.5px}
.pd-cmp__row + .pd-cmp__row{margin-top:10px}
.pd-cmp__row span:first-child{color:var(--fv-muted)}
.pd-cmp__row .pd-sc__meter{margin:0}
.pd-cmp__row .fv-num{font-size:16px;text-align:end;color:var(--pd-accent)}
/* 8 roles */
.pd-roles__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--fv-ink)}
.pd-role{padding:28px 28px 8px 0}
.pd-role + .pd-role{padding-inline-start:28px;border-inline-start:1px solid var(--fv-line)}
[dir=rtl] .pd-role{padding:28px 0 8px 28px}
[dir=rtl] .pd-role + .pd-role{padding-inline:28px 28px}
.pd-role h3{font-size:20px;font-weight:600;line-height:1.35;margin-bottom:12px}
.pd-role p{font-size:15.5px;color:var(--fv-muted)}
.pd-role p em{display:block;margin-top:12px;font-style:normal;font-size:13.5px;color:var(--pd-accent)}
/* 9 story (ink) */
.pd-story__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.pd-story__text p{color:var(--fv-on-ink);font-size:17px}
.pd-story__text p + p{margin-top:18px}
.pd-story__text p.pd-story__key{font-family:var(--fv-font-display);font-size:24px;line-height:1.35;color:var(--pd-accent-on-ink)}
[dir=rtl] .pd-story__text p.pd-story__key{font-family:var(--fv-font-fa);font-weight:700;font-size:20px}
/* 10 vira / vira pro */
.pd-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.pd-plan{display:flex;flex-direction:column;background:var(--fv-white);border:1px solid var(--fv-line);border-top:3px solid var(--pd-accent-mid);padding:32px}
.pd-plan--pro{border:1px solid var(--pd-accent);border-top-width:3px}
.pd-plan__name{font-family:var(--fv-font-display);font-weight:500;font-size:30px;line-height:1;margin-bottom:8px}
[dir=rtl] .pd-plan__name{font-family:var(--fv-font-display)}
.pd-plan__q{font-size:16px;color:var(--fv-ink);margin-block:16px 20px;font-weight:600}
.pd-plan .pd-list{margin-bottom:8px}
.pd-plan .pd-shot{margin-top:auto;padding-top:0}
.pd-plan__gap{flex:1;min-height:20px}
/* 13 cta */
.pd-cta__act{display:grid;gap:14px;justify-items:start}
.pd-cta__small{font-size:13px;color:var(--fv-muted)}
@media (max-width:1080px){
  .pd-hero__grid,.pd-cta__grid,.pd-prob__grid,.pd-score__grid,.pd-lv__grid,.pd-story__grid,.pd-fit__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .pd-layers,.pd-shots3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pd-ar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .pd-mark{font-size:28px}
  .pd-proof{grid-template-columns:minmax(0,1fr)}
  .pd-proof div + div{padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--fv-line)}
  .pd-steps,.pd-layers,.pd-shots3,.pd-ar,.pd-roles__grid,.pd-plans{grid-template-columns:minmax(0,1fr)}
  .pd-role,.pd-role + .pd-role,[dir=rtl] .pd-role,[dir=rtl] .pd-role + .pd-role{padding:24px 0 12px;border-inline-start:0;border-bottom:1px solid var(--fv-line)}
  .pd-plan{padding:24px}
  .pd-layer__body{padding:22px 20px 18px}
  .pd-layer__viz{padding:16px}
  .pd-cmp{padding:18px}
  .pd-cmp__row{grid-template-columns:72px minmax(0,1fr) 34px}
}