/* Parix Free Tools Hero v5
   Extracted verbatim from parix-free-tools-hero-v5.html (the in-section <style> block).
   Preview-only rules (body{}, .demo-below{}) are intentionally omitted.
   The .pxh-crumbs rules are retained but unused — the v5 breadcrumb markup is
   dropped so it does not duplicate the template's existing <nav class="crumb">. */
.pxh{
  --pxh-max:1240px;                 /* match the width of your tools grid below */
  --pxh-orange:#ED6D22; --pxh-orange-deep:#D9560D; --pxh-orange-tint:#FFF1E7; --pxh-orange-soft:#FBD3BC;
  --pxh-ink:#15171C; --pxh-slate:#5A606C; --pxh-line:#E9EBEF; --pxh-img-bg:#F5F6FA;
  --pxh-con:#171A21; --pxh-con-2:#1F232C; --pxh-con-line:#2D323C; --pxh-con-text:#ECEEF2; --pxh-con-dim:#9aa1ad;
  --pxh-good:#2FBF71; --pxh-warn:#F5A524; --pxh-bad:#F0624D;
  --pxh-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position:relative; color:var(--pxh-ink); background:#fff; overflow:hidden;
  font-family:inherit; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.pxh *,.pxh *::before,.pxh *::after{ box-sizing:border-box; }
.pxh a{ color:inherit; text-decoration:none; }
.pxh ul{ list-style:none; margin:0; padding:0; }
.pxh button{ font:inherit; color:inherit; }
.pxh :focus-visible{ outline:2px solid var(--pxh-orange); outline-offset:3px; border-radius:6px; }

.pxh-wrap{ position:relative; max-width:calc(var(--pxh-max) + 48px); margin:0 auto; padding:0 24px; }

/* ---------- Shared page vocabulary (matches the rest of the page) ---------- */
.pxh-eyebrow{ display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; font-family:var(--pxh-mono); font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--pxh-orange-deep); }
.pxh-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--pxh-orange); }

/* ---------- Hero ---------- */
.pxh-crumbs{ padding-top:20px; font-size:13px; color:var(--pxh-slate); }
.pxh-crumbs a:hover{ color:var(--pxh-ink); }
.pxh-crumbs span[aria-hidden]{ margin:0 6px; color:#aab0ba; }
.pxh-crumbs strong{ color:var(--pxh-ink); font-weight:600; }

.pxh-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:64px; align-items:center; padding:72px 0 104px; }
.pxh-hero > *{ min-width:0; }

.pxh .pxh-title{ margin:0 0 20px; font-size:clamp(2.4rem,4.3vw,3.6rem); line-height:1.04; letter-spacing:-.04em; font-weight:700; color:var(--pxh-ink); }
.pxh .pxh-title span{ display:block; margin:0; padding:0; border:0; background:none; letter-spacing:inherit; word-spacing:normal; white-space:nowrap; }
.pxh .pxh-title .pxh-t2{ color:var(--pxh-orange); }
.pxh-lede{ margin:0 0 24px; max-width:46ch; font-size:1.1rem; line-height:1.6; color:var(--pxh-slate); }
.pxh-lede b{ color:var(--pxh-ink); font-weight:600; }

