/* Pramaan */
.pg-pramaan .p-h1 { font-size: clamp(2.4rem, 6.3vw, 5.9rem); max-width: 13.5em; }

/* ---------- hero instrument: an investigation, drawn live ---------- */
.pm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 2rem; margin-bottom: 1.4rem; }
.pm-steps { list-style: none; margin: 0; padding: 0; display: flex; border: 1px solid #2a3a85; }
.pm-steps li { display: flex; align-items: baseline; gap: .5rem; padding: .55rem .95rem; border-right: 1px solid #2a3a85; font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6f7fb4; transition: background .35s, color .35s; }
.pm-steps li:last-child { border-right: 0; } .pm-steps li b { color: #4a5b9d; transition: color .35s; }
.pm-steps li.on { background: var(--blue); color: #fff; } .pm-steps li.on b { color: #cfdaff; }
.pm-msg { display: flex; align-items: center; gap: .7rem; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: .98rem; letter-spacing: -0.01em; color: #cfdaff; min-height: 1.5em; }
.pm-msg i { width: .55rem; height: .55rem; background: var(--bright); flex: none; animation: blink 1.2s steps(2, jump-none) infinite; }
.pm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15.5rem, 20rem); align-items: stretch; }
.pm-svg { width: 100%; height: auto; overflow: visible; }

.pm-svg .n rect { fill: #0a1438; stroke: #5b86ff; stroke-width: 1.5; }
.pm-svg .n.q rect { fill: var(--blue); stroke: #fff; stroke-width: 2; }
.pm-svg .qm { fill: #fff; font: 800 30px var(--font-display); }
.pm-svg .n.t rect { stroke: #fff; fill: #0c1a52; }
.pm-svg .n.lead rect { fill: #fff; stroke: #fff; } .pm-svg .ln { stroke: var(--blue); stroke-width: 3; }
.pm-svg .n.r rect { stroke: #6f87d8; fill: #0a1438; }
.pm-svg .x, .pm-svg .ck { stroke-width: 2; stroke-linecap: square; opacity: 0; transition: opacity .3s; }
.pm-svg .x { stroke: #8d9bc9; } .pm-svg .ck { stroke: var(--night); }
.pm-svg .edge { stroke: var(--bright); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; }
.pm-svg .lbl { fill: #8d9bc9; font: 600 10px var(--font-display); letter-spacing: .14em; text-transform: uppercase; }

/* phases: elements with data-s=n appear when the root has class s<n> */
.pm [data-s] { transition: opacity .5s var(--ease) var(--d, 0s), transform .6s var(--snap) var(--d, 0s), stroke-dashoffset .9s var(--ease) var(--d, 0s), fill .3s, stroke .3s; }
.pm .n[data-s], .pm .lbl[data-s] { opacity: 0; }
.pm .n[data-s] { transform: scale(.2); transform-box: fill-box; transform-origin: center; }
.pm li[data-s] { opacity: 0; transform: translateX(14px); }
.pm.s1 [data-s="1"], .pm.s2 [data-s="2"], .pm.s4 [data-s="4"], .pm.s5 [data-s="5"] { opacity: 1; }
.pm.s4 .edge[data-s="4"][data-f] { opacity: .22; }
.pm.s1 .n[data-s="1"], .pm.s2 .n[data-s="2"], .pm.s4 .n[data-s="4"] { transform: none; }
.pm.s1 .edge[data-s="1"], .pm.s2 .edge[data-s="2"], .pm.s4 .edge[data-s="4"], .pm.s5 .edge[data-s="5"] { stroke-dashoffset: 0; }
.pm.s5 li[data-s="5"] { transform: none; }
/* phase 3: tarka's verdicts */
.pm.s3 .n.r[data-v="P"] rect, .pm.s3 .n.r[data-v="L"] rect { fill: var(--bright); stroke: #fff; }
.pm.s3 .n.r[data-v="P"] .ck, .pm.s3 .n.r[data-v="L"] .ck { opacity: 1; }
.pm.s3 .n.r[data-v="F"] { opacity: .35; } .pm.s3 .n.r[data-v="F"] rect { stroke-dasharray: 3 3; stroke: #5a6aa3; } .pm.s3 .n.r[data-v="F"] .x { opacity: 1; }
.pm.s3 .n.r[data-v="G"] rect { stroke: #ffe08a; stroke-dasharray: 3 3; fill: #2a2410; } .pm.s3 .n.r[data-v="G"] { animation: gap 1.1s steps(2, jump-none) infinite; }
.pm.s4 .n.r[data-v="G"] { animation: none; } .pm.s4 .n.r[data-v="G"] rect { stroke: var(--bright); stroke-dasharray: none; fill: #0a1438; }
.pm.s4 .n.k[data-v="P"] rect { fill: var(--bright); stroke: #fff; } .pm.s4 .n.k[data-v="P"] .ck { opacity: 1; }
.pm.s4 .n.k[data-v="F"] { opacity: .35; } .pm.s4 .n.k[data-v="F"] rect { stroke-dasharray: 3 3; stroke: #5a6aa3; } .pm.s4 .n.k[data-v="F"] .x { opacity: 1; }
@keyframes gap { 50% { opacity: .4; } }
.pm.s3 .edge[data-f] { opacity: .22; stroke-dasharray: 3 4; }
.pm .lbl[data-s="4"] { fill: #cfdaff; }

/* the evidence packet */
.pk { position: relative; margin: 0 0 0 -1px; border: 1px solid var(--bright); background: #0a1438; display: flex; flex-direction: column; box-shadow: 8px 8px 0 rgba(91, 134, 255, .28); }
.pk::before { content: ""; position: absolute; top: -1px; right: -1px; width: 22px; height: 22px; background: linear-gradient(to bottom left, var(--night) calc(50% - .6px), var(--bright) calc(50% - .6px) calc(50% + .6px), #18255c calc(50% + .6px)); }
.pk-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: .85rem 2rem .85rem 1rem; border-bottom: 1px solid #2a3a85; font-family: var(--font-display); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8d9bc9; }
.pk-h b { color: #fff; font-weight: 700; letter-spacing: .08em; } .pk-h em { font-style: normal; color: var(--bright); font-variant-numeric: tabular-nums; }
.pk ol { list-style: none; margin: 0; padding: .3rem 0; flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.pk li { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .1rem .4rem; padding: .5rem 1rem; align-items: start; position: relative; transition: background .3s; }
.pk li b { font-family: var(--font-display); font-size: .78rem; color: var(--bright); letter-spacing: .02em; padding-top: .1rem; }
.pk strong { display: block; font-family: var(--font-display); font-weight: 650; font-size: .86rem; letter-spacing: -0.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk small { display: block; font-size: .8rem; color: #8d9bc9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk li i { grid-column: 2; height: 3px; background: #14215a; position: relative; margin-top: .3rem; } .pk li i::before { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--bright); }
.pk-f { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .7rem 1rem; border-top: 1px solid #2a3a85; font-family: var(--font-display); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8d9bc9; } .pk-f i { width: .45rem; height: .45rem; background: var(--bright); }
@media (max-width: 900px) {
  .pm-grid { grid-template-columns: 1fr; gap: 1.2rem; } .pk { margin: 0; } .pm-svg .lbl { display: none; }
  .pm-steps li { padding: .5rem .6rem; } .pm-steps li span { display: none; } .pm-steps li.on span { display: inline; }
  .pk li { padding: .4rem .8rem; }
}

/* ---------- 01 cards ---------- */
.pm-bring { margin: -1.2rem 0 clamp(2.4rem, 4vw, 3.4rem); font-family: var(--font-display); font-weight: 750; letter-spacing: -0.04em; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.05; color: var(--blue); }
.pm-cards { list-style: none; margin: 0; padding: 0 10px 10px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.4rem, 2.4vw, 2.2rem); counter-reset: c; }
.pm-card { display: grid; grid-template-rows: auto auto auto 1fr; padding: 0 0 1.5rem; }
.mini-w { padding: 1.3rem 1.3rem 1rem; border-bottom: 1px solid var(--line-2); background: var(--mist); overflow: hidden; }
.mini { width: 100%; height: auto; stroke: var(--blue); stroke-width: 1.6; transition: transform .7s var(--ease); }
.mini rect { fill: #fff; } .mini .hl { fill: var(--blue); transition: fill .4s; } .mini .dim { fill: var(--mist-2); stroke: var(--line-2); } .mini .dash { stroke-dasharray: 5 5; stroke: var(--line-2); }
.dock:hover .mini { transform: scale(1.05); } .dock:hover .mini .hl { fill: var(--navy); }
.pm-n { margin: 1.2rem 1.5rem 0; font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .16em; color: var(--blue); }
.pm-card h3 { margin: .5rem 1.5rem .6rem; font-size: clamp(1.4rem, 2vw, 1.75rem); }
.pm-card p { margin: 0 1.5rem; color: var(--muted); font-size: 1rem; line-height: 1.5; }
.pm-loop { width: calc(100% - 10px); height: 64px; margin-top: 1.1rem; overflow: visible; }
.pm-loop path { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 6 5; } .pm-loop .ah { stroke-dasharray: none; stroke-width: 2; } .pm-loop .pdot { fill: var(--blue); }
@media (max-width: 1100px) { .pm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pm-loop { display: none; } }
@media (max-width: 600px) { .pm-cards { grid-template-columns: 1fr; } }

/* ---------- 02 stack ---------- */
.pm-stack { overflow: hidden; } .pm-stack .wrap { position: relative; z-index: 1; }
.pm-chain { position: relative; margin: 0 0 clamp(3rem, 5vw, 4.5rem); }
.pm-chain ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.pm-chain li { position: relative; display: flex; flex-direction: column; justify-content: center; gap: .3rem; padding: 1.5rem 1.2rem; min-height: 7.5rem; border: 1px solid rgba(255, 255, 255, .28); margin-left: -1px; background: #0a1438; transition: background .35s, transform .45s var(--snap); }
.pm-chain li:hover { transform: translateY(-4px); background: #10215f; }
.pm-chain li b { font-family: var(--font-display); font-weight: 750; letter-spacing: -0.045em; font-size: clamp(1.15rem, 2.6vw, 2.2rem); color: #fff; }
.pm-chain li small { font-family: var(--font-display); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: #8d9bc9; font-weight: 600; }
.pm-chain li.end { border-style: dashed; background: transparent; } .pm-chain li.end b { color: #cfdaff; }
.pm-chain li.on { background: var(--blue); border-color: var(--bright); } .pm-chain li.on small { color: #dbe4ff; }
.pm-chain li.ev { background: repeating-linear-gradient(45deg, #0a1438 0 6px, #0e1a4c 6px 12px); border-color: var(--bright); }
.pm-chain li::after { content: ""; position: absolute; right: -9px; top: 50%; width: 16px; height: 16px; background: var(--night); border-top: 1px solid rgba(255, 255, 255, .4); border-right: 1px solid rgba(255, 255, 255, .4); transform: translateY(-50%) rotate(45deg); z-index: 3; }
.pm-chain li:last-child::after { display: none; }
.pm-chain .br { display: flex; align-items: center; justify-content: center; gap: .7rem; margin: 0 calc(20% - 1px) -1px calc(20% - 1px); height: 3.3rem; border: 1px solid var(--bright); border-bottom: 0; position: relative; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bright); background: rgba(91, 134, 255, .1); }
.pm-chain .br::before, .pm-chain .br::after { content: ""; position: absolute; bottom: 0; width: 1px; height: 14px; background: var(--bright); }
.loop-ic svg { width: 1.2rem; height: 1.2rem; display: block; animation: spin 6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.pm-chain .pkt { position: absolute; left: 0; bottom: -6px; width: 12px; height: 12px; background: #fff; animation: ride 7s var(--ease) infinite; z-index: 4; box-shadow: 0 0 0 3px rgba(91, 134, 255, .5); }
@keyframes ride { 0% { transform: translateX(10px); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(calc(min(100vw - 2 * var(--pad), var(--max)) - 22px)); opacity: 0; } }
.pm-scards { list-style: none; margin: 0 0 clamp(3rem, 5vw, 4.5rem); padding: 0 10px 10px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.4rem, 2.4vw, 2.2rem); }
.pm-s { padding: 1.5rem 1.5rem 1.7rem; height: 100%; }
.sn { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(3.6rem, 6vw, 5.4rem); line-height: .85; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px var(--bright); margin-bottom: 1.4rem; transition: color .35s; } .dock:hover .sn { color: var(--bright); }
.pm-s h3 { font-size: 1.45rem; color: #fff; margin-bottom: .6rem; } .pm-s p { margin: 0; color: #9fb0e6; font-size: 1rem; line-height: 1.5; }
.pm-state { margin: 0; padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(255, 255, 255, .25); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; font-size: clamp(1.9rem, 4.4vw, 3.9rem); max-width: 20em; color: #fff; text-wrap: balance; }
@media (max-width: 1000px) { .pm-scards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pm-chain ol { grid-template-columns: 1fr; } .pm-chain li { margin: -1px 0 0; min-height: 0; padding: 1rem 1.2rem; flex-direction: row; align-items: baseline; justify-content: space-between; }
  .pm-chain li::after { right: auto; left: 2rem; top: auto; bottom: -9px; transform: rotate(135deg); } .pm-chain .br { margin: 0 0 -1px; } .pm-chain .pkt { display: none; }
}
@media (max-width: 560px) { .pm-scards { grid-template-columns: 1fr; } }

/* ---------- 03 use ---------- */
.uses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line-2); background: #fff; }
.use { position: relative; padding: 1.5rem 1.4rem 1.4rem; min-height: 13rem; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); margin: 0 -1px -1px 0; transition: background .4s, color .4s; isolation: isolate; outline-offset: -4px; }
.use::before { content: ""; position: absolute; inset: 0; background: var(--dither-fine); opacity: 0; z-index: -1; transition: opacity .5s; -webkit-mask-image: linear-gradient(135deg, transparent 40%, #000); mask-image: linear-gradient(135deg, transparent 40%, #000); }
.use:hover, .use:focus-visible { background: var(--blue); color: #fff; } .use:hover::before { opacity: .18; }
.ui { display: block; width: 3.6rem; } .ui svg { width: 100%; height: auto; stroke: var(--blue); stroke-width: 2; transition: stroke .4s; } .ui svg rect { fill: #fff; } .ui svg .hl { fill: var(--blue); } .use:hover .ui svg { stroke: #fff; } .use:hover .ui svg rect { fill: transparent; } .use:hover .ui svg .hl { fill: #fff; }
.use b { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.035em; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.05; display: block; margin-top: 1.4rem; }
.use i { position: absolute; top: 1.2rem; right: 1.2rem; font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .16em; color: var(--blue); transition: color .4s; } .use:hover i { color: #cfdaff; }
@media (max-width: 480px) { .use { min-height: 10.5rem; padding: 1.1rem; } }

@media (prefers-reduced-motion: reduce) { .pm [data-s] { transition: none !important; } .pm-chain .pkt, .pm-loop .pdot, .loop-ic svg { animation: none; } .pm-chain .pkt { display: none; } }