/* ============================================================
   Portfolio page — live products
   Uses tokens.css. Page-specific only; nothing global.
   ============================================================ */
.pf{--pf-ink:var(--color-white,#16150f);--pf-body:var(--color-gray-300,#3f3b32);--pf-muted:var(--color-gray-500,#7a7367);
  --pf-rule:var(--color-border,#dfdad1);--pf-paper:var(--color-bg,#fbfaf8);--pf-recess:var(--color-bg-card,#f4f2ed);
  --pf-accent:var(--color-blue,#1c4b7c);--pf-live:#2f6b3f;--pf-mono:var(--font-mono,ui-monospace,Menlo,monospace);
  --pf-serif:var(--font-heading,Georgia,serif)}
.pf a:focus-visible,.pf button:focus-visible{outline:2px solid var(--pf-accent);outline-offset:3px}

/* ── Hero ── */
.pf-hero{padding-block:calc(72px + var(--space-16,4rem)) var(--space-16,4rem);border-bottom:1px solid var(--pf-rule)}
.pf-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,6vw,5rem);align-items:end}
.pf-kicker{font-family:var(--pf-mono);font-size:.78rem;letter-spacing:.08em;color:var(--pf-muted);margin:0 0 1.25rem;display:flex;align-items:center;gap:.6rem}
.pf-kicker i{width:8px;height:8px;border-radius:50%;background:var(--pf-live);box-shadow:0 0 0 0 rgba(47,107,63,.45);animation:pfBeat 2.4s ease-out infinite}
.pf-hero h1{font-size:clamp(2.6rem,6.2vw,4.6rem);line-height:1.02;letter-spacing:-.03em;font-weight:600;text-wrap:balance;margin:0}
.pf-hero h1 span{color:var(--pf-accent);font-style:italic;font-weight:500}
.pf-hero__lede{margin:1.5rem 0 0;max-width:52ch;font-size:var(--text-lg,1.15rem);color:var(--pf-body)}
.pf-hero__note{margin:1rem 0 0;max-width:52ch;font-size:var(--text-sm,.9rem);color:var(--pf-muted)}

.pf-ledger{border-top:2px solid var(--pf-ink);font-family:var(--pf-mono);font-size:.8rem}
.pf-ledger__head,.pf-ledger__row{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:1rem;align-items:center}
.pf-ledger__head{padding:.6rem 0;color:var(--pf-muted);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--pf-rule)}
.pf-ledger__row{position:relative;padding:.72rem 0;border-bottom:1px solid var(--pf-rule);color:var(--pf-body);text-decoration:none;transition:background var(--transition-base,.18s)}
.pf-ledger__row:hover{background:var(--pf-recess)}
.pf-ledger__row b{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.1rem 1rem;min-width:0;font-family:var(--font-body,system-ui);font-weight:600;color:var(--pf-ink);font-size:.92rem}
.pf-ledger__host{font-family:var(--pf-mono);font-weight:400;font-size:.76rem;color:var(--pf-muted);overflow-wrap:anywhere}
.pf-ledger__row:hover .pf-ledger__host{color:var(--pf-accent)}
.pf-st{display:inline-flex;align-items:center;gap:.45rem;color:var(--pf-live);font-weight:500}
.pf-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;transition:background .2s,box-shadow .2s}
.pf-ledger__row.is-checking .pf-st{color:var(--pf-muted)}
.pf-ledger__row.is-checking .pf-st::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.pf-ledger__row::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--pf-accent);transform:scaleY(0);transition:transform .25s}
.pf-ledger__row.is-checking::after{transform:scaleY(1)}
.pf-ledger__foot{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0 0;color:var(--pf-muted);font-size:.7rem;letter-spacing:.04em}