.pxh-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px !important; }
.pxh-pills li{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px 6px 8px; background:#fff; border:1px solid var(--pxh-line); border-radius:999px; font-size:14px; }
.pxh-pills svg{ width:18px; height:18px; flex:none; }

.pxh-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.pxh .pxh-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 22px; border-radius:10px; font-size:15.5px; font-weight:600; line-height:1; transition:background .15s, border-color .15s, color .15s, box-shadow .15s; }
.pxh .pxh-btn svg{ width:17px; height:17px; }
.pxh .pxh-btn--primary{ background:var(--pxh-orange); color:#fff; box-shadow:0 10px 22px -10px rgba(237,109,34,.75); }
.pxh .pxh-btn--primary:hover{ background:var(--pxh-orange-deep); }
.pxh .pxh-btn--ghost{ border:1px solid #d7dae0; background:#fff; color:var(--pxh-ink); }
.pxh .pxh-btn--ghost:hover{ border-color:var(--pxh-ink); }

/* ---------- Browser mockup ---------- */
.pxh-console-wrap{ position:relative; }
.pxh-browser{ position:relative; z-index:1; border-radius:14px; overflow:hidden; background:#fff; border:1px solid #101217; box-shadow:0 44px 80px -32px rgba(21,23,28,.5),0 14px 30px -14px rgba(21,23,28,.28); }
.pxh-strip{ display:flex; align-items:flex-end; gap:12px; padding:9px 10px 0 14px; background:#1B1D22; }
.pxh-dots{ display:flex; gap:7px; padding-bottom:12px; }
.pxh-dots i{ width:11px; height:11px; border-radius:50%; }
.pxh-dots i:nth-child(1){ background:#FF5F57; } .pxh-dots i:nth-child(2){ background:#FEBC2E; } .pxh-dots i:nth-child(3){ background:#28C840; }
.pxh-tabs{ display:flex; gap:2px; flex:1; min-width:0; }
.pxh .pxh-tab{ position:relative; display:flex; align-items:center; gap:8px; flex:0 1 190px; min-width:0; height:35px; margin:0; padding:0 14px 0 10px; border:0; border-radius:9px 9px 0 0; background:transparent; color:#9AA0A6; font-size:13px; font-weight:500; line-height:1; text-align:left; cursor:pointer; transition:background .15s, color .15s; }
.pxh .pxh-tab:hover{ background:#24272E; color:#E8EAED; }
.pxh .pxh-tab[aria-selected="true"]{ background:#2B2E36; color:#fff; }
.pxh-fav{ flex:none; width:16px; height:16px; display:grid; place-content:center; border-radius:4px; background:var(--pxh-orange); }
.pxh-fav svg{ width:10px; height:10px; display:block; }
.pxh-tab-name{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.pxh-tab-bar{ position:absolute; left:10px; right:10px; bottom:0; height:2px; border-radius:2px; background:var(--pxh-orange); transform:scaleX(0); transform-origin:left; }
.pxh-toolbar{ display:flex; align-items:center; gap:10px; padding:7px 12px; background:#2B2E36; }
.pxh-navbtns{ display:flex; color:#80868B; }
.pxh-navbtns svg{ width:26px; height:26px; padding:5px; display:block; }
.pxh-url{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; height:30px; padding:0 14px; border-radius:999px; background:#1B1D22; color:#9AA0A6; font-size:13px; white-space:nowrap; overflow:hidden; }
.pxh-url svg{ width:13px; height:13px; flex:none; }
.pxh-url b{ font-weight:400; color:#E8EAED; }
.pxh-live{ display:flex; align-items:center; gap:6px; font-size:12px; color:#9AA0A6; white-space:nowrap; }
.pxh-live i{ width:7px; height:7px; border-radius:50%; background:#2FBF71; box-shadow:0 0 0 3px rgba(47,191,113,.2); }

/* ---------- The tool page inside the browser ---------- */
.pxh-screen{ position:relative; display:grid; background:#fff; overflow:hidden; }
.pxh-scene{ grid-area:1/1; padding:20px 22px 22px; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s; }
.pxh-scene.is-active{ opacity:1; visibility:visible; transition:opacity .3s ease; }
.pxh-app-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--pxh-line); }
.pxh .pxh-app-head h4{ margin:0 0 3px; font-size:16px; line-height:1.25; font-weight:700; letter-spacing:-.01em; color:var(--pxh-ink); }
.pxh-app-head p{ margin:0; font-size:13px; line-height:1.4; color:var(--pxh-slate); }
.pxh-badge{ flex:none; font-size:11.5px; font-weight:600; color:#1E8E53; background:#E8F7EF; border-radius:999px; padding:3px 9px; }
.pxh-flabel{ display:block; font-size:12.5px; font-weight:600; color:#3B404A; margin-bottom:6px; }
.pxh-lrow{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.pxh-count{ font-size:12px; font-weight:600; color:#B45309; font-variant-numeric:tabular-nums; }
.pxh-count.is-ok{ color:#1E8E53; }
.pxh-input{ display:flex; align-items:center; gap:3px; min-height:40px; padding:9px 12px; font-size:14px; line-height:1.45; color:var(--pxh-ink); background:#fff; border:1px solid #D9DCE2; border-radius:9px; transition:border-color .15s, box-shadow .15s; }
.pxh-input--area{ align-items:flex-start; min-height:64px; }
.pxh-input em{ font-style:normal; color:#8A909B; }
.pxh-input.is-focus{ border-color:var(--pxh-orange); box-shadow:0 0 0 3px rgba(237,109,34,.16); }
.pxh-typed.is-typing::after{ content:""; display:inline-block; width:1.5px; height:1.1em; margin-left:1px; vertical-align:-3px; background:var(--pxh-ink); animation:pxh-blink 1s steps(1) infinite; }
@keyframes pxh-blink{ 50%{ opacity:0; } }
.pxh-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 14px; }
.pxh-row--end{ justify-content:flex-end; }
.pxh-hint{ font-size:12.5px; color:#8A909B; font-variant-numeric:tabular-nums; }

.pxh-abtn{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:9px; border:1px solid transparent; background:var(--pxh-orange); color:#fff; font-size:14px; font-weight:600; white-space:nowrap; transition:transform .12s, background .15s, color .15s, border-color .15s; }
.pxh-abtn.is-pressed{ transform:scale(.95); background:var(--pxh-orange-deep); }
.pxh-abtn--ghost{ height:32px; padding:0 12px; font-size:13px; background:#fff; color:var(--pxh-ink); border-color:#D9DCE2; }
.pxh-abtn--ghost.is-pressed{ background:#F2F3F5; }
.pxh-abtn--ghost.is-done{ color:#1E8E53; border-color:#BFE8D1; background:#F1FBF5; }
.pxh-spin, .pxh-okic{ display:none; flex:none; }
.pxh-spin{ width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:pxh-spin .7s linear infinite; }
.pxh-abtn--ghost .pxh-spin{ border-color:#D9DCE2; border-top-color:var(--pxh-ink); }
.pxh-okic{ width:14px; height:14px; }
.pxh-abtn.is-loading .pxh-spin, .pxh-abtn.is-done .pxh-okic{ display:inline-block; }
@keyframes pxh-spin{ to{ transform:rotate(360deg); } }

.pxh-result{ display:grid; }
.pxh-result > *{ grid-area:1/1; transition:opacity .35s ease; }
.pxh-empty{ display:grid; place-content:center; padding:12px; text-align:center; font-size:13px; color:#8A909B; border:1.5px dashed #DDE0E5; border-radius:12px; background:#FAFBFC; }
.pxh-result.is-filled .pxh-empty, .pxh-result:not(.is-filled) .pxh-filled{ opacity:0; visibility:hidden; }

/* prompt checker */
.pxh-score{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start; padding:14px; border:1px solid var(--pxh-line); border-radius:12px; background:#FAFBFC; }
.pxh-ring{ position:relative; width:76px; height:76px; }
.pxh-ring svg{ width:76px; height:76px; transform:rotate(-90deg); display:block; }
.pxh-ring .trk{ stroke:#E6E8EC; }
.pxh-ring .val{ stroke:#F59E0B; stroke-linecap:round; stroke-dasharray:163.36; transition:stroke-dashoffset .9s cubic-bezier(.3,.7,.2,1), stroke .4s; }
.pxh-ring .val.is-good{ stroke:#22A55B; }
.pxh-ring-num{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.pxh-ring-num strong{ font-size:22px; font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; color:var(--pxh-ink); }
.pxh-ring-num small{ font-size:10px; color:var(--pxh-slate); margin-top:3px; }
.pxh-vrow{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
.pxh-verdict{ font-size:14.5px; font-weight:700; color:var(--pxh-ink); }
.pxh-issues li{ display:flex; align-items:center; gap:8px; font-size:13px; color:#3B404A; padding:2px 0; transition:opacity .35s, transform .35s; }
.pxh-issues li svg{ width:14px; height:14px; flex:none; color:#E5484D; }
.pxh-issues li .ok{ display:none; color:#22A55B; }
.pxh-issues li.is-fixed .no{ display:none; }
.pxh-issues li.is-fixed .ok{ display:block; }
.pxh-issues li:not(.is-in){ opacity:0; transform:translateY(4px); }
.pxh-rewrite{ margin-top:10px; padding:11px 14px 12px; border-radius:12px; background:#F1FBF5; border:1px solid #CDEEDB; transition:opacity .4s, transform .4s; }
.pxh-rewrite:not(.is-in){ opacity:0; transform:translateY(6px); }
.pxh-rewrite .pxh-lrow > span:first-child{ font-size:12.5px; font-weight:600; color:#1E8E53; }
.pxh-copy{ font-size:12px; font-weight:600; color:#3B404A; background:#fff; border:1px solid #CDEEDB; border-radius:6px; padding:2px 8px; }
.pxh-rewrite p{ margin:5px 0 0; font-size:13.5px; line-height:1.55; color:#1F3B2C; }

/* cost calculator */
.pxh-inputs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.pxh-total{ padding:16px; border:1px solid var(--pxh-line); border-radius:12px; background:#FAFBFC; }
.pxh-total-num{ font-size:clamp(2rem,3.2vw,2.6rem); font-weight:800; letter-spacing:-.04em; line-height:1.05; margin:2px 0 14px; font-variant-numeric:tabular-nums; color:var(--pxh-ink); }
.pxh-total-num small{ font-size:14px; font-weight:500; letter-spacing:0; color:var(--pxh-slate); margin-left:6px; }
.pxh-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.pxh-stats div{ padding:10px 12px; background:#fff; border:1px solid var(--pxh-line); border-radius:9px; }
.pxh-stats span{ display:block; font-size:12px; color:var(--pxh-slate); }
.pxh-stats b{ font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.pxh-stats .is-green b{ color:#1E8E53; }
.pxh-meter{ height:8px; border-radius:99px; background:#E6E8EC; overflow:hidden; }
.pxh-meter i{ display:block; height:100%; width:0; border-radius:inherit; background:#22A55B; transition:width .9s cubic-bezier(.3,.7,.2,1), background .3s; }
.pxh-meter i.is-warn{ background:#F59E0B; }
.pxh-meter--thin{ height:4px; margin:7px 0 12px; }
.pxh-meter--thin i{ transition:width .1s linear, background .3s; }
.pxh-note{ font-size:12px; color:#8A909B; margin-top:8px; }

/* snippet preview */
.pxh-google{ border:1px solid var(--pxh-line); border-radius:12px; padding:14px 16px; background:#fff; font-family:Arial, Helvetica, sans-serif; }
.pxh-g-site{ display:flex; align-items:center; gap:10px; font-size:14px; color:#202124; }
.pxh-g-fav{ width:28px; height:28px; border-radius:50%; background:#F1F3F4; border:1px solid #E3E5E8; display:grid; place-content:center; flex:none; }
.pxh-g-fav svg{ width:13px; height:13px; display:block; }
.pxh-g-site small{ display:block; color:#4D5156; font-size:12px; line-height:1.3; }
.pxh-g-title{ color:#1A0DAB; font-size:19px; line-height:1.3; margin:9px 0 3px; min-height:1.3em; }
.pxh-g-desc{ color:#4D5156; font-size:13.5px; line-height:1.58; min-height:3.16em; }

/* ---------- Tool page template (matches the real Parix tool pages) ---------- */
.pxh{ --pxh-navy:#0D1876; --pxh-tool-bg:#F7F7FB; --pxh-tool-line:#E8E8F0; --pxh-serif:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif; }
.pxh-screen{ height:450px; }
.pxh-scene{ height:100%; overflow:hidden; padding:0 !important; }
.pxh-page{ padding:18px 18px 30px; background:linear-gradient(#F5F4FB, #fff 170px); transition:transform 1s cubic-bezier(.45,.05,.25,1); }
.pxh-screen::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:34px; z-index:4; pointer-events:none; background:linear-gradient(rgba(255,255,255,0),#fff); }
.pxh-tool-hero{ text-align:center; margin-bottom:16px; }
.pxh-tool-pill{ display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#2B2A8F; background:#E4E0FB; border-radius:999px; padding:3px 10px; }
.pxh .pxh-tool-hero h4{ margin:8px 0 5px; font-family:var(--pxh-serif); font-size:24px; font-weight:600; line-height:1.15; letter-spacing:-.01em; color:#15171C; }
.pxh-tool-hero p{ margin:0 auto; max-width:44ch; font-size:12.5px; line-height:1.5; color:#5A606C; }
.pxh-trust{ display:flex; justify-content:center; flex-wrap:wrap; gap:4px 14px; margin-top:9px !important; }
.pxh-trust li{ display:flex; align-items:center; gap:5px; font-size:10.5px; color:#6B7280; }
.pxh-trust svg{ width:10px; height:10px; flex:none; }
.pxh-tcard{ background:#fff; border:1px solid var(--pxh-tool-line); border-radius:12px; padding:14px; box-shadow:0 1px 2px rgba(20,20,60,.04); }
.pxh-serif-h{ font-family:var(--pxh-serif); font-size:14px; font-weight:600; color:#15171C; }
.pxh-pc{ display:grid; grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); gap:12px; align-items:start; }
.pxh-tcard .pxh-lrow{ margin-bottom:8px; align-items:center; }
.pxh-tcard .pxh-hint{ font-size:10.5px; }
.pxh-ta{ background:var(--pxh-tool-bg); border-color:#E3E3EC; font-size:12.5px; min-height:36px; padding:8px 10px; }
.pxh-input--area.pxh-ta{ min-height:112px; }
.js-f-desc.pxh-ta{ min-height:58px; }
.pxh-btnrow{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; }
.pxh-abtn--navy{ height:32px; padding:0 13px; font-size:12px; border-radius:7px; background:var(--pxh-navy); }
.pxh-abtn--navy.is-pressed{ background:#08104F; }
.pxh-abtn--navy .pxh-spin{ width:12px; height:12px; }
.pxh-abtn--mini{ height:32px; padding:0 12px; font-size:12px; border-radius:7px; background:#fff; color:#15171C; border-color:#E3E3EC; }
.pxh-textlink{ font-size:12px; font-weight:600; color:var(--pxh-navy); padding:0 4px; white-space:nowrap; }
.pxh-tips{ margin-top:12px; padding:14px 16px; border-radius:12px; background:#18182A; color:#C3C5D3; }
.pxh-tips .pxh-serif-h{ display:block; margin-bottom:7px; font-size:13px; color:#fff; }
.pxh-tips li{ position:relative; padding:3px 0 3px 14px; font-size:11px; line-height:1.45; }
.pxh-tips li::before{ content:"–"; position:absolute; left:0; color:#7B7FE6; }
.pxh-tips b{ color:#fff; font-weight:600; }
.pxh-tcard .pxh-empty{ min-height:120px; border-radius:10px; font-size:12px; }

.pxh-shead{ display:flex; align-items:center; gap:14px; padding-bottom:12px; border-bottom:1px solid #EEEEF4; }
.pxh-shead .pxh-ring, .pxh-shead .pxh-ring svg{ width:70px; height:70px; }
.pxh-shead .pxh-ring .trk{ stroke:#EEEEF4; }
.pxh-shead .pxh-ring-num strong{ font-size:22px; }
.pxh-shead .pxh-ring-num small{ font-size:9.5px; color:#8A8FA0; margin-top:1px; }
.pxh-ring .val.is-poor{ stroke:#EF4444; }
.pxh-grade{ display:block; font-size:15px; font-weight:700; color:#15171C; }
.pxh-shead p{ margin:2px 0 0; font-size:11.5px; line-height:1.4; color:#5A606C; }
.pxh-sech{ display:block; margin:12px 0 8px; font-family:var(--pxh-serif); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#15171C; }
.pxh-bd li{ margin-bottom:7px; }
.pxh-bd-row{ display:flex; justify-content:space-between; gap:8px; margin-bottom:4px; font-size:11px; color:#2A2D35; }
.pxh-bd-row b{ font-size:10.5px; font-weight:500; color:#8A8FA0; font-variant-numeric:tabular-nums; }
.pxh-bd-bar{ height:5px; border-radius:99px; background:#EEEEF4; overflow:hidden; }
.pxh-bd-bar--lg{ height:8px; }
.pxh-bd-bar i{ display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#1F248A,#8266F5); transition:width .7s cubic-bezier(.3,.7,.2,1); }
.pxh-sug{ margin-bottom:8px; padding:9px 11px; border-left:2px solid var(--pxh-navy); border-radius:0 8px 8px 0; background:var(--pxh-tool-bg); font-size:11.5px; line-height:1.5; color:#4B5060; }
.pxh-sug b{ color:#15171C; font-weight:600; }
.pxh-tcard .pxh-total-num{ font-size:34px; margin:0 0 12px; }
.pxh-stats div{ background:var(--pxh-tool-bg); border-color:#EEEEF4; }


/* ---------- Stage: panel, result callout, step bar ---------- */
.pxh-stage-bg{
  position:absolute; z-index:0; top:-56px; bottom:-60px; left:16%; right:-60vw; pointer-events:none;
  border-radius:32px 0 0 32px;
  background:
    radial-gradient(rgba(237,109,34,.20) 1px, transparent 1.3px) 0 0 / 18px 18px,
    linear-gradient(155deg,#FFE4D3 0%,#FFF3EA 42%,#EEEAFF 100%);
}
.pxh-stage-bg::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(237,109,34,.12); }

.pxh-callout{
  position:absolute; z-index:6; top:-44px; right:22px; display:flex; align-items:center; gap:11px;
  padding:9px 16px 9px 9px; background:#fff; border-radius:14px; white-space:nowrap;
  box-shadow:0 1px 0 rgba(21,23,28,.04), 0 18px 36px -14px rgba(21,23,28,.32);
  opacity:0; transform:translateY(10px) scale(.94); transform-origin:right bottom;
  transition:opacity .3s ease, transform .5s cubic-bezier(.2,1.4,.4,1);
}
.pxh-callout.is-shown{ opacity:1; transform:none; }
.pxh-co-ic{ width:36px; height:36px; flex:none; display:grid; place-content:center; border-radius:10px; font-size:15px; font-weight:800; letter-spacing:-.02em; }
.pxh-co-ic svg{ width:18px; height:18px; display:block; }
.pxh-co-ic.is-red{ background:#FEECEC; color:#DC2626; }
.pxh-co-ic.is-green{ background:#E6F6EE; color:#1E8E53; }
.pxh-callout b{ display:block; font-size:14px; font-weight:700; line-height:1.25; color:var(--pxh-ink); }
.pxh-callout small{ display:block; font-size:12px; line-height:1.3; color:var(--pxh-slate); }

.pxh-steps{
  position:absolute; z-index:6; left:50%; bottom:-27px; transform:translateX(-50%);
  display:flex; align-items:center; gap:4px; padding:5px; max-width:calc(100% - 20px);
  background:#fff; border-radius:999px; white-space:nowrap;
  box-shadow:0 1px 0 rgba(21,23,28,.04), 0 18px 36px -14px rgba(21,23,28,.32);
}
.pxh-step{ display:flex; align-items:center; gap:7px; padding:5px 11px 5px 5px; border-radius:999px; font-size:13px; font-weight:500; color:#8A909B; transition:background .25s, color .25s; }
.pxh-step i{ position:relative; width:22px; height:22px; flex:none; display:grid; place-content:center; border-radius:50%; background:#F1F2F4; color:#8A909B; font-style:normal; font-size:11.5px; font-weight:700; transition:background .25s, color .25s; }
.pxh-step i svg{ display:none; width:12px; height:12px; }
.pxh-step.is-active{ background:var(--pxh-orange-tint); color:var(--pxh-ink); }
.pxh-step.is-active i{ background:var(--pxh-orange); color:#fff; }
.pxh-step.is-done{ color:var(--pxh-ink); }
.pxh-step.is-done i{ background:#22A55B; color:#fff; }
.pxh-step.is-done i em{ display:none; }
.pxh-step.is-done i svg{ display:block; }
.pxh-step i em{ font-style:normal; }
.pxh-steps-sep{ width:12px; height:1.5px; flex:none; background:#DDE0E5; border-radius:2px; }
.pxh .pxh-steps .pxh-open{ margin-left:4px; padding:9px 14px 9px 16px; border-radius:999px; background:var(--pxh-ink); color:#fff; font-size:13px; transition:background .3s; }
.pxh .pxh-steps .pxh-open svg{ color:#fff; }
.pxh .pxh-steps.is-complete .pxh-open{ background:var(--pxh-orange); }
.pxh .pxh-steps .pxh-open:hover{ background:var(--pxh-orange-deep); }

/* fake cursor */
.pxh-cursor{ position:absolute; top:0; left:0; z-index:5; width:22px; height:22px; pointer-events:none; opacity:0; transition:transform .7s cubic-bezier(.45,.05,.25,1), opacity .3s; filter:drop-shadow(0 2px 3px rgba(0,0,0,.28)); }
.pxh-cursor.is-on{ opacity:1; }
.pxh-cursor svg{ position:relative; z-index:1; width:22px; height:22px; display:block; transform-origin:3px 2px; }
.pxh-ripple{ position:absolute; left:-7px; top:-8px; width:20px; height:20px; border-radius:50%; background:rgba(237,109,34,.4); opacity:0; }
.pxh-cursor.is-click .pxh-ripple{ animation:pxh-ripple .5s ease-out; }
.pxh-cursor.is-click svg{ animation:pxh-press .22s ease; }
@keyframes pxh-ripple{ 0%{ transform:scale(.3); opacity:1; } 100%{ transform:scale(2); opacity:0; } }
@keyframes pxh-press{ 50%{ transform:scale(.82); } }

.pxh-caption{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; padding:0 4px; font-size:13.5px; color:var(--pxh-slate); }
.pxh-caption > span{ display:flex; align-items:center; gap:7px; }
.pxh-caption > span svg{ width:15px; height:15px; }
.pxh .pxh-open{ display:inline-flex; align-items:center; gap:4px; font-weight:600; color:var(--pxh-ink); white-space:nowrap; }
.pxh .pxh-open svg{ width:16px; height:16px; color:var(--pxh-orange); transition:transform .15s; }
.pxh .pxh-open:hover svg{ transform:translateX(3px); }

/* ---------- Featured carousel ---------- */
.pxh-feat{ position:relative; padding:0 0 44px; }
.pxh-feat-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.pxh .pxh-feat-head h2{ margin:0; font-size:clamp(1.6rem,2.6vw,2.1rem); letter-spacing:-.035em; line-height:1.1; font-weight:700; color:var(--pxh-ink); }
.pxh-feat-head .pxh-eyebrow{ margin-bottom:10px; }
.pxh-nav{ display:flex; gap:8px; }
.pxh .pxh-nav button{ width:44px; height:44px; border:0; border-radius:50%; cursor:pointer; display:grid; place-content:center; background:var(--pxh-orange); color:#fff; transition:background .15s; }
.pxh .pxh-nav button:hover:not(:disabled){ background:var(--pxh-orange-deep); }
.pxh .pxh-nav button:disabled{ background:var(--pxh-orange-soft); cursor:default; }
.pxh-nav svg{ width:19px; height:19px; }

.pxh-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 24px 10px; margin:0 -24px; scroll-padding:0 24px; scrollbar-width:none; }
.pxh-track::-webkit-scrollbar{ display:none; }
.pxh-card{ flex:0 0 calc((100% - 32px) / 3); scroll-snap-align:start; display:flex; flex-direction:column; background:#fff; border:1px solid var(--pxh-line); border-radius:14px; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.pxh-card:hover{ border-color:#F5BD9C; box-shadow:0 16px 36px -22px rgba(237,109,34,.5); }
.pxh-card-img{ aspect-ratio:16/9.6; margin:8px 8px 0; border-radius:9px; background:var(--pxh-img-bg); overflow:hidden; }
.pxh-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.pxh-card:hover .pxh-card-img img{ transform:scale(1.03); }
.pxh-card-body{ display:flex; flex-direction:column; flex:1; padding:16px 16px 18px; }
.pxh-tag{ align-self:flex-start; font-family:var(--pxh-mono); font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--pxh-orange-deep); background:var(--pxh-orange-tint); border-radius:999px; padding:4px 10px; margin-bottom:12px; }
.pxh .pxh-card h3{ margin:0 0 5px; font-size:17px; letter-spacing:-.015em; line-height:1.3; font-weight:600; color:var(--pxh-ink); }
.pxh-card p{ margin:0 0 16px; font-size:14.5px; line-height:1.5; color:var(--pxh-slate); }
.pxh-card-go{ margin-top:auto; display:inline-flex; align-items:center; gap:4px; font-size:14.5px; font-weight:600; }
.pxh-card-go svg{ width:15px; height:15px; transition:transform .15s; }
.pxh-card:hover .pxh-card-go{ color:var(--pxh-orange-deep); }
.pxh-card:hover .pxh-card-go svg{ transform:translateX(3px); }

.pxh-progress{ height:3px; border-radius:99px; background:var(--pxh-line); margin-top:22px; overflow:hidden; }
.pxh-progress i{ display:block; height:100%; width:50%; background:var(--pxh-ink); border-radius:inherit; transition:margin-left .25s ease; }

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .pxh-navbtns{ display:none; }
  .pxh-step:not(.is-active) .pxh-step-l{ display:none; }
  .pxh-step:not(.is-active){ padding-right:5px; }
}
@media (max-width:1024px){
  .pxh-hero{ grid-template-columns:minmax(0,1fr); gap:96px; padding-bottom:96px; }
  .pxh-console-wrap{ max-width:640px; }
  .pxh-stage-bg{ left:10%; }
  .pxh-card{ flex-basis:calc((100% - 16px) / 2); }
}
@media (max-width:640px){
  .pxh-wrap{ padding:0 18px; }
  .pxh-hero{ padding-top:24px; gap:76px; padding-bottom:80px; }
  .pxh-stage-bg{ left:-6px; right:-40px; top:-40px; bottom:-48px; border-radius:24px 0 0 24px; }
  .pxh-callout{ right:10px; top:-34px; padding:7px 12px 7px 7px; gap:9px; }
  .pxh-co-ic{ width:30px; height:30px; font-size:13px; }
  .pxh-callout b{ font-size:13px; }
  .pxh-callout small{ font-size:11px; }
  .pxh-step{ font-size:12px; }
  .pxh .pxh-steps .pxh-open{ padding:8px 12px; font-size:12px; }
  .pxh .pxh-title{ font-size:clamp(2.1rem,10vw,2.6rem); }
  .pxh .pxh-title span{ white-space:normal; }
  .pxh-lede{ font-size:1.02rem; }
  .pxh-pills li{ font-size:13px; }
  .pxh-actions .pxh-btn{ flex:1 1 100%; }
  .pxh-dots, .pxh-live{ display:none; }
  .pxh-strip{ padding-left:8px; }
  .pxh .pxh-tab{ flex:1 1 0; padding:0 8px; font-size:12px; }
  .pxh-tab:not([aria-selected="true"]) .pxh-fav{ display:none; }
  .pxh-scene{ padding:16px; }
  .pxh-tool-hero p, .pxh-trust, .pxh-tips{ display:none; }
  .pxh-screen{ height:470px; }
  .pxh .pxh-tool-hero h4{ font-size:20px; }
  .pxh-inputs{ gap:8px; }
  .pxh-stats b{ font-size:14px; }
  .pxh-score{ gap:12px; padding:12px; }
  .pxh-ring, .pxh-ring svg{ width:64px; height:64px; }
  .pxh-ring-num strong{ font-size:19px; }
  .pxh-vrow{ flex-wrap:wrap; }
  .pxh-nav{ display:none; }
  .pxh-track{ gap:12px; padding:4px 18px 10px; margin:0 -18px; scroll-padding:0 18px; }
  .pxh-card{ flex-basis:84%; }
}
@media (prefers-reduced-motion:reduce){
  .pxh *, .pxh *::before, .pxh *::after{ transition:none !important; animation:none !important; }
}