/*
 * Parix.ai - shared tool-page design system.
 *
 * Every selector is scoped under .pxtool, so nothing here can reach the
 * rest of the site. Derived from the stylesheet already proven on the
 * Content Gap Checker, so the fonts are the sitewide PT Serif / DM Sans
 * rather than the Bricolage / Figtree placeholders in the design files.
 *
 * Page-specific rules live in assets/css/page-<slug>.css, loaded after
 * this file. Do not add page rules here.
 *
 * @package Arolax Child
 */

/*
 * AI Competitor Content Gap Checker - page styles.
 *
 * The approved design, every selector scoped under .pxtool so nothing leaks
 * into the parent theme. Typography is the site's own PT Serif (headings) /
 * DM Sans (body), both already loaded by the parent theme, so this page adds
 * no font request. Page chrome and the shared FAQ / worked example /
 * related-tools / Read next blocks are NOT styled here - the theme and
 * arolax_render_tool_extras() still own those.
 * Keyframes are prefixed pxcg- to avoid colliding with theme animations.
 */
.pxtool{--ink:#1a1512; --ink-2:#3d352f; --muted:#6f655e; --line:#ece6e1; --line-2:#d9d0c9;
  --paper:#ffffff; --mist:#f7f5f3;
  --volt:#f4531f; --navy:#1a1512; --blue:#c0370b;
  --t-yellow:#fef1ed; --t-blue:#fde7e0; --t-mint:#fef6f4; --t-lilac:#f6ece8; --t-rose:#fdddd2;
  --ok:#f4531f; --mid:#f88f6d; --bad:#b5aaa2;
  --font-head:"PT Serif",Georgia,"Times New Roman",serif;
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;}
.pxtool *,.pxtool *::before,.pxtool *::after{box-sizing:border-box}
.pxtool{font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
.pxtool img,.pxtool svg{max-width:100%}
.pxtool a{color:var(--blue)}
.pxtool strong{font-weight:600}
.pxtool :focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
.pxtool [hidden]{display:none!important}
.pxtool .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pxtool h1,.pxtool h2,.pxtool h3{font-family:var(--font-head);letter-spacing:-.02em;color:var(--ink)}
.pxtool h1{font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.05;font-weight:800;margin:.25em 0 .3em}
.pxtool h2{font-size:clamp(1.8rem,3.3vw,2.6rem);line-height:1.1;font-weight:800;margin:0 0 .45em}
.pxtool h3{font-size:1.2rem;line-height:1.25;font-weight:800;margin:0 0 .35em}
.pxtool p{margin:0 0 1em}
.pxtool .container{max-width:1120px;margin:0 auto;padding:0 24px}
.pxtool .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;font:600 15px/1.2 var(--font-body);border:0;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,opacity .15s}
.pxtool .btn-primary{background:var(--ink);color:#fff}
.pxtool .btn-primary:hover{background:#2e2620}
.pxtool .btn-primary:disabled{opacity:.35;cursor:not-allowed}
.pxtool .btn-volt{background:var(--volt);color:var(--ink)}
.pxtool .btn-volt:hover{background:#dc4516}
.pxtool .btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line-2)}
.pxtool .btn-ghost:hover{border-color:var(--ink)}
.pxtool .btn-sm{padding:8px 14px;font-size:14px}
.pxtool .btn-link{background:none;border:0;color:var(--blue);font:600 15px/1.2 var(--font-body);cursor:pointer;padding:12px 6px;text-decoration:underline;text-underline-offset:3px}
.pxtool .hero{padding:34px 0 72px;text-align:center;background:linear-gradient(180deg,var(--mist) 0,#fff 420px)}
.pxtool .hero .sub{font-size:1.15rem;color:var(--muted);max-width:640px;margin:0 auto}
.pxtool .hero-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.pxtool .hero-pills li{font-size:14px;font-weight:600;border-radius:999px;padding:6px 14px;background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.pxtool .tool{max-width:1040px;margin:28px auto 0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);text-align:left;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 1px 2px rgba(26,21,18,.05),0 24px 48px -28px rgba(26,21,18,.35)}
.pxtool .tool-left{padding:22px;border-right:1px solid var(--line);min-width:0;display:flex;flex-direction:column}
.pxtool .tool-right{padding:22px;background:var(--mist);min-width:0}
.pxtool .ta-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.pxtool .ta-head label{font-weight:700;font-size:15px}
.pxtool .count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.pxtool #prompt{width:100%;flex:1;min-height:240px;resize:vertical;padding:14px 16px;border:1px solid var(--line-2);border-radius:14px;font:16px/1.55 var(--font-body);color:var(--ink);background:#fdfcfb}
.pxtool #prompt:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue);background:#fff}
.pxtool .ta-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.pxtool .kbd-hint{font-size:13px;color:var(--muted);margin:10px 0 0}
.pxtool #tool,.pxtool .tool-right{scroll-margin-top:72px}
.pxtool kbd{font:600 12px/1 var(--font-body);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:2px 5px;background:#fff}
.pxtool .empty{height:100%;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;gap:4px}
.pxtool .empty h3{margin-top:12px}
.pxtool .empty p{color:var(--muted);font-size:15px;margin:0;max-width:310px}
.pxtool .empty .pending{font-size:13px;font-weight:600;color:var(--muted);margin-top:6px}
.pxtool .ring{width:132px;height:132px;flex:0 0 auto;display:block}
.pxtool .ring .track{fill:none;stroke:#ebe4de;stroke-width:11}
.pxtool .ring .val{fill:none;stroke:var(--ring,#d9d0c9);stroke-width:11;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .7s ease,stroke .3s}
.pxtool .ring text{font-family:var(--font-head);font-weight:800;fill:var(--ink)}
.pxtool .score-top{display:flex;gap:18px;align-items:center}
.pxtool .grade{display:inline-block;font-weight:700;font-size:14px;border-radius:999px;padding:4px 12px;background:var(--g-bg,#fff);color:var(--g-ink,var(--ink))}
.pxtool .verdict{margin:8px 0 2px;font-weight:600;line-height:1.4;font-size:15.5px}
.pxtool .passed{font-size:14px;color:var(--muted);margin:0}
.pxtool .g-excellent{--g-bg:var(--t-mint);--g-ink:#9e2d08;--ring:var(--ok)}
.pxtool .g-good{--g-bg:var(--t-blue);--g-ink:#c0370b;--ring:var(--blue)}
.pxtool .g-decent{--g-bg:var(--t-yellow);--g-ink:#9e2d08;--ring:var(--mid)}
.pxtool .g-needs{--g-bg:#fde4db;--g-ink:#9e2d08;--ring:#f9a98f}
.pxtool .g-poor{--g-bg:var(--t-rose);--g-ink:#9e2d08;--ring:var(--bad)}
.pxtool .rh{font:700 15px/1.3 var(--font-body);letter-spacing:0;margin:22px 0 10px}
.pxtool .breakdown{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pxtool .breakdown li{display:grid;grid-template-columns:132px 1fr 60px;gap:10px;align-items:center;font-size:14px}
.pxtool .breakdown .bar{height:8px;background:#ebe4de;border-radius:99px;overflow:hidden}
.pxtool .breakdown .bar i{display:block;height:100%;width:0;border-radius:99px;transition:width .6s ease}
.pxtool .bar i.full{background:var(--ok)}
.pxtool .bar i.part{background:var(--mid)}
.pxtool .breakdown .bv{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pxtool .breakdown .bv.zero{color:#9e2d08}
.pxtool .fixes{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14.5px;color:var(--ink-2)}
.pxtool .fixes b{color:var(--ink)}
.pxtool .all-good{font-size:14.5px;color:var(--ink-2);margin:16px 0 0}
.pxtool .after-tool{max-width:1040px;margin:14px auto 0;text-align:left}
.pxtool .gate{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:center;background:var(--volt);border-radius:22px;padding:26px 28px}
.pxtool .gate h3{font-size:1.35rem}
.pxtool .gate p{font-size:15px;margin:0}
.pxtool .gate form{display:grid;gap:10px}
.pxtool .gate label{font-weight:700;font-size:14px}
.pxtool .gate input[type=email]{width:100%;padding:12px 14px;border:1px solid rgba(26,21,18,.25);border-radius:12px;font:inherit;font-size:15px;background:#fff}
.pxtool .gate .fine{font-size:12.5px;color:#1a1512;line-height:1.45;margin:0}
.pxtool .gate .skip{background:none;border:0;padding:0;font:600 14px var(--font-body);color:var(--ink);text-decoration:underline;cursor:pointer;justify-self:start}
.pxtool .gate .err{font-size:13px;font-weight:600;color:#9e2d08;margin:0}
.pxtool .rewrite{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px 26px}
.pxtool .rewrite-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.pxtool .rewrite-head h3{margin:0}
.pxtool .rewrite pre{white-space:pre-wrap;font:15px/1.65 var(--font-body);background:var(--mist);border-radius:14px;padding:16px 18px;margin:0 0 10px}
.pxtool .rewrite .note{font-size:13.5px;color:var(--muted);margin:0}
.pxtool .rewrite code{background:var(--t-yellow);padding:1px 5px;border-radius:5px;font-size:.92em}
.pxtool .demo-note{font-size:12.5px;color:var(--muted);margin:8px 0 0}
.pxtool .chips{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:20px auto 0;max-width:1040px}
.pxtool .chips span{font-size:14px;font-weight:600;color:var(--muted);margin-right:2px}
.pxtool .chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font:500 14px/1.2 var(--font-body);color:var(--ink);cursor:pointer}
.pxtool .chip:hover{border-color:var(--ink)}
.pxtool .tips{max-width:1040px;margin:30px auto 0;text-align:left}
.pxtool .tips h2{font-size:1.3rem;text-align:center;margin-bottom:14px}
.pxtool .tips ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pxtool .tips li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:14.5px;color:var(--ink-2);line-height:1.45}
.pxtool .tips li strong{display:block;color:var(--ink);font-size:15px;font-weight:700;margin-bottom:2px}
.pxtool .section{padding:88px 0}
.pxtool .section.tint{background:var(--mist)}
.pxtool .section.flush-top{padding-top:0}
.pxtool .section-head{text-align:center;max-width:780px;margin:0 auto 40px}
.pxtool .section-head p{color:var(--ink-2)}
.pxtool .bg-yellow{background:var(--t-yellow)}
.pxtool .bg-blue{background:var(--t-blue)}
.pxtool .bg-mint{background:var(--t-mint)}
.pxtool .bg-lilac{background:var(--t-lilac)}
.pxtool .bg-rose{background:var(--t-rose)}
.pxtool .feature{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:48px 0}
.pxtool .feature.first{padding-top:0}
.pxtool .feature.reverse .feature-art{order:-1}
.pxtool .feature-art{border-radius:26px;padding:36px;display:grid;place-items:center;min-height:360px}
.pxtool .feature-copy h2{font-size:clamp(1.7rem,2.8vw,2.2rem)}
.pxtool .feature-copy p{color:var(--ink-2)}
.pxtool .feature-copy .btn{margin-top:6px}
.pxtool .chat{width:min(100%,400px);display:grid;gap:10px}
.pxtool .msg{max-width:88%;border-radius:16px;padding:10px 14px;font-size:14.5px;line-height:1.45}
.pxtool .msg.you{justify-self:end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.pxtool .msg.ai{justify-self:start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;display:grid;gap:7px;width:78%}
.pxtool .msg .line{display:block;height:8px;border-radius:99px;background:#e6ded7}
.pxtool .msg .tag{justify-self:start;font-size:12px;font-weight:700;border-radius:999px;padding:2px 10px;margin-top:2px}
.pxtool .tag.bad{background:var(--t-rose);color:#9e2d08}
.pxtool .tag.good{background:var(--t-mint);color:#9e2d08}
.pxtool .weights{width:min(100%,430px);background:#fff;border-radius:18px;padding:20px 22px;border:1px solid rgba(26,21,18,.08)}
.pxtool .weights .wt{font-weight:700;font-size:15px;margin:0 0 12px}
.pxtool .w-row{display:grid;grid-template-columns:120px 1fr 26px;gap:10px;align-items:center;font-size:13.5px;margin-bottom:9px;color:var(--ink-2)}
.pxtool .w-row i{display:block;height:10px;border-radius:99px;background:var(--blue);width:var(--w)}
.pxtool .w-row b{text-align:right;color:var(--ink)}
.pxtool .w-total{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-weight:700;font-size:14px}
.pxtool .ba{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pxtool .ba-card{border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:14px}
.pxtool .ba-card h3{margin:0}
.pxtool .ba-card .quote{font:600 1.05rem/1.5 var(--font-body);background:#fff;border-radius:14px;padding:14px 16px;margin:0}
.pxtool .ba-card ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:15px;display:grid;gap:4px}
.pxtool .ba-score{display:flex;align-items:center;gap:14px}
.pxtool .ba-score .ring{width:74px;height:74px}
.pxtool .ba-card .btn{align-self:flex-start;margin-top:auto}
.pxtool .ba-after{margin:24px auto 0;max-width:800px;text-align:center;color:var(--ink-2)}
.pxtool .ptypes{width:min(100%,470px);display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pxtool .ptype{background:#fff;border-radius:14px;padding:12px 14px;border:1px solid rgba(26,21,18,.08)}
.pxtool .ptype b{display:block;font-size:14px;margin-bottom:4px}
.pxtool .ptype span{font-size:14px;color:var(--ink-2);line-height:1.4;display:block}
.pxtool .accent{display:grid;grid-template-columns:1fr 1fr;border-radius:26px;overflow:hidden;background:var(--volt)}
.pxtool .accent-art{background:var(--navy);display:grid;place-items:center;padding:24px;min-height:360px}
.pxtool .accent-art svg{width:min(100%,440px);height:auto}
.pxtool .accent-body{padding:52px 48px;display:flex;flex-direction:column;justify-content:center}
.pxtool .accent-body h2{font-size:clamp(2rem,3.6vw,2.8rem)}
.pxtool .accent-body p{color:var(--ink);font-size:1.05rem}
.pxtool .accent-body p a{color:var(--ink);font-weight:600}
.pxtool .accent-body .btn{align-self:flex-start}
.pxtool .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pxtool .card{border:1px solid var(--line);border-radius:22px;padding:30px;background:#fff;display:flex;flex-direction:column}
.pxtool .card p{color:var(--ink-2)}
.pxtool .card .tag{align-self:flex-start;font-size:13px;font-weight:600;border-radius:999px;padding:4px 12px;margin-bottom:14px}
.pxtool .card .btn{align-self:flex-start;margin-top:auto}
.pxtool .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pxtool .stat{border:1px solid var(--line);border-radius:22px;padding:30px 18px;text-align:center;background:#fff}
.pxtool .stat b{display:block;font:800 clamp(2.4rem,4vw,3.2rem)/1 var(--font-head);letter-spacing:-.03em;margin-bottom:10px}
.pxtool .stat span{font-size:14.5px;color:var(--muted)}
.pxtool .final{display:grid;grid-template-columns:1fr 1fr;border-radius:26px;overflow:hidden;background:var(--volt)}
.pxtool .final-art{background:var(--navy);padding:44px 36px;display:grid;place-items:center}
.pxtool .scorecard{background:#fff;border-radius:20px;padding:22px;width:min(100%,340px);display:grid;gap:14px}
.pxtool .scorecard .top{display:flex;align-items:center;gap:16px}
.pxtool .scorecard .ring{width:96px;height:96px}
.pxtool .scorecard .rows{display:grid;gap:8px}
.pxtool .scorecard .r{display:grid;grid-template-columns:100px 1fr;gap:10px;align-items:center;font-size:13px;color:var(--ink-2)}
.pxtool .scorecard .r i{display:block;height:7px;border-radius:99px;background:var(--ok)}
.pxtool .final-body{padding:52px 48px;display:flex;flex-direction:column;justify-content:center}
.pxtool .final-body h2{font-size:clamp(2.1rem,3.8vw,3rem)}
.pxtool .final-body p a{color:var(--ink);font-weight:600}
.pxtool .final-body .btn{align-self:flex-start;margin-top:6px}
@media (max-width:900px){
.pxtool .tool{grid-template-columns:1fr}
.pxtool .tool-left{border-right:0;border-bottom:1px solid var(--line)}
.pxtool .gate{grid-template-columns:1fr}
.pxtool .tips ul{grid-template-columns:1fr 1fr}
.pxtool .duo,.pxtool .accent,.pxtool .final,.pxtool .ba{grid-template-columns:1fr}
.pxtool .feature{grid-template-columns:1fr;gap:28px;padding:36px 0}
.pxtool .feature.reverse .feature-art{order:0}
.pxtool .feature-art{min-height:0;padding:28px}
.pxtool .stats{grid-template-columns:1fr 1fr}
.pxtool .accent-art,.pxtool .final-art{min-height:0}
.pxtool .accent-body,.pxtool .final-body{padding:36px 28px}
.pxtool .kbd-hint{display:none}
}
@media (max-width:600px){
.pxtool{font-size:16px}
.pxtool .container{padding:0 16px}
.pxtool .section{padding:64px 0}
.pxtool .tips ul{grid-template-columns:1fr}
.pxtool .breakdown li{grid-template-columns:108px 1fr 54px;font-size:13.5px}
.pxtool .ptypes{grid-template-columns:1fr}
.pxtool .score-top{gap:14px}
.pxtool .score-top .ring{width:108px;height:108px}
}
@media (prefers-reduced-motion:reduce){
.pxtool .ring .val,.pxtool .breakdown .bar i{transition:none}
}
.pxtool .form-h{font:800 1.35rem/1.2 var(--font-head);letter-spacing:-.02em;margin:0 0 4px}
.pxtool .form-sub{color:var(--muted);font-size:14.5px;margin:0 0 16px}
.pxtool .field{margin:0 0 14px;border:0;padding:0;min-width:0}
.pxtool .field>label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.pxtool .field input[type=number],.pxtool .field input[type=text],.pxtool .field input[type=url],.pxtool .field select{width:100%;padding:11px 12px;border:1px solid var(--line-2);border-radius:10px;background:#fff;font:inherit;font-size:15px;color:var(--ink)}
.pxtool .field input:focus,.pxtool .field select:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.pxtool .field .hint{font-size:12.5px;color:var(--muted);margin:5px 0 0}
.pxtool .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pxtool .money{position:relative}
.pxtool .money>span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600;pointer-events:none}
.pxtool .money input{padding-left:26px!important}
.pxtool .range-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pxtool .range-row output{font:800 1.15rem/1 var(--font-head);font-variant-numeric:tabular-nums}
.pxtool input[type=range]{width:100%;accent-color:var(--ink);margin:6px 0 0}
.pxtool .btn-block{width:100%}
.pxtool .form-note{font-size:12.5px;color:var(--muted);margin:10px 0 0}
.pxtool .kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pxtool .kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.pxtool .kpi .k{font-size:12.5px;font-weight:700;color:var(--muted);display:block}
.pxtool .kpi .v{font:800 1.55rem/1.15 var(--font-head);letter-spacing:-.02em;display:block;margin-top:4px;font-variant-numeric:tabular-nums;color:var(--ink)}
.pxtool .kpi .s{font-size:12.5px;color:var(--muted);display:block}
.pxtool .kpi.big{grid-column:1/-1;background:var(--ink);border-color:var(--ink)}
.pxtool .kpi.big .k,.pxtool .kpi.big .s{color:#d8cfc8}
.pxtool .kpi.big .v{color:var(--volt);font-size:2.3rem}
.pxtool .res-note{font-size:13px;color:var(--muted);margin:12px 0 0}
.pxtool .list-check{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pxtool .list-check li{padding-left:26px;position:relative;color:var(--ink-2)}
.pxtool .list-check li::before{content:"";position:absolute;left:2px;top:.42em;width:13px;height:7px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}
.pxtool .list-dot li::before{width:8px;height:8px;border:0;border-radius:50%;background:var(--muted);transform:none;top:.62em;left:4px}
.pxtool .tiles4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pxtool .tile4{border-radius:20px;padding:22px}
.pxtool .tile4 p{font-size:15px;color:var(--ink-2);margin:0}
.pxtool .tiles3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pxtool .h2-like{font-size:clamp(1.7rem,2.8vw,2.2rem);line-height:1.12;font-weight:800;margin:0 0 .45em}
.pxtool .center-copy{max-width:780px;margin:0 auto;text-align:center;color:var(--ink-2)}
.pxtool .badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;border-radius:999px;padding:4px 10px}
.pxtool .badge.live{background:var(--t-mint);color:#9e2d08}
.pxtool .badge.cat{background:var(--t-yellow);color:#9e2d08}
.pxtool .report{max-width:1040px;margin:14px auto 0;text-align:left;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px}
.pxtool .report h3{margin-top:0}
.pxtool .report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.pxtool .report .sub-h{font:700 15px/1.3 var(--font-body);letter-spacing:0;margin:20px 0 8px}
.pxtool .scale{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:10px 0 6px}
.pxtool .scale span{height:10px;border-radius:99px;background:#ebe4de}
.pxtool .scale span.on{background:var(--blue)}
.pxtool .scale-l{display:grid;grid-template-columns:repeat(4,1fr);font-size:12.5px;color:var(--muted)}
.pxtool .years{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pxtool .quote-box{margin-top:18px;background:var(--mist);border-radius:18px;padding:22px}
.pxtool .quote-box h3{margin:0 0 6px}
.pxtool ol.steps{list-style:none;counter-reset:step;margin:0 0 18px;padding:0}
.pxtool ol.steps li{counter-increment:step;position:relative;padding:12px 0 12px 50px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.pxtool ol.steps li:last-child{border-bottom:0}
.pxtool ol.steps li::before{content:counter(step);position:absolute;left:0;top:10px;width:34px;height:34px;border-radius:50%;background:var(--volt);color:var(--ink);font:800 16px/34px var(--font-head);text-align:center}
.pxtool .demo-shell{width:min(100%,430px)}
.pxtool .demo-ui{background:#fff;border-radius:18px;border:1px solid rgba(26,21,18,.08);box-shadow:0 22px 44px -28px rgba(26,21,18,.5);padding:18px;display:grid;gap:10px;text-align:left}
.pxtool .demo-bar{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.pxtool .demo-live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.pxtool .demo-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bad);animation:pxcg-dblink 1.4s infinite}
@keyframes pxcg-dblink{50%{opacity:.25}}
.pxtool .demo-toggle{background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:5px 12px;font:600 12.5px/1.2 var(--font-body);color:var(--ink);cursor:pointer}
.pxtool .d-label{font-size:12px;font-weight:700;color:var(--muted);display:block;margin-bottom:4px}
.pxtool .d-field{border:1px solid var(--line-2);border-radius:10px;padding:8px 12px;font-size:14px;min-height:38px;background:#fdfcfb;color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s}
.pxtool .d-field.is-focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(244,83,31,.18);background:#fff}
.pxtool .d-field.is-focus .typed::after{content:"";display:inline-block;width:1.5px;height:1em;background:var(--ink);margin-left:1px;vertical-align:-2px;animation:pxcg-dblink 1s steps(1) infinite}
.pxtool .d-btn{background:var(--ink);color:#fff;border-radius:999px;padding:10px;text-align:center;font-weight:600;font-size:14.5px;transition:transform .15s,background .15s}
.pxtool .d-btn.is-pressed{transform:scale(.95);background:#2e2620}
.pxtool .d-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pxtool .d-kpi{border-radius:12px;padding:10px 12px;background:var(--mist)}
.pxtool .d-kpi b{display:block;font:800 1.2rem/1.2 var(--font-head);font-variant-numeric:tabular-nums}
.pxtool .d-kpi span{font-size:11.5px;font-weight:700;color:var(--muted)}
.pxtool .fade-in{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.pxtool .fade-in.show{opacity:1;transform:none}
.pxtool ol.steps li{transition:color .25s}
.pxtool ol.steps li::before{transition:background .25s,color .25s}
.pxtool ol.steps li.is-on{color:var(--ink)}
.pxtool ol.steps li.is-on::before{background:var(--ink);color:var(--volt)}
@media (max-width:900px){
.pxtool .report-grid,.pxtool .years{grid-template-columns:1fr 1fr}
.pxtool .tiles4{grid-template-columns:1fr 1fr}
.pxtool .tiles3{grid-template-columns:1fr}
}
@media (max-width:600px){
.pxtool .tiles4,.pxtool .row2{grid-template-columns:1fr}
.pxtool .kpis{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
.pxtool .demo-live::before{animation:none}
.pxtool .d-field.is-focus .typed::after{display:none}
.pxtool .fade-in{transition:none}
}
.pxtool{--brand:#f4531f;--brand-strong:#d63d0c;--brand-deep:#c0370b}
.pxtool a{color:var(--brand-deep)}
.pxtool :focus-visible{outline-color:var(--brand-strong)}
.pxtool .btn-primary{background:var(--brand-strong);color:#fff}
.pxtool .btn-primary:hover{background:#b8330a}
.pxtool .btn-volt{background:var(--brand-strong);color:#fff}
.pxtool .btn-volt:hover{background:#b8330a}
.pxtool .accent .btn-primary,.pxtool .final .btn-primary,.pxtool .gate .btn-primary{background:var(--ink);color:#fff}
.pxtool .accent .btn-primary:hover,.pxtool .final .btn-primary:hover,.pxtool .gate .btn-primary:hover{background:#2e2620}
.pxtool .demo-live::before{background:var(--brand)}
.pxtool .d-btn{background:var(--brand-strong)}
.pxtool .d-btn.is-pressed{background:#b8330a}
.pxtool input[type=range],.pxtool .toggle input{accent-color:var(--brand-strong)}
.pxtool .d-track i{background:var(--brand-strong)}
.pxtool .d-thumb{border-color:var(--brand-strong)}
.pxtool .plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.pxtool .plan{border-radius:18px;padding:20px}
.pxtool .plan h4{font:800 1.1rem/1.25 var(--font-head);margin:0 0 4px}
.pxtool .plan p{font-size:13.5px;color:var(--ink-2);margin:0 0 10px}
.pxtool .plan ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14.5px}
.pxtool .scan{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.pxtool .scan-head{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:6px}
.pxtool .scan-list{list-style:none;margin:0;padding:0;max-height:176px;overflow:hidden;display:grid;gap:4px;align-content:start}
.pxtool .scan-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;padding:5px 8px;border-radius:8px;background:var(--mist);animation:pxcg-rowin .3s ease}
.pxtool .scan-list li code{font:600 12.5px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink)}
.pxtool .scan-list li.gap{background:var(--t-yellow)}
.pxtool .scan-list .t{font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px}
.pxtool .scan-list .t.m{background:#ebe4de;color:var(--muted)}
.pxtool .scan-list .t.g{background:var(--ink);color:var(--volt)}
@keyframes pxcg-rowin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pxtool .d-kpi.d-dark{background:var(--ink)}
.pxtool .d-kpi.d-dark span{color:#d8cfc8}
.pxtool .d-kpi.d-dark b{color:var(--volt);font-size:1.6rem}
.pxtool .serp{width:min(100%,400px);background:#fff;border-radius:18px;padding:16px;display:grid;gap:10px;border:1px solid rgba(26,21,18,.08)}
.pxtool .serp-q{border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600}
.pxtool .serp-r{border-radius:12px;padding:10px 12px;background:var(--mist)}
.pxtool .serp-r small{display:block;font-size:12px;color:var(--muted)}
.pxtool .serp-r b{display:block;font-size:15px;color:#c0370b}
.pxtool .serp-r span{font-size:13px;color:var(--ink-2)}
.pxtool .serp-r.win{background:var(--t-yellow)}
.pxtool .serp-r.ghost{background:transparent;border:2px dashed var(--line-2)}
.pxtool .serp-r.ghost b{color:var(--muted)}
.pxtool .get-tiles{list-style:none;margin:0 auto;padding:0;max-width:1100px}
.pxtool .get-tiles li{font-size:15px;color:var(--ink-2);line-height:1.5}
.pxtool .get-tiles li strong{display:block;font:800 1.15rem/1.25 var(--font-head);color:var(--ink);margin-bottom:6px}
.pxtool .found{background:#fff;border-radius:20px;padding:22px;width:min(100%,360px);display:grid;gap:8px}
.pxtool .found-n{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--ink-2)}
.pxtool .found-n b{font:800 2.4rem/1 var(--font-head);color:var(--ink);margin-right:6px}
.pxtool .found-r{background:var(--t-yellow);border-radius:10px;padding:10px 12px;font-weight:600;font-size:14.5px}
.pxtool .found-r.more{background:var(--mist);color:var(--ink-2);font-weight:500}
.pxtool .order{width:min(100%,400px);display:grid;gap:10px}
.pxtool .order div{background:#fff;border-radius:14px;padding:12px 14px 12px 56px;position:relative;border:1px solid rgba(26,21,18,.08)}
.pxtool .order span{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--volt);font:800 15px/30px var(--font-head);text-align:center}
.pxtool .order b{display:block;font-size:15px}
.pxtool .order small{font-size:13px;color:var(--muted)}
@media (max-width:900px){
.pxtool .plan-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.pxtool .scan-list li{animation:none}
}
.pxtool .roadmap{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;margin-bottom:14px}
.pxtool .rm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 20px;flex-wrap:wrap;margin-bottom:14px}
.pxtool .rm-head h3{margin:0 0 4px}
.pxtool .rm-head p{margin:0;font-size:14px;color:var(--muted);max-width:560px}
.pxtool .rm-key{display:flex;flex-wrap:wrap;gap:6px}
.pxtool .rm-key span{font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px}
.pxtool .k-page,.pxtool .it-page{background:#d63d0c;color:#fff}
.pxtool .k-faq,.pxtool .it-faq{background:var(--t-rose);color:var(--ink)}
.pxtool .k-link,.pxtool .it-link{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--volt)}
.pxtool .k-blog,.pxtool .it-blog{background:var(--ink);color:#fff}
.pxtool .rm-scroll{overflow-x:auto;padding-bottom:6px}
.pxtool .rm-grid{display:grid;grid-template-columns:repeat(12,minmax(118px,1fr));gap:8px;min-width:1100px}
.pxtool .rm-month{grid-row:1;font:800 13px/1 var(--font-head);color:var(--ink);padding:6px 8px;border-radius:8px;background:var(--mist)}
.pxtool .rm-week{grid-row:2;font-size:11.5px;font-weight:700;color:var(--muted);padding:0 2px}
.pxtool .rm-col{grid-row:3;display:grid;gap:6px;align-content:start;min-height:90px;border-left:1px dashed var(--line-2);padding-left:6px}
.pxtool .rm-it{border-radius:10px;padding:8px 9px;font-size:12.5px;font-weight:600;line-height:1.3;opacity:0;transform:translateY(8px);animation:pxcg-rmin .45s ease forwards;animation-delay:var(--d)}
.pxtool .rm-it small{display:block;font-size:10.5px;font-weight:700;opacity:.8;margin-bottom:2px;text-transform:none}
.pxtool .rm-it.locked{color:transparent!important;text-shadow:0 0 8px rgba(26,21,18,.45);user-select:none}
.pxtool .rm-it.locked small{text-shadow:none;color:var(--ink)}
.pxtool .rm-it.it-page.locked small,.pxtool .rm-it.it-blog.locked small{color:#fff}
.pxtool .rm-it.it-page.locked,.pxtool .rm-it.it-blog.locked{text-shadow:0 0 8px rgba(255,255,255,.7)}
@keyframes pxcg-rmin{to{opacity:1;transform:none}}
.pxtool .rm-lock{margin:10px 0 0;font-size:13px;font-weight:700;color:var(--blue)}
@media (prefers-reduced-motion:reduce){
.pxtool .rm-it{animation:none;opacity:1;transform:none}
}
/* content-visibility removed: it let the browser skip offscreen sections, which stops IntersectionObserver firing for the reveal inside them. */
.pxtool .section{}
.pxtool .hero,.pxtool #tool{content-visibility:visible}
.pxtool #gNum,.pxtool #gCount,.pxtool .scorecard text,.pxtool .d-kpi b{font-variant-numeric:tabular-nums}
.pxtool .ring .val{transition:stroke-dashoffset 1.5s cubic-bezier(.16,.84,.3,1),stroke .4s}
@media (prefers-reduced-motion: no-preference){
.pxtool .rv{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .95s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--rd,0) * 1ms)}
.pxtool .rv.is-in{opacity:1;transform:none}
.pxtool .rv-zoom{opacity:0;transform:translateY(30px) scale(.985);transition:opacity .95s ease,transform 1.15s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--rd,0) * 1ms)}
.pxtool .rv-zoom.is-in{opacity:1;transform:none}
.pxtool .pxstep{opacity:0;transform:translateY(8px);animation:pxcg-pxstep .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes pxcg-pxstep{to{opacity:1;transform:none}}
.pxtool .scorecard .rows .r i{transition:width 1.1s cubic-bezier(.16,.84,.3,1)}
.pxtool .btn.is-busy{pointer-events:none;opacity:.75}
.pxtool .btn.is-busy::after{content:"";width:14px;height:14px;margin-left:10px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;display:inline-block;animation:pxcg-pxspin .7s linear infinite;vertical-align:-2px}
@keyframes pxcg-pxspin{to{transform:rotate(360deg)}}
}
.pxtool .tool-right #gapTop,.pxtool .tool-right .verdict,.pxtool .tool-right .rh,.pxtool .tool-right .fixes{transition:opacity .45s ease,filter .45s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.pxtool .tool-right.pxrunning #gapTop,.pxtool .tool-right.pxrunning .verdict,.pxtool .tool-right.pxrunning .rh,.pxtool .tool-right.pxrunning .fixes{opacity:.22;filter:blur(1.5px)}
.pxtool .tool-right.pxdone #gapTop,.pxtool .tool-right.pxdone .verdict,.pxtool .tool-right.pxdone .rh,.pxtool .tool-right.pxdone .fixes{animation:pxcg-pxdone .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes pxcg-pxdone{from{opacity:.3;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
.pxtool .tool-right.pxrunning #gapTop,.pxtool .tool-right.pxrunning .verdict,.pxtool .tool-right.pxrunning .rh,.pxtool .tool-right.pxrunning .fixes{opacity:1;filter:none}
.pxtool .tool-right.pxdone #gapTop,.pxtool .tool-right.pxdone .verdict,.pxtool .tool-right.pxdone .rh,.pxtool .tool-right.pxdone .fixes{animation:none}
}
.pxtool .pxscan{border:1px solid var(--line);border-radius:16px;background:var(--mist);padding:16px 18px;margin:0 0 4px}
.pxtool .pxscan[hidden]{display:none}
.pxtool .pxscan-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:14px;font-weight:600;color:var(--ink)}
.pxtool .pxscan-pct{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:700}
.pxtool .pxscan-bar{height:7px;border-radius:999px;background:#ebe4de;overflow:hidden;margin:10px 0 12px}
.pxtool .pxscan-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--volt);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.pxtool .pxscan-list{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:13.5px;color:var(--ink-2)}
.pxtool .pxscan-list li{display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(6px);animation:pxcg-pxstep .4s cubic-bezier(.2,.8,.2,1) forwards}
.pxtool .pxscan-list li b{width:16px;height:16px;flex:0 0 auto;border-radius:50%;border:2px solid var(--line-2);display:inline-block}
.pxtool .pxscan-list li.done b{border-color:transparent;background:var(--volt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
@media (prefers-reduced-motion: reduce){
.pxtool .pxscan-list li{opacity:1;transform:none;animation:none}
.pxtool .pxscan-bar i{transition:none}
}
.pxtool{--ink:#241f1b; --ink-2:#4a403a; --muted:#736861;
  --line:#f3e8e1; --line-2:#e7d9cf;
  --paper:#ffffff; --mist:#fff8f4;

  
  --volt:#ff7a3d; --brand:#f4531f; --brand-strong:#d94a12; --brand-deep:#b8420e;
  --blue:#c0370b; --navy:#fff1e8;

  
  --t-yellow:#fff4ee; --t-blue:#ffeadf; --t-mint:#fff8f4; --t-lilac:#fdeee7; --t-rose:#fce0d3;
  --ok:#ff7a3d; --mid:#ffa477; --bad:#d9c9bf;}
.pxtool{background:#fff}
.pxtool .hero{background:linear-gradient(180deg,#fff5ef 0,#fff 440px)}
.pxtool .section.tint{background:#fff8f4}
.pxtool .accent,.pxtool .final{background:#fff2ea;border:1px solid #f8ded0}
.pxtool .accent-art,.pxtool .final-art{background:#fde8dc}
.pxtool .accent-body h2,.pxtool .final-body h2{color:var(--ink)}
.pxtool .accent-body p,.pxtool .final-body p,.pxtool .accent-body p a,.pxtool .final-body p a{color:var(--ink-2)}
.pxtool .accent .btn-primary,.pxtool .final .btn-primary,.pxtool .gate .btn-primary{background:var(--ink);color:#fff}
.pxtool .accent .btn-primary:hover,.pxtool .final .btn-primary:hover,.pxtool .gate .btn-primary:hover{background:#3a312b}
.pxtool .scorecard,.pxtool .found,.pxtool .serp,.pxtool .order div{box-shadow:0 1px 2px rgba(36,31,27,.05),0 18px 40px -26px rgba(36,31,27,.28)}
.pxtool .scorecard,.pxtool .found{border:1px solid #f6e2d6}
.pxtool .gate{background:#fff2ea;border:1px solid #f8ded0}
.pxtool .gate .fine{color:var(--ink-2)}
.pxtool .g-good{--g-bg:#ffeadf;--g-ink:#b8420e;--ring:#ef5a1c}
.pxtool .g-excellent{--g-bg:#fff4ee;--g-ink:#b8420e;--ring:#ef5a1c}
.pxtool .g-decent{--g-bg:#fff4ee;--g-ink:#b8420e;--ring:#ff9560}
.pxtool .scorecard .r i{background:#ef5a1c}
.pxtool .scorecard .grade{background:#ffeadf;color:#b8420e}
.pxtool .kpi.big{background:var(--ink);border-color:var(--ink)}
.pxtool .kpi.big .k,.pxtool .kpi.big .s{color:#ddd2ca}
.pxtool .kpi.big .v,.pxtool .d-kpi.d-dark b{color:#ff9560}
.pxtool .d-kpi.d-dark{background:var(--ink)}
.pxtool .d-kpi.d-dark span{color:#ddd2ca}
.pxtool .k-blog,.pxtool .it-blog{background:var(--ink);color:#fff}
.pxtool .k-page,.pxtool .it-page{background:#e05c1e;color:#fff}
.pxtool .k-faq,.pxtool .it-faq{background:#fce0d3;color:var(--ink)}
.pxtool .k-link,.pxtool .it-link{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px #f4823f}
.pxtool .scan-list .t.g{background:var(--ink);color:#ff9560}
.pxtool .order span{background:var(--ink);color:#ff9560}
.pxtool .msg.you{background:var(--ink);color:#fff}
.pxtool .d-btn{background:var(--brand-strong);color:#fff}
.pxtool .btn-primary{background:var(--brand-strong);color:#fff}
.pxtool .btn-primary:hover{background:#b8420e}
.pxtool .btn-volt{background:var(--brand-strong);color:#fff}
.pxtool .btn-volt:hover{background:#b8420e}
.pxtool .btn-ghost{background:#fff;border-color:#e7d9cf}
.pxtool .btn-ghost:hover{border-color:var(--ink)}
.pxtool .pxscan{background:#fff8f4;border-color:#f3e8e1}
.pxtool .pxscan-bar{background:#f7e4da}
.pxtool .pxscan-bar i{background:#ef5a1c}
.pxtool .pxscan-list li b{border-color:#e7d9cf}
.pxtool .pxscan-list li.done b{background-color:#ef5a1c}
.pxtool{--ink:#3a2a21; --ink-2:#5c4a3f; --muted:#86746a;
  --line:#fbe7da; --line-2:#f5d5c1;
  --paper:#ffffff; --mist:#fff8f2;
  --volt:#ffa162; --brand:#ffa162; --brand-strong:#ffa162; --brand-deep:#b8520f;
  --blue:#b8520f; --navy:#ffe9d8;
  --t-yellow:#fff3e8; --t-blue:#ffe9d8; --t-mint:#fff8f2; --t-lilac:#fff0e4; --t-rose:#ffe2cc;
  --ok:#fb8c45; --mid:#ffbb8a; --bad:#eed8ca;
  --btn:#ffa162; --btn-hover:#ff8d45; --btn-ink:#3a2a21;}
.pxtool a{color:#b8520f}
.pxtool :focus-visible{outline-color:#f07a2c}
.pxtool .hero{background:linear-gradient(180deg,#fff1e4 0,#fff 460px)}
.pxtool .section.tint{background:#fff8f2}
.pxtool .btn-primary,.pxtool .btn-volt,.pxtool .d-btn,.pxtool .accent .btn-primary,.pxtool .final .btn-primary,.pxtool .gate .btn-primary{background:var(--btn);color:var(--btn-ink)}
.pxtool .btn-primary:hover,.pxtool .btn-volt:hover,.pxtool .accent .btn-primary:hover,.pxtool .final .btn-primary:hover,.pxtool .gate .btn-primary:hover{background:var(--btn-hover)}
.pxtool .d-btn.is-pressed{background:var(--btn-hover)}
.pxtool .btn-ghost{background:#fff;border-color:#f5d5c1}
.pxtool .btn-ghost:hover{border-color:#ffa162;background:#fff8f2}
.pxtool .chip:hover{border-color:#ffa162}
.pxtool .accent,.pxtool .final,.pxtool .gate{background:#fff3e8;border:1px solid #fbe0cc}
.pxtool .accent-art,.pxtool .final-art{background:#ffe9d8}
.pxtool .feature-art{background-color:#fff3e8}
.pxtool .kpi.big,.pxtool .d-kpi.d-dark{background:#ffe9d8;border-color:#fbd9bf}
.pxtool .kpi.big .k,.pxtool .kpi.big .s,.pxtool .d-kpi.d-dark span{color:var(--ink-2)}
.pxtool .kpi.big .v,.pxtool .d-kpi.d-dark b{color:#b8520f}
.pxtool .scan-list .t.g{background:#ffd3b3;color:var(--ink)}
.pxtool .order span{background:#ffc497;color:var(--ink)}
.pxtool .msg.you{background:#ffe0c8;color:var(--ink)}
.pxtool ol.steps li::before{background:#ffe0c8;color:var(--ink)}
.pxtool ol.steps li.is-on::before{background:#ffa162;color:var(--ink)}
.pxtool .k-page,.pxtool .it-page{background:#ffb27d;color:var(--ink)}
.pxtool .k-blog,.pxtool .it-blog{background:#ffd3b3;color:var(--ink)}
.pxtool .k-faq,.pxtool .it-faq{background:#ffede0;color:var(--ink)}
.pxtool .k-link,.pxtool .it-link{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px #ffa162}
.pxtool .rm-it.it-page.locked small,.pxtool .rm-it.it-blog.locked small{color:var(--ink)}
.pxtool .rm-it.it-page.locked,.pxtool .rm-it.it-blog.locked{text-shadow:0 0 8px rgba(58,42,33,.45)}
.pxtool .ring .track,.pxtool .breakdown .bar,.pxtool .scale span,.pxtool .pxscan-bar{background:#fbe7da;stroke:#fbe7da}
.pxtool .g-excellent,.pxtool .g-good{--g-bg:#ffe9d8;--g-ink:#b8520f;--ring:#fb8c45}
.pxtool .g-decent{--g-bg:#fff3e8;--g-ink:#b8520f;--ring:#ffb27d}
.pxtool .g-needs{--g-bg:#ffede0;--g-ink:#b8520f;--ring:#ffc9a3}
.pxtool .g-poor{--g-bg:#ffe2cc;--g-ink:#b8520f;--ring:#eed8ca}
.pxtool .scorecard .r i,.pxtool .pxscan-bar i,.pxtool .w-row i,.pxtool .scale span.on{background:#fb8c45}
.pxtool .scorecard .grade{background:#ffe9d8;color:#b8520f}
.pxtool .pxscan{background:#fff8f2;border-color:#fbe7da}
.pxtool .pxscan-list li.done b{background-color:#fb8c45}
.pxtool .tag.bad,.pxtool .tag.good,.pxtool .badge.live,.pxtool .badge.cat{color:#b8520f}
.pxtool .breakdown .bv.zero,.pxtool .gate .err,.pxtool .serp-r b{color:#b8520f}
.pxtool .scorecard,.pxtool .found{border-color:#fbe0cc}
.pxtool .scorecard,.pxtool .found,.pxtool .serp,.pxtool .order div{box-shadow:0 1px 2px rgba(58,42,33,.04),0 18px 40px -28px rgba(58,42,33,.22)}
.pxtool .tool{box-shadow:0 1px 2px rgba(58,42,33,.04),0 24px 48px -30px rgba(58,42,33,.25)}
.pxtool{--brand:#eb600e; --brand-hover:#d4560c;
  --volt:#eb600e; --brand-strong:#eb600e; --brand-deep:#eb600e; --blue:#eb600e;
  --ok:#eb600e; --mid:#f39a63; --bad:#f2d9c9;
  --navy:#fde9dc;
  --t-yellow:#fef3ec; --t-blue:#fde9dc; --t-mint:#fff8f4; --t-lilac:#fdf0e7; --t-rose:#fbdcc8;
  --line:#f8e6da; --line-2:#f1d3bf; --mist:#fff8f4;
  --btn:#eb600e; --btn-hover:#d4560c; --btn-ink:#ffffff;}
.pxtool a{color:#eb600e}
.pxtool :focus-visible{outline-color:#eb600e}
.pxtool .hero{background:linear-gradient(180deg,#fef1e8 0,#fff 460px)}
.pxtool .section.tint{background:#fff8f4}
.pxtool .btn-primary,.pxtool .btn-volt,.pxtool .d-btn,.pxtool .accent .btn-primary,.pxtool .final .btn-primary,.pxtool .gate .btn-primary{background:#eb600e;color:#fff}
.pxtool .btn-primary:hover,.pxtool .btn-volt:hover,.pxtool .accent .btn-primary:hover,.pxtool .final .btn-primary:hover,.pxtool .gate .btn-primary:hover,.pxtool .d-btn.is-pressed{background:#d4560c}
.pxtool .btn-ghost:hover,.pxtool .chip:hover{border-color:#eb600e}
.pxtool .btn-link{color:#eb600e}
.pxtool .accent,.pxtool .final,.pxtool .gate{background:#fef3ec;border-color:#f8e0d0}
.pxtool .accent-art,.pxtool .final-art{background:#fde9dc}
.pxtool .kpi.big .v,.pxtool .d-kpi.d-dark b{color:#eb600e}
.pxtool .kpi.big,.pxtool .d-kpi.d-dark{background:#fde9dc;border-color:#f8d6c0}
.pxtool .scan-list .t.g,.pxtool .order span,.pxtool ol.steps li.is-on::before{background:#eb600e;color:#fff}
.pxtool ol.steps li::before{background:#fde9dc;color:#eb600e}
.pxtool .msg.you{background:#fde9dc}
.pxtool .k-page,.pxtool .it-page{background:#eb600e;color:#fff}
.pxtool .k-blog,.pxtool .it-blog{background:#fbdcc8;color:var(--ink)}
.pxtool .k-link,.pxtool .it-link{box-shadow:inset 0 0 0 1.5px #eb600e}
.pxtool .rm-it.it-page.locked small{color:#fff}
.pxtool .rm-lock{color:#eb600e}
.pxtool .g-excellent,.pxtool .g-good,.pxtool .g-decent,.pxtool .g-needs,.pxtool .g-poor{--g-ink:#eb600e}
.pxtool .g-excellent,.pxtool .g-good{--g-bg:#fde9dc;--ring:#eb600e}
.pxtool .g-decent{--g-bg:#fef3ec;--ring:#f39a63}
.pxtool .g-needs{--ring:#f7b891}
.pxtool .scorecard .r i,.pxtool .pxscan-bar i,.pxtool .w-row i,.pxtool .scale span.on,.pxtool .bar i.full{background:#eb600e}
.pxtool .bar i.part{background:#f39a63}
.pxtool .scorecard .grade{background:#fde9dc;color:#eb600e}
.pxtool .pxscan-list li.done b{background-color:#eb600e}
.pxtool .tag.bad,.pxtool .tag.good,.pxtool .badge.live,.pxtool .badge.cat,.pxtool .breakdown .bv.zero,.pxtool .gate .err,.pxtool .serp-r b{color:#eb600e}
.pxtool .k-faq,.pxtool .it-faq{background:#fef0e6}
.pxtool .bx{max-width:1040px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 1px 2px rgba(58,42,33,.04),0 24px 48px -30px rgba(58,42,33,.22)}
.pxtool .bx-steps{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pxtool .bx-steps li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--mist);font-size:14px;font-weight:600;color:var(--muted);transition:background .3s,color .3s}
.pxtool .bx-steps b{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1.5px solid var(--line-2);font:800 13px/1 var(--font-head);color:var(--muted);transition:background .3s,border-color .3s,color .3s}
.pxtool .bx-steps li.on{background:#fde9dc;color:var(--ink)}
.pxtool .bx-steps li.on b{background:#eb600e;border-color:#eb600e;color:#fff}
.pxtool .bx-steps li.done{color:var(--ink-2)}
.pxtool .bx-steps li.done b{background:#fde9dc;border-color:#fde9dc;color:#eb600e}
.pxtool .bx-stage{display:grid;grid-template-columns:1fr 132px 1fr;gap:14px;align-items:start}
.pxtool .bx-panel{border:1px solid var(--line);border-radius:18px;padding:14px;min-height:430px;background:#fff;transition:border-color .4s,box-shadow .4s}
.pxtool .bx-panel.lit{border-color:#f4b58c;box-shadow:0 0 0 4px #fef1e8}
.pxtool .bx-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pxtool .bx-head strong{font:800 1.05rem/1.2 var(--font-head)}
.pxtool .bx-state{font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 10px;background:#fde9dc;color:#eb600e;transition:background .3s,color .3s}
.pxtool .bx-state.muted{background:var(--mist);color:var(--muted)}
.pxtool .bx-state.after{background:#eb600e;color:#fff}
.pxtool .bx-list{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.pxtool .bx-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:var(--mist);font-size:14px;border:1px solid transparent;transition:background .3s,border-color .3s,box-shadow .3s}
.pxtool .bx-list li span{display:block;min-width:0}
.pxtool .bx-list li small{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pxtool .bx-list li i{font-style:normal;flex:0 0 auto;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s}
.pxtool .bx-list li i.show{opacity:1;transform:none}
.pxtool .bx-list li i.have{background:#fff;color:var(--muted);border:1px solid var(--line-2)}
.pxtool .bx-list li i.miss{background:#eb600e;color:#fff}
.pxtool .bx-list li.scan{border-color:#eb600e;background:#fff}
.pxtool .bx-list li.match{background:#fff}
.pxtool .bx-list li.gap{background:#fef1e8;border-color:#f7c8a8}
.pxtool .bx-list li.new{background:#fff;border:1.5px dashed #eb600e}
.pxtool .bx-list li.new i{background:#fde9dc;color:#eb600e}
.pxtool .bx-in{animation:pxcg-bxin .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes pxcg-bxin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pxtool .bx-mid{display:grid;place-items:center;align-self:center}
.pxtool .bx-gauge{width:124px;height:124px;border-radius:50%;background:#fef1e8;display:grid;place-content:center;text-align:center;border:2px solid #fde0cc}
.pxtool .bx-gauge b{font:800 2.6rem/1 var(--font-head);color:#eb600e;font-variant-numeric:tabular-nums}
.pxtool .bx-gauge span{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.pxtool .bx-gauge.pop{animation:pxcg-bxpop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pxcg-bxpop{50%{transform:scale(1.08)}}
.pxtool .bx-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pxtool .bx-status{margin:0;font-size:14.5px;font-weight:600;color:var(--ink)}
.pxtool .bx-note{max-width:1040px;margin:10px auto 0;text-align:center;font-size:13px;color:var(--muted)}
@media (max-width:900px){
.pxtool .bx-steps{grid-template-columns:1fr 1fr}
.pxtool .bx-stage{grid-template-columns:1fr}
.pxtool .bx-mid{order:3}
.pxtool .bx-panel{min-height:0}
.pxtool #bxYou{order:4}
}
@media (max-width:600px){
.pxtool .bx{padding:14px}
.pxtool .bx-steps li{font-size:13px;padding:8px}
}
@media (prefers-reduced-motion:reduce){
.pxtool .bx-in,.pxtool .bx-gauge.pop{animation:none}
.pxtool .bx-list li i{transition:none}
}

/* ======================================================================
   Shared extra-section components.

   Appended to the design system that was derived from the Content Gap
   Checker stylesheet, which predates these pieces. Everything is scoped
   under .pxtool except the @keyframes, whose names are global by
   definition and are referenced by name from the section scripts.
   ====================================================================== */

/* the small orange eyebrow above an h1 or a section heading */
.pxtool .kicker{font-size:14px;font-weight:700;color:#eb600e;margin:14px 0 0}
.pxtool .section-head .kicker{margin:0 0 6px}

/* numbered timeline: four or five steps that light up in sequence */
.pxtool .xt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:14px;position:relative;counter-reset:xt}
.pxtool .xt::before{content:"";position:absolute;left:24px;right:24px;top:22px;height:4px;border-radius:99px;background:#f3e3d8}
.pxtool .xt::after{content:"";position:absolute;left:24px;top:22px;height:4px;border-radius:99px;background:#eb600e;width:0;transition:width 2.2s cubic-bezier(.4,0,.2,1)}
.pxtool .xt.go::after{width:calc(100% - 48px)}
.pxtool .xt li{position:relative;z-index:1;padding-top:58px;opacity:.35;transform:translateY(8px);transition:opacity .45s,transform .45s}
.pxtool .xt li.in{opacity:1;transform:none}
.pxtool .xt li::before{counter-increment:xt;content:counter(xt);position:absolute;top:4px;left:0;width:40px;height:40px;border-radius:50%;background:#fff;border:3px solid #f3e3d8;display:grid;place-items:center;font:800 15px/1 var(--font-head);color:var(--muted);transition:all .35s}
.pxtool .xt li.in::before{background:#eb600e;border-color:#eb600e;color:#fff}
.pxtool .xt b{display:block;font:800 1.05rem/1.25 var(--font-head);margin-bottom:4px}
.pxtool .xt span{font-size:14.5px;color:var(--ink-2);line-height:1.55}

/* card grid, optionally with a struck-through "before" and a good "after" */
.pxtool .xc{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:14px}
.pxtool .xc-card{background:#fff;border:1px solid #f8e6da;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s,transform .2s,box-shadow .2s}
.pxtool .xc-card:hover{border-color:#f4b58c;transform:translateY(-3px);box-shadow:0 18px 34px -26px rgba(58,42,33,.45)}
.pxtool .xc-ico{width:42px;height:42px;border-radius:12px;background:#fde9dc;color:#eb600e;display:grid;place-items:center}
.pxtool .xc-ico svg{width:22px;height:22px}
.pxtool .xc-card b{font:800 1.05rem/1.25 var(--font-head)}
.pxtool .xc-card>span{font-size:14.5px;color:var(--ink-2);line-height:1.55}
.pxtool .xc-bad,.pxtool .xc-good{font-size:13.5px;border-radius:10px;padding:8px 10px;line-height:1.45}
.pxtool .xc-bad{background:#f7f1ed;color:var(--muted);text-decoration:line-through;text-decoration-color:#e3b596}
.pxtool .xc-good{background:#fef1e8;color:var(--ink);border-left:3px solid #eb600e}

/* checklist that ticks itself off as it scrolls into view */
.pxtool .xk{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pxtool .xk li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #f8e6da;border-radius:14px;padding:12px 14px;font-size:15px;color:var(--ink-2)}
.pxtool .xk li::before{content:"";flex:0 0 22px;height:22px;border-radius:7px;border:2px solid #f1d3bf;background:#fff center/14px no-repeat;transition:all .3s}
.pxtool .xk li.in::before{background-color:#eb600e;border-color:#eb600e;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E")}
.pxtool .xk li b{color:var(--ink)}

/* plain white panel used to hold a demo inside a feature-art tile */
.pxtool .xpanel{width:min(100%,440px);background:#fff;border-radius:18px;padding:18px;border:1px solid rgba(58,42,33,.08)}

/* pill switch, used for yes/no options inside a tool */
.pxtool .rn-switch{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;cursor:pointer;position:relative}
.pxtool .rn-switch input{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer}
.pxtool .rn-knob{flex:0 0 44px;height:26px;border-radius:999px;background:#eadcd2;position:relative;transition:background .2s}
.pxtool .rn-knob::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(58,42,33,.25);transition:transform .2s}
.pxtool .rn-switch input:checked+.rn-knob,.pxtool .rn-knob.on{background:#eb600e}
.pxtool .rn-switch input:checked+.rn-knob::after,.pxtool .rn-knob.on::after{transform:translateX(18px)}
.pxtool .rn-switch input:focus-visible+.rn-knob{outline:3px solid #eb600e;outline-offset:2px}

/* ---------- typography polish: same words, easier to read ---------- */
.pxtool h1,.pxtool h2,.pxtool h3,.pxtool .h2-like{text-wrap:balance}
.pxtool p,.pxtool li{text-wrap:pretty}
.pxtool .feature-copy h2,.pxtool .feature-copy h3,.pxtool .card .h2-like,
.pxtool .duo .card h2,.pxtool .final-body h2,.pxtool .final-body .h2-like,.pxtool .method h2{
  font-size:clamp(1.55rem,2.4vw,2.05rem);line-height:1.18;letter-spacing:-.015em;margin-bottom:.6em}
.pxtool .section-head h2,.pxtool .section-head .h2-like{font-size:clamp(1.75rem,3vw,2.4rem);line-height:1.15}
.pxtool .feature-copy{max-width:600px}
.pxtool .feature-copy p,.pxtool .card p,.pxtool .final-body p,.pxtool .method p{
  font-size:1.0625rem;line-height:1.75;color:var(--ink-2);margin:0 0 1.15em;max-width:62ch}
.pxtool .section-head p,.pxtool .center-copy{font-size:1.0625rem;line-height:1.75;max-width:64ch;margin-left:auto;margin-right:auto}
.pxtool .feature-copy h2+p,.pxtool .feature-copy h3+p{font-size:1.14rem;line-height:1.7;color:var(--ink)}
/* keyword phrases get a soft highlight instead of heavy black bold */
.pxtool .feature-copy p strong,.pxtool .card p strong,.pxtool .section-head p strong,
.pxtool .center-copy p strong,.pxtool .final-body p strong{
  font-weight:600;color:#9a430b;background:#fef1e8;border-radius:6px;padding:.05em .35em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.pxtool .list-check li,.pxtool .list-x li,.pxtool ol.steps li{line-height:1.6}

/* ---------- keyframes (global by definition, referenced by name) ---------- */
@keyframes bxin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pxstep{to{opacity:1;transform:none}}
@keyframes dblink{50%{opacity:.25}}
@keyframes rnland{0%{transform:scale(.85)}60%{transform:scale(1.06)}100%{transform:none}}

@media (max-width:900px){
  .pxtool .xt,.pxtool .xc{grid-template-columns:1fr 1fr}
  .pxtool .xt::before,.pxtool .xt::after{display:none}
}
@media (max-width:600px){
  .pxtool .xt,.pxtool .xc{grid-template-columns:1fr}
  .pxtool .feature-copy h2,.pxtool .feature-copy h3,.pxtool .card .h2-like,
  .pxtool .duo .card h2,.pxtool .final-body h2{font-size:1.5rem}
  .pxtool .section-head h2,.pxtool .section-head .h2-like{font-size:1.65rem}
  .pxtool .feature-copy p,.pxtool .card p,.pxtool .final-body p,
  .pxtool .section-head p,.pxtool .center-copy{font-size:1rem;line-height:1.7}
  .pxtool .feature-copy h2+p,.pxtool .feature-copy h3+p{font-size:1.06rem}
}
@media (prefers-reduced-motion:reduce){
  .pxtool .xt li,.pxtool .xt::after,.pxtool .xt li::before,.pxtool .xk li::before{transition:none}
  .pxtool .xt li{opacity:1;transform:none}
}

/* =============================================================
   Long-form guide sections.

   Used where a tool page carries an article that used to render as one
   flat column of text. The words and headings are untouched; only the
   scaffolding changed, so each H3 now sits in its own section with the
   heading in one column and its paragraphs in the other.
   ============================================================= */
.pxtool .guide-lead{font-size:1.0625rem;line-height:1.75;color:var(--ink-2)}
.pxtool .guide-lead p{margin:0 0 1.15em}
.pxtool .guide-sec .feature{align-items:start;gap:48px;padding:40px 0}
.pxtool .guide-head{position:relative;padding-left:58px}
.pxtool .guide-head h3{font:800 clamp(1.45rem,2.4vw,1.95rem)/1.18 var(--font-head);
  letter-spacing:-.015em;color:var(--ink);margin:0}
.pxtool .guide-n{position:absolute;left:0;top:2px;width:42px;height:42px;border-radius:50%;
  background:#fde9dc;color:#eb600e;display:grid;place-items:center;
  font:800 16px/1 var(--font-head);font-variant-numeric:tabular-nums}
.pxtool .guide-copy{font-size:1.0625rem;line-height:1.75;color:var(--ink-2);max-width:62ch}
.pxtool .guide-copy p{margin:0 0 1.15em}
.pxtool .guide-copy p:last-child{margin-bottom:0}
.pxtool .guide-copy strong{font-weight:600;color:var(--ink)}
.pxtool .guide-copy a{color:#eb600e}
@media (max-width:900px){
  .pxtool .guide-sec .feature{gap:18px;padding:28px 0}
  .pxtool .guide-head{padding-left:52px}
  .pxtool .guide-n{width:36px;height:36px;font-size:14px}
}