/*
 * Parix.ai | Website Cost Calculator - page styles.
 *
 * Loaded after assets/css/tool-ds.css, which supplies the design system
 * under .pxtool. Everything here is scoped to .pxwc as well, so it cannot
 * reach any other tool page.
 *
 * The first half is a BRIDGE: the calculator's own .wcc-* markup is left
 * exactly as it is - same elements, same ids, same names - and only its
 * appearance is replaced. Nothing here can affect readInputs(), calculate(),
 * buildPdfDoc() or the arolax_website_cost_submit lead flow.
 *
 * @package Arolax Child
 */

/* ====================== bridge: the live calculator ====================== */

/* The wrapper is <main id="content-area">, and the theme styles that id.
   An id beats any two-class selector, so the page width has to be set with
   matching specificity rather than with !important. */
.pxwc#content-area{max-width:1120px;margin:0 auto;padding:0 24px}

/* Tinted bands read as full-width without breaking the centred column:
   the shadow paints past the edges and the clip lets it show. */
.pxwc > .section.tint{box-shadow:0 0 0 100vmax var(--mist);clip-path:inset(0 -100vmax)}
.pxwc > .section{padding:72px 0}
.pxwc > .section:first-of-type{padding-top:56px}

/* hero */
.pxwc .wcc-head{padding:30px 0 34px;text-align:center}
.pxwc .wcc-badge{display:inline-block;font-size:14px;font-weight:700;color:#eb600e;margin-bottom:6px}
.pxwc .wcc-head h1{font-family:var(--font-head);font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.06;
  font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:.1em 0 .3em}
.pxwc .wcc-head>p{font-size:1.12rem;color:var(--muted);max-width:660px;margin:0 auto}

/* two columns: the form, and a result panel that follows you down the page */
.pxwc .wcc-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
.pxwc form.wcc-card{display:grid;gap:12px;background:none;border:0;padding:0;box-shadow:none}

.pxwc .wcc-section{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 20px;min-width:0}
.pxwc .wcc-section h2{display:flex;align-items:center;gap:10px;font:800 1.12rem/1.3 var(--font-head);
  letter-spacing:-.01em;margin:0 0 4px;color:var(--ink)}
.pxwc .wcc-help{font-size:14px;color:var(--muted);margin:0 0 12px}

/* radio tiles */
.pxwc .wcc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pxwc .wcc-opt{position:relative;min-width:0}
.pxwc .wcc-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pxwc .wcc-opt label{display:block;height:100%;padding:12px 14px;border:1.5px solid var(--line-2);
  border-radius:14px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .2s,background .2s}
.pxwc .wcc-opt input:checked+label{border-color:#eb600e;background:#fef3ec}
.pxwc .wcc-opt input:focus-visible+label{outline:3px solid #eb600e;outline-offset:2px}

/* select + number + range */
.pxwc .wcc-select,.pxwc .wcc-num{width:100%;padding:11px 12px;border:1px solid var(--line-2);
  border-radius:10px;background:#fff;font:inherit;font-size:15px;color:var(--ink)}
.pxwc .wcc-select:focus,.pxwc .wcc-num:focus{outline:2px solid #eb600e;outline-offset:0;border-color:#eb600e}
.pxwc .wcc-pages-row{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
.pxwc .wcc-pages-row input[type=range]{width:100%;accent-color:#eb600e}

/* toggles */
.pxwc .wcc-toggle{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;
  cursor:pointer;position:relative}
.pxwc .wcc-toggle input{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer}
.pxwc .wcc-switch{flex:0 0 44px;height:26px;border-radius:999px;background:#eadcd2;position:relative;transition:background .2s}
.pxwc .wcc-switch::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}
.pxwc .wcc-toggle input:checked~.wcc-switch{background:#eb600e}
.pxwc .wcc-toggle input:checked~.wcc-switch::after{transform:translateX(18px)}
.pxwc .wcc-toggle input:focus-visible~.wcc-switch{outline:3px solid #eb600e;outline-offset:2px}
.pxwc .wcc-toggle-text{color:var(--ink-2);font-weight:600}

/* feature pills */
.pxwc .wcc-features{display:flex;flex-wrap:wrap;gap:8px}
.pxwc .wcc-check{position:relative;cursor:pointer}
.pxwc .wcc-check input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pxwc .wcc-feat-name{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border:1.5px solid var(--line-2);border-radius:999px;font-size:14px;font-weight:600;color:var(--ink);
  transition:border-color .2s,background .2s,color .2s}
.pxwc .wcc-feat-name::before{content:"+";font-weight:800;color:var(--muted)}
.pxwc .wcc-check input:checked+.wcc-feat-name{border-color:#eb600e;background:#eb600e;color:#fff}
.pxwc .wcc-check input:checked+.wcc-feat-name::before{content:"\2713";color:#fff}
.pxwc .wcc-check input:focus-visible+.wcc-feat-name{outline:3px solid #eb600e;outline-offset:2px}
.pxwc .wcc-feat-price{font-size:12.5px;font-weight:700;color:var(--muted);margin-left:6px}

/* the sticky result panel */
.pxwc .wcc-result{position:sticky;top:84px;background:#fff;border:1px solid var(--line);
  border-radius:22px;padding:22px;box-shadow:0 1px 2px rgba(58,42,33,.04),0 24px 48px -30px rgba(58,42,33,.28)}
.pxwc .wcc-est-label{font-size:14px;font-weight:700;color:var(--muted)}
.pxwc .wcc-est-range{font:800 clamp(1.9rem,3.4vw,2.5rem)/1.1 var(--font-head);letter-spacing:-.02em;
  color:#eb600e;margin:4px 0 6px;font-variant-numeric:tabular-nums}
.pxwc .wcc-timeline{font-size:15px;color:var(--ink-2);margin-bottom:14px}
.pxwc .wcc-timeline strong{color:var(--ink)}

.pxwc .wcc-breakdown{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 14px}
.pxwc .wcc-breakdown td{padding:6px 10px;border-radius:8px}
.pxwc .wcc-breakdown tr:nth-child(odd) td{background:var(--mist)}
.pxwc .wcc-breakdown td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.pxwc .wcc-row-sub td{color:var(--ink-2)}
.pxwc .wcc-row-total td{background:#fde9dc!important;font-weight:800;color:var(--ink)}
.pxwc .wcc-mut{color:var(--muted)}

.pxwc .wcc-scope h3{font:800 1rem/1.3 var(--font-head);margin:0 0 8px;color:var(--ink)}
.pxwc .wcc-scope ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:4px;font-size:14px;
  max-height:230px;overflow:auto}
.pxwc .wcc-scope li{padding:6px 10px;border-radius:8px;background:var(--mist);color:var(--ink-2)}

.pxwc .wcc-tip{font-size:13.5px;background:#fef3ec;border-radius:12px;padding:10px 12px;color:var(--ink-2);margin:0 0 10px}
.pxwc .wcc-disclaimer{font-size:13px;color:var(--muted);margin:0 0 12px}

.pxwc .wcc-cta-block{display:grid;gap:10px}
.pxwc .wcc-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}
.pxwc .wcc-btn-primary{background:#eb600e;color:#fff;width:100%}
.pxwc .wcc-btn-primary:hover{background:#d4560c}
.pxwc .wcc-btn-secondary{background:#fff;color:var(--ink);border:1px solid var(--line-2);flex:0 0 auto}
.pxwc .wcc-btn-secondary:hover{border-color:#eb600e}
.pxwc .wcc-btn:disabled{opacity:.55;cursor:not-allowed}
.pxwc .wcc-email-form{margin-top:2px;border-top:1px solid var(--line);padding-top:12px}
.pxwc .wcc-email-row{display:flex;gap:8px;flex-wrap:wrap}
.pxwc .wcc-email-row input{flex:1 1 180px;min-width:0;padding:10px 12px;border:1px solid var(--line-2);
  border-radius:10px;font:inherit;font-size:15px}
.pxwc .wcc-email-row input:focus{outline:2px solid #eb600e;outline-offset:0;border-color:#eb600e}
.pxwc .wcc-msg{font-size:13.5px;font-weight:600;min-height:1.2em;color:#b8520f}
.pxwc .wcc-foot-note{font-size:12.5px;color:var(--muted);margin:0}

/* The page copy is printed through the_content(), so it arrives as plain
   <ol>/<ul>. The design system deliberately strips list markers on its own
   components, so restore them here or the numbered steps read as prose. */
.pxwc .feature-copy ol,.pxwc .feature-copy ul{margin:0 0 1.15em;padding-left:1.35em;
  color:var(--ink-2);font-size:1.0625rem;line-height:1.75;max-width:62ch}
.pxwc .feature-copy ol{list-style:decimal}
.pxwc .feature-copy ul{list-style:disc}
.pxwc .feature-copy li{margin-bottom:.5em}
.pxwc .feature-copy li::marker{color:#eb600e;font-weight:700}
.pxwc .feature-copy li strong{color:var(--ink)}

/* ====================== new content sections ====================== */

/* which type of website */
.pxwc .wtypes{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.pxwc .wtype{display:flex;flex-direction:column;gap:8px;text-align:left;padding:18px;border:1px solid #f8e6da;
  border-radius:20px;background:#fff;font:inherit;color:var(--ink);cursor:pointer;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.pxwc .wtype:hover,.pxwc .wtype.on{border-color:#eb600e;transform:translateY(-3px);box-shadow:0 18px 34px -26px rgba(58,42,33,.45)}
.pxwc .wtype.on{background:#fef3ec}
.pxwc .wt-ico{width:42px;height:42px;border-radius:12px;background:#fde9dc;color:#eb600e;display:grid;place-items:center}
.pxwc .wt-ico svg{width:22px;height:22px}
.pxwc .wtype b{font:800 1.05rem/1.25 var(--font-head)}
.pxwc .wtype>span:not(.wt-ico):not(.wt-dots){font-size:14px;color:var(--ink-2)}
.pxwc .wt-dots{display:flex;gap:4px;margin-top:2px}
.pxwc .wt-dots i{width:16px;height:6px;border-radius:99px;background:#f3e3d8}
.pxwc .wt-dots i.on{background:#eb600e}
.pxwc .wtype em{font-style:normal;font-size:13.5px;font-weight:700;color:#eb600e;margin-top:auto;padding-top:4px}

/* who builds it: relative cost of one identical site */
.pxwc .drv-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pxwc .drv-btns button{border:1.5px solid var(--line-2);background:#fff;border-radius:999px;padding:8px 14px;
  font:600 14px/1.2 var(--font-body);color:var(--ink);cursor:pointer;transition:all .2s}
.pxwc .drv-btns button.on{background:#eb600e;border-color:#eb600e;color:#fff}
.pxwc .drv{width:min(100%,420px);background:#fff;border-radius:18px;padding:20px;border:1px solid rgba(58,42,33,.08)}
.pxwc .drv-lbl{margin:0 0 12px;font-size:13px;font-weight:700;color:var(--muted)}
.pxwc .drv-bars{display:grid;gap:8px}
.pxwc .drv-bars div{display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:center;font-size:13px;
  font-weight:600;color:var(--muted);transition:color .3s}
.pxwc .drv-bars i{height:14px;border-radius:99px;background:#f6e2d4;width:0;
  transition:width .8s cubic-bezier(.2,.8,.2,1),background .3s}
.pxwc .drv-bars div.on{color:var(--ink)}
.pxwc .drv-bars div.on i{background:#eb600e}
.pxwc .drv-note{margin-top:16px;padding:12px 14px;border-radius:12px;background:#fef3ec;display:grid;gap:2px}
.pxwc .drv-note b{font-size:15px}
.pxwc .drv-note span{font-size:14px;color:var(--ink-2)}

/* included / not included / methodology (existing copy, restyled) */
.pxwc .wcc-info{padding:0}
.pxwc .wcc-info-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pxwc .wcc-info-cols>div{border-radius:22px;padding:28px;border:1px solid var(--line);background:#fff}
.pxwc .wcc-info-cols>div:first-child{background:#fef3ec;border-color:#fbe0cc}
.pxwc .wcc-info-cols h2{font:800 clamp(1.4rem,2.4vw,1.8rem)/1.2 var(--font-head);margin:0 0 12px;color:var(--ink)}
.pxwc .wcc-info-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pxwc .wcc-info-cols li{padding-left:26px;position:relative;color:var(--ink-2)}
.pxwc .wcc-info-cols li::before{content:"";position:absolute;left:2px;top:.42em;width:13px;height:7px;
  border-left:2.5px solid #eb600e;border-bottom:2.5px solid #eb600e;transform:rotate(-45deg)}
.pxwc .wcc-x li::before,.pxwc .wcc-x li::after{content:"";position:absolute;left:4px;top:.72em;width:12px;
  height:2px;background:var(--muted);border:0;transform:rotate(45deg)}
.pxwc .wcc-x li::after{transform:rotate(-45deg)}
.pxwc .wcc-method{max-width:820px;margin:48px auto 0;text-align:center}
.pxwc .wcc-method h2{font:800 clamp(1.4rem,2.4vw,1.8rem)/1.2 var(--font-head);margin:0 0 10px}
.pxwc .wcc-method p{color:var(--ink-2);font-size:1.0625rem;line-height:1.75}
.pxwc .wcc-cta-bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;
  background:#fef3ec;border:1px solid #f8e0d0;border-radius:22px;padding:22px 26px;margin:28px 0 0;text-align:center}
.pxwc .wcc-cta-bar p{margin:0;font-weight:600;color:var(--ink-2)}
.pxwc .wcc-cta-bar a{font-weight:700;color:#eb600e;text-decoration:none}

/* how-to demo */
.pxwc .lead-copy{font-size:1.15rem;margin-bottom:40px!important}
.pxwc .mini{width:min(100%,380px);background:#fff;border-radius:18px;padding:18px;display:grid;gap:12px;
  border:1px solid rgba(58,42,33,.08)}
.pxwc .mini-row{display:flex;justify-content:space-between;font-size:14px;font-weight:600}
.pxwc .mini-row b{color:#eb600e;font-variant-numeric:tabular-nums}
.pxwc .mini-tags{display:flex;flex-wrap:wrap;gap:6px;min-height:64px;align-content:flex-start}
.pxwc .mini-tags span{font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:#eb600e;
  color:#fff;animation:bxin .35s ease}
.pxwc .mini-est{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:10px}
.pxwc .mini-est small{font-size:13px;font-weight:700;color:var(--muted)}
.pxwc .mini-est b{font:800 1.9rem/1 var(--font-head);color:#eb600e;font-variant-numeric:tabular-nums}
.pxwc .mini-bar{height:8px;background:#f6ebe3;border-radius:99px;overflow:hidden}
.pxwc .mini-bar i{display:block;height:100%;width:0;background:#eb600e;border-radius:99px;transition:width .6s ease}
.pxwc .mini .demo-toggle{justify-self:start}

/* three quotes against the healthy range */
.pxwc .quotes{width:min(100%,420px);background:#fff;border-radius:18px;padding:18px;display:grid;gap:10px;
  border:1px solid rgba(58,42,33,.08)}
.pxwc .q-title{margin:0;font-size:14px;color:var(--ink-2)}
.pxwc .q-title b{color:var(--ink)}
.pxwc .q-row{display:grid;grid-template-columns:62px 1fr 64px 96px;align-items:center;gap:8px;font-size:13px}
.pxwc .q-row span{font-weight:700}
.pxwc .q-track{position:relative;height:22px;background:var(--mist);border-radius:8px}
.pxwc .q-track::before{content:"";position:absolute;left:40%;width:20%;top:0;bottom:0;background:#fde9dc;
  border:1.5px dashed #eb600e;border-radius:6px}
.pxwc .q-track i{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:#f7b891;box-shadow:0 0 0 3px #fff;transition:left .9s cubic-bezier(.2,.8,.2,1),background .3s}
.pxwc .q-row.fair .q-track i{background:#eb600e}
.pxwc .q-row b{font-variant-numeric:tabular-nums;text-align:right}
.pxwc .q-key{display:flex;align-items:center;gap:8px;margin:2px 0 0;font-size:12.5px;color:var(--ink-2)}
.pxwc .q-key span{width:18px;height:12px;border-radius:4px;background:#fde9dc;border:1.5px dashed #eb600e}
.pxwc .q-row em{font-style:normal;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 8px;
  background:#f3ebe6;color:var(--muted);opacity:0;transition:opacity .3s;text-align:center}
.pxwc .q-row em.ok{background:#eb600e;color:#fff}
.pxwc .q-row.show em{opacity:1}
.pxwc .quotes .demo-toggle{justify-self:start}

/* costs that start after launch */
.pxwc .life{max-width:1080px;margin:0 auto}
.pxwc .life-line{position:relative;height:6px;border-radius:99px;background:#f3e3d8;margin:0 8px 46px;
  display:flex;justify-content:space-between}
.pxwc .life-line i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:#eb600e;
  transition:width 2.4s cubic-bezier(.4,0,.2,1)}
.pxwc .life-line span{position:relative;top:16px;font-size:12.5px;font-weight:700;color:var(--muted);transform:translateX(-50%)}
.pxwc .life-line span:first-of-type{transform:none}
.pxwc .life-line span:last-of-type{transform:translateX(-100%)}
.pxwc .life-line span::before{content:"";position:absolute;left:50%;top:-19px;width:12px;height:12px;
  margin-left:-6px;border-radius:50%;background:#fff;border:2.5px solid #eb600e}
.pxwc .life-line span:first-of-type::before{left:0;margin-left:0}
.pxwc .life-line span:last-of-type::before{left:auto;right:0;margin-left:0}
.pxwc .life-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.pxwc .life-items li{background:#fff;border:1px solid #f8e6da;border-radius:18px;padding:16px;display:flex;
  flex-direction:column;gap:4px;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s}
.pxwc .life-items li.in{opacity:1;transform:none}
.pxwc .li-ico{width:36px;height:36px;border-radius:10px;background:#fde9dc;color:#eb600e;display:grid;
  place-items:center;margin-bottom:4px}
.pxwc .li-ico svg{width:19px;height:19px}
.pxwc .life-items b{font:800 1.02rem/1.2 var(--font-head)}
.pxwc .life-items em{font-style:normal;font-size:13px;font-weight:800;color:#eb600e}
.pxwc .life-items span:last-child{font-size:13.5px;color:var(--ink-2)}

/* where the time goes */
.pxwc .gantt{display:grid;gap:9px}
.pxwc .gantt small{font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:4px}
.pxwc .g-row{display:grid;grid-template-columns:74px 1fr;gap:10px;align-items:center;font-size:13px;
  font-weight:700;color:var(--ink-2)}
.pxwc .g-row div{position:relative;height:16px;border-radius:6px;background:var(--mist)}
.pxwc .g-row i{position:absolute;top:0;bottom:0;left:var(--s);width:0;border-radius:6px;background:#f4b58c;
  transition:width .9s cubic-bezier(.2,.8,.2,1)}
.pxwc .g-row i.soft{background:repeating-linear-gradient(45deg,#fde0cc 0 6px,#fbd0b2 6px 12px)}
.pxwc .g-row i.hot{background:#eb600e}
.pxwc .gantt.go .g-row i{width:var(--w)}
.pxwc .g-note{margin:6px 0 0;font-size:13px;color:var(--ink-2);background:#fef3ec;border-radius:10px;padding:8px 10px}

/* reading a quote */
.pxwc .quote{width:min(100%,400px);background:#fff;border-radius:16px;padding:18px;
  box-shadow:0 24px 44px -30px rgba(58,42,33,.45);border:1px solid rgba(58,42,33,.08);display:grid;gap:6px}
.pxwc .qd-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #2b211b;
  padding-bottom:8px;margin-bottom:4px}
.pxwc .qd-head b{font:800 1.05rem/1 var(--font-head)}
.pxwc .qd-head small{font-size:12px;color:var(--muted)}
.pxwc .qd-line{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:6px 8px;
  border-radius:8px;transition:background .35s,color .35s}
.pxwc .qd-line b{color:#eb600e;font-size:13px}
.pxwc .qd-line.miss b{color:var(--muted);font-weight:700}
.pxwc .qd-line.miss.flag{background:#fef1e8;box-shadow:inset 3px 0 0 #eb600e}
.pxwc .qd-line.miss.flag b{color:#b8520f}
.pxwc .qd-flag{margin:6px 0 0;font-size:13.5px;font-weight:800;color:#fff;background:#eb600e;border-radius:10px;
  padding:8px 10px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.pxwc .qd-flag.in{opacity:1;transform:none}

/* ====================== responsive ====================== */
@media (max-width:1000px){
  .pxwc .wtypes{grid-template-columns:repeat(3,1fr)}
  .pxwc .life-items{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .pxwc .wcc-grid{grid-template-columns:1fr}
  .pxwc .wcc-result{position:static}
  .pxwc .wcc-info-cols{grid-template-columns:1fr}
}
@media (max-width:600px){
  .pxwc#content-area{padding:0 16px}
  .pxwc > .section{padding:52px 0}
  .pxwc .wcc-cards{grid-template-columns:1fr 1fr}
  .pxwc .wtypes,.pxwc .life-items{grid-template-columns:1fr 1fr}
  .pxwc .q-row{grid-template-columns:56px 1fr 58px}
  .pxwc .q-row em{grid-column:2/4;justify-self:start}
  .pxwc .drv-bars div{grid-template-columns:96px 1fr}
  .pxwc .wcc-pages-row{grid-template-columns:80px 1fr}
}
@media (prefers-reduced-motion:reduce){
  .pxwc .life-items li{opacity:1;transform:none;transition:none}
  .pxwc .life-line i,.pxwc .g-row i,.pxwc .drv-bars i,.pxwc .q-track i{transition:none}
  .pxwc .mini-tags span{animation:none}
}

/* =============================================================
   Methodology as a formula, the lead copy as a pull quote,
   numbered how-to cards, and an orange pages slider.
   Appended; nothing above is changed.
   ============================================================= */

/* the methodology block now holds a four-box formula, so it needs the room */
.pxwc .wcc-method.method{max-width:1000px}

.pxwc .formula{display:flex;align-items:stretch;justify-content:center;gap:10px;
  margin:8px 0 26px;flex-wrap:wrap}
.pxwc .fx{flex:1 1 150px;max-width:190px;background:#fff;border:1px solid #f8e6da;border-radius:18px;
  padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s}
.pxwc .fx.in{opacity:1;transform:none}
.pxwc .fx.hot{background:#eb600e;border-color:#eb600e;color:#fff}
.pxwc .fx-ico{width:42px;height:42px;border-radius:12px;background:#fde9dc;color:#eb600e;
  display:grid;place-items:center;margin-bottom:4px}
.pxwc .fx-ico svg{width:22px;height:22px}
.pxwc .fx.hot .fx-ico{background:rgba(255,255,255,.2);color:#fff}
.pxwc .fx b{font:800 1.05rem/1.2 var(--font-head)}
.pxwc .fx small{font-size:13px;color:var(--muted)}
.pxwc .fx.hot small{color:#ffe6d6}
.pxwc .formula .op{align-self:center;font:800 1.6rem/1 var(--font-head);font-style:normal;
  color:#eb600e;opacity:0;transition:opacity .3s}
.pxwc .formula .op.in{opacity:1}

.pxwc .method-note{position:relative;text-align:left;background:#fff;border:1px solid #f8e6da;
  border-left:4px solid #eb600e;border-radius:16px;padding:18px 22px}
.pxwc .mn-tag{display:inline-block;font-size:12.5px;font-weight:800;color:#b8520f;background:#fde9dc;
  border-radius:999px;padding:4px 10px;margin-bottom:8px}
.pxwc .method-note p{margin:0;max-width:none;font-size:1rem;line-height:1.75;color:var(--ink-2)}
.pxwc .method-cta-box{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:16px;background:#fef3ec;border-radius:16px;padding:16px 22px;text-align:left}
.pxwc .method-cta-box p{margin:0;font-weight:700;color:var(--ink)}

/* the lead paragraph, moved out of the copy column */
.pxwc .pull{position:relative;max-width:860px;margin:0 auto 48px;background:#fff;border:1px solid #f8e6da;
  border-radius:24px;padding:30px 34px 30px 84px;box-shadow:0 20px 40px -32px rgba(58,42,33,.35)}
.pxwc .pull-mark{position:absolute;left:24px;top:14px;font:800 5rem/1 Georgia,serif;color:#eb600e}
.pxwc .pull p{margin:0;font-size:1.15rem;line-height:1.75;color:var(--ink)}

/* numbered steps that survive the theme's list styles */
.pxwc ol.wc-steps{list-style:none!important;margin:18px 0 0!important;padding:0!important;
  counter-reset:wcs;display:grid;gap:10px}
.pxwc ol.wc-steps>li{position:relative;list-style:none!important;margin:0!important;
  padding:14px 16px 14px 60px!important;background:#fff;border:1px solid #f8e6da;border-radius:14px;
  line-height:1.55;transition:border-color .3s,box-shadow .3s}
.pxwc ol.wc-steps>li::marker{content:none}
.pxwc ol.wc-steps>li::before{counter-increment:wcs;content:counter(wcs);position:absolute;left:14px;
  top:50%;margin-top:-16px;width:32px;height:32px;border-radius:50%;background:#fde9dc;color:#eb600e;
  display:grid;place-items:center;font:800 14px/1 var(--font-head)}
.pxwc ol.wc-steps>li.is-on{border-color:#eb600e;box-shadow:0 10px 24px -18px rgba(235,96,14,.6)}
.pxwc ol.wc-steps>li.is-on::before{background:#eb600e;color:#fff}

/* pages: a visible label, and a slider that fills orange as it moves */
.pxwc .wcc-pages-row{grid-template-columns:auto 96px 1fr}
.pxwc .wcc-pages-label{font-weight:700;font-size:14px;color:var(--ink)}
.pxwc #pagesRange{-webkit-appearance:none;appearance:none;height:8px;border-radius:99px;
  background:linear-gradient(#eb600e,#eb600e) 0/var(--p,7%) 100% no-repeat #f3e3d8;outline-offset:4px}
.pxwc #pagesRange::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:#fff;border:3px solid #eb600e;box-shadow:0 2px 6px rgba(58,42,33,.25);cursor:pointer}
.pxwc #pagesRange::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;
  border:3px solid #eb600e;cursor:pointer}

@media (max-width:600px){
  .pxwc .pull{padding:26px 20px 22px}
  .pxwc .pull-mark{position:static;display:block;font-size:3.4rem;height:34px}
  .pxwc .formula .op{display:none}
  .pxwc .fx{max-width:none;flex-basis:40%}
  .pxwc .wcc-pages-row{grid-template-columns:auto 80px 1fr}
}
@media (prefers-reduced-motion:reduce){
  .pxwc .fx,.pxwc .formula .op{opacity:1;transform:none;transition:none}
}