/* Product sub-page, layout 2 (mock, 2026-10-16). Scoped to .psv2.
   Colour system: ink for structure, orange for action and focus, green only for a finished response. */
.psv2{--ps-r:20px}
.psv2 section{padding:0 0 var(--cta-gap)}
.psv2 .psin{width:min(calc(100% - 2*var(--gut)),calc(var(--wrap) - 2*var(--gut)));margin-inline:auto}
/* hero: words on top, the simulation across the page */
.ps2hero{padding-top:var(--cta-gap)!important}
.ps2hero h1{max-width:15ch;font:500 clamp(30px,3.8vw,42px)/1.06 var(--head);letter-spacing:-.03em;color:var(--ink)}
.ps2hero .ps2top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:start}
.ps2hero .sub{margin:0;max-width:44ch;font-size:18px;line-height:1.5;color:var(--text)}
.ps2hero .cta{margin-top:22px}
.ps2hero .shot{margin-top:36px;border-radius:var(--ps-r)}
/* section titles */
.ps2h{font:500 clamp(24px,3vw,32px)/1.1 var(--head);letter-spacing:-.025em;color:var(--ink)}
.ps2lead{margin-top:10px;max-width:58ch;font-size:17px;line-height:1.5;color:var(--text)}
.ps2lead a,.ps2f p a,.ps2cell p a,.ps2end a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
/* facts band: no card, six short facts */
.ps2facts{margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.ps2f{padding:18px 0 20px;border-top:1px solid var(--line2)}
.ps2f h3{font:500 18px/1.2 var(--head);letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:10px}
.ps2f h3::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.ps2f p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--text)}
/* pairs: two cells side by side, words then picture */
.ps2pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ps2cell{display:flex;flex-direction:column;background:var(--card);border-radius:var(--ps-r);padding:26px 26px 20px;box-shadow:0 1px 0 rgba(0,0,0,.03),0 18px 36px -30px rgba(0,0,0,.3)}
.ps2cell h2{font:500 clamp(20px,2vw,24px)/1.2 var(--head);letter-spacing:-.02em;color:var(--ink)}
.ps2cell p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--text);max-width:46ch}
.ps2cell .shot{margin-top:auto;padding-top:0;border-radius:14px}
.ps2cell .ps2gap{flex:1;min-height:18px}
/* the dark band */
.ps2band{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:36px;align-items:center;padding:40px;border-radius:24px;background:#0a0a0a;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.ps2band::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle,rgba(255,255,255,.18) 1.1px,transparent 1.5px);background-size:18px 18px;-webkit-mask-image:radial-gradient(110% 120% at 0 100%,#000 0%,transparent 70%);mask-image:radial-gradient(110% 120% at 0 100%,#000 0%,transparent 70%)}
.ps2band h2{font:500 clamp(24px,3vw,32px)/1.1 var(--head);letter-spacing:-.025em}
.ps2band>div:first-child p{margin-top:14px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.74);max-width:42ch}
.ps2band .shot{border-radius:16px}
/* roles and questions side by side, no cards */
.ps2end{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
.ps2end h2{font:500 clamp(20px,2vw,24px)/1.2 var(--head);letter-spacing:-.02em;color:var(--ink)}
.ps2roles{margin-top:14px}
.ps2role{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--line2)}
.ps2role:last-child{border-bottom:1px solid var(--line2)}
.ps2role b{font:500 16px/1.3 var(--head);color:var(--ink)}.ps2role span{font-size:15px;line-height:1.5;color:var(--text)}
.ps2note{margin-top:14px;font-size:14px;color:var(--text)}
.psv2 .psqs{margin-top:14px}.psv2 .psq{border-color:var(--line2)}
/* related, with pictures */
.ps2rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ps2rc{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--card);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.03),0 14px 28px -24px rgba(0,0,0,.28);transition:transform .3s var(--ease)}
.ps2rc:hover{transform:translateY(-3px)}
.ps2rc img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:var(--inset)}
.ps2rc div{padding:14px 16px 18px}.ps2rc b{display:block;font:500 18px/1.2 var(--head);letter-spacing:-.015em}.ps2rc span{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:var(--text)}
.ps2rc:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media (max-width:899px){
  .ps2hero .ps2top,.ps2pair,.ps2band,.ps2end{grid-template-columns:1fr}
  .ps2facts{grid-template-columns:1fr 1fr}
  .ps2rel{grid-template-columns:1fr}
  .ps2band{padding:24px}
  .ps2end{gap:28px}
}
@media (max-width:560px){.ps2facts{grid-template-columns:1fr}.ps2role{grid-template-columns:1fr;gap:4px}}
@media (prefers-reduced-motion:reduce){.ps2rc{transition:none}}

