/* P01 only: preserve the existing magazine chrome. */
.pricing-article .article-heading{margin:30px 0 32px}
.pricing-article .article-heading h1{max-width:1000px}
.pricing-article .p01-cover{margin:0 0 38px;aspect-ratio:3/2;height:auto}
.pricing-article .p01-cover img{width:100%;height:auto;object-fit:contain}
.pricing-article .prose{max-width:760px}
.pricing-article .article-intro{margin:0 0 42px}
.pricing-article .prose p{font-size:18px;line-height:1.95;margin:0 0 19px}
.pricing-article .article-intro>p:first-child{font-size:25px;font-weight:800;line-height:1.5;margin-bottom:22px}
.pricing-article .prose section{margin-bottom:46px;scroll-margin-top:130px}
.pricing-article .prose section h2{font-size:28px;line-height:1.5;margin-bottom:22px}
.pricing-article .explain-figure{margin:32px 0 12px;background:white;border:1px solid #d6cedf;box-shadow:5px 5px 0 #e3d8f5}
.pricing-article .figure-heading{padding:24px 26px 20px}
.pricing-article .figure-heading>span{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--purple)}
.pricing-article .figure-heading h3{font-size:24px;line-height:1.5;margin-top:9px}
.pricing-article .photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e7e0ec}
.pricing-article .photo-panel{background:#faf9fc;min-width:0}
.pricing-article .photo-window{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden}
.pricing-article .photo-window img{position:absolute;width:200%;max-width:none;height:100%;object-fit:fill;left:0;top:0}
.pricing-article .styled .photo-window img{left:-100%}
.pricing-article .photo-label{padding:20px 22px 24px;border-top:5px solid var(--purple)}
.pricing-article .styled .photo-label{border-color:var(--yellow)}
.pricing-article .photo-label b{font-size:22px}
.pricing-article .photo-label p{font-size:15px;line-height:1.8;margin:9px 0 0}
.pricing-article figcaption{font-size:12px;line-height:1.8;color:#655e6f;padding:16px 22px;border-top:1px solid #e6e0eb}
.pricing-article .scope-top{display:flex;align-items:center;gap:23px;padding:24px 26px;background:#eee7ff}
.pricing-article .price-token{font-size:28px;font-weight:900;background:var(--purple);color:white;padding:16px 22px;white-space:nowrap;transform:rotate(-3deg)}
.pricing-article .scope-plus{font-size:32px;font-weight:900;color:var(--purple)}
.pricing-article .scope-top p{font-size:18px;line-height:1.7;margin:0}
.pricing-article .scope-top b{background:var(--yellow);padding:0 4px}
.pricing-article .scope-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:28px 26px}
.pricing-article .scope-number{font-size:12px;color:var(--purple);font-weight:900;border-bottom:3px solid var(--yellow);padding-bottom:4px}
.pricing-article .scope-grid h4{font-size:21px;margin:17px 0 12px}
.pricing-article .scope-grid p{font-size:15px;line-height:1.8;margin:0}
.pricing-article .article-cta{margin-top:25px}
@media(max-width:1023px){.pricing-article .scope-grid{grid-template-columns:1fr;gap:0;padding:8px 24px}.pricing-article .scope-grid>div{display:grid;grid-template-columns:30px 1fr;column-gap:12px;padding:20px 0;border-bottom:1px solid #e4dcec}.pricing-article .scope-grid>div:last-child{border-bottom:0}.pricing-article .scope-number{align-self:start;margin-top:3px}.pricing-article .scope-grid h4{margin:0 0 8px}.pricing-article .scope-grid p{grid-column:2}.pricing-article .scope-top{gap:15px}.pricing-article .price-token{font-size:22px;padding:13px}.pricing-article .scope-top p{font-size:16px}}
@media(max-width:600px){.pricing-article .article-heading{margin:25px 0}.pricing-article .article-heading h1{font-size:32px;line-height:1.4}.pricing-article .byline{font-size:11px;line-height:1.8}.pricing-article .p01-cover{margin-bottom:28px}.pricing-article .prose p{font-size:17px;line-height:1.95;margin-bottom:19px}.pricing-article .prose section h2{font-size:25px}.pricing-article .article-intro>p:first-child{font-size:23px}.pricing-article .photo-pair{grid-template-columns:1fr}.pricing-article .photo-window{aspect-ratio:1/1}.pricing-article .photo-window img{height:auto;top:50%;transform:translateY(-50%)}.pricing-article .figure-heading{padding:21px 20px 18px}.pricing-article .figure-heading h3{font-size:22px}.pricing-article .photo-label{padding:17px 20px 20px}.pricing-article .photo-label p{font-size:15px;margin:8px 0 0}.pricing-article figcaption{padding:14px 20px}.pricing-article .scope-top{padding:20px 16px;gap:12px}.pricing-article .scope-top p{font-size:15px;margin:0}.pricing-article .price-token{font-size:21px;padding:12px}.pricing-article .scope-plus{font-size:25px}.pricing-article .scope-grid p{font-size:16px;margin:0}.pricing-article .explain-figure{box-shadow:3px 3px 0 #e3d8f5}.pricing-article .article-cta{font-size:16px}}

.pricing-article .figure-heading h3{scroll-margin-top:135px}
@media(max-width:360px){.pricing-article .scope-top{padding:18px 12px;gap:8px}.pricing-article .price-token{font-size:19px;padding:10px}.pricing-article .scope-plus{font-size:22px}.pricing-article .scope-top p{font-size:14px}}

/* Worked example: an actual service-page arrangement after the checklist. */
.pricing-article .finished-example{margin:36px 0 0;scroll-margin-top:140px}
.pricing-article .finished-example>h3{font-size:25px;line-height:1.5;margin:0 0 12px}
.pricing-article .finished-example .demo-context{font-size:16px;color:#655e6f;line-height:1.9;margin-bottom:22px}
.pricing-article .service-demo{border:1px solid #d3c8e1;background:white;box-shadow:5px 5px 0 #e3d8f5}
.pricing-article .demo-head{background:#eee7ff;padding:30px 32px;border-top:6px solid var(--purple)}
.pricing-article .demo-kicker{font-size:12px;font-weight:800;color:var(--purple);letter-spacing:2px}
.pricing-article .demo-head h4{font-size:30px;line-height:1.5;margin:12px 0}
.pricing-article .demo-head p{font-size:16px;margin:0;line-height:1.85}
.pricing-article .demo-price{font-size:54px;line-height:1.3;font-weight:900;color:var(--purple);margin:23px 0 8px}
.pricing-article .demo-price>span,.pricing-article .demo-price>small{font-size:22px;font-weight:700}
.pricing-article .demo-head .demo-price-note{font-size:15px}
.pricing-article .demo-content{padding:28px 32px 32px}
.pricing-article .demo-block{padding-bottom:23px;margin-bottom:23px;border-bottom:1px solid #e4dced}
.pricing-article .demo-content h5{font-size:20px;margin:0 0 12px;line-height:1.5}
.pricing-article .demo-content p,.pricing-article .demo-content li{font-size:16px;line-height:1.85;margin:0}
.pricing-article .demo-content ul{padding-left:22px;margin:0}
.pricing-article .demo-content li+li{margin-top:6px}
.pricing-article .demo-conditions{padding:20px;background:#f5f1fa}
.pricing-article .demo-conditions b,.pricing-article .demo-next>b{display:block;font-size:17px;line-height:1.6;margin-bottom:8px}
.pricing-article .demo-next{margin-top:26px}
.pricing-article .demo-button{display:flex;justify-content:space-between;align-items:center;gap:15px;background:var(--purple);color:white;font-size:16px;font-weight:800;padding:16px 20px;margin-top:18px}
@media(max-width:600px){.pricing-article .demo-head{padding:23px 20px}.pricing-article .demo-head h4{font-size:25px}.pricing-article .demo-price{font-size:44px}.pricing-article .demo-content{padding:23px 20px}.pricing-article .demo-conditions{padding:16px}.pricing-article .service-demo{box-shadow:3px 3px 0 #e3d8f5}.pricing-article .demo-button{font-size:15px;padding:14px 16px}.pricing-article .finished-example>h3{font-size:23px}}

.pricing-article .demo-next{scroll-margin-top:150px}