/* ── Groups ── */
.pf-group{padding-block:var(--space-section,6rem) 0}
.pf-group__head{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:clamp(1rem,4vw,3rem);align-items:baseline;border-top:1px solid var(--pf-ink);padding-top:1rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.pf-group__head p{margin:0;font-family:var(--pf-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pf-muted)}
.pf-group__head h2{margin:0;font-size:var(--text-3xl,2.2rem);font-weight:500;letter-spacing:-.02em;text-wrap:balance}

/* ── Product ── */
.pf-product{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(2.5rem,5vw,4rem);scroll-margin-top:90px}
.pf-product + .pf-product{border-top:1px solid var(--pf-rule)}
.pf-product:nth-of-type(even) .pf-product__text{order:2}
.pf-product__name{margin:0;font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:600;letter-spacing:-.025em;line-height:1.08}
.pf-product__host{display:inline-block;margin-top:.55rem;font-family:var(--pf-mono);font-size:.82rem;color:var(--pf-accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--pf-accent) 30%,transparent)}
.pf-product__host:hover{border-bottom-color:var(--pf-accent)}
.pf-product__lede{margin:1.2rem 0 0;font-family:var(--pf-serif);font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.45;color:var(--pf-ink);max-width:40ch}
.pf-points{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.6rem;max-width:56ch}
.pf-points li{position:relative;padding-left:1.25rem;color:var(--pf-body);line-height:1.6;font-size:var(--text-base,1rem)}
.pf-points li::before{content:"";position:absolute;left:0;top:.72em;width:.6rem;height:1px;background:var(--pf-muted)}
.pf-meta{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.35rem 1rem;margin:1.5rem 0 0;padding-top:1rem;border-top:1px solid var(--pf-rule);font-size:.86rem}
.pf-meta dt{font-family:var(--pf-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pf-muted);padding-top:.15rem}
.pf-meta dd{margin:0;color:var(--pf-body)}
.pf-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.pf-flag{margin:1rem 0 0;font-size:.8rem;color:var(--pf-muted);max-width:56ch;border-left:2px solid var(--pf-rule);padding-left:.8rem}

