/*
 * Parix.ai | ASO Keyword Planner - page styles.
 * Loads after tool-ds.css, scoped to .pxas. The .aso-* rules restyle the live
 * planner in place; its form, ids, scoring script and email capture are
 * untouched.
 */

/* ---------- hero ---------- */
.pxas .aso-head{text-align:center;max-width:760px;margin:0 auto}
.pxas .aso-badge{display:inline-block;font-size:14px;font-weight:700;color:#eb600e;margin:14px 0 0}
.pxas .aso-head h1{font:800 clamp(2.3rem,5vw,3.6rem)/1.05 var(--font-head);letter-spacing:-.02em;
  color:var(--ink);margin:.25em 0 .3em}
.pxas .aso-head p{font-size:1.15rem;color:var(--muted);max-width:680px;margin:0 auto}

/* ---------- the planner, restyled in place ---------- */
.pxas .aso-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;
  box-shadow:0 1px 2px rgba(58,42,33,.04),0 24px 48px -30px rgba(58,42,33,.28);text-align:left}
.pxas .aso-field{margin:0 0 14px;min-width:0}
.pxas .aso-field label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.pxas .aso-in,.pxas .aso-sel,.pxas .aso-ta{width:100%;padding:10px 12px;border:1px solid var(--line-2);
  border-radius:10px;background:#fff;font:inherit;font-size:15px;color:var(--ink)}
.pxas .aso-ta{resize:vertical;line-height:1.5;min-height:120px}
.pxas .aso-in:focus,.pxas .aso-sel:focus,.pxas .aso-ta:focus{outline:2px solid #eb600e;
  outline-offset:0;border-color:#eb600e}
.pxas .aso-cnt{font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.pxas .aso-empty{color:var(--muted);font-size:14px}
.pxas .aso-score{text-align:center;margin-bottom:8px}
.pxas .aso-score .n{font:800 52px/1 var(--font-head);color:#eb600e;font-variant-numeric:tabular-nums}
.pxas .aso-score .n small{font-size:20px;color:var(--muted)}
.pxas .aso-sec{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.pxas .aso-sec h3{font:800 1rem/1.25 var(--font-head);margin:0 0 6px}
.pxas .aso-density{font-size:14px;color:var(--ink-2)}
.pxas .aso-tips{margin:6px 0 0;padding-left:18px;font-size:14px;color:var(--ink-2)}
.pxas .aso-tips li{margin-bottom:4px}

/* ---------- how ASO works, funnel and keyword tabs ---------- */
.pxas .fun{display:grid;gap:10px}
.pxas .fun small{font-size:12.5px;font-weight:700;color:var(--muted)}
.pxas .fn-row{display:grid;gap:4px;font-size:13.5px;font-weight:700}
.pxas .fn-row i{display:block;height:26px;border-radius:8px;background:#eb600e;width:0;margin:0 auto;
  transition:width 1s cubic-bezier(.2,.8,.2,1)}
.pxas .fun.go .fn-row i{width:var(--w)}
.pxas .fn-row:nth-child(3) i{background:#f08a4a}
.pxas .fn-row:nth-child(4) i{background:#f4b58c}
.pxas .fun p{margin:4px 0 0;font-size:13px;color:var(--ink-2)}

.pxas .kwt{max-width:900px;margin:0 auto;background:#fff;border:1px solid #f8e6da;border-radius:24px;padding:20px}
.pxas .kwt-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.pxas .kwt-tabs button{border:1.5px solid var(--line-2);background:#fff;border-radius:999px;
  padding:8px 14px;font:700 14px/1 var(--font-body);cursor:pointer;color:var(--ink)}
.pxas .kwt-tabs button[aria-selected=true]{background:#eb600e;border-color:#eb600e;color:#fff}
.pxas .kwt-panels p{display:none;margin:0;flex-wrap:wrap;gap:8px;align-items:center}
.pxas .kwt-panels p.on{display:flex}
.pxas .kwt-panels p strong{width:100%;font-size:15px;color:var(--ink)}
.pxas .kwt-panels p span{font-size:14.5px;font-weight:600;border-radius:999px;padding:7px 13px;
  background:#fef1e8;color:#9a430b;animation:bxin .3s ease both}
.pxas .kwt-note{margin:16px 0 0;font-size:15px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:14px}

/* ---------- final CTA ---------- */
.pxas .cta-roll{background:#fff;border-radius:22px;padding:30px 24px;width:min(100%,300px);
  text-align:center;border:1px solid #fbe0cc;box-shadow:0 18px 40px -28px rgba(58,42,33,.3)}
.pxas .cta-roll small{display:block;font-size:13px;font-weight:700;color:var(--muted)}
.pxas .cta-roll b{display:block;font:800 clamp(2.4rem,6vw,5rem)/1.05 var(--font-head);color:#eb600e;
  font-variant-numeric:tabular-nums;margin:6px 0}
.pxas .cta-roll span{font-size:14px;color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  .pxas .fn-row i{transition:none}
  .pxas .kwt-panels p span{animation:none}
}

/* =============================================================
   The planner itself: form card left, live results card right.
   The markup already carried .aso-grid; these are the rules it was
   missing, which is why it was rendering as one flat column.
   ============================================================= */
.pxas .aso-grid{max-width:1160px;margin:28px auto 0;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;
  text-align:left;align-items:start}
.pxas .aso-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* the results card tracks the form as you scroll down it */
.pxas .aso-grid > .aso-card:last-child{position:sticky;top:84px;display:grid;gap:14px;align-content:start}

/* email capture, Turnstile and the consultation link all live inside the
   results card, so they read as one panel rather than loose page furniture */
.pxas .aso-emailbar{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:10px}
.pxas .aso-email-row{display:flex;gap:8px;flex-wrap:wrap}
.pxas .aso-email-row input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line-2);
  border-radius:10px;font:inherit;font-size:15px;color:var(--ink);background:#fff}
.pxas .aso-email-row input:focus{outline:2px solid #eb600e;outline-offset:0;border-color:#eb600e}
.pxas .aso-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:999px;border:0;cursor:pointer;background:#eb600e;color:#fff;
  font:600 14.5px/1.2 var(--font-body);transition:background .15s}
.pxas .aso-btn:hover{background:#d4560c}
.pxas .aso-msg{font-size:13.5px;font-weight:600;color:#eb600e;min-height:1.2em}
.pxas .aso-foot-note{font-size:12.5px;color:var(--muted);margin:0}

/* Cloudflare Turnstile sits in the same card; keep it from overflowing */
.pxas .aso-emailbar iframe,
.pxas .aso-emailbar .cf-turnstile{max-width:100%;margin:0}
.pxas .aso-emailbar .cf-turnstile > *{max-width:100%}

.pxas .aso-cta-bar{display:grid;gap:6px;background:#fef3ec;border-radius:14px;padding:12px 14px;
  margin-top:2px}
.pxas .aso-cta-bar p{margin:0;font-size:14px;font-weight:600;color:var(--ink-2)}
.pxas .aso-cta-bar a{font-size:14px;font-weight:700;color:#eb600e;text-decoration:none}
.pxas .aso-cta-bar a:hover{text-decoration:underline}

@media (max-width:900px){
  .pxas .aso-grid{grid-template-columns:1fr}
  .pxas .aso-grid > .aso-card:last-child{position:static}
}
@media (max-width:600px){
  .pxas .aso-row{grid-template-columns:1fr}
}

/* =============================================================
   Score ring and keyword-density meter inside the results card.
   Both are driven by custom properties the tool sets inline from
   its own numbers, so the scoring maths stays where it was.
   ============================================================= */
.pxas .aso-ring{width:172px;height:172px;margin:4px auto 0;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:conic-gradient(#eb600e calc(var(--p,0)*1%),#f6ece6 0)}
.pxas .aso-ring::after{content:"";position:absolute;inset:13px;background:#fff;border-radius:50%}
.pxas .aso-ring .n{position:relative;z-index:1;font:800 46px/1 var(--font-head)}
.pxas .aso-ring-cap{display:block;margin-top:8px;font-size:12.5px;font-weight:700;
  color:var(--muted);letter-spacing:.04em;text-transform:uppercase}

.pxas .aso-meter{position:relative;height:9px;border-radius:999px;background:#f2eae5;margin:10px 0 0}
.pxas .aso-meter i{position:absolute;top:0;bottom:0;left:16.7%;width:33.3%;
  background:#d8ecd6;border-radius:999px}
.pxas .aso-meter b{position:absolute;top:-4px;left:calc(var(--v,0)*1%);
  width:17px;height:17px;border-radius:50%;background:#eb600e;border:3px solid #fff;
  box-shadow:0 1px 5px rgba(58,42,33,.3);transform:translateX(-50%);
  transition:left .25s cubic-bezier(.2,.8,.2,1)}
.pxas .aso-meter-cap{display:flex;justify-content:space-between;margin-top:5px;
  font-size:11.5px;font-weight:700;color:var(--muted)}
.pxas .aso-meter-cap span:nth-child(2){color:#3e7a3a}

@media (prefers-reduced-motion:reduce){.pxas .aso-meter b{transition:none}}

/* the pass / warn / fail marks the scoring script prints before each line */
.pxas .aso-line{display:flex;gap:9px;align-items:flex-start;margin:0 0 5px}
.pxas .aso-ico{flex:0 0 auto;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;line-height:1;margin-top:2px}
.pxas .aso-ico.pass{background:#e3f1e1;color:#2f6b2b}
.pxas .aso-ico.warn{background:#fdeedd;color:#a4610c}
.pxas .aso-ico.fail{background:#fbe2e2;color:#a92f2f}
.pxas .aso-line > span:last-child{font-size:14px;line-height:1.5;color:var(--ink-2)}
.pxas .aso-disc{font-size:13px;color:var(--muted);line-height:1.55;margin-top:4px}