/* =====================================================================
   PAGE: PRODUCT · LIBRA — public/assets/css/pages/product-libra.css (step 11.5)
   From design/product-libra-preview.html. Shared product rules: product.css; colours: product-skins.css (.pd-p--libra).
   Only --fv-* tokens and --pd-* skin variables; every class starts with "pd-".
   ===================================================================== */
/* product mark (temporary typographic logo; replaced by public/assets/img/products/libra-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}
/* 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(38px,4.2vw,60px);margin-block:32px 24px}
.pd-hero .fv-lead{max-width:54ch}
.pd-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:44px;border-top:1px solid var(--fv-line)}
.pd-proof div{padding-block:18px;padding-inline-end:16px;border-bottom:1px solid var(--fv-line)}
.pd-proof div:nth-child(even){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)}
/* 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:36px 1fr;gap:8px;padding-block:14px;border-bottom:1px solid var(--fv-line);font-size:16px}
.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:2px}
[dir=rtl] .pd-prob__q li::before{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 principle */
.pd-princ__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px;align-items:start}
.pd-princ__grid > div > p{color:var(--fv-muted)}
.pd-ex{background:var(--fv-white);border:1px solid var(--fv-line);border-top:3px solid var(--pd-accent);padding:28px}
.pd-ex__k{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fv-muted);margin-bottom:10px}
[dir=rtl] .pd-ex__k{letter-spacing:0;font-size:13px}
.pd-ex p{padding-block:12px;border-bottom:1px solid var(--fv-line);font-size:15.5px}
.pd-ex p:last-child{border-bottom:0;color:var(--pd-accent);font-weight:600}
.pd-ex b{font-family:var(--fv-font-display);font-weight:500;font-size:20px;color:var(--pd-accent)}
[dir=rtl] .pd-ex b{font-family:var(--fv-font-fa);font-weight:700;font-size:17px}
.pd-conn{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;margin-top:72px;padding-top:40px;border-top:1px solid var(--fv-line)}
.pd-conn h3{font-family:var(--fv-font-display);font-weight:500;font-size:28px;line-height:1.2}
[dir=rtl] .pd-conn h3{font-family:var(--fv-font-fa);font-weight:700;font-size:22px}
.pd-conn p{color:var(--fv-muted);margin-bottom:24px}
.pd-layer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pd-layer span{display:grid;place-items:center;text-align:center;min-height:52px;padding:8px;border:1px solid var(--fv-line);background:var(--fv-white);font-size:13.5px}
.pd-layer strong{grid-column:1/-1;display:block;text-align:center;padding:12px;background:var(--pd-accent);color:var(--fv-white);font-size:14px;font-weight:600;letter-spacing:.04em}
[dir=rtl] .pd-layer strong{letter-spacing:0}
/* 4 path */
.pd-path__head{max-width:760px;margin-bottom:40px}
.pd-flow{display:flex;flex-wrap:wrap;gap:10px 0;align-items:center;margin-bottom:48px;list-style:none}
.pd-flow li{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--pd-accent);color:var(--pd-accent);background:var(--fv-white)}
.pd-flow li:not(:last-child){margin-inline-end:26px;position:relative}
.pd-flow li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:calc(100% + 6px);top:50%;width:14px;border-top:1.5px solid var(--pd-accent)}
.pd-flow li:last-child{background:var(--pd-accent);color:var(--fv-white)}
[dir=rtl] .pd-flow li{letter-spacing:0}
.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;padding-block:26px 30px;border-top:1px solid var(--fv-line)}
.pd-steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--fv-font-display);font-size:15px;color:var(--pd-accent);margin-bottom:10px}
[dir=rtl] .pd-steps li::before{font-family:var(--fv-font-fa)}
.pd-steps h3{font-size:18px;font-weight:600;margin-bottom:8px}
.pd-steps p{font-size:15px;color:var(--fv-muted)}
.pd-status{margin-top:24px;padding-top:28px;border-top:1px solid var(--fv-ink)}
.pd-status__k{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fv-muted);margin-bottom:14px}
[dir=rtl] .pd-status__k{letter-spacing:0;font-size:13px}
.pd-status ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.pd-status li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--fv-line);background:var(--fv-white);font-size:13.5px}
.pd-status li::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--pd-accent)}
.pd-status li.pd-st-ok::before{background:var(--fv-green);border-color:var(--fv-green)}
.pd-status li.pd-st-ex::before{background:var(--pd-accent)}
/* 5 features */
.pd-feat__head{max-width:720px;margin-bottom:56px}
.pd-f{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:72px;align-items:center;padding-block:56px;border-top:1px solid var(--fv-line)}
.pd-f:nth-of-type(odd) .pd-shot{order:2}
.pd-f__n{display:block;font-family:var(--fv-font-display);font-size:15px;color:var(--pd-accent);margin-bottom:14px}
[dir=rtl] .pd-f__n{font-family:var(--fv-font-fa)}
.pd-f .fv-h3{margin-bottom:16px}
.pd-f p{color:var(--fv-muted);margin-bottom:22px}
/* 6 roles */
.pd-roles__head{max-width:720px;margin-bottom:48px}
.pd-roles__grid{display:grid;grid-template-columns:repeat(4,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__k{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pd-accent);margin-bottom:14px}
[dir=rtl] .pd-role__k{letter-spacing:0;font-size:13px}
.pd-role h3{font-size:19px;font-weight:600;line-height:1.35;margin-bottom:12px}
.pd-role p{font-size:15px;color:var(--fv-muted)}
/* 7 story (ink) */
.pd-story__head{max-width:780px;margin-bottom:48px}
.pd-story__ind{font-size:var(--fv-fs-small);color:var(--fv-on-ink-muted)}
.pd-story__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--fv-on-ink)}
.pd-story__cell{padding:28px 28px 8px 0}
.pd-story__cell + .pd-story__cell{padding-inline-start:28px;border-inline-start:1px solid var(--fv-line-ink)}
[dir=rtl] .pd-story__cell{padding:28px 0 8px 28px}
[dir=rtl] .pd-story__cell + .pd-story__cell{padding-inline:28px 28px}
.pd-story__k{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fv-on-ink-muted);margin-bottom:12px}
[dir=rtl] .pd-story__k{letter-spacing:0;font-size:13px}
.pd-story__cell p{font-size:15.5px;color:var(--fv-on-ink)}
.pd-story__cell--res{border-top:3px solid var(--pd-accent-on-ink);margin-top:-2px}
.pd-story__cell--res .fv-num{display:block;font-size:clamp(34px,3.4vw,46px);color:var(--pd-accent-on-ink);margin-bottom:10px;white-space:nowrap}
[dir=rtl] .pd-story__cell--res .fv-num{font-size:30px}
.pd-story__nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:64px;border-top:1px solid var(--fv-line-ink)}
.pd-story__nums > div{padding:28px 24px 0 0}
.pd-story__nums > div + div{padding-inline-start:28px;border-inline-start:1px solid var(--fv-line-ink)}
[dir=rtl] .pd-story__nums > div{padding:28px 0 0 24px}
.pd-story__nums .fv-stat__n{color:var(--pd-accent-on-ink)}
.pd-story__src{margin-top:28px;font-size:13px;color:var(--fv-on-ink-muted)}
/* 8 fit */
.pd-ind{margin-top:56px;padding-top:32px;border-top:1px solid var(--fv-line)}
.pd-ind ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.pd-ind li{padding:8px 16px;border:1px solid var(--pd-accent);color:var(--pd-accent);background:var(--fv-white);font-size:14px}
/* 9 cta */
.pd-cta__act{display:grid;gap:18px;justify-items:start}
@media (max-width:1080px){
  .pd-hero__grid,.pd-f,.pd-prob__grid,.pd-princ__grid,.pd-conn{grid-template-columns:minmax(0,1fr);gap:40px}
  .pd-f:nth-of-type(odd) .pd-shot{order:0}
  .pd-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-story__grid,.pd-roles__grid{grid-template-columns:1fr 1fr}
  .pd-story__cell:nth-child(3),.pd-role:nth-child(3){padding-inline-start:0;border-inline-start:0}
  [dir=rtl] .pd-story__cell:nth-child(3),[dir=rtl] .pd-role:nth-child(3){padding-inline-start:0}
}
@media (max-width:600px){
  .pd-mark{font-size:28px}
  .pd-proof{grid-template-columns:minmax(0,1fr)}
  .pd-proof div:nth-child(even){padding-inline-start:0;border-inline-start:0}
  .pd-steps,.pd-story__grid,.pd-roles__grid,.pd-story__nums{grid-template-columns:minmax(0,1fr)}
  .pd-layer{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-story__cell,.pd-story__cell + .pd-story__cell,[dir=rtl] .pd-story__cell,[dir=rtl] .pd-story__cell + .pd-story__cell,
  .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-story__cell,.pd-story__cell + .pd-story__cell{border-bottom-color:var(--fv-line-ink)}
  .pd-story__cell--res{padding-inline:0}
  .pd-story__nums > div,.pd-story__nums > div + div,[dir=rtl] .pd-story__nums > div{padding:24px 0 0;border-inline-start:0}
  .pd-flow li{font-size:11.5px;padding:7px 10px}
  .pd-flow li:not(:last-child){margin-inline-end:20px}
  .pd-flow li:not(:last-child)::after{width:10px;inset-inline-start:calc(100% + 5px)}
  .pd-conn{margin-top:48px}
  .pd-f{padding-block:40px;gap:28px}
  .pd-ex{padding:20px}
}