/* ---- colour system inside the simulations ---- */
/* tags: quiet outlined pills; orange when they match */
.psv2 .tgxw .tgxchip.c1,.psv2 .tgxw .tgxchip.c2,.psv2 .rcpchip.c1,.psv2 .rcpchip.c2{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.psv2 .tgxw .tgxchip::before,.psv2 .rcpchip::before{background:var(--muted)}
.psv2 .tgxw.s1 .tgxchip.c1,.psv2 .tgxw.s2 .tgxchip.c2{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--orange)}
.psv2 .tgxw.s1 .tgxchip.c1::before,.psv2 .tgxw.s2 .tgxchip.c2::before{background:var(--orange)}
.psv2 .tgxw.s3 .tgxlink::before{border-top:2px solid var(--orange)}
.psv2 .tgxbadge{background:var(--orange);color:#0a0a0a}
/* people: one soft tint */
.psv2 .tgxav,.psv2 .tgxsa,.psv2 .chsav,.psv2 .empav,.psv2 .prgav,.psv2 .tgxw .tgxav{background:var(--fill)!important;color:var(--ink)!important}
.psv2 .tgxw .tgxnew .tgxsa{background:var(--orange)!important;color:#0a0a0a!important}
.psv2 .tgxnew{background:var(--orange-tint)}
/* access granted is a result, not a response: ink, with an orange mark */
.psv2 .tgxw.s4 .tgxstat{background:var(--card);border-color:var(--ink)}
.psv2 .tgxw.s4 .tgxic{background:var(--orange);color:#0a0a0a}
.psv2 .tgxw.s4 .tgxst{color:var(--ink)}
/* pending and waiting: grey outline; notified and excluded: neutral fill */
.psv2 .chsp .wt,.psv2 .prgp.wt,.psv2 .chgp .wt{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.psv2 .chsp .wt::before,.psv2 .prgp.wt::before,.psv2 .chgp .wt::before{background:var(--muted)}
.psv2 .chsp .nt{background:var(--fill);color:var(--ink)}
.psv2 .prgt.wt em{color:var(--text)}
/* send is an action, not a response */
.psv2 .rcpsend{display:inline-grid;place-items:center}.psv2 .rcpsend>span{grid-area:1/1;display:inline-flex;align-items:center;gap:6px;transition:opacity .25s}
.psv2 .rcpsend .b{opacity:0}.psv2 .rcpw.s4 .rcpsend{background:var(--fill);color:var(--ink)}.psv2 .rcpw.s4 .rcpsend .a{opacity:0}.psv2 .rcpw.s4 .rcpsend .b{opacity:1}
.psv2 .rcpw.s4 .rcpcnt .sent{color:var(--ink)}
/* changes: active step orange, done steps quiet, the comma orange */
.psv2 .chgsteps span{display:flex;align-items:center;justify-content:center;gap:7px;height:28px;background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.psv2 .chgw:not(.s1):not(.s2):not(.s3):not(.s4) .chgsteps span:nth-child(1),.psv2 .chgw.s1:not(.s2) .chgsteps span:nth-child(1),.psv2 .chgw.s2:not(.s3) .chgsteps span:nth-child(2),.psv2 .chgw.s3:not(.s4) .chgsteps span:nth-child(3),.psv2 .chgw.s4 .chgsteps span:nth-child(4){background:var(--orange);color:#0a0a0a;box-shadow:none}
.psv2 .chgw.s2 .chgsteps span:nth-child(1),.psv2 .chgw.s3 .chgsteps span:nth-child(-n+2),.psv2 .chgw.s4 .chgsteps span:nth-child(-n+3){background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.psv2 .chgw.s2 .chgsteps span:nth-child(1)::before,.psv2 .chgw.s3 .chgsteps span:nth-child(-n+2)::before,.psv2 .chgw.s4 .chgsteps span:nth-child(-n+3)::before{content:"";width:4px;height:8px;border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:rotate(45deg) translateY(-1px)}
.psv2 .chgl.o{background:var(--inset);color:var(--text)}
.psv2 .chgl.n{background:var(--card);color:var(--ink)}
.psv2 .chgl .cm{background:var(--orange-tint);color:var(--ink);font-weight:700;padding:0 2px;margin:0;border-radius:2px;box-shadow:inset 0 -2px 0 var(--orange)}
.psv2 .chgp .ok.a,.psv2 .chgp .ok.c,.psv2 .chgp .ok.d{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.psv2 .chgp .ok::before{background:var(--ink)}
.psv2 .shot.chs,.psv2 .shot.rcp,.psv2 .shot.emp,.psv2 .shot.prg,.psv2 .shot.chg{aspect-ratio:560/480;width:100%}
.ps2hero h1.hh1{white-space:normal;max-width:none}
.ps2hero .ps2top{align-items:start}
.ps2rc img{object-fit:contain;object-position:center;padding:12px;box-sizing:border-box;background:var(--inset)}
.ps2top>*{min-width:0}.ps2hero .trustw{width:100%}
.ps2rc img{height:auto!important;aspect-ratio:16/10}
/* the questions show a focus ring for keyboard users only, not after a mouse click */
.psv2 .psq summary:focus-visible{outline:none}
html.kb .psv2 .psq summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}

/* ---- motion (2026-10-16) ---- */
/* one easing and one standard duration for every simulation; longer only where something grows */
.psv2{--ps-e:cubic-bezier(.3,.7,.2,1)}
.psv2 .shot *{transition-duration:.4s;transition-timing-function:var(--ps-e)}
.psv2 .shot .prgbar i{transition-duration:.9s}
.psv2 .shot .tgxrow.tgxnew,.psv2 .shot .prgrow.prgnew{transition-duration:.6s,.4s}
.psv2 .shot .empbtn span,.psv2 .shot .rcpsend,.psv2 .shot .rcpsend>span{transition-duration:.2s}
.psnt,.psnt *{transition:none!important;animation:none!important}
/* the cursor */
.psv2 .shot .pscur{position:absolute;left:0;top:0;z-index:20;width:18px;height:22px;margin:-2px 0 0 -2px;pointer-events:none;opacity:0;transition:transform .7s var(--ps-e),opacity .25s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.psv2 .shot .pscur.on{opacity:1}
.pscur svg{display:block;transform-origin:2px 2px}
.pscur.clk svg{animation:pscl .32s var(--ps-e)}
.pscur::after{content:"";position:absolute;left:2px;top:2px;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid var(--orange);opacity:0}
.pscur.clk::after{animation:psrip .55s var(--ps-e)}
@keyframes pscl{50%{transform:scale(.82)}}
@keyframes psrip{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.25)}}
/* whatever just changed gets a brief orange ring; a changed number turns orange for a moment */
.psfl{animation:psfl 1.1s var(--ps-e)}
@keyframes psfl{0%{outline:2px solid var(--orange);outline-offset:0}100%{outline:2px solid transparent;outline-offset:7px}}
.psflt span{animation:psflt 1.2s var(--ps-e)}
@keyframes psflt{0%,45%{color:var(--orange)}}
/* Progress: one set of numbers that counts up, instead of three that swap */
.psv2 .prgbig .v0,.psv2 .prgbig .v1,.psv2 .prgt.ok .prgn .v0,.psv2 .prgt.ok .prgn .v1,.psv2 .prgt.wt .prgn .v0,.psv2 .prgt.wt .prgn .v1{display:none}
.psv2 .prgw .prgbig .v2,.psv2 .prgw .prgn .v2{opacity:1;font-variant-numeric:tabular-nums}
/* When the policy changes: the new line opens first, then its words fade in */
.psv2 .shot .chgl.n{transition:max-height .45s var(--ps-e),padding .45s var(--ps-e),opacity .3s var(--ps-e) .3s}
/* the hero inbox peeks out from under the edge of the box */
.psv2 .tgxw .tgxmail{height:300px}
.psv2 .shot.tgx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;z-index:2;pointer-events:none;background:linear-gradient(to bottom,color-mix(in srgb,var(--inset) 0%,transparent),var(--inset) 92%)}
/* replay / stop button under each simulation */
.psshotw{position:relative;padding-bottom:36px}
.ps2cell .psshotw{margin-bottom:-8px}
.psrp{position:absolute;right:0;bottom:0;z-index:3;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 10px -6px rgba(0,0,0,.35);opacity:.85;transition:opacity .2s}
.psrp:hover{opacity:1}
.psrp:focus-visible{outline:2px solid var(--orange);outline-offset:2px;opacity:1}
@media (prefers-reduced-motion:reduce){.psrp{display:none}}

/* text that swaps in place: the old words fade out first, then the new ones fade in, so the two never overlap */
.psv2 .shot .rcpcnt span{transition-duration:.18s}
.psv2 .shot .rcpw:not(.s1) .rcpcnt .k0,
.psv2 .shot .rcpw.s1:not(.s2) .rcpcnt .k1,
.psv2 .shot .rcpw.s2:not(.s4) .rcpcnt .k2b,
.psv2 .shot .rcpw.s4 .rcpcnt .sent{transition-duration:.3s;transition-delay:.18s}
.psv2 .shot .chgnote span{transition-duration:.18s}
.psv2 .shot .chgw:not(.s1) .chgnote .n0,
.psv2 .shot .chgw.s1:not(.s2) .chgnote .n1x,
.psv2 .shot .chgw.s2:not(.s3) .chgnote .n2x,
.psv2 .shot .chgw.s3:not(.s4) .chgnote .n3x,
.psv2 .shot .chgw.s4 .chgnote .n4x{transition-duration:.3s;transition-delay:.18s}
.psv2 .shot .chgb.n .chgp span{transition-duration:.18s}
.psv2 .shot .chgw:not(.s2) .chgb.n .chgp .a,
.psv2 .shot .chgw.s2:not(.s3) .chgb.n .chgp .b,
.psv2 .shot .chgw.s3:not(.s4) .chgb.n .chgp .c,
.psv2 .shot .chgw.s4 .chgb.n .chgp .d{transition-duration:.3s;transition-delay:.18s}
.psv2 .shot .chgb.o .chgp span{transition-duration:.18s}
.psv2 .shot .chgw:not(.s4) .chgb.o .chgp .a,
.psv2 .shot .chgw.s4 .chgb.o .chgp .b{transition-duration:.3s;transition-delay:.18s}
.psv2 .shot .chgcnt span{transition-duration:.18s}
.psv2 .shot .chgw:not(.s4) .chgb.n .chgcnt .z,
.psv2 .shot .chgw.s4 .chgb.n .chgcnt .y{transition-duration:.3s;transition-delay:.18s}
.psv2 .shot .tgxst span{transition-duration:.18s}
.psv2 .shot .tgxw:not(.s4) .tgxst .t1,
.psv2 .shot .tgxw.s4 .tgxst .t2{transition-duration:.3s;transition-delay:.18s}
.psv2 .shot .chstt h4, .psv2 .shot .chsv small, .psv2 .shot .chsdesc span{transition-duration:.18s}
.psv2 .shot .chsw[data-m=n] .tn,
.psv2 .shot .chsw[data-m=a] .ta,
.psv2 .shot .chsw[data-m=e] .te,
.psv2 .shot .chsw[data-m=n] .chsdesc .dn,
.psv2 .shot .chsw[data-m=a] .chsdesc .da,
.psv2 .shot .chsw[data-m=e] .chsdesc .de{transition-duration:.3s;transition-delay:.18s}
.psv2 .shot .chsrow:nth-child(1) .chsp span{transition-duration:.18s;transition-delay:0.12s}
.psv2 .shot .chsw[data-m=n] .chsrow:nth-child(1) .chsp .nt,.psv2 .shot .chsw[data-m=a] .chsrow:nth-child(1) .chsp .ak,.psv2 .shot .chsw[data-m=e] .chsrow:nth-child(1) .chsp .ek{transition-duration:.3s;transition-delay:0.30s}
.psv2 .shot .chsrow:nth-child(2) .chsp span{transition-duration:.18s;transition-delay:0.2s}
.psv2 .shot .chsw[data-m=n] .chsrow:nth-child(2) .chsp .nt,.psv2 .shot .chsw[data-m=a] .chsrow:nth-child(2) .chsp .ak,.psv2 .shot .chsw[data-m=e] .chsrow:nth-child(2) .chsp .ek{transition-duration:.3s;transition-delay:0.38s}
.psv2 .shot .chsrow:nth-child(3) .chsp span{transition-duration:.18s;transition-delay:0.28s}
.psv2 .shot .chsw[data-m=n] .chsrow:nth-child(3) .chsp .nt,.psv2 .shot .chsw[data-m=a] .chsrow:nth-child(3) .chsp .ak,.psv2 .shot .chsw[data-m=e] .chsrow:nth-child(3) .chsp .ek{transition-duration:.3s;transition-delay:0.46s}
.psv2 .shot .chsrow:nth-child(4) .chsp span{transition-duration:.18s;transition-delay:0.36s}
.psv2 .shot .chsw[data-m=n] .chsrow:nth-child(4) .chsp .nt,.psv2 .shot .chsw[data-m=a] .chsrow:nth-child(4) .chsp .ak,.psv2 .shot .chsw[data-m=e] .chsrow:nth-child(4) .chsp .ek{transition-duration:.3s;transition-delay:0.54s}
.psv2 .shot .chsrow:nth-child(5) .chsp span{transition-duration:.18s;transition-delay:0.44s}
.psv2 .shot .chsw[data-m=n] .chsrow:nth-child(5) .chsp .nt,.psv2 .shot .chsw[data-m=a] .chsrow:nth-child(5) .chsp .ak,.psv2 .shot .chsw[data-m=e] .chsrow:nth-child(5) .chsp .ek{transition-duration:.3s;transition-delay:0.62s}
.psv2 .shot .chsmore span,.psv2 .shot .chsfoot span{transition-duration:.18s;transition-delay:.5s}
.psv2 .shot .chsw[data-m=n] .chsmore .mn,.psv2 .shot .chsw[data-m=a] .chsmore .ma,.psv2 .shot .chsw[data-m=e] .chsmore .me,.psv2 .shot .chsw[data-m=n] .chsfoot .fn,.psv2 .shot .chsw[data-m=a] .chsfoot .fa,.psv2 .shot .chsw[data-m=e] .chsfoot .fe{transition-duration:.3s;transition-delay:.68s}
/* facts: the dot sits on the heading's first line, and the text below lines up with the heading, not the dot */
.ps2f h3{align-items:flex-start}
.ps2f h3::before{margin-top:.5em}
.ps2f p{padding-left:17px}