/*
 * Parix.ai | Manual vs Automated Cost Comparison - page styles.
 * Built from the supplied design document. Every selector is scoped to
 * .pxmva (the <main> wrapper) and every keyframe name is namespaced, so the
 * theme's header and footer are untouched. Loads on this template only.
 */
.pxmva{
  --ink:#1c1714; --ink-2:#4a4039; --muted:#7a6e66; --line:#f1e4da; --line-2:#e3d2c5;
  --paper:#fff; --cream:#fff8f3; --peach:#fdeadf; --peach-2:#fbd9c6;
  --orange:#eb600e; --orange-d:#c94f08; --orange-t:#b8520f;
  --dark:#1e1916;
  --font-head:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.pxmva *{box-sizing:border-box}
.pxmva{margin:0;font-family:var(--font-body);font-size:16.5px;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
.pxmva a{color:var(--orange-t)}
.pxmva strong{font-weight:700}
.pxmva img,.pxmva svg{max-width:100%}
.pxmva :focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}
.pxmva [hidden]{display:none!important}
.pxmva .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}
.pxmva h1,.pxmva h2,.pxmva h3{font-family:var(--font-head);font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:0 0 .45em}
.pxmva h1{font-size:clamp(2.4rem,5.4vw,3.7rem);line-height:1.04}
.pxmva h2{font-size:clamp(1.75rem,3.2vw,2.4rem);line-height:1.12}
.pxmva h3{font-size:1.2rem;line-height:1.25}
.pxmva .h2-like{font-size:clamp(1.6rem,2.8vw,2.15rem);line-height:1.15}
.pxmva p{margin:0 0 1em}
.pxmva .container{max-width:1120px;margin:0 auto;padding:0 24px}
.pxmva .narrow{max-width:760px;margin:0 auto;text-align:center}
.pxmva .narrow p{color:var(--ink-2)}
.pxmva .kicker{display:inline-block;font-size:12.5px;font-weight:700;color:var(--orange-t);background:var(--peach);border-radius:999px;padding:4px 12px;margin:0 0 12px}
.pxmva .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:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,transform .15s}
.pxmva .btn-orange{background:var(--orange);color:#fff}
.pxmva .btn-orange:hover{background:var(--orange-d)}
.pxmva .btn-dark{background:var(--dark);color:#fff}
.pxmva .btn-dark:hover{background:#3a312b}
.pxmva .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.pxmva .btn-ghost:hover{border-color:var(--ink)}
.pxmva .btn-sm{padding:8px 15px;font-size:14px}
.pxmva .btn:disabled{opacity:.4;cursor:not-allowed}
.pxmva .hero{padding:30px 0 56px;text-align:center;background:linear-gradient(180deg,var(--cream) 0,#fff 460px)}
.pxmva .crumbs{font-size:13.5px;color:var(--muted);display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pxmva .crumbs a{color:var(--muted);text-decoration:none}
.pxmva .crumbs a:hover{color:var(--ink);text-decoration:underline}
.pxmva .hero .sub{font-size:1.1rem;color:var(--ink-2);max-width:640px;margin:0 auto}
.pxmva .pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.pxmva .pills li{font-size:13.5px;font-weight:600;border-radius:999px;padding:5px 14px;background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.pxmva .tool{max-width:1060px;margin:30px auto 0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);text-align:left;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 1px 2px rgba(28,23,20,.04),0 30px 60px -36px rgba(120,60,20,.35)}
.pxmva .tool-left{padding:24px;border-right:1px solid var(--line);min-width:0}
.pxmva .tool-right{padding:24px;background:var(--cream);min-width:0;display:flex;flex-direction:column}
.pxmva .field{margin-bottom:14px}
.pxmva .field label,.pxmva .field .lbl{display:block;font-weight:700;font-size:14.5px;margin-bottom:6px}
.pxmva .field label em{color:var(--orange);font-style:normal}
.pxmva .field input,.pxmva .field select,.pxmva .field textarea{width:100%;padding:11px 14px;border:1px solid var(--line-2);border-radius:12px;font:15.5px/1.4 var(--font-body);color:var(--ink);background:#fffdfb}
.pxmva .field textarea{min-height:78px;resize:vertical}
.pxmva .field input:focus,.pxmva .field select:focus,.pxmva .field textarea:focus{outline:2px solid var(--orange);outline-offset:0;border-color:var(--orange);background:#fff}
.pxmva .field .hint{font-size:13px;color:var(--muted);margin-top:4px}
.pxmva .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pxmva .seg{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:#fffdfb}
.pxmva .seg label{margin:0;position:relative;cursor:pointer}
.pxmva .seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pxmva .seg label{display:flex}
.pxmva .seg span{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;padding:10px 4px;font-size:13.5px;font-weight:600;color:var(--ink-2);border-left:1px solid var(--line);transition:background .15s,color .15s}
.pxmva .seg label:first-child span{border-left:0}
.pxmva .seg input:checked+span{background:var(--orange);color:#fff}
.pxmva .seg input:focus-visible+span{outline:3px solid var(--orange);outline-offset:-3px}
.pxmva .err{color:#b3261e;font-size:14px;font-weight:600;margin:0 0 10px}
.pxmva .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pxmva .link-btn{background:none;border:0;color:var(--orange-t);font:600 14.5px/1 var(--font-body);cursor:pointer;padding:10px 4px;text-decoration:underline;text-underline-offset:3px}
.pxmva .tips{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.pxmva .tips h2{font:700 15px/1.3 var(--font-body);letter-spacing:0;margin:0 0 10px}
.pxmva .tips-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;list-style:none}
.pxmva .tips-grid li{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.pxmva .tips-grid b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px}
.pxmva .ready{text-align:center;padding:10px 6px}
.pxmva .ready h3{font-size:1.2rem;margin-bottom:6px}
.pxmva .ready p{font-size:14px;color:var(--muted);max-width:320px;margin:0 auto 18px}
.pxmva .sample{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;text-align:left;max-width:360px;margin:0 auto}
.pxmva .sample small{display:inline-block;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:2px 8px;margin-bottom:10px}
.pxmva .sample .ttl{font:700 1.05rem/1.2 var(--font-head);margin:0 0 2px}
.pxmva .sample .meta{font-size:12.5px;color:var(--muted);margin:0 0 12px}
.pxmva .srow{display:grid;grid-template-columns:110px 1fr 18px;gap:10px;align-items:center;font-size:13px;color:var(--ink-2);padding:5px 0}
.pxmva .srow i{height:7px;border-radius:9px;background:var(--peach);position:relative;overflow:hidden}
.pxmva .srow i::after{content:"";position:absolute;inset:0;width:var(--w,0%);background:var(--orange);border-radius:9px;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.pxmva .srow b{width:18px;height:18px;border-radius:50%;background:var(--peach);display:grid;place-items:center;color:#fff;font-size:11px;transition:background .3s}
.pxmva .srow.done b{background:var(--orange)}
.pxmva .ready .foot{font-size:12.5px;color:var(--muted);margin:14px 0 0}
.pxmva .out-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.pxmva .out-head h2{font:700 1.25rem/1.2 var(--font-head);margin:0}
.pxmva .doc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;max-height:520px;overflow:auto;font-size:14.5px;line-height:1.6}
.pxmva .doc .doc-t{font:700 1.35rem/1.2 var(--font-head);margin:0 0 4px}
.pxmva .doc .doc-m{font-size:13px;color:var(--muted);margin:0 0 14px}
.pxmva .doc h3{font:700 13.5px/1.2 var(--font-body);letter-spacing:.02em;color:var(--orange-t);margin:16px 0 6px}
.pxmva .doc ul{margin:0;padding-left:20px}
.pxmva .doc li{margin-bottom:4px}
.pxmva .doc li::marker{color:var(--orange)}
.pxmva .doc .sec{opacity:1;transform:none}
.pxmva .doc.anim .sec{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.pxmva .doc.anim .sec.in{opacity:1;transform:none}
.pxmva .copied{font-size:13.5px;color:var(--orange-t);font-weight:600;margin:8px 0 0}
.pxmva .gate{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.pxmva .gate p{font-size:13.5px;color:var(--ink-2);margin:0 0 8px}
.pxmva .gate-row{display:flex;gap:8px}
.pxmva .gate-row input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line-2);border-radius:10px;font:15px var(--font-body)}
.pxmva .promo{margin-top:12px;background:var(--peach);border-radius:14px;padding:14px;font-size:14px;color:var(--ink-2)}
.pxmva .promo p{margin:0 0 6px}
.pxmva .promo a{font-weight:700;text-decoration:none}
.pxmva .try{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;font-size:13.5px;color:var(--muted)}
.pxmva .chip{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:6px 13px;font:500 13.5px/1.2 var(--font-body);color:var(--ink);cursor:pointer}
.pxmva .chip:hover{border-color:var(--orange);color:var(--orange-t)}
.pxmva .section{padding:84px 0}
.pxmva .section.tint{background:var(--cream)}
.pxmva .split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.pxmva .split.rev .art{order:-1}
.pxmva .split + .split{margin-top:72px}
.pxmva .copy p{color:var(--ink-2)}
.pxmva .art{background:var(--peach);border-radius:24px;padding:32px;min-height:340px;display:grid;place-items:center}
.pxmva .card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;width:100%;max-width:400px;box-shadow:0 18px 40px -30px rgba(120,60,20,.45)}
.pxmva .stack{position:relative;width:100%;max-width:380px;height:280px}
.pxmva .sheet{position:absolute;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:0 10px 26px -20px rgba(80,40,10,.4);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s}
.pxmva .sheet small{font-size:11.5px;font-weight:700;color:var(--muted)}
.pxmva .sheet .ln{height:7px;border-radius:6px;background:#f2e8e0;margin:7px 0}
.pxmva .s1{top:0;transform:rotate(-4deg) translateY(0);opacity:.55}
.pxmva .s2{top:22px;transform:rotate(2deg);opacity:.8}
.pxmva .s3{top:48px}
.pxmva .flags{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.pxmva .flags li{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-2);opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s}
.pxmva .flags li.in{opacity:1;transform:none}
.pxmva .flags li::before{content:"!";flex:0 0 18px;height:18px;border-radius:50%;background:#fde0d2;color:var(--orange-t);font:800 11px/18px var(--font-body);text-align:center}
.pxmva .stack .fix{position:absolute;right:-8px;bottom:-6px;background:var(--dark);color:#fff;border-radius:12px;padding:10px 14px;font-size:13px;font-weight:600;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.pxmva .stack .fix.in{opacity:1;transform:none}
.pxmva .stack .fix b{color:#ffb489}
.pxmva .lvl-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:14px}
.pxmva .lvl-tabs button{border:0;background:none;border-radius:9px;padding:7px 2px;font:600 12.5px/1.2 var(--font-body);color:var(--ink-2);cursor:pointer}
.pxmva .lvl-tabs button.on{background:var(--orange);color:#fff}
.pxmva .lvl-title{font:700 1.05rem/1.2 var(--font-head);margin:0 0 2px}
.pxmva .lvl-meta{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.pxmva .lvl-list{list-style:none;margin:0;padding:0;display:grid;gap:7px;min-height:150px}
.pxmva .lvl-list li{font-size:13.5px;line-height:1.4;padding-left:18px;position:relative;color:var(--ink-2);animation:px-fadeUp .35s both}
.pxmva .lvl-list li::before{content:"";position:absolute;left:2px;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.pxmva .lvl-yrs{margin-top:12px;font-size:12.5px;font-weight:700;color:var(--orange-t);background:var(--peach);border-radius:8px;padding:6px 10px;display:inline-block}
@keyframes px-fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.pxmva .four{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.pxmva .four article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;position:relative;overflow:hidden}
.pxmva .four .num{font:700 2.3rem/1 var(--font-head);color:var(--peach-2);margin-bottom:10px}
.pxmva .four h3{font-size:1.15rem}
.pxmva .four p{font-size:14.5px;color:var(--ink-2);margin:0}
.pxmva .four .bar{position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--orange);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.pxmva .four article.in .bar{width:100%}
.pxmva .center-copy{text-align:center;color:var(--ink-2);margin:26px auto 0;max-width:640px}
.pxmva .search{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;font-size:14px;margin-bottom:14px;background:#fffdfb}
.pxmva .search svg{width:16px;height:16px;color:var(--muted);flex:0 0 16px}
.pxmva .search .q{min-height:1.2em}
.pxmva .search .cursor{display:inline-block;width:1.5px;height:1em;background:var(--orange);vertical-align:-2px;animation:px-blink 1s steps(2) infinite}
@keyframes px-blink{50%{opacity:0}}
.pxmva .post{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;display:flex;justify-content:space-between;gap:10px;align-items:center;transition:opacity .4s,border-color .4s,background .4s}
.pxmva .post b{display:block;font-size:14.5px}
.pxmva .post span{font-size:12.5px;color:var(--muted)}
.pxmva .post em{font-style:normal;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap;opacity:0;transition:opacity .3s}
.pxmva .post.match{border-color:var(--orange);background:#fff7f1}
.pxmva .post.match em{background:var(--orange);color:#fff;opacity:1}
.pxmva .post.miss{opacity:.45}
.pxmva .post.miss em{background:#efe6df;color:var(--muted);opacity:1}
.pxmva .duo{display:grid;grid-template-columns:1fr 1fr;border-radius:26px;overflow:hidden}
.pxmva .duo-dark{background:var(--dark);padding:44px 36px;display:grid;place-items:center;color:#fff}
.pxmva .duo-orange{background:#fde8dc;border:1px solid #fbd9c6;border-left:0;padding:48px 44px;color:var(--ink)}
.pxmva .duo-orange h2,.pxmva .duo-orange h3{color:var(--ink)}
.pxmva .duo-orange p{color:var(--ink-2)}
.pxmva .duo{border-radius:26px}
.pxmva .duo-dark{border-radius:26px 0 0 26px}
.pxmva .duo-orange{border-radius:0 26px 26px 0}
@media (max-width:900px){.pxmva .duo-dark{border-radius:26px 26px 0 0}
.pxmva .duo-orange{border-radius:0 0 26px 26px;border-left:1px solid #fbd9c6;border-top:0}}
.pxmva .duo-orange .btn-dark{margin-top:4px}
.pxmva .steps{list-style:none;margin:0;padding:0;width:100%;max-width:330px;position:relative}
.pxmva .steps::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:repeating-linear-gradient(#5b4c42 0 5px,transparent 5px 10px)}
.pxmva .steps li{display:flex;gap:14px;align-items:center;padding:9px 0;position:relative;opacity:.4;transition:opacity .4s}
.pxmva .steps li.in{opacity:1}
.pxmva .steps li i{flex:0 0 40px;height:40px;border-radius:50%;background:#3a302a;display:grid;place-items:center;font:700 15px var(--font-body);font-style:normal;transition:background .4s}
.pxmva .steps li.in i{background:var(--orange)}
.pxmva .steps b{display:block;font-size:14.5px}
.pxmva .steps span{font-size:12.5px;color:#c9bbb1}
.pxmva .clock{margin-top:18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pxmva .clock div{border:1px solid #4b3f37;border-radius:12px;padding:8px 14px;text-align:center;font-size:12px;color:#c9bbb1}
.pxmva .clock b{display:block;font:700 1.35rem/1.1 var(--font-head);color:#fff}
.pxmva .clock .old b{text-decoration:line-through;text-decoration-color:var(--orange);color:#8d7d72}
.pxmva .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.pxmva .tipcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column}
.pxmva .tipcard .tag{align-self:flex-start;font-size:12px;font-weight:700;color:var(--orange-t);background:var(--peach);border-radius:999px;padding:3px 10px;margin-bottom:12px}
.pxmva .tipcard p{font-size:15px;color:var(--ink-2)}
.pxmva .vs{margin-top:auto;display:grid;gap:6px;font-size:13px}
.pxmva .vs div{border-radius:10px;padding:8px 10px;line-height:1.4}
.pxmva .vs .no{background:#f5eeea;color:var(--muted)}
.pxmva .vs .yes{background:#fff3ea;border:1px solid var(--peach-2);color:var(--ink)}
.pxmva .vs small{display:block;font-weight:700;font-size:11px;margin-bottom:2px}
.pxmva .who{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.pxmva .who div{border:1px solid var(--line);border-radius:16px;padding:20px 16px;text-align:center;background:#fff}
.pxmva .who b{display:block;font:700 1.05rem/1.25 var(--font-head);margin-bottom:4px}
.pxmva .who span{font-size:13.5px;color:var(--muted)}
.pxmva .mini{background:#fff;color:var(--ink);border-radius:18px;padding:18px;width:100%;max-width:320px}
.pxmva .mini .ttl{font:700 1.05rem/1.2 var(--font-head);margin:0}
.pxmva .mini .meta{font-size:12px;color:var(--muted);margin:2px 0 10px}
.pxmva .mini .row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:8px 0;font-size:13.5px;font-weight:600}
.pxmva .mini .row em{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--peach);color:#fff;display:grid;place-items:center;font-size:11px;transition:background .3s}
.pxmva .mini .row.in em{background:var(--orange)}
.pxmva .faq{max-width:820px;margin:34px auto 0}
.pxmva .faq details{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:10px}
.pxmva .faq summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:700;font-size:15.5px}
.pxmva .faq summary::-webkit-details-marker{display:none}
.pxmva .faq summary::after{content:"+";flex:0 0 26px;height:26px;border-radius:50%;background:var(--orange);color:#fff;font:600 18px/26px var(--font-body);text-align:center}
.pxmva .faq details[open] summary::after{content:"\2212"}
.pxmva .faq details[open]{border-color:var(--peach-2)}
.pxmva .faq .a{padding:0 20px 16px;color:var(--ink-2);font-size:15px}
.pxmva .faq .a p{margin:0}
.pxmva .worked{max-width:980px;margin:34px auto 0;background:#fff;border:1px solid var(--peach-2);border-radius:22px;padding:22px}
.pxmva .worked-cap{text-align:center;font-size:12.5px;font-weight:700;color:var(--orange-t);margin:0 0 16px}
.pxmva .worked-grid{display:grid;grid-template-columns:1fr 44px 1.5fr;gap:12px;align-items:stretch}
.pxmva .w-in,.pxmva .w-out{border:1px solid var(--line);border-radius:14px;padding:16px;font-size:14px}
.pxmva .w-in small,.pxmva .w-out small{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:8px}
.pxmva .w-in dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px}
.pxmva .w-in dt{color:var(--muted)}
.pxmva .w-in dd{margin:0;font-weight:600}
.pxmva .w-arrow{display:grid;place-items:center;color:var(--orange);font-size:22px}
.pxmva .w-out{background:var(--cream);border-color:var(--peach-2)}
.pxmva .w-out .doc{max-height:300px;padding:14px;font-size:13.5px}
.pxmva .more{background:var(--cream);border:1px solid var(--line);border-radius:28px;padding:64px 28px}
.pxmva .more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1060px;margin:34px auto 0}
.pxmva .more-grid a{display:flex;gap:14px;align-items:flex-start;padding:18px;background:#fff;border:1px solid var(--line);border-radius:16px;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,box-shadow .2s}
.pxmva .more-grid a:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 14px 28px -22px rgba(120,60,20,.4)}
.pxmva .more-grid .mi{flex:0 0 42px;height:42px;border-radius:12px;background:var(--peach);color:var(--orange);display:grid;place-items:center}
.pxmva .more-grid .mi svg{width:21px;height:21px}
.pxmva .more-grid strong{display:block;font-size:15px;line-height:1.3;margin-bottom:3px}
.pxmva .more-grid .d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.pxmva .rv{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.pxmva .rv.is-in{opacity:1;transform:none}
@media (max-width:980px){.pxmva .four{grid-template-columns:1fr 1fr}
.pxmva .who{grid-template-columns:1fr 1fr}
.pxmva .cards3{grid-template-columns:1fr}}
@media (max-width:900px){.pxmva .tool{grid-template-columns:1fr}
.pxmva .tool-left{border-right:0;border-bottom:1px solid var(--line)}
.pxmva .split,.pxmva .duo{grid-template-columns:1fr;gap:28px}
.pxmva .split.rev .art{order:0}
.pxmva .art{min-height:0;padding:24px}
.pxmva .duo-orange{padding:36px 26px}
.pxmva .more-grid{grid-template-columns:1fr 1fr}
.pxmva .worked-grid{grid-template-columns:1fr}
.pxmva .w-arrow{transform:rotate(90deg);height:30px}
.pxmva .section{padding:64px 0}}
@media (max-width:600px){.pxmva .container{padding:0 16px}
.pxmva .row2,.pxmva .tips-grid,.pxmva .more-grid,.pxmva .four,.pxmva .who{grid-template-columns:1fr}
.pxmva .seg{grid-template-columns:1fr 1fr}
.pxmva .seg label:nth-child(3) span{border-left:0}
.pxmva .seg label:nth-child(n+3) span{border-top:1px solid var(--line)}
.pxmva .tool-left,.pxmva .tool-right{padding:18px}
.pxmva .srow{grid-template-columns:96px 1fr 18px}
.pxmva .more{padding:48px 16px}
.pxmva .stack{height:300px}}
@media (prefers-reduced-motion:reduce){.pxmva *,.pxmva *::before,.pxmva *::after{animation:none!important;transition:none!important}
.pxmva .rv{opacity:1;transform:none}}
.pxmva .tool-h{font:700 1.25rem/1.2 var(--font-head);margin:0 0 4px}
.pxmva .tool-p{font-size:14px;color:var(--muted);margin:0 0 16px}
.pxmva .note{font-size:13px;color:var(--muted);margin:10px 0 0}
.pxmva .check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:600;cursor:pointer;margin-bottom:10px}
.pxmva .check input{width:18px;height:18px;accent-color:var(--orange);margin:2px 0 0;flex:0 0 18px}
.pxmva .counter{float:right;font-size:12.5px;color:var(--muted);font-weight:500}
.pxmva .steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px;counter-reset:st;padding:0;list-style:none}
.pxmva .steps4 li{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;position:relative;font-size:15px;color:var(--ink-2)}
.pxmva .steps4 li::before{counter-increment:st;content:counter(st,decimal-leading-zero);display:block;font:700 2.1rem/1 var(--font-head);color:var(--peach-2);margin-bottom:10px}
.pxmva .related{text-align:center;margin:26px 0 0;color:var(--ink-2)}
.pxmva .cards3 .tipcard h3{font-size:1.15rem}
.pxmva .more-grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.pxmva .steps4{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pxmva .steps4{grid-template-columns:1fr}}
.pxmva .money{position:relative}
.pxmva .money span{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600;pointer-events:none}
.pxmva .money input{padding-left:26px}
.pxmva .inline2{display:grid;grid-template-columns:1fr 130px;gap:8px}
.pxmva .range-row{display:flex;align-items:center;gap:12px}
.pxmva .range-row input[type=range]{flex:1;accent-color:var(--orange);padding:0;border:0;background:none}
.pxmva .range-row output{font-weight:700;min-width:48px;text-align:right}
.pxmva .seg3{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:#fffdfb}
.pxmva .seg3 label{margin:0;position:relative;cursor:pointer;display:flex}
.pxmva .seg3 input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pxmva .seg3 span{flex:1;text-align:center;padding:10px 4px;font-size:14px;font-weight:600;color:var(--ink-2);border-left:1px solid var(--line)}
.pxmva .seg3 label:first-child span{border-left:0}
.pxmva .seg3 input:checked+span{background:var(--orange);color:#fff}
.pxmva .seg3 input:focus-visible+span{outline:3px solid var(--orange);outline-offset:-3px}
.pxmva .kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pxmva .kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.pxmva .kpi small{display:block;font-size:12.5px;font-weight:700;color:var(--muted)}
.pxmva .kpi b{display:block;font:700 1.75rem/1.15 var(--font-head);font-variant-numeric:tabular-nums;margin:2px 0}
.pxmva .kpi span{font-size:12.5px;color:var(--muted)}
.pxmva .kpi.manual b{color:#8a7b70}
.pxmva .save{grid-column:1/-1;background:var(--orange);border-color:var(--orange);color:#fff}
.pxmva .save small,.pxmva .save span{color:#fff3ea}
.pxmva .save b{color:#fff;font-size:2.1rem}
.pxmva .save.neg{background:#5b4c42;border-color:#5b4c42}
.pxmva .chart{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 12px 8px;margin-top:10px}
.pxmva .chart svg{width:100%;height:auto;display:block}
.pxmva .legend{display:flex;gap:16px;justify-content:center;font-size:12.5px;color:var(--ink-2);margin-top:4px}
.pxmva .legend i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
.pxmva .est{font-size:12.5px;color:var(--muted);margin:8px 0 0;text-align:center}
.pxmva .cta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.pxmva .cta-row a.btn{font-size:14px}
.pxmva .freed{font-size:13.5px;color:var(--ink-2);margin:10px 0 0;text-align:center}
.pxmva .freed b{color:var(--orange-t)}
.pxmva .print-only{display:none}
.pxmva .race{width:100%;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px}
.pxmva .race-row{margin:10px 0}
.pxmva .race-row small{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:5px}
.pxmva .race-row .bar{height:22px;border-radius:8px;background:var(--cream);overflow:hidden}
.pxmva .race-row .bar i{display:block;height:100%;width:0;border-radius:8px;transition:width .35s linear}
.pxmva .race-row.m .bar i{background:#c9b8ab}
.pxmva .race-row.a .bar i{background:var(--orange)}
.pxmva .race-month{font:700 1.05rem/1.2 var(--font-head);margin:0 0 4px}
.pxmva .race-note{font-size:12.5px;color:var(--muted);margin:10px 0 0;min-height:1.2em}
.pxmva .payback-card{background:#fff;color:var(--ink);border-radius:18px;padding:20px;width:100%;max-width:300px;text-align:center}
.pxmva .payback-card small{font-size:12.5px;color:var(--muted);font-weight:700}
.pxmva .payback-card b{display:block;font:700 3rem/1 var(--font-head);color:var(--orange);margin:6px 0}
.pxmva .payback-card span{font-size:13px;color:var(--ink-2)}
.pxmva .w-out .kpis{grid-template-columns:1fr 1fr}
.pxmva .w-out .kpi b{font-size:1.35rem}
@media print{.pxmva *{visibility:hidden}
.pxmva #report,.pxmva #report *{visibility:visible}
.pxmva #report{position:absolute;left:0;top:0;width:100%;padding:0}
.pxmva .no-print{display:none!important}
.pxmva .print-only{display:block!important}
.pxmva .save{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media (max-width:600px){.pxmva .kpis{grid-template-columns:1fr}
.pxmva .inline2{grid-template-columns:1fr 1fr}}
.pxmva .guide-body{max-width:820px;margin:26px auto 0;text-align:left}
.pxmva .guide-body h3{font-size:clamp(1.22rem,2vw,1.5rem);line-height:1.25;margin:34px 0 .4em}
.pxmva .guide-body h3:first-child{margin-top:0}
.pxmva .guide-body p{color:var(--ink-2);font-size:1.0625rem;line-height:1.75;margin:0 0 1.1em}
.pxmva .guide-body ul,.pxmva .guide-body ol{color:var(--ink-2);padding-left:22px;margin:0 0 1.15em}
.pxmva .guide-body li{margin-bottom:6px}
.pxmva .guide-body li::marker{color:var(--orange)}
.pxmva .guide-body strong{color:var(--ink)}
@media (max-width:600px){.pxmva .guide-body p{font-size:1rem}}
/* Print: scoping turned the design's `body *{visibility:hidden}` into a
   main-only rule, which would have let the theme header and footer print.
   This stylesheet only loads on this page, so hiding the whole body here is
   safe and restores the original "report only" printout. */
@media print{
  body{visibility:hidden}
  .pxmva #report,.pxmva #report *{visibility:visible}
  .pxmva #report{position:absolute;left:0;top:0;width:100%;padding:0}
  .pxmva .no-print{display:none!important}
  .pxmva .print-only{display:block!important}
}

/* ===================== d27 sections ===================== */

/* ---------- tokens ---------- */
.pxmva{
  --d27-ink:#241a14;
  --d27-body:#5e4d44;          /* 7.1:1 on white */
  --d27-soft:#8a7467;          /* 4.6:1 - labels only, never body copy */
  --d27-orange:#eb600e;
  --d27-orange-dk:#c04c07;     /* 4.6:1 on white, for text that must read */
  --d27-line:#ece7e4;
  /* Light only, and deliberately close to white. The earlier peach/cream pair
     read as creamy on a real screen, and the closing band was near-black; the
     client asked for neither. Sections are now separated by a barely-there
     warm grey rather than by colour. */
  --d27-peach:#fafafa;          /* the alternating section */
  --d27-cream:#ffffff;          /* was the cream band - now plain white */
  --d27-blush:#f4f2f1;          /* the panel the mock floats on */
  --d27-dark:#f7f5f4;           /* the closing band, light */
  --d27-good:#15803d;
  --d27-bad:#b91c1c;
}

/* ---------- rhythm ----------
   the reference's whole trick is air: rows sit far apart and the art is big.
   d26 used ~56px here, which is what made the page read as stacked cards. */
.pxmva .d27{padding:clamp(72px,9vw,128px) 0;position:relative}
.pxmva .d27.tint{background:var(--d27-peach)}
.pxmva .d27.cream{background:var(--d27-cream)}
.pxmva .d27__in{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- centred section head ---------- */
.pxmva .d27-head{max-width:760px;margin:0 auto;text-align:center}
.pxmva .d27-head .kicker{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--d27-orange-dk);margin:0 0 14px}
.pxmva .d27-head h2{
  margin:0;font-size:clamp(28px,4.2vw,50px);line-height:1.1;
  letter-spacing:-.022em;font-weight:800;color:var(--d27-ink)}
.pxmva .d27-head p{
  margin:18px auto 0;max-width:640px;font-size:clamp(15px,1.5vw,17.5px);
  line-height:1.72;color:var(--d27-body)}

/* ---------- the alternating row ---------- */
.pxmva .d27-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(36px,5.5vw,88px);align-items:center}
.pxmva .d27-row + .d27-row{margin-top:clamp(64px,8vw,116px)}
.pxmva .d27-row.flip .d27-copy{order:2}
.pxmva .d27-row.flip .d27-art{order:1}
.pxmva .d27-copy h3{
  margin:0 0 16px;font-size:clamp(22px,2.9vw,33px);line-height:1.18;
  letter-spacing:-.018em;font-weight:800;color:var(--d27-ink)}
.pxmva .d27-copy p{margin:0 0 14px;font-size:16px;line-height:1.74;color:var(--d27-body)}
.pxmva .d27-copy p:last-child{margin-bottom:0}
.pxmva .d27-copy a{color:var(--d27-orange-dk);text-decoration:underline;text-underline-offset:2px}
.pxmva .d27-pts{list-style:none;margin:20px 0 0;padding:0}
.pxmva .d27-pts li{
  position:relative;padding:0 0 0 30px;margin:0 0 12px;
  font-size:15.5px;line-height:1.62;color:var(--d27-body)}
.pxmva .d27-pts li:last-child{margin-bottom:0}
.pxmva .d27-pts li::before{
  content:"";position:absolute;left:4px;top:.56em;width:9px;height:9px;
  border-radius:50%;background:var(--d27-orange);
  box-shadow:0 0 0 4px rgba(235,96,14,.14)}
.pxmva .d27-pts b{color:var(--d27-ink);font-weight:700}

/* ---------- the tinted art panel ----------
   the mock is a real card floating on a colour field, not a bordered box */
.pxmva .d27-art{
  border-radius:26px;padding:clamp(20px,2.8vw,36px);
  background:var(--d27-blush);position:relative;overflow:hidden}
/* on a tinted section the panel has to differ from BOTH the section behind it
   and the white card inside it; white here gave a white card on a white panel
   separated only by its shadow */
.pxmva .d27.tint .d27-art{background:#eceae8}
.pxmva .d27-art.sand{background:var(--d27-cream)}
.pxmva .d27-card{
  background:#fff;border-radius:16px;padding:clamp(16px,2vw,24px);
  box-shadow:0 1px 2px rgba(36,26,20,.05),0 14px 34px -14px rgba(36,26,20,.22)}
.pxmva .d27.tint .d27-card{box-shadow:0 1px 2px rgba(36,26,20,.05),0 14px 34px -16px rgba(36,26,20,.18)}
/* A demo lifted out of the old article keeps its own stylesheet, which is still
   on the page - the deploy appends to that file rather than replacing it. So
   this only has to stop the widget fighting the card it now sits in: drop the
   margins it used as a standalone block, and let a wide one scroll instead of
   bursting the column on a phone. */
.pxmva .d27-lift > :not(.d27-cap):not(.p-note){margin:0;max-width:100%}
.pxmva .d27-lift > :not(.d27-cap):not(.p-note) + *{margin-top:14px}
.pxmva .d27-lift{overflow-x:auto}
.pxmva .d27-lift table{width:100%}
.pxmva .d27-cap{
  display:flex;align-items:center;gap:8px;margin:0 0 16px;
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--d27-soft)}
.pxmva .d27-cap i{width:7px;height:7px;border-radius:50%;background:var(--d27-orange);flex:none}
.pxmva .d27-foot{
  margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--d27-soft);text-align:center}

/* ---------- 1. density gauge ---------- */
.pxmva .g-read{display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
.pxmva .g-num{font-size:clamp(34px,4.6vw,46px);font-weight:800;letter-spacing:-.03em;
  color:var(--d27-ink);font-variant-numeric:tabular-nums;line-height:1}
.pxmva .g-verdict{font-size:13.5px;font-weight:800;letter-spacing:.01em}
.pxmva .g-sub{margin:0 0 22px;font-size:13px;color:var(--d27-soft)}
.pxmva .g-track{position:relative;height:16px;border-radius:999px;display:flex}
.pxmva .g-track > span{display:block;height:100%}
.pxmva .g-track > span:first-child{border-radius:999px 0 0 999px}
.pxmva .g-track > span:last-child{border-radius:0 999px 999px 0}
.pxmva .g-z1{width:16.6%;background:#f3ddc9}
.pxmva .g-z2{width:33.3%;background:#86c79b}
.pxmva .g-z3{width:25%;background:#f0c88a}
.pxmva .g-z4{width:25.1%;background:#e9a79c}
.pxmva .g-needle{
  position:absolute;top:-9px;bottom:-9px;width:4px;border-radius:3px;
  background:var(--d27-ink);left:0;margin-left:-2px;
  box-shadow:0 0 0 3px rgba(255,255,255,.95)}
.pxmva .g-scale{display:flex;justify-content:space-between;margin:10px 2px 0;
  font-size:11px;font-weight:700;color:var(--d27-soft);font-variant-numeric:tabular-nums}
.pxmva .g-zones{display:flex;margin:18px 0 0;gap:6px}
.pxmva .g-zones div{flex:1;text-align:center;font-size:10.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--d27-soft);
  padding:7px 2px;border-radius:8px;transition:background .3s,color .3s}
.pxmva .g-zones div.on{background:var(--d27-orange);color:#fff}

/* ---------- 2. frequency table ---------- */
.pxmva .f-row{display:grid;grid-template-columns:116px minmax(0,1fr) 42px;
  gap:12px;align-items:center;margin:0 0 13px}
.pxmva .f-row:last-of-type{margin-bottom:0}
.pxmva .f-term{font-size:13.5px;font-weight:700;color:var(--d27-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxmva .f-bar{height:11px;border-radius:999px;background:#edecea;overflow:hidden}
.pxmva .f-bar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#f5873c,var(--d27-orange))}
.pxmva .f-row.muted .f-bar i{background:linear-gradient(90deg,#d9d0c9,#b9ab9f)}
.pxmva .f-n{font-size:13px;font-weight:800;color:var(--d27-soft);text-align:right;
  font-variant-numeric:tabular-nums}
.pxmva .f-verdict{
  margin:20px 0 0;padding:14px 16px;border-radius:12px;background:#f6f5f4;
  border-left:3px solid var(--d27-orange);font-size:13.5px;line-height:1.6;
  color:var(--d27-ink)}
.pxmva .f-verdict b{color:var(--d27-orange-dk)}

/* ---------- 3. missing related terms ---------- */
.pxmva .t-scan{position:relative}
.pxmva .t-line{
  position:absolute;left:-8px;right:-8px;height:34px;border-radius:9px;
  background:linear-gradient(90deg,rgba(235,96,14,0),rgba(235,96,14,.13),rgba(235,96,14,0));
  top:0;opacity:0;pointer-events:none}
.pxmva .t-item{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--d27-line)}
.pxmva .t-item:last-child{border-bottom:0}
.pxmva .t-dot{width:19px;height:19px;border-radius:50%;flex:none;
  border:2px solid #ddd9d6;position:relative;transition:border-color .25s}
.pxmva .t-dot::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--d27-bad);transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.pxmva .t-item.miss .t-dot{border-color:var(--d27-bad)}
.pxmva .t-item.miss .t-dot::after{transform:scale(.46)}
.pxmva .t-term{font-size:14.5px;font-weight:700;color:var(--d27-ink);flex:1}
.pxmva .t-state{font-size:12.5px;font-weight:700;color:var(--d27-soft)}
.pxmva .t-item.miss .t-state{color:var(--d27-bad)}
/* the same scan reading the other way: present, not missing */
.pxmva .t-item.miss.good .t-dot{border-color:var(--d27-good)}
.pxmva .t-item.miss.good .t-dot::after{background:var(--d27-good)}
.pxmva .t-item.miss.good .t-state{color:var(--d27-good)}
.pxmva .t-sum{margin:18px 0 0;padding:13px 15px;border-radius:12px;
  background:#f6f5f4;font-size:13.5px;font-weight:700;color:var(--d27-ink);
  text-align:center}

/* ---------- 4. it stays in your browser ---------- */
.pxmva .b-win{border:1px solid var(--d27-line);border-radius:13px;overflow:hidden;background:#fff}
.pxmva .b-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;
  background:#f4f3f2;border-bottom:1px solid var(--d27-line)}
.pxmva .b-bar em{width:8px;height:8px;border-radius:50%;background:#ddd9d6;flex:none}
.pxmva .b-bar span{margin-left:8px;font-size:11px;font-weight:700;color:var(--d27-soft)}
.pxmva .b-body{padding:15px 14px}
.pxmva .b-ln{height:7px;border-radius:4px;background:#edecea;margin:0 0 8px}
.pxmva .b-ln.s{width:62%}
.pxmva .b-ln.m{width:86%}
.pxmva .b-tag{display:inline-block;margin:6px 0 0;padding:5px 11px;border-radius:999px;
  background:#eaf6ee;color:var(--d27-good);font-size:11.5px;font-weight:800}
.pxmva .b-path{position:relative;height:54px;margin:2px 0 0}
.pxmva .b-path svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* the packet rides the line, so the line is straight and the pill is centred
   on its own left coordinate - the earlier curve put the pill beside the path
   rather than on it */
.pxmva .b-pkt{
  position:absolute;left:12%;top:50%;transform:translate(-50%,-50%);
  padding:5px 11px;border-radius:999px;
  background:var(--d27-ink);color:#fff;font-size:10.5px;font-weight:700;
  white-space:nowrap}
.pxmva .b-arrow{
  position:absolute;right:2%;top:50%;width:0;height:0;margin-top:-5px;
  border-left:7px solid #d8d4d1;border-top:5px solid transparent;
  border-bottom:5px solid transparent}
.pxmva .b-srv{
  border:1px dashed #dcd8d5;border-radius:13px;padding:13px 15px;text-align:center;
  background:#fbfbfb}
.pxmva .b-srv strong{display:block;font-size:12.5px;color:var(--d27-ink);margin:0 0 4px}
.pxmva .b-srv span{display:block;font-size:11.5px;color:var(--d27-soft);line-height:1.55}

/* ---------- 5. the same figure counted two ways ---------- */
/* minmax(0,…) and min-width:0, because a grid track otherwise refuses to go
   narrower than its content and the whole card overflows its column */
.pxmva .p-flip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pxmva .p-col{border-radius:13px;padding:15px 15px 17px;border:1px solid var(--d27-line);
  min-width:0}
.pxmva .p-col.bad{background:#fdf3f1;border-color:#f2ded8}
.pxmva .p-col.good{background:#f1f8f3;border-color:#dcece1}
.pxmva .p-h{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--d27-soft);margin:0 0 11px}
/* label above value, not beside it. Side by side with a nowrap value pushed
   the column wider than its track as soon as a value was a phrase rather than
   a number - which clipped one side of the panel and wrapped the other. */
.pxmva .p-r{padding:6px 0;font-size:12.5px;line-height:1.45;color:var(--d27-body);
  min-width:0}
.pxmva .p-r + .p-r{border-top:1px solid rgba(36,26,20,.05)}
.pxmva .p-r span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--d27-soft);margin:0 0 2px}
.pxmva .p-r b{display:block;color:var(--d27-ink);font-weight:700;
  overflow-wrap:anywhere}
.pxmva .p-v{margin:12px 0 0;padding:9px 0 0;border-top:1px solid rgba(36,26,20,.09);
  font-size:clamp(20px,2.5vw,28px);font-weight:800;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;line-height:1.1;overflow-wrap:anywhere}
.pxmva .p-col.bad .p-v{color:var(--d27-bad)}
.pxmva .p-col.good .p-v{color:var(--d27-good)}
.pxmva .p-note{margin:16px 0 0;padding:13px 15px;border-radius:12px;background:#f6f5f4;
  border-left:3px solid var(--d27-orange);font-size:13px;line-height:1.6;color:var(--d27-ink)}

/* ---------- 6. a sequence that fills in ---------- */
.pxmva .s-list{list-style:none;margin:0;padding:0;counter-reset:s}
.pxmva .s-it{display:flex;gap:13px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--d27-line)}
.pxmva .s-it:last-child{border-bottom:0}
.pxmva .s-n{flex:none;width:25px;height:25px;border-radius:50%;background:var(--d27-orange);
  color:#fff;font-size:12.5px;font-weight:800;display:flex;align-items:center;
  justify-content:center;margin-top:1px}
.pxmva .s-b{display:block}
.pxmva .s-b b{display:block;font-size:14px;font-weight:700;color:var(--d27-ink);margin:0 0 3px}
.pxmva .s-b em{display:block;font-style:normal;font-size:12.5px;line-height:1.55;
  color:var(--d27-soft)}
.pxmva .s-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin:16px 0 0;padding:14px 15px;border-radius:12px;background:#f6f5f4;
  border:1px solid var(--d27-line)}
.pxmva .s-total span{font-size:12.5px;font-weight:700;color:var(--d27-soft)}
.pxmva .s-total b{font-size:clamp(20px,2.5vw,26px);font-weight:800;color:var(--d27-orange-dk);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ---------- 7. bars drawn to scale against each other ---------- */
.pxmva .k-row{margin:0 0 15px}
.pxmva .k-row:last-of-type{margin-bottom:0}
.pxmva .k-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin:0 0 7px}
.pxmva .k-h span{font-size:13px;font-weight:700;color:var(--d27-ink)}
.pxmva .k-h b{font-size:13px;font-weight:800;color:var(--d27-soft);
  font-variant-numeric:tabular-nums}
.pxmva .k-bar{height:14px;border-radius:999px;background:#edecea;overflow:hidden}
.pxmva .k-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#f5873c,var(--d27-orange))}
.pxmva .k-bar.calm i{background:linear-gradient(90deg,#8fc9a2,#4f9d6b)}
.pxmva .k-bar.grey i{background:linear-gradient(90deg,#d9d0c9,#b9ab9f)}
.pxmva .k-note{margin:18px 0 0;padding:13px 15px;border-radius:12px;background:#f6f5f4;
  font-size:13px;line-height:1.6;color:var(--d27-ink)}

/* ---------- 8. a file writing itself ---------- */
.pxmva .o-file{border:1px solid var(--d27-line);border-radius:13px;overflow:hidden;background:#fcfcfc}
.pxmva .o-name{display:flex;align-items:center;gap:8px;padding:10px 13px;
  background:#f4f3f2;border-bottom:1px solid var(--d27-line);
  font-size:12px;font-weight:800;color:var(--d27-ink)}
.pxmva .o-name span{width:9px;height:11px;border-radius:2px;background:var(--d27-orange);flex:none}
.pxmva .o-body{padding:13px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.75}
.pxmva .o-l{color:var(--d27-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxmva .o-l.h{color:var(--d27-ink);font-weight:700}
.pxmva .o-l.c{color:#a08a7b}
.pxmva .o-l.b{height:8px}
.pxmva .o-foot{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#f6f5f4;
  font-size:13px;line-height:1.6;color:var(--d27-ink)}

/* ---------- 9. variants of one output ---------- */
.pxmva .v-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pxmva .v-it{text-align:center}
.pxmva .v-art{display:flex;align-items:center;justify-content:center;min-height:86px;
  border:1px solid var(--d27-line);border-radius:12px;background:#fcfcfc;padding:12px}
.pxmva .v-l{display:block;margin:8px 0 0;font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--d27-soft)}
.pxmva .v-note{margin:16px 0 0;padding:13px 15px;border-radius:12px;background:#f6f5f4;
  font-size:13px;line-height:1.6;color:var(--d27-ink)}
/* the sample marks are type, not images - no asset to load or go stale */
.pxmva .v-wm{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--d27-ink)}
.pxmva .v-wm.thin{font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.pxmva .v-mk{display:flex;align-items:center;gap:7px}
.pxmva .v-mk i{width:24px;height:24px;border-radius:7px;background:var(--d27-orange);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;
  font-weight:800;font-style:normal;flex:none}
.pxmva .v-mk.round i{border-radius:50%}

/* ---------- 10. a conversation playing out ---------- */
.pxmva .c-thread{display:flex;flex-direction:column;gap:9px;position:relative}
.pxmva .c-msg{display:flex}
.pxmva .c-msg.you{justify-content:flex-end}
.pxmva .c-msg span{
  display:inline-block;max-width:82%;padding:9px 13px;border-radius:14px;
  font-size:13.5px;line-height:1.5}
.pxmva .c-msg.bot span{background:#f0efee;color:var(--d27-ink);border-bottom-left-radius:5px}
.pxmva .c-msg.you span{background:var(--d27-orange);color:#fff;border-bottom-right-radius:5px}
.pxmva .c-typing{display:none;align-items:center;gap:4px;padding:10px 13px;width:fit-content;
  background:#f0efee;border-radius:14px;border-bottom-left-radius:5px}
.pxmva .c-typing i{width:6px;height:6px;border-radius:50%;background:#bda593;display:block}
.pxmva .c-note{margin:18px 0 0;padding:13px 15px;border-radius:12px;background:#f6f5f4;
  border-left:3px solid var(--d27-orange);font-size:13px;line-height:1.6;color:var(--d27-ink)}

/* ---------- the quiet band of numerals ---------- */
.pxmva .d27-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,22px);margin:clamp(34px,4.5vw,52px) 0 0}
.pxmva .d27-stat{
  background:#fff;border-radius:18px;padding:clamp(22px,2.6vw,32px);
  box-shadow:0 1px 2px rgba(36,26,20,.04),0 12px 30px -16px rgba(36,26,20,.2)}
.pxmva .d27-stat .n{
  font-size:clamp(32px,4.2vw,52px);font-weight:800;letter-spacing:-.035em;
  line-height:1;color:var(--d27-orange-dk);font-variant-numeric:tabular-nums}
.pxmva .d27-stat .l{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--d27-body)}

/* ---------- the closing band ----------
   it used to be near-black with white text. Now that the background is light,
   every one of those colours has to come back to the normal ink/body pair or
   the whole band would be white-on-white. A hairline rule replaces the colour
   as the thing that marks it as the end of the page. */
.pxmva .d27-dark{background:var(--d27-dark);color:var(--d27-body);
  border-top:1px solid var(--d27-line)}
.pxmva .d27-dark .d27-head h2{color:var(--d27-ink)}
.pxmva .d27-dark .d27-head p{color:var(--d27-body)}
.pxmva .d27-dark .d27-head .kicker{color:var(--d27-orange-dk)}
.pxmva .d27-dark a:not(.d27-btn){color:var(--d27-orange-dk);text-decoration:underline;
  text-underline-offset:2px}
.pxmva .d27-btn{
  display:inline-block;margin:28px 0 0;padding:15px 30px;border-radius:999px;
  background:var(--d27-orange);color:#fff;font-weight:800;font-size:15.5px;
  text-decoration:none;transition:background .2s,transform .2s}
.pxmva .d27-btn:hover{background:#f57220;transform:translateY(-1px);color:#fff}
.pxmva .d27-why{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,30px);margin:clamp(38px,5vw,58px) 0 0;text-align:left}
.pxmva .d27-why div{
  padding:22px;border-radius:16px;background:#fff;
  border:1px solid var(--d27-line)}
.pxmva .d27-why h4{margin:0 0 9px;font-size:16px;font-weight:800;color:var(--d27-ink)}
.pxmva .d27-why p{margin:0;font-size:14px;line-height:1.66;color:var(--d27-body)}

/* ---------- reveal ----------
   the finished state is the default. The JS only takes it away after it has
   confirmed GSAP and ScrollTrigger are both present, so if the libraries never
   arrive - or arrive broken - the page still reads as a finished page. */
.pxmva.d27-armed .d27-rv{opacity:0}

@media (max-width:860px){
  .pxmva .d27-row{grid-template-columns:minmax(0,1fr);gap:30px}
  .pxmva .d27-row.flip .d27-copy,
  .pxmva .d27-row.flip .d27-art{order:0}
  .pxmva .d27-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pxmva .d27-why{grid-template-columns:minmax(0,1fr)}
  /* the long term was being ellipsised away on a phone; let it wrap instead */
  .pxmva .f-row{grid-template-columns:104px minmax(0,1fr) 30px;gap:9px}
  .pxmva .f-term{white-space:normal;overflow:visible;font-size:12.5px;line-height:1.28}
  /* two columns of figures do not survive a phone; they stack */
  .pxmva .p-flip{grid-template-columns:minmax(0,1fr)}
  .pxmva .o-body{font-size:11px}
}
@media (max-width:480px){
  .pxmva .d27-stats{grid-template-columns:minmax(0,1fr)}
  .pxmva .g-zones{flex-wrap:wrap}
  .pxmva .g-zones div{flex:1 1 44%}
}
@media (prefers-reduced-motion:reduce){
  .pxmva.d27-armed .d27-rv{opacity:1}
}