/* Real client screens, composed in the page. The captures remain unaltered. */
.cs-visual-section{padding:0 0 clamp(24px,4vw,60px)}
.cs-showcase{margin:0}
.cs-showcase>figcaption,.cs-tool figcaption,.cs-daynight figcaption{font-size:.83rem;color:var(--muted);line-height:1.6;padding:16px 0;max-width:78ch}
.cs-scene{position:relative;isolation:isolate;aspect-ratio:16/10;overflow:hidden;border-radius:18px;border:1px solid var(--line);container-type:inline-size}
.cs-scene--bronze{background-color:#202326;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:5% 8%;color:#fff}
.cs-scene--bronze:after{content:'';position:absolute;inset:auto 0 0;height:10px;background:repeating-linear-gradient(135deg,#e32824 0 16px,#8b1e21 16px 32px)}
.cs-scene-title{position:absolute;left:5%;top:6%;z-index:3}
.cs-scene-title>span{display:block;font-family:var(--fm);font-size:1.03cqw;text-transform:uppercase;letter-spacing:.14em;margin-bottom:1.2cqw}
.cs-scene-title strong{font-size:5.5cqw;line-height:.92;letter-spacing:-.045em;text-transform:uppercase;font-weight:850}
.cs-scene--bronze .cs-scene-title strong{color:#fff}
.cs-desktop{position:absolute;left:10%;top:33%;width:70%;border-radius:10px;overflow:hidden;box-shadow:0 28px 60px #0005;transform:rotate(-5deg);border:1px solid #ffffff3d;transition:transform .65s var(--ease)}
.cs-desktop img{width:100%;height:auto;display:block}
.cs-screen-bar{display:flex;align-items:center;gap:.55cqw;background:#f6f6f6;color:#414148;padding:.85cqw 1.2cqw;font:1cqw var(--fm);border-bottom:1px solid #ddd}
.cs-screen-bar i{width:.6cqw;height:.6cqw;border-radius:50%;background:#bbb}.cs-screen-bar i:last-of-type{margin-right:1cqw}
.cs-phone{position:absolute;right:6%;top:18%;width:22%;border:clamp(3px,.7cqw,10px) solid #15171b;border-radius:2.8cqw;overflow:hidden;box-shadow:0 25px 45px #0006;transform:rotate(8deg);z-index:4;transition:transform .65s var(--ease)}
.cs-phone img{display:block;width:100%;height:auto}
.cs-scene-note{position:absolute;bottom:6%;left:5%;display:flex;gap:2cqw;z-index:5;font:1.02cqw var(--fm);text-transform:uppercase;letter-spacing:.03em;background:#202326e8;color:#fff;padding:1.1cqw 1.4cqw;border-left:3px solid #f53a36}
.cs-scene-seal{position:absolute;right:6%;bottom:7%;z-index:5;width:10.5%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;text-align:center;border:1px solid currentColor;border-radius:50%;font:1.07cqw/1.6 var(--fm);transform:rotate(-12deg);background:#202326;color:#fff}
.cs-scene-seal b{text-transform:uppercase;font-size:.9cqw}
.cs-registration{position:absolute;color:#ff5d53;font:3cqw var(--fm)}.cs-registration--one{left:3%;top:33%}.cs-registration--two{right:3%;bottom:32%}
.cs-scene--princess{background:radial-gradient(ellipse at 77% 5%,#fff9eb 0,transparent 45%),radial-gradient(ellipse at 15% 90%,#dfbddf 0,transparent 60%),#f9dfeb;color:#392346}
.cs-scene--princess:before{content:'';position:absolute;width:60%;aspect-ratio:1;border:1px solid #ffffffa8;border-radius:50%;left:-10%;top:-30%;box-shadow:0 0 0 3cqw #ffffff25,0 0 0 6cqw #ffffff20}
.cs-scene--princess .cs-scene-title strong{text-transform:none;font-size:6.1cqw;color:#392346}
.cs-scene-title em{font-family:var(--fa);font-weight:500;color:#a52770}
.cs-scene--princess .cs-desktop{top:35%;left:8%;transform:rotate(-6deg);border:6px solid #fffc;border-radius:12px}
.cs-scene--princess .cs-phone{right:8%;top:20%;transform:rotate(9deg);border-color:#452b54}
.cs-scene--princess .cs-scene-note{background:#fff9f1;color:#653450;border-color:#ba4081;box-shadow:0 5px 20px #9e54852b;transform:rotate(-2deg)}
.cs-scene--princess .cs-scene-seal{background:#fae4aa;border:1px dashed #b88134;color:#594022;right:4%;bottom:7%;transform:rotate(12deg)}
.cs-star{position:absolute;color:#a97820;z-index:5;line-height:1}.cs-star--one{right:33%;top:8%;font-size:7cqw}.cs-star--two{left:3%;top:63%;font-size:4cqw}
.cs-chapter-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(30px,6vw,96px);align-items:start}
.cs-chapter-grid--reverse .cs-copy{order:2}.cs-chapter-grid--reverse>figure{order:1}
.cs-copy h2{font-size:clamp(1.8rem,3.4vw,3.3rem);line-height:1.04;margin:0 0 26px}
.cs-copy p:not(.eyebrow){color:var(--muted);line-height:1.8;margin-bottom:1.2em;max-width:58ch}
.cs-copy .wd-quiet{display:inline-flex;gap:12px;align-items:center;margin-top:10px;line-height:1.5}
.cs-chapter--tint{background:color-mix(in srgb,var(--brand) 4%,var(--bg));border-block:1px solid var(--line)}
.cs-tool{margin:0;padding:clamp(16px,2.6vw,34px);border-radius:16px;min-width:0;box-shadow:0 18px 50px #0000000d}
.cs-tool--bronze{background:linear-gradient(140deg,#303439,#191c20);border:1px solid #41474d}
.cs-tool--princess{background:linear-gradient(145deg,#f3d1e8,#fdf0dd);border:1px solid #ddbdd2;transform:rotate(1deg)}
.cs-tool-label{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;color:#fff}
.cs-tool-label span{font: .64rem var(--fm);letter-spacing:.13em;text-transform:uppercase;color:#ffb0a7}
.cs-tool-label b{font-size:clamp(1.05rem,1.8vw,1.45rem)}
.cs-tool--princess .cs-tool-label{color:#462b50}.cs-tool--princess .cs-tool-label span{color:#843463}
.cs-tool a{display:block;border-radius:7px;overflow:hidden;outline-offset:5px;background:#fff}
.cs-tool img{display:block;width:100%;height:auto}
.cs-tool figcaption{color:#d1d5dc;padding-bottom:0;font-size:.75rem}.cs-tool--princess figcaption{color:#68425d}
.cs-daynight{margin:0;padding:30px 26px 18px;background:linear-gradient(135deg,#f6dce8 0 48%,#30213e 52%);border-radius:18px;min-width:0;overflow:hidden}
.cs-daynight-label{display:flex;justify-content:space-around;margin-bottom:22px;font:.7rem var(--fm);text-transform:uppercase;letter-spacing:.1em;color:#63324f}.cs-daynight-label span+span{color:#ffdfb2}
.cs-daynight-phones{display:flex;gap:7%;align-items:start;padding:8px 0 20px}.cs-daynight-phones img{width:46.5%;height:auto;display:block;border:5px solid #fff;border-radius:20px;box-shadow:0 12px 28px #0003;transform:rotate(-4deg)}.cs-daynight-phones img+img{border-color:#21162e;transform:rotate(4deg);margin-top:36px}
.cs-daynight figcaption{color:#fff;background:#34233e;border-radius:5px;padding:10px 12px}
.cs-conclusion{max-width:900px;margin:auto;text-align:center}.cs-conclusion h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;margin-bottom:28px}.cs-conclusion>p:not(.eyebrow){max-width:66ch;margin:0 auto 1.1em;color:var(--muted);line-height:1.8}.cs-next{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:32px}.cs-next>a:not(.fq-btn){color:var(--brand-text,var(--brand));text-underline-offset:4px}
.cs-cms{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);padding:clamp(24px,4vw,54px);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:12px;background:var(--card)}.cs-cms h2{font-size:clamp(1.8rem,3vw,3rem);line-height:1.1}.cs-cms p:not(.eyebrow){color:var(--muted);line-height:1.8;margin-bottom:1em}
@media(max-width:800px){.cs-cms{grid-template-columns:1fr}}
/* Work-index cards share the compositions, exported from these live page layouts. */
.ww-local-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:32px}
.ww-local-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--ink)}
.ww-local-card>a{display:block}.ww-local-card img{width:100%;height:auto;display:block;transition:transform .5s var(--ease)}
.ww-local-copy{padding:clamp(22px,3vw,40px)}.ww-local-copy .eyebrow{font-size:.64rem}.ww-local-copy h3{font-size:clamp(1.7rem,2.6vw,2.7rem);line-height:1.05;margin:14px 0}.ww-local-copy p{color:var(--muted);line-height:1.7;margin-bottom:20px}.ww-local-copy>a{color:var(--brand-text,var(--brand));font-weight:700;text-underline-offset:4px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.cs-scene:hover .cs-desktop{transform:rotate(-3deg) translateY(-5px)}.cs-scene:hover .cs-phone{transform:rotate(5deg) translateY(-6px)}.ww-local-card:hover img{transform:scale(1.018)}}
@media(max-width:800px){.cs-chapter-grid{grid-template-columns:1fr;gap:28px}.cs-chapter-grid--reverse .cs-copy,.cs-chapter-grid--reverse>figure{order:initial}.cs-tool{max-width:650px;width:100%;box-sizing:border-box}.ww-local-grid{grid-template-columns:1fr}.cs-page .wd-tag{display:none}.cs-scene{aspect-ratio:4/3}.cs-scene-title strong{font-size:7cqw}.cs-scene--princess .cs-scene-title strong{font-size:7.3cqw}.cs-scene-title>span{font-size:1.5cqw}.cs-phone{top:25%;width:25%}.cs-scene--princess .cs-phone{top:28%}.cs-desktop,.cs-scene--princess .cs-desktop{top:40%}.cs-scene-note{font-size:1.25cqw;bottom:5%;gap:1cqw}.cs-scene-seal{font-size:1.25cqw;width:12%}.cs-scene-seal b{font-size:1.1cqw}.cs-showcase>figcaption{font-size:.75rem}.cs-daynight{padding:22px 18px 16px}}
@media(prefers-reduced-motion:reduce){.cs-desktop,.cs-phone,.ww-local-card img{transition:none}}