/*
 * 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 .pxfaq (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.
 */

.pxfaq{
  --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);
}
.pxfaq *{box-sizing:border-box}
.pxfaq img,.pxfaq svg{max-width:100%}
.pxfaq [hidden]{display:none!important}

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

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

.pxfaq .head{text-align:center;max-width:760px;margin:0 auto 44px}
.pxfaq .head p{color:var(--muted);font-size:1.05rem;margin:0}
.pxfaq .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 ---------- */
.pxfaq .hero{padding:26px 0 56px;text-align:center;
  background:linear-gradient(180deg,var(--mist) 0,#fff 420px)}
.pxfaq .crumbs{font-size:13.5px;color:var(--muted);display:flex;justify-content:center;
  gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pxfaq .crumbs a{color:var(--muted);text-decoration:none}
.pxfaq .crumbs a:hover{color:var(--ink);text-decoration:underline}
.pxfaq .hero h1{margin-top:.1em}
.pxfaq .hero .sub{font-size:1.1rem;color:var(--muted);max-width:660px;margin:0 auto}
.pxfaq .pills{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:20px 0 0;padding:0;list-style:none}
.pxfaq .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 ---------- */
.pxfaq .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}
.pxfaq .btn--b{background:var(--b);color:#fff}
.pxfaq .btn--b:hover{background:var(--bd)}
.pxfaq .btn--dark{background:#15100d;color:#fff}
.pxfaq .btn--dark:hover{background:#2e2620}
.pxfaq .btn--ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.pxfaq .btn--ghost:hover{border-color:var(--ink)}

/* ---------- sample chips under the tool ---------- */
.pxfaq .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)}
.pxfaq .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}
.pxfaq .chips button:hover{border-color:var(--b);color:var(--bd)}

/* ---------- split ---------- */
.pxfaq .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pxfaq .split--rev .art{order:-1}
.pxfaq .split+.split{margin-top:68px}
.pxfaq .copy p{color:var(--ink-2)}
.pxfaq .copy p strong{color:var(--ink)}
.pxfaq .art{background:var(--t-sun);border-radius:24px;padding:30px;display:grid;place-items:center}
.pxfaq .card{background:#fff;border:1px solid rgba(26,21,18,.08);border-radius:18px;padding:20px;width:100%}
.pxfaq .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 ---------- */
.pxfaq .steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:st}
.pxfaq .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}
.pxfaq .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 ---------- */
.pxfaq .vs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pxfaq .vs > div{border-radius:20px;padding:24px}
.pxfaq .vs .weak{background:var(--t-sand)}
.pxfaq .vs .strong{background:var(--t-sun);border:1.5px solid #f7c8a8}
.pxfaq .vs h3{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.pxfaq .vs .tag{font:700 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  border-radius:999px;padding:5px 10px}
.pxfaq .vs .weak .tag{background:#efe7e1;color:var(--muted)}
.pxfaq .vs .strong .tag{background:var(--b);color:#fff}
.pxfaq .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)}
.pxfaq .vs .why{font-size:13.5px;color:var(--muted);margin:12px 0 0}

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

/* ---------- count dial ---------- */
.pxfaq .dial{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pxfaq .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)}
.pxfaq .dial span.on{background:var(--b);border-color:var(--b);color:#fff}
.pxfaq .dialcap{text-align:center;font-size:13.5px;color:var(--muted);margin:14px 0 0}

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

/* ---------- honest limits ---------- */
.pxfaq .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}
.pxfaq .limits ul{margin:0;padding-left:20px;display:grid;gap:9px}
.pxfaq .limits li{color:var(--ink-2);font-size:15.5px;line-height:1.65}
.pxfaq .limits li strong{color:var(--ink)}

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

/* ---------- dark / orange banner ---------- */
.pxfaq .banner{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;overflow:hidden}
.pxfaq .banner__dark{background:#15100d;padding:40px 34px;display:grid;place-items:center}
.pxfaq .banner__b{background:var(--b);padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.pxfaq .banner__b h2{color:#fff}
.pxfaq .banner__b p{color:#fff;opacity:.95;font-size:1.02rem}
.pxfaq .banner__b a.inline{color:#fff;font-weight:700;text-underline-offset:3px}
.pxfaq .banner__b .btn{align-self:flex-start;margin-top:6px}
.pxfaq .qcard{background:#fff;border-radius:18px;padding:18px;width:100%;max-width:330px}
.pxfaq .qcard small{display:block;font:700 10.5px/1 var(--body);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.pxfaq .qcard .q{font:700 15px/1.4 var(--body);color:var(--ink);margin:0 0 6px}
.pxfaq .qcard .a{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0}
.pxfaq .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 ---------- */
@media (prefers-reduced-motion:no-preference){
  .pxfaq.js-on .rv{opacity:0;transform:translateY(18px);
    transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
  .pxfaq.js-on .rv.is-in{opacity:1;transform:none}
}

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

/* ---------------------------------------------------------------
   The generator itself.
   Its markup, stylesheet and script are untouched. The tool hangs its
   variables off .afaq-wrap, so re-pointing those tokens here recolours it to
   the reference palette and drops its old standalone page layout, without
   editing a line of the tool's own code.
   --------------------------------------------------------------- */
.pxfaq .afaq-wrap{
  --primary:#eb600e;
  --accent:#CF520F;
  --soft:#fef1ed;
  --bg:#ffffff;
  --card:#ffffff;
  --border:rgba(26,21,18,.08);
  --text:#1a1512;
  --muted:#6f655e;
  --radius:18px;
  --shadow:0 1px 2px rgba(26,21,18,.05),0 24px 48px -28px rgba(26,21,18,.28);
  --font:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  max-width:1060px;
  margin:28px auto 0;
  padding:0;
  color:#1a1512;
  text-align:left;
}
.pxfaq .afaq-wrap h2,.pxfaq .afaq-wrap h3{font-family:var(--head)}
.pxfaq .afaq-btn{border-radius:999px}
.pxfaq .afaq-card{box-shadow:var(--shadow)}

/* Form labels read as labels, not as accents: the tool used --primary for them,
   which now resolves to orange. The required marker stays orange. */
.pxfaq .afaq-label{color:var(--ink)}
.pxfaq .afaq-req{color:var(--b)}

/* The empty result panel carries a real sample, so the two columns balance
   before anything is generated — the same job the reference's panel does. */
.pxfaq .afaq-empty{display:flex;flex-direction:column;gap:14px;align-items:center;
  text-align:center;padding:22px 18px;background:var(--t-sun);border-radius:18px;border:0}
.pxfaq .afaq-empty__lead{margin:0;font-size:14.5px;color:var(--ink-2);max-width:330px;line-height:1.6}
.pxfaq .afaq-empty__foot{margin:0;font-size:12.5px;color:var(--muted)}
.pxfaq .afaq-empty .qcard{max-width:340px;text-align:left;
  box-shadow:0 1px 2px rgba(26,21,18,.05),0 18px 36px -26px rgba(26,21,18,.3)}

/* Three real steps; the fourth sentence is a caution, not a step. */
.pxfaq .steps--3{grid-template-columns:repeat(3,1fr)}
.pxfaq .stepnote{max-width:760px;margin:20px auto 0;text-align:center;font-size:15px;
  color:var(--ink-2);line-height:1.65}
.pxfaq .stepnote strong{color:var(--ink)}
@media (max-width:980px){.pxfaq .steps--3{grid-template-columns:1fr}}

/* shared email-capture component: orange within this page only */
.pxfaq .px-cap__btn{border-color:var(--b);color:var(--b)}
.pxfaq .px-cap__btn:hover{background:var(--b);color:#fff}
.pxfaq .px-cap__cta{background:var(--b)}
.pxfaq .px-cap__cta:hover{background:var(--bd)}
.pxfaq .px-cap label{color:var(--ink)}