/* Products page — product-showcase sections (Typia / Sudomania / Visma) and their
   bespoke demo visuals. Ported verbatim from Products.html #pshow-css; Products only. */

  /* ===== Product showcase sections ===== */
  .pshow{border-top:1px solid var(--hair);padding:128px 40px;position:relative;overflow:hidden}
  .pshow-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1.08fr;gap:88px;align-items:center}
  .pshow.alt .pcopy{order:2}
  .pshow.alt .pvis{order:1}
  .pcopy{position:relative;min-width:0}
  .pvis{min-width:0}
  .pmetar{display:flex;align-items:center;gap:16px;margin-bottom:24px}
  .pix{font-family:'JetBrains Mono';font-weight:500;font-size:12px;letter-spacing:.16em;color:var(--crimson)}
  .pmetar .eyebrow{margin:0}
  .pname{font-family:'Inter Tight';font-weight:700;font-size:64px;letter-spacing:-.04em;line-height:.98;margin:0 0 22px;color:var(--ink)}
  .pname .tld{color:var(--muted);font-weight:500}
  .plede{font-size:18px;line-height:1.62;color:var(--ink-2);max-width:520px;margin:0 0 34px;text-wrap:pretty}
  .pspecs{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--hair);max-width:540px;margin-bottom:36px}
  .pspecs .sp{padding:18px 32px 18px 0}
  .pspecs .sp .k{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
  .pspecs .sp .v{font-family:'Inter Tight';font-weight:600;font-size:17px;color:var(--ink);letter-spacing:-.01em}
  .pacts{display:flex;gap:18px;align-items:center}
  .pacts .glink{font-family:'Inter Tight';font-weight:600;font-size:15px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px;transition:.18s}
  .pacts .glink:hover{color:var(--ink);border-color:var(--ink)}

  /* shared visual frame */
  .pframe{border:1px solid var(--hair);background:var(--white);border-radius:10px;overflow:hidden;box-shadow:0 40px 80px -42px rgba(0,0,0,.32);position:relative}

  /* ---- Typia: live typing demo ---- */
  .pframe.typia{padding:0;container-type:inline-size}
  .typia .tbar{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--hair);font-family:'JetBrains Mono';font-size:12px;color:var(--muted)}
  .typia .tdot{width:9px;height:9px;border-radius:50%;background:var(--crimson);box-shadow:0 0 0 4px color-mix(in srgb,var(--crimson) 18%,transparent)}
  .typia .tstats{margin-left:auto;display:flex;gap:20px;color:var(--ink)}
  .typia .tstats b{font-weight:700}
  .typia .tstats span{color:var(--muted)}
  .typia .ttext{padding:clamp(24px,5cqw,44px) clamp(20px,4cqw,34px);font-family:'Inter Tight';font-weight:500;font-size:clamp(19px,5.2cqw,29px);line-height:1.5;letter-spacing:-.012em;min-height:clamp(96px,20cqw,150px)}
  .typia .ttext #ty-typed{color:var(--ink)}
  .typia .ttext #ty-rest{color:var(--muted);opacity:.42}
  .typia .caret{display:inline-block;width:2px;height:.92em;background:var(--crimson);transform:translateY(4px);animation:tcaret 1s steps(1) infinite}
  @keyframes tcaret{50%{opacity:0}}
  .typia .kb{display:flex;flex-direction:column;gap:clamp(5px,1cqw,8px);align-items:center;padding:clamp(6px,1.2cqw,8px) clamp(10px,2cqw,22px) clamp(18px,3.4cqw,30px)}
  .typia .krow{display:flex;gap:clamp(4px,1cqw,8px)}
  .typia .key{box-sizing:border-box;width:clamp(22px,8cqw,46px);height:clamp(22px,8cqw,46px);border:1px solid var(--hair);border-radius:clamp(5px,1.4cqw,9px);display:grid;place-items:center;font-family:'JetBrains Mono';font-size:clamp(10px,3cqw,14px);color:var(--ink-2);background:var(--paper);transition:.12s;text-transform:uppercase}
  .typia .key.space{width:clamp(150px,50cqw,230px)}
  .typia .key.hot{background:var(--crimson);color:#fff;border-color:var(--crimson);transform:translateY(2px);box-shadow:0 8px 18px -6px var(--crimson)}

  /* ---- Sudomania: real board ---- */
  .pframe.sudo{background:var(--paper);padding:clamp(18px,3.4vw,34px);display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.8vw,26px)}
  .sgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:clamp(238px,72vw,368px);aspect-ratio:1/1;gap:2px;background:var(--ink);border:2px solid var(--ink);border-radius:6px;overflow:hidden}
  .sbox{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:1px;background:var(--hair)}
  .scell{background:var(--white);display:grid;place-items:center;min-width:0;min-height:0;font-family:'Inter Tight';font-weight:600;font-size:clamp(14px,3.4vw,19px);color:var(--ink);transition:background .2s ease,box-shadow .2s ease}
  .scell.user{color:var(--crimson)}
  .scell.sel{background:color-mix(in srgb,var(--crimson) 13%,var(--white));box-shadow:inset 0 0 0 2px var(--crimson)}
  .scell.place{animation:splace .34s cubic-bezier(.34,1.56,.64,1)}
  @keyframes splace{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
  .spad{display:flex;gap:clamp(4px,1.4vw,7px)}
  .spad .sk{width:clamp(26px,7.4vw,34px);height:clamp(30px,8.6vw,40px);border:1px solid var(--hair);border-radius:7px;display:grid;place-items:center;font-family:'Inter Tight';font-weight:600;font-size:clamp(13px,3.4vw,16px);color:var(--ink-2);background:var(--white);transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
  .spad .sk.on{background:var(--crimson);color:#fff;border-color:var(--crimson);transform:translateY(-2px);box-shadow:0 8px 16px -6px var(--crimson)}

  /* ---- Visma: ERP assistant chat (navy) ---- */
  .pshow.navy{background:#081A4E;border-top-color:#081A4E;color:#E8EEFC}
  .pshow.navy .pname{color:#fff}
  .pshow.navy .pname .tld{color:#7F97CF}
  .pshow.navy .plede{color:#AEBEE6}
  .pshow.navy .pix{color:#60A5FA}
  .pshow.navy .eyebrow{color:#9DB2E6}
  .pshow.navy .eyebrow::before{background:#60A5FA}
  .pshow.navy .pspecs{border-top-color:rgba(255,255,255,.16)}
  .pshow.navy .pspecs .sp .k{color:#7F97CF}
  .pshow.navy .pspecs .sp .v{color:#fff}
  .pshow.navy .pacts .glink{color:#AEBEE6;border-color:rgba(255,255,255,.22)}
  .pshow.navy .pacts .glink:hover{color:#fff;border-color:#fff}
  .pframe.visma{background:#0E2A6B;border-color:rgba(255,255,255,.13);box-shadow:0 44px 90px -40px rgba(0,0,0,.6)}
  .visma .vbar{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.1);font-family:'JetBrains Mono';font-size:12px;color:#9DB2E6}
  .visma .vlogo{width:20px;height:20px;border-radius:5px;background:#60A5FA;display:grid;place-items:center;color:#0a1f5e;font-weight:800;font-size:12px;font-family:'Inter Tight'}
  .visma .vbar .vstat{margin-left:auto;display:flex;align-items:center;gap:7px;color:#7FD1A8}
  .visma .vbar .vstat i{width:7px;height:7px;border-radius:50%;background:#7FD1A8;font-style:normal}
  .visma .vchat{padding:24px 20px 8px;display:flex;flex-direction:column;gap:14px;min-height:296px}
  .vrow{display:flex}
  .vrow.user{justify-content:flex-end}
  .vbub{max-width:80%;padding:13px 16px;border-radius:15px;font-size:14.5px;line-height:1.5}
  .vrow.user .vbub{background:#60A5FA;color:#08214f;border-bottom-right-radius:4px;font-weight:500}
  .vrow.bot .vbub{background:rgba(255,255,255,.07);color:#E8EEFC;border:1px solid rgba(255,255,255,.09);border-bottom-left-radius:4px}
  .vrec{margin-top:12px;display:flex;flex-direction:column;gap:6px}
  .vr{display:flex;justify-content:space-between;gap:18px;font-family:'JetBrains Mono';font-size:11.5px;padding:9px 11px;background:rgba(255,255,255,.05);border-radius:7px;color:#AEBEE6}
  .vr b{color:#fff;font-weight:600}
  .vr .amt{color:#7FD1A8;font-weight:600}
  .vtyping{display:flex;gap:5px;padding:15px 16px;background:rgba(255,255,255,.07);border-radius:15px;border-bottom-left-radius:4px;width:fit-content}
  .vd{width:7px;height:7px;border-radius:50%;background:#9DB2E6;animation:vdot 1.3s infinite}
  .vd:nth-child(2){animation-delay:.18s}
  .vd:nth-child(3){animation-delay:.36s}
  @keyframes vdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}
  @keyframes vrise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .visma .vinput{margin:8px 20px 20px;padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:11px;color:#6F86BD;font-size:13.5px;display:flex;align-items:center;gap:10px}
  .visma .vsend{margin-left:auto;width:30px;height:30px;border-radius:8px;background:#60A5FA;display:grid;place-items:center;color:#0a1f5e;font-weight:800}

  @media (max-width:1080px){
    .pshow-inner{grid-template-columns:1fr;gap:48px}
    .pshow.alt .pcopy{order:1}
    .pshow.alt .pvis{order:2}
    .pname{font-size:52px}
  }
  @media (max-width:640px){
    .pshow{padding:60px 20px}
    .pname{font-size:clamp(34px,10vw,52px)}
  }
  @media (prefers-reduced-motion: reduce){
    .vd{animation:none}
    .typia .caret{animation:none}
    .vrow{animation:none}
    .scell.place{animation:none}
  }