/* ── Browser frame ── */
.pf-frame{position:relative;background:#fff;border:1px solid var(--pf-rule);border-radius:6px;overflow:hidden;box-shadow:0 1px 0 rgba(22,21,15,.03),0 24px 48px -32px rgba(22,21,15,.28);transform:translateY(0);transition:transform .5s cubic-bezier(.2,.7,.1,1),box-shadow .5s}
.pf-frame:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(22,21,15,.03),0 34px 60px -34px rgba(22,21,15,.35)}
.pf-frame__bar{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;border-bottom:1px solid var(--pf-rule);background:var(--pf-recess);font-family:var(--pf-mono);font-size:.72rem;color:var(--pf-muted)}
.pf-frame__bar svg{width:11px;height:11px;flex:none}
.pf-frame__bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-frame__bar em{margin-left:auto;font-style:normal;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.pf-frame__view{position:relative;aspect-ratio:16/10.5;overflow:hidden;font-family:var(--font-body,system-ui);font-size:12px;line-height:1.4;color:#1d1d1b}
.pf-cap{margin:.6rem 0 0;font-family:var(--pf-mono);font-size:.68rem;color:var(--pf-muted);letter-spacing:.02em}

/* mini — shared */
.m{position:absolute;inset:0;padding:6% 7%}
.m *{box-sizing:border-box}
.m-eyebrow{font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}

/* 1 policy */
.m-policy{background:#fff}
.m-policy .m-eyebrow{color:#1e6b4f}
.m-policy h4{margin:.3em 0 .6em;font:700 17px/1.1 var(--font-body,system-ui);color:#121212}
.mp-roles{display:flex;gap:6px;margin-bottom:10px}
.mp-roles span{border:1px solid #d9d9d4;border-radius:999px;padding:3px 9px;font-size:10px;color:#555;transition:all .35s}
.mp-roles span.on{background:#1e6b4f;border-color:#1e6b4f;color:#fff}
.mp-rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mp-rows li{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:center;border:1px solid #e6e6e1;border-radius:6px;padding:6px 8px;background:#fcfcfa}
.mp-rows code{font:10px var(--pf-mono);background:#f0f0ec;padding:1px 5px;border-radius:3px;color:#333}
.mp-rows i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.06em;color:#1e6b4f;background:#e3f1ea;border-radius:999px;padding:2px 7px;transition:all .3s;min-width:34px;text-align:center}
.mp-rows span{font-size:10.5px;color:#444;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-rows li.pending i{color:#888;background:#efefeb}
.mp-foot{margin-top:9px;font-size:10.5px;color:#555}
.mp-foot b{color:#1e6b4f}

/* 2 rsg */
.m-rsg{background:linear-gradient(160deg,#e9f2f3 0%,#f7f4ef 70%);padding:5% 6%}
.m-rsg h4{margin:0;font:400 18px/1.1 Georgia,serif;color:#16526a}
.mr-steps{display:flex;gap:4px;margin:9px 0 10px}
.mr-steps span{flex:1;font-size:9px;text-align:center;padding:4px 0;border-radius:4px;background:#fff;color:#6a7c83;border:1px solid #dbe6e8;transition:all .35s}
.mr-steps span.on{background:#16526a;color:#fff;border-color:#16526a}
.mr-panes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mr-pane{background:#fff;border:1px solid #dbe6e8;border-radius:6px;padding:9px;position:relative;overflow:hidden;height:150px}
.mr-pane .mr-line:nth-of-type(5){margin-top:12px}
.mr-pane small{display:block;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#6a7c83;margin-bottom:6px}
.mr-line{height:6px;border-radius:3px;background:#e7eef0;margin-bottom:5px}
.mr-btn{display:inline-block;margin-top:4px;height:14px;width:48%;border-radius:3px;background:#16526a}
.mr-btn.changed{background:#b45a2b}
.mr-scan{position:absolute;left:0;right:0;top:0;height:22px;background:linear-gradient(180deg,transparent,rgba(22,82,106,.16),transparent);opacity:0}
.play .mr-scan{animation:pfScan 2.4s linear infinite;opacity:1}
.mr-diff{position:absolute;left:6px;bottom:18px;width:52%;height:22px;border:1.5px dashed #b45a2b;border-radius:4px;transition:opacity .4s}
.mr-diff.off{opacity:0}
.mr-note{margin-top:8px;font-size:10px;color:#6a4a36}

/* 3 ccsai */
.m-ccs{background:#f6f7fb;padding:0;display:grid;grid-template-columns:30% 1fr}
.mc-side{background:#fff;border-right:1px solid #e5e8f0;padding:10px 8px}
.mc-logo{display:flex;align-items:center;gap:5px;font-weight:700;font-size:11px;margin-bottom:10px}
.mc-logo i{width:14px;height:14px;border-radius:4px;background:#2563eb}
.mc-side small{display:block;font-size:8px;letter-spacing:.12em;color:#8a90a2;margin:4px 0 5px}
.mc-side span{display:flex;align-items:center;justify-content:space-between;font-size:10px;padding:5px 6px;border-radius:5px;color:#39405a;transition:background .3s,color .3s}
.mc-side span.on{background:#e8efff;color:#1d4ed8;font-weight:600}
.mc-side span em{font-style:normal;font-size:7.5px;background:#dcfce7;color:#15803d;border-radius:999px;padding:1px 5px}
.mc-main{padding:12px 12px}
.mc-main h5{margin:0;font-size:13px;font-weight:700;color:#141a2e;transition:opacity .25s}
.mc-main p{margin:2px 0 10px;font-size:9.5px;color:#7a8196}
.mc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mc-cards div{background:#fff;border:1px solid #e5e8f0;border-radius:6px;padding:6px;height:40px}
.mc-cards b{display:block;height:7px;width:60%;border-radius:3px;background:#e5e8f0;margin-bottom:6px}
.mc-cards u{display:block;height:11px;width:80%;border-radius:3px;background:#c7d6fb}
.mc-chart{margin-top:8px;background:#fff;border:1px solid #e5e8f0;border-radius:6px;height:92px;padding:8px;display:flex;align-items:flex-end;gap:5px}
.mc-chart i{flex:1;background:#3b82f6;border-radius:2px 2px 0 0;height:var(--h,50%);transition:height .8s cubic-bezier(.2,.7,.1,1)}
.mc-chart i:nth-child(3n){background:#93b4f8}

/* 4 prodmint */
.m-pm{background:#fbfaff;padding:6% 7%}
.mm-brand{display:flex;align-items:center;gap:6px;font-weight:700;font-size:12px;color:#5b34d6}
.mm-brand i{width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#7c3aed,#4f46e5)}
.m-pm h4{margin:.5em 0 .2em;font:800 19px/1.05 var(--font-body,system-ui);color:#15121f}
.m-pm > p{margin:0 0 12px;font-size:10px;color:#6b6780}
.mm-flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mm-flow::before{content:"";position:absolute;left:6%;right:6%;top:13px;height:2px;background:#e7e2fb}
.mm-flow::after{content:"";position:absolute;left:6%;top:13px;height:2px;width:calc(88% * var(--p,1));background:#6d4ae8;transition:width .7s}
.mm-flow div{position:relative;z-index:1;text-align:center}
.mm-flow i{display:grid;place-items:center;margin:0 auto 6px;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid #e7e2fb;font-style:normal;font-size:10px;font-weight:700;color:#8b85a3;transition:all .4s}
.mm-flow div.on i{background:#6d4ae8;border-color:#6d4ae8;color:#fff}
.mm-flow span{font-size:9px;line-height:1.25;color:#4a4560;display:block}
.mm-card{margin-top:12px;background:#fff;border:1px solid #ebe7f7;border-radius:8px;padding:8px 10px;display:grid;gap:5px}
.mm-card b{font-size:10px;color:#15121f}
.mm-card span{height:6px;border-radius:3px;background:#efecf8}
.mm-card span:nth-child(3){width:70%}
.mm-btn{justify-self:start;margin-top:3px;font-size:9px;color:#fff;background:linear-gradient(90deg,#7c3aed,#4f46e5);border-radius:5px;padding:4px 9px}

/* 5 tutor */
.m-tutor{background:linear-gradient(180deg,#eaf5f2 0%,#fff 55%);padding:6% 7%}
.mt-eyebrow{font-size:9.5px;color:#0f766e;font-weight:600}
.m-tutor h4{margin:.25em 0 .2em;font:700 22px/1 Georgia,serif;color:#0b1f1c}
.m-tutor > p{margin:0 0 10px;font-size:10px;color:#48625d;max-width:36ch}
.mt-tracks{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.mt-tracks span{font-size:8.5px;border:1px solid #cfe3de;border-radius:999px;padding:2px 7px;color:#3e5a55;transition:all .35s}
.mt-tracks span.on{background:#0f766e;border-color:#0f766e;color:#fff}
.mt-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mt-card{border-radius:8px;overflow:hidden;background:#fff;border:1px solid #dfece9}
.mt-card div{background:linear-gradient(135deg,#0f5e52,#1b8a74);color:#e8fff9;padding:8px;height:62px;display:flex;flex-direction:column;justify-content:space-between}
.mt-card div small{font-size:8px;background:rgba(255,255,255,.18);border-radius:999px;padding:1px 6px;align-self:flex-start}
.mt-card div b{font-size:10px;line-height:1.2}
.mt-card p{margin:0;padding:6px 8px 3px;font-size:8.5px;color:#48625d}
.mt-bar{margin:0 8px 8px;height:4px;border-radius:2px;background:#e4efec;overflow:hidden}
.mt-bar i{display:block;height:100%;width:var(--w,100%);background:#0f766e;transition:width 1.4s cubic-bezier(.2,.7,.1,1)}

/* 6 speech — calm: fades only */
.m-speech{background:#f5f1e8;padding:6% 8%;color:#3d4a3f;display:flex;flex-direction:column}
.ms-title{font:600 17px/1 var(--font-body,system-ui);color:#4a5a4c}
.ms-sub{margin:.4em 0 12px;font-size:10px;color:#7c8479}
.ms-card{background:#fffdf8;border:1px solid #e4dccb;border-radius:12px;padding:10px 12px;transition:opacity 1.2s ease}
.ms-card.hide{opacity:0}
.ms-word{display:flex;justify-content:space-between;align-items:baseline}
.ms-word b{font-size:20px;letter-spacing:.08em;color:#2f3b31}
.ms-word span{font-size:13px;color:#7c8479}
.ms-card ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.ms-card li{display:flex;justify-content:space-between;font-size:10.5px;border-top:1px dashed #e4dccb;padding-top:4px}
.ms-card li i{font-style:normal;color:#5b7a62}
.ms-input{margin-top:auto;display:flex;gap:6px}
.ms-input div{flex:1;background:#fffdf8;border:1px solid #d9d0bd;border-radius:10px;padding:7px 10px;font-size:11.5px;color:#2f3b31;min-height:30px}
.ms-input div::after{content:"";display:inline-block;width:1px;height:12px;background:#5b7a62;margin-left:2px;vertical-align:-2px;opacity:0}
.play .ms-input div::after{animation:pfCaret 1.1s steps(1) infinite}
.ms-input span{width:30px;border-radius:10px;background:#6e8b74}

/* 7 nse */
.m-nse{background:#0d1117;color:#d6dde6;padding:5.5% 6.5%}
.mn-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#8b96a3}
.mn-top b{color:#e6edf3;letter-spacing:.06em;font-size:11px}
.mn-top b i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#3ddc84;margin:0 3px 1px}
.m-nse h4{margin:8px 0 10px;font:700 14px/1.2 var(--font-body,system-ui);color:#f0f6fc;max-width:30ch}
.mn-table{display:grid;gap:5px}
.mn-row{display:grid;grid-template-columns:34% 1fr 17%;gap:8px;align-items:center;background:#161b22;border:1px solid #242b35;border-radius:6px;padding:6px 8px}
.mn-row code{font:9.5px var(--pf-mono);color:#c9d1d9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-bars{display:flex;height:8px;border-radius:2px;overflow:hidden;background:#0d1117}
.mn-bars i{height:100%;width:var(--w,20%);transition:width .9s cubic-bezier(.2,.7,.1,1)}
.mn-bars i:nth-child(1){background:#3b82f6}.mn-bars i:nth-child(2){background:#3ddc84}.mn-bars i:nth-child(3){background:#e3b341}
.mn-row em{font-style:normal;font-size:8.5px;color:#8b96a3;text-align:right;white-space:nowrap}
.mn-row em.na{color:#e3b341}
.mn-legend{display:flex;gap:10px;margin-top:8px;font-size:8.5px;color:#8b96a3}
.mn-legend i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:3px;vertical-align:-1px}
.mn-warn{margin-top:8px;font-size:9px;color:#e3b341;border-left:2px solid #e3b341;padding-left:6px}

/* ── Closing ── */
.pf-close{margin-top:var(--space-section,6rem);padding-block:var(--space-16,4rem);border-top:1px solid var(--pf-ink)}
.pf-close__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4rem);align-items:end}
.pf-close h2{margin:0;font-size:clamp(2rem,4.4vw,3.2rem);font-weight:500;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
.pf-close p{margin:0 0 1.25rem;max-width:48ch}

@keyframes pfBeat{0%{box-shadow:0 0 0 0 rgba(47,107,63,.45)}70%{box-shadow:0 0 0 8px rgba(47,107,63,0)}100%{box-shadow:0 0 0 0 rgba(47,107,63,0)}}
@keyframes pfScan{from{transform:translateY(-24px)}to{transform:translateY(152px)}}
@keyframes pfCaret{50%{opacity:1}}

@media (max-width:900px){
  .pf-hero__grid,.pf-product,.pf-close__grid{grid-template-columns:1fr}
  .pf-product:nth-of-type(even) .pf-product__text{order:0}
  .pf-group__head{grid-template-columns:1fr;gap:.35rem}
}
@media (max-width:520px){
  .pf-ledger__head,.pf-ledger__row{grid-template-columns:4.4rem minmax(0,1fr)}
  .pf-frame__view{aspect-ratio:auto;height:clamp(250px,72vw,300px)}
  .m{padding:5% 5%}
  .pf-frame__bar em{display:none}
  .pf-meta{grid-template-columns:1fr;gap:.1rem}
  .pf-meta dd{margin-bottom:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .pf *,.pf *::before,.pf *::after{animation:none !important;transition:none !important}
}