/*
 * Parix.ai | shared tool-page kit.
 * Scoped to .pxkit and loaded only on registered tool templates.
 * Motion is opt-in: nothing is hidden unless the script adds .js-on.
 */
/*
 * Parix.ai | AI FAQ Generator — page styles.
 *
 * Modelled on the AI Prompt Checker reference: same tokens, same section
 * rhythm, same card treatment. Every selector sits under .pxkit (the <main>
 * wrapper) and every keyframe is namespaced, so the theme's header, footer and
 * the other tool pages cannot be touched. Enqueued for this template only.
 *
 * PT Serif and DM Sans are already loaded site-wide by the theme, so nothing
 * extra is requested here.
 */

.pxkit{
  --ink:#1a1512; --ink-2:#3d352f; --muted:#6f655e;
  --line:#ece6e1; --line-2:#d9d0c9;
  --paper:#fff; --mist:#f7f5f3;
  --b:#eb600e; --bd:#CF520F; --bdd:#b8470c;
  --t-sun:#fef1ed; --t-peach:#fde7e0; --t-mint:#fef6f4; --t-sand:#f6ece8; --t-rose:#fdddd2;
  --ok:#2f6b2b; --bad:#b5aaa2;
  --head:"PT Serif",Georgia,"Times New Roman",serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-family:var(--body);
  color:var(--ink);
}
.pxkit *{box-sizing:border-box}
.pxkit img,.pxkit svg{max-width:100%}
.pxkit [hidden]{display:none!important}

/* ---------- shell ---------- */
.pxkit .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.pxkit .sec{padding:80px 0}
.pxkit .sec--tint{background:var(--mist)}
.pxkit .sec--sun{background:var(--t-sun)}
.pxkit .sec--flush{padding-top:0}

.pxkit h1,.pxkit h2,.pxkit h3{font-family:var(--head);color:var(--ink);letter-spacing:-.02em;margin:0 0 .45em}
.pxkit h1{font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:1.06;font-weight:800}
.pxkit h2{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.16;font-weight:700}
.pxkit h3{font-size:1.18rem;line-height:1.28;font-weight:700}
.pxkit p{margin:0 0 1em;line-height:1.7}
.pxkit .lede{font-size:1.06rem;color:var(--muted);line-height:1.75}

.pxkit .head{text-align:center;max-width:760px;margin:0 auto 44px}
.pxkit .head p{color:var(--muted);font-size:1.05rem;margin:0}
.pxkit .eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--b);background:var(--t-sun);border-radius:999px;
  padding:5px 13px;margin:0 0 14px}

/* ---------- hero ---------- */
.pxkit .hero{padding:26px 0 56px;text-align:center;
  background:linear-gradient(180deg,var(--mist) 0,#fff 420px)}
.pxkit .crumbs{font-size:13.5px;color:var(--muted);display:flex;justify-content:center;
  gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pxkit .crumbs a{color:var(--muted);text-decoration:none}
.pxkit .crumbs a:hover{color:var(--ink);text-decoration:underline}
.pxkit .hero h1{margin-top:.1em}
.pxkit .hero .sub{font-size:1.1rem;color:var(--muted);max-width:660px;margin:0 auto}
.pxkit .pills{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:20px 0 0;padding:0;list-style:none}
.pxkit .pills li{font-size:13.5px;font-weight:500;border-radius:999px;padding:7px 16px;
  background:#fff;border:1px solid var(--line);color:var(--ink-2)}

/* ---------- buttons ---------- */
.pxkit .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  font:600 15px/1.2 var(--body);text-decoration:none;transition:background .15s,border-color .15s}
.pxkit .btn--b{background:var(--b);color:#fff}
.pxkit .btn--b:hover{background:var(--bd)}
.pxkit .btn--dark{background:#15100d;color:#fff}
.pxkit .btn--dark:hover{background:#2e2620}
.pxkit .btn--ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.pxkit .btn--ghost:hover{border-color:var(--ink)}

/* ---------- sample chips under the tool ---------- */
.pxkit .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;
  margin:20px auto 0;max-width:1060px;font-size:13.5px;color:var(--muted)}
.pxkit .chips button{border:1px solid var(--line-2);background:#fff;border-radius:999px;
  padding:7px 14px;font:500 13.5px/1.2 var(--body);color:var(--ink);cursor:pointer}
.pxkit .chips button:hover{border-color:var(--b);color:var(--bd)}

/* ---------- split ---------- */
.pxkit .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pxkit .split--rev .art{order:-1}
.pxkit .split+.split{margin-top:68px}
.pxkit .copy p{color:var(--ink-2)}
.pxkit .copy p strong{color:var(--ink)}
.pxkit .art{background:var(--t-sun);border-radius:24px;padding:30px;display:grid;place-items:center}
.pxkit .card{background:#fff;border:1px solid rgba(26,21,18,.08);border-radius:18px;padding:20px;width:100%}
.pxkit .mark{background:var(--t-sun);color:var(--bdd);border-radius:5px;padding:.05em .3em;
  font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- numbered steps ---------- */
.pxkit .steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:st}
.pxkit .steps li{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:20px;font-size:15px;color:var(--ink-2);line-height:1.6}
.pxkit .steps li::before{counter-increment:st;content:counter(st,decimal-leading-zero);
  display:block;font:700 2rem/1 var(--head);color:var(--t-rose);margin-bottom:10px}

/* ---------- weak / strong comparison ---------- */
.pxkit .vs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pxkit .vs > div{border-radius:20px;padding:24px}
.pxkit .vs .weak{background:var(--t-sand)}
.pxkit .vs .strong{background:var(--t-sun);border:1.5px solid #f7c8a8}
.pxkit .vs h3{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.pxkit .vs .tag{font:700 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  border-radius:999px;padding:5px 10px}
.pxkit .vs .weak .tag{background:#efe7e1;color:var(--muted)}
.pxkit .vs .strong .tag{background:var(--b);color:#fff}
.pxkit .vs .quote{display:block;margin:0;background:#fff;border-radius:14px;padding:14px 16px;
  font-size:15px;line-height:1.6;color:var(--ink-2)}
.pxkit .vs .why{font-size:13.5px;color:var(--muted);margin:12px 0 0}

/* ---------- schema preview ---------- */
.pxkit .code{background:#15100d;border-radius:16px;padding:16px 18px;overflow:auto;max-height:290px}
.pxkit .code pre{margin:0;font:12.5px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#f3e7df;white-space:pre}
.pxkit .code .k{color:#ffb083}
.pxkit .code .v{color:#cfe8cf}
.pxkit .codecap{font-size:12.5px;color:var(--muted);margin:10px 0 0;text-align:center}

/* ---------- count dial ---------- */
.pxkit .dial{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pxkit .dial span{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  font:700 1.5rem/1 var(--head);background:#fff;border:2px solid var(--line-2);color:var(--muted)}
.pxkit .dial span.on{background:var(--b);border-color:var(--b);color:#fff}
.pxkit .dialcap{text-align:center;font-size:13.5px;color:var(--muted);margin:14px 0 0}

/* ---------- stat row ---------- */
.pxkit .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.pxkit .stats div{border:1px solid var(--line);border-radius:18px;padding:26px 18px;
  text-align:center;background:#fff}
.pxkit .stats b{display:block;font:700 clamp(1.9rem,3vw,2.6rem)/1 var(--head);
  letter-spacing:-.03em;color:var(--ink);margin-bottom:8px}
.pxkit .stats span{font-size:13.5px;color:var(--muted);line-height:1.5}

/* ---------- honest limits ---------- */
.pxkit .limits{max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--b);border-radius:0 20px 20px 0;padding:26px 30px}
.pxkit .limits ul{margin:0;padding-left:20px;display:grid;gap:9px}
.pxkit .limits li{color:var(--ink-2);font-size:15.5px;line-height:1.65}
.pxkit .limits li strong{color:var(--ink)}

/* ---------- who ---------- */
.pxkit .who{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pxkit .who div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.pxkit .who b{display:block;font:700 1.05rem/1.3 var(--head);margin-bottom:5px}
.pxkit .who span{font-size:14.5px;color:var(--muted);line-height:1.55}

/* ---------- dark / orange banner ---------- */
.pxkit .banner{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;overflow:hidden}
.pxkit .banner__dark{background:#15100d;padding:40px 34px;display:grid;place-items:center}
.pxkit .banner__b{background:var(--b);padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.pxkit .banner__b h2{color:#fff}
.pxkit .banner__b p{color:#fff;opacity:.95;font-size:1.02rem}
.pxkit .banner__b a.inline{color:#fff;font-weight:700;text-underline-offset:3px}
.pxkit .banner__b .btn{align-self:flex-start;margin-top:6px}
.pxkit .qcard{background:#fff;border-radius:18px;padding:18px;width:100%;max-width:330px}
.pxkit .qcard small{display:block;font:700 10.5px/1 var(--body);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.pxkit .qcard .q{font:700 15px/1.4 var(--body);color:var(--ink);margin:0 0 6px}
.pxkit .qcard .a{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0}
.pxkit .qcard .meta{display:flex;justify-content:space-between;border-top:1px solid var(--line);
  margin-top:14px;padding-top:10px;font-size:12px;color:var(--muted)}

/* reveal lives in the motion block at the end, gated on .js-on */
/* ---------- responsive ---------- */
@media (max-width:980px){
  .pxkit .steps{grid-template-columns:1fr 1fr}
  .pxkit .stats{grid-template-columns:1fr 1fr}
  .pxkit .who{grid-template-columns:1fr}
}
@media (max-width:860px){
  .pxkit .split,.pxkit .banner,.pxkit .vs{grid-template-columns:1fr;gap:26px}
  .pxkit .split--rev .art{order:0}
  .pxkit .banner{gap:0}
  .pxkit .banner__b{padding:32px 24px}
  .pxkit .sec{padding:60px 0}
  .pxkit .split+.split{margin-top:44px}
}
@media (max-width:600px){
  .pxkit .wrap{padding:0 16px}
  .pxkit .steps{grid-template-columns:1fr}
  .pxkit .stats{grid-template-columns:1fr 1fr}
  .pxkit .limits{padding:22px 20px}
  .pxkit .dial span{width:62px;height:62px;font-size:1.25rem}
}


/* =============================================================
   Motion.

   Fail-safe by design: nothing is hidden until the script has run and added
   .js-on to the wrapper. If the JS never loads, or throws, or the browser
   blocks it, every heading and card is simply visible. This is the opposite
   of the usual pattern, where CSS hides content and JS reveals it — that is
   what produces half-drawn headings when anything goes wrong.

   Everything also collapses to "just show it" under prefers-reduced-motion.
   Only transform and opacity are animated, so there is no layout shift and
   nothing forces a reflow while scrolling.
   ============================================================= */

@media (prefers-reduced-motion: no-preference) {

  .pxkit.js-on .rv{
    opacity:0;
    transform:translate3d(0,18px,0);
    transition:opacity .55s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1);
    will-change:opacity,transform;
  }
  .pxkit.js-on .rv.is-in{opacity:1;transform:none;will-change:auto}

  /* a short stagger inside a group, capped so nothing arrives late */
  .pxkit.js-on .rv[data-d="1"]{transition-delay:.06s}
  .pxkit.js-on .rv[data-d="2"]{transition-delay:.12s}
  .pxkit.js-on .rv[data-d="3"]{transition-delay:.18s}

  /* bars fill once their card is on screen */
  .pxkit.js-on .bar > i{width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
  .pxkit.js-on .bar.is-in > i{width:var(--w,0%)}

  /* the dial turns to its default */
  .pxkit.js-on .dial span{transform:scale(.94);transition:transform .45s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s,color .3s}
  .pxkit.js-on .dial.is-in span{transform:none}

  /* hover lift on cards and grid links */
  .pxkit .card,.pxkit .who div,.pxkit .steps li,.pxkit .stats div{
    transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s}
  .pxkit .who div:hover,.pxkit .steps li:hover,.pxkit .stats div:hover{
    transform:translateY(-3px);border-color:#f4b58c;
    box-shadow:0 16px 30px -24px rgba(26,21,18,.45)}

  .pxkit .btn{transition:background .18s,border-color .18s,transform .18s}
  .pxkit .btn:hover{transform:translateY(-1px)}
  .pxkit .btn:active{transform:translateY(0)}

  .pxkit .chips button{transition:border-color .18s,color .18s,background .18s,transform .18s}
  .pxkit .chips button:hover{transform:translateY(-1px)}
}

/* Counters keep a stable width while they animate, so the row cannot jump. */
.pxkit .stats b{font-variant-numeric:tabular-nums}

/* Live panel: a quiet pulse when the sample result refreshes as you type. */
@media (prefers-reduced-motion: no-preference){
  .pxkit.js-on .live-ping{animation:pxkit-ping .5s ease}
}
@keyframes pxkit-ping{
  0%{opacity:.45;transform:translate3d(0,4px,0)}
  100%{opacity:1;transform:none}
}

.pxkit .livebadge{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pxkit .livebadge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--b)}
@media (prefers-reduced-motion: no-preference){
  .pxkit.js-on .livebadge::before{animation:pxkit-blink 1.6s ease-in-out infinite}
}
@keyframes pxkit-blink{50%{opacity:.25}}

/* The shared email-capture component ships hardcoded navy (#0D1876 / #091259)
   and is used by tools across the site, so it is not edited. These overrides
   are scoped to the rebuilt wrappers only. */
.pxkit .px-cap__btn,.pxfaq .px-cap__btn{border-color:#eb600e;color:#eb600e}
.pxkit .px-cap__btn:hover,.pxfaq .px-cap__btn:hover{background:#eb600e;color:#fff}
.pxkit .px-cap__cta,.pxfaq .px-cap__cta{background:#eb600e}
.pxkit .px-cap__cta:hover,.pxfaq .px-cap__cta:hover{background:#CF520F}
.pxkit .px-cap label,.pxfaq .px-cap label{color:#1a1512}

/* ==========================================================================
   Article sections (.pxart)

   The page's own article, re-laid-out. Not one word or heading was changed:
   these are wrapping styles only, built from the same tokens as the rest of
   the kit so the article reads as part of the page rather than a text dump
   bolted underneath it.
   ========================================================================== */
.pxkit .pxart h2{font-size:clamp(1.5rem,2.5vw,2.1rem);line-height:1.18;margin:0}
.pxkit .pxart p{color:var(--ink-2);font-size:1.02rem;line-height:1.78;margin:0 0 1.05em}
.pxkit .pxart p:last-child{margin-bottom:0}
.pxkit .pxart strong{color:var(--ink);font-weight:700}
.pxkit .pxart a{color:var(--bdd);text-decoration:none;
  background:linear-gradient(var(--t-peach),var(--t-peach)) 0 88%/100% 2px no-repeat;
  padding-bottom:1px;transition:background-size .25s,color .2s}
.pxkit .pxart a:hover{color:var(--b);background-size:100% 100%;border-radius:4px}

.pxkit .pxart-head{max-width:820px;margin:0 auto 40px;text-align:center}
.pxkit .pxart-head--big{margin-bottom:26px}
.pxkit .pxart-head--big h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
.pxkit .pxart-leadwrap{max-width:760px;margin:0 auto;text-align:center}
.pxkit .pxart-lead{font-size:1.12rem;color:var(--ink-2)}

/* --- two columns: copy + a decorative visual ----------------------------- */
.pxkit .pxart-split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.pxkit .pxart-split--flip{grid-template-columns:.95fr 1.05fr}
.pxkit .pxart-copy{max-width:36em}

.pxkit .pxart-art{display:grid;place-items:center}
.pxkit .pxart-viz{width:100%;max-width:360px;aspect-ratio:1/1;border-radius:22px;
  background:linear-gradient(160deg,var(--t-mint),var(--t-sun));
  border:1px solid var(--line);display:grid;place-items:center;gap:14px;
  box-shadow:0 1px 2px rgba(26,21,18,.05),0 30px 60px -38px rgba(26,21,18,.4)}
.pxkit .pxart-viz--bars{grid-auto-rows:min-content;align-content:center;padding:0 48px}
.pxkit .pxart-viz--bars i{display:block;height:12px;border-radius:999px;background:var(--b);opacity:.9}
.pxkit .pxart-viz--bars i:nth-child(1){width:92%}
.pxkit .pxart-viz--bars i:nth-child(2){width:70%;opacity:.7}
.pxkit .pxart-viz--bars i:nth-child(3){width:52%;opacity:.5}
.pxkit .pxart-viz--bars i:nth-child(4){width:34%;opacity:.35}
.pxkit .pxart-viz--ring span{display:block;width:172px;height:172px;border-radius:50%;
  background:conic-gradient(var(--b) 0 72%,var(--t-peach) 72% 100%);
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 57%);
  mask:radial-gradient(circle,transparent 56%,#000 57%)}
.pxkit .pxart-viz--flow{grid-auto-flow:row;align-content:center}
.pxkit .pxart-viz--flow i{display:block;width:150px;height:38px;border-radius:12px;
  background:var(--paper);border:1px solid var(--line-2);position:relative}
.pxkit .pxart-viz--flow i+i::before{content:"";position:absolute;left:50%;top:-16px;
  width:2px;height:14px;background:var(--b);opacity:.55}
.pxkit .pxart-viz--flow i:nth-child(2){background:var(--b);border-color:var(--b)}
.pxkit .pxart-viz--grid{grid-template-columns:repeat(3,1fr);gap:12px;padding:56px}
.pxkit .pxart-viz--grid i{display:block;aspect-ratio:1/1;border-radius:10px;background:var(--paper);
  border:1px solid var(--line-2)}
.pxkit .pxart-viz--grid i:nth-child(3n+1){background:var(--b);border-color:var(--b);opacity:.9}
.pxkit .pxart-viz--grid i:nth-child(5){background:var(--t-peach);border-color:var(--t-peach)}

/* --- card grids ----------------------------------------------------------- */
.pxkit .pxart-duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.pxkit .pxart-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.pxkit .pxart-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:30px 30px 32px;box-shadow:0 1px 2px rgba(26,21,18,.04);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s}
.pxkit .pxart-card:hover{transform:translateY(-4px);border-color:var(--line-2);
  box-shadow:0 1px 2px rgba(26,21,18,.05),0 26px 50px -30px rgba(26,21,18,.38)}
.pxkit .pxart-card::before{content:"";display:block;width:34px;height:3px;border-radius:999px;
  background:var(--b);margin-bottom:20px}
.pxkit .sec--tint .pxart-card{background:var(--paper)}

/* --- numbered steps ------------------------------------------------------- */
.pxkit .pxart-intro{max-width:760px;margin:0 auto 34px;text-align:center}
.pxkit .pxart-intro p{font-size:1.06rem}
.pxkit .pxart-steps{list-style:none;margin:0;padding:0;counter-reset:pxart;
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.pxkit .pxart-step{counter-increment:pxart;background:var(--paper);border:1px solid var(--line);
  border-radius:18px;padding:28px 28px 30px;display:grid;grid-template-columns:auto 1fr;gap:18px;
  align-items:start;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s}
.pxkit .pxart-step:hover{transform:translateY(-4px);
  box-shadow:0 1px 2px rgba(26,21,18,.05),0 26px 50px -30px rgba(26,21,18,.38)}
.pxkit .pxart-step__n{width:40px;height:40px;border-radius:12px;background:var(--t-sun);
  display:grid;place-items:center;font:700 15px/1 var(--body);color:var(--bdd)}
.pxkit .pxart-step__n::before{content:counter(pxart,decimal-leading-zero)}
.pxkit .pxart-step__b b{display:block;font:700 1.02rem/1.4 var(--body);color:var(--ink);margin-bottom:6px}
.pxkit .pxart-step__b span{display:block;color:var(--ink-2);font-size:.98rem;line-height:1.7}
.pxkit .pxart-note{max-width:820px;margin:32px auto 0;text-align:center;color:var(--muted);
  font-size:1rem;line-height:1.75}

/* --- highlight box -------------------------------------------------------- */
.pxkit .pxart-quote{max-width:900px;margin:0 auto;padding:38px 42px;border-radius:20px;
  background:linear-gradient(150deg,var(--t-sun),var(--t-mint));border:1px solid var(--t-peach);
  position:relative}
.pxkit .pxart-quote::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:4px;
  border-radius:999px;background:var(--b)}
.pxkit .pxart-quote p{font-size:1.08rem;color:var(--ink)}

/* --- key-point callout ---------------------------------------------------- */
.pxkit .pxart-callout{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;
  gap:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--paper);
  box-shadow:0 1px 2px rgba(26,21,18,.05),0 30px 60px -40px rgba(26,21,18,.35)}
.pxkit .pxart-callout__h{background:linear-gradient(160deg,var(--t-sun),var(--t-peach));
  padding:38px 34px;display:grid;align-content:center}
.pxkit .pxart-callout__h h2{font-size:clamp(1.35rem,2vw,1.8rem)}
.pxkit .pxart-callout__b{padding:38px 36px}

/* --- related tools -------------------------------------------------------- */
.pxkit .pxart-tools{max-width:900px;margin:0 auto;padding:34px 38px;border-radius:20px;
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(26,21,18,.04)}
.pxkit .pxart-tools p{font-size:1.04rem}
.pxkit .pxart-tools a{background:var(--t-sun);border-radius:8px;padding:2px 8px;
  box-shadow:inset 0 0 0 1px var(--t-peach);font-weight:600;white-space:nowrap}
.pxkit .pxart-tools a:hover{background:var(--b);color:#fff;box-shadow:inset 0 0 0 1px var(--b)}

/* --- single panel --------------------------------------------------------- */
.pxkit .pxart-one{max-width:820px;margin:0 auto;padding:34px 38px;border-radius:20px;
  background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--b)}

/* --- closing band --------------------------------------------------------- */
.pxkit .pxart-close{max-width:900px;margin:0 auto;text-align:center;padding:52px 46px;
  border-radius:24px;background:linear-gradient(160deg,var(--t-sun),var(--t-rose));
  border:1px solid var(--t-peach)}
.pxkit .pxart-close h2{margin-bottom:.5em}
.pxkit .pxart-close p{color:var(--ink-2);font-size:1.05rem}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:980px){
  .pxkit .pxart-split,.pxkit .pxart-split--flip{grid-template-columns:1fr;gap:34px}
  .pxkit .pxart-split--flip .pxart-art{order:2}
  .pxkit .pxart-trio{grid-template-columns:1fr}
  .pxkit .pxart-callout{grid-template-columns:1fr}
}
@media (max-width:760px){
  .pxkit .pxart{padding:56px 0}
  .pxkit .pxart-duo,.pxkit .pxart-steps{grid-template-columns:1fr}
  .pxkit .pxart-quote{padding:28px 24px}
  .pxkit .pxart-tools,.pxkit .pxart-one{padding:26px 22px}
  .pxkit .pxart-close{padding:38px 24px}
  .pxkit .pxart-callout__h,.pxkit .pxart-callout__b{padding:28px 24px}
  .pxkit .pxart-viz{max-width:280px}
  .pxkit .pxart-tools a{white-space:normal}
}