[data-plan-demo]{--pd-line:#b5c9e544;--pd-muted:#9aacc5;--pd-light:#eaf2ff;color:var(--pd-light);min-width:0}[data-plan-demo] *{box-sizing:border-box;min-width:0}[data-plan-demo] .pd-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}[data-plan-demo] .pd-switch{display:flex;gap:5px;padding:5px;border:1px solid #758ba344;border-radius:30px;background:#101925}[data-plan-demo] button{font:inherit;cursor:pointer;touch-action:manipulation}[data-plan-demo] .pd-mode{min-height:44px;padding:11px 20px;display:flex;align-items:center;gap:11px;border:0;border-radius:24px;background:transparent;color:#a8bad1;font-size:12px}[data-plan-demo] .pd-mode>span{font-size:9px;opacity:.65}[data-plan-demo] .pd-mode[aria-pressed=true]{background:#dae7f7;color:#172435;box-shadow:inset 0 1px #fff9}[data-plan-demo] button:focus-visible{outline:3px solid #9bddec;outline-offset:4px}[data-plan-demo] .pd-stage{min-height:470px;position:relative;overflow:hidden;border:1px solid #7e9aba44;border-radius:12px;isolation:isolate;background:radial-gradient(ellipse at 75% 50%,#3b59771f,transparent 60%),linear-gradient(90deg,#7a9cc414 1px,transparent 1px),linear-gradient(#7a9cc414 1px,transparent 1px),#101925;background-size:auto,28px 28px,28px 28px,auto;transition:background-color .8s ease}[data-plan-demo] .pd-blueprint-layer{position:absolute;inset:0;opacity:1;transform:translateY(0) scale(1);transition:opacity .65s ease,transform .9s cubic-bezier(.2,.7,.2,1);pointer-events:none}[data-plan-demo] .pd-plan-stamp{position:absolute;top:16px;left:20px;display:flex;gap:15px;align-items:center;color:#829dba;font-size:9px;letter-spacing:.1em;z-index:1}[data-plan-demo] .pd-plan-stamp b{font-size:11px;font-weight:400;letter-spacing:0;color:#a5bbd1}[data-plan-demo] .pd-blueprint{position:absolute;inset:0;width:100%;height:100%}[data-plan-demo] .pd-blueprint-mobile{display:none}[data-plan-demo] .pd-sketch-soft{stroke:#c6d6e9;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;opacity:.86}[data-plan-demo] .pd-sketch-soft>path:nth-child(2){stroke-width:.55;opacity:.4}[data-plan-demo] .pd-measure{stroke:#7d9bbd;stroke-width:.75;stroke-linecap:round;opacity:.68}[data-plan-demo] .pd-handwriting{font-family:'Segoe Print','Bradley Hand',cursive;font-size:11px;fill:#8fa9c9}[data-plan-demo] .pd-point{fill:#b6cde8}[data-plan-demo] .pd-render-layer{position:absolute;inset:14.25% 8.9%;opacity:0;transform:translateY(9px) scale(.974);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1);pointer-events:none}[data-plan-demo] .pd-render-browser{height:100%;border:1px solid #bdd6f16b;border-radius:8px;background:radial-gradient(ellipse at 76% 30%,#47729430,transparent 58%),linear-gradient(135deg,#1d2940,#131b29);box-shadow:0 23px 55px #0004,inset 0 1px #d6eaff2e;overflow:hidden}[data-plan-demo] .pd-render-nav{height:12%;min-height:32px;border-bottom:1px solid #97b6d62b;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 4%;font-size:8px;letter-spacing:.12em;color:#b4c6dc}[data-plan-demo] .pd-dots{display:flex;gap:5px}[data-plan-demo] .pd-dots i{height:4px;width:4px;border-radius:50%;background:#b1c5df77}[data-plan-demo] .pd-render-menu{display:flex;gap:8px}[data-plan-demo] .pd-render-menu i{width:25px;height:2px;background:#9cb3cf50}[data-plan-demo] .pd-render-content{position:relative;min-height:0;height:88%;display:flex;align-items:center;padding:5% 4%;isolation:isolate}[data-plan-demo] .pd-render-copy{position:relative;z-index:2;width:55%}[data-plan-demo] .pd-kicker{font-size:8px;letter-spacing:.16em;color:#7abfce}[data-plan-demo] .pd-render-copy>strong{display:block;font-size:clamp(29px,3.8vw,48px);font-weight:600;line-height:1.02;letter-spacing:-.065em;margin:16px 0 15px;color:#f2f6fd}[data-plan-demo] .pd-render-copy em{font-style:normal;color:#b7c9ef}[data-plan-demo] .pd-render-copy p{font-size:10px;line-height:1.8;margin:0 0 19px;color:#98adc9}[data-plan-demo] .pd-illustrative-cta{display:inline-flex;align-items:center;gap:25px;border:1px solid #fab2a087;border-radius:22px;background:#f6a792;color:#2a2530;padding:10px 14px;font-size:9px;box-shadow:0 5px 20px #faab8d14}[data-plan-demo] .pd-illustrative-cta b{font-weight:400;font-size:13px}[data-plan-demo] .pd-render-art{position:absolute;width:44%;height:95%;right:3%;bottom:0;pointer-events:none;transform:translateY(15px) rotate(-4deg);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}[data-plan-demo] .pd-glass-sphere{position:absolute;width:75%;aspect-ratio:1;left:12%;top:17%;border:1px solid #d7ecff5c;border-radius:50%;background:radial-gradient(circle at 28% 20%,#d6efff5e,transparent 37%),radial-gradient(ellipse at 65% 68%,#9e82e450,transparent 70%),linear-gradient(150deg,#4dbddc44,#15304e40 42%,#8f89d344);box-shadow:inset 5px 8px 22px #cff6ff21,inset -15px -10px 33px #9c8bdc2a,0 24px 40px #03091842}[data-plan-demo] .pd-chrome-orbit{position:absolute;border:1px solid #c1e9fc9c;border-radius:50%;left:0;top:34%;width:100%;height:35%;box-shadow:0 0 12px #74d7f821}[data-plan-demo] .pd-orbit-one{transform:rotate(-27deg)}[data-plan-demo] .pd-orbit-two{transform:rotate(30deg);width:86%;left:7%;opacity:.35}[data-plan-demo] .pd-glow{position:absolute;inset:18% 15% 8%;border-radius:50%;background:radial-gradient(ellipse,#73cee719,transparent 67%);filter:blur(6px);z-index:-1}[data-plan-demo] .pd-satellite{position:absolute;right:1%;top:30%;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 25% 22%,#f2fdff,#78bbd6 45%,#2c526e);box-shadow:0 2px 8px #a3e9f649}[data-plan-demo] .pd-stage-note{position:absolute;bottom:15px;right:20px;font-size:8px;letter-spacing:.13em;color:#7c96b7;pointer-events:none}[data-plan-demo][data-mode=render] .pd-blueprint-layer{opacity:0;transform:translateY(-7px) scale(1.018)}[data-plan-demo][data-mode=render] .pd-render-layer{opacity:1;transform:none}[data-plan-demo][data-mode=render] .pd-render-art{transform:translateY(0) rotate(0)}[data-plan-demo] .pd-observe{display:flex;flex-wrap:wrap;gap:10px 23px;margin:19px 0 14px;font-size:10px;color:#a7bad2}[data-plan-demo] .pd-observe>span{display:inline-flex;gap:8px;align-items:center}[data-plan-demo] .pd-observe i{width:5px;height:5px;border-radius:50%}[data-plan-demo] .pd-ink-dot{background:#b4c7e2}[data-plan-demo] .pd-cyan-dot{background:#73cfdf}[data-plan-demo] .pd-coral-dot{background:#f1ae99}[data-plan-demo] .pd-status{font-size:12px;line-height:1.8;color:#c2d1e6;margin:0 0 7px;min-height:22px}[data-plan-demo] .pd-caption{font-size:10px;line-height:1.8;color:#778faa;margin:0;max-width:730px}
@media(max-width:620px){[data-plan-demo] .pd-toolbar{gap:12px}[data-plan-demo] .pd-mode{font-size:11px;padding:10px 17px;gap:9px}[data-plan-demo] .pd-stage{min-height:540px;border-radius:9px;background-size:auto,23px 23px,23px 23px,auto}[data-plan-demo] .pd-plan-stamp{top:15px;left:16px;display:block;font-size:8px;line-height:1.8}[data-plan-demo] .pd-plan-stamp b{display:block;font-size:9px}[data-plan-demo] .pd-blueprint-desktop{display:none}[data-plan-demo] .pd-blueprint-mobile{display:block}[data-plan-demo] .pd-render-layer{inset:12.8% 7.5% 10.8%;transform:translateY(7px) scale(.98)}[data-plan-demo] .pd-render-browser{border-radius:7px}[data-plan-demo] .pd-render-nav{height:9.6%;min-height:33px;font-size:7px;padding:0 6%}[data-plan-demo] .pd-render-menu{gap:5px}[data-plan-demo] .pd-render-menu i{width:16px}[data-plan-demo] .pd-render-content{height:90.4%;display:block;padding:8% 6%}[data-plan-demo] .pd-render-copy{width:100%}[data-plan-demo] .pd-kicker{font-size:7px}[data-plan-demo] .pd-render-copy>strong{font-size:clamp(29px,9vw,38px);margin:15px 0 13px}[data-plan-demo] .pd-render-copy p{font-size:9px;margin-bottom:16px}[data-plan-demo] .pd-illustrative-cta{font-size:8px;padding:9px 13px;gap:21px}[data-plan-demo] .pd-render-art{width:61%;height:43%;right:3%;bottom:0}[data-plan-demo] .pd-glass-sphere{top:7%}[data-plan-demo] .pd-chrome-orbit{top:25%}[data-plan-demo] .pd-satellite{top:20%;width:9px;height:9px}[data-plan-demo] .pd-stage-note{font-size:7px;bottom:12px;right:14px}[data-plan-demo] .pd-observe{gap:10px 16px;font-size:9px}[data-plan-demo] .pd-status{font-size:11px}[data-plan-demo] .pd-caption{font-size:9px}}
@media(prefers-reduced-motion:reduce){[data-plan-demo] *,[data-plan-demo] *:before,[data-plan-demo] *:after{transition:none!important;animation:none!important}}

/* Original artwork occupies the illustrated zone; labels remain real HTML. */
[data-plan-demo] .pd-render-browser{background:#0d1522}
[data-plan-demo] .pd-render-nav{position:relative;z-index:3;background:#0e1725eb;color:#d4dfed}
[data-plan-demo] .pd-render-content{padding:5% 5%}
[data-plan-demo] .pd-render-art{width:100%;height:100%;inset:0;transform:translateY(6px) scale(1.025);z-index:-1;overflow:hidden}
[data-plan-demo] .pd-render-image{display:block;width:100%;height:100%;object-fit:cover;object-position:68% 50%;opacity:1}
[data-plan-demo] .pd-image-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0d1522e8 0%,#0d152298 32%,#0d152200 69%),linear-gradient(0deg,#0d1522b3,transparent 24%)}
[data-plan-demo] .pd-render-copy{width:55%;text-shadow:0 2px 20px #0008}
[data-plan-demo] .pd-render-copy>strong{font-size:clamp(29px,3.8vw,48px);color:#f5f8ff}
[data-plan-demo] .pd-render-copy em{color:#b6d9fa}
[data-plan-demo] .pd-render-copy p{color:#c2d0e1}
[data-plan-demo] .pd-illustrative-cta{background:#d8f4fa;border-color:#d8f4fa;color:#132a35;text-shadow:none;box-shadow:0 6px 30px #9ae7ff1c}
[data-plan-demo] .pd-kicker{color:#9adfea}
[data-plan-demo] .pd-art-index{position:absolute;z-index:2;right:4%;bottom:6%;width:29%;display:grid;grid-template-columns:1fr auto;gap:8px;font-size:7px;letter-spacing:.12em;color:#dce6f8;text-shadow:0 1px 8px #000}
[data-plan-demo] .pd-art-index>i{width:5px;height:5px;align-self:center;border-radius:50%;background:#a4eaff;box-shadow:0 0 9px #86e2ff88}
[data-plan-demo] .pd-art-index>b{grid-column:1/-1;font-size:6px;font-weight:400;color:#adbbcd}
[data-plan-demo] .pd-art-fallback{display:none}
[data-plan-demo][data-art-ready=fallback] .pd-render-image{visibility:hidden}
[data-plan-demo][data-art-ready=fallback] .pd-art-fallback{display:block;left:60%;width:30%;top:25%}
[data-plan-demo][data-art-ready=fallback] .pd-chrome-orbit{height:32%;left:52%;width:44%;top:37%;transform:rotate(-24deg)}
[data-plan-demo][data-mode=render] .pd-render-art{transform:none}
[data-plan-demo][data-variant=matiere] .pd-render-browser{background:#1e171a}
[data-plan-demo][data-variant=matiere] .pd-render-nav{background:#211a22eb;border-color:#e8c2bc29}
[data-plan-demo][data-variant=matiere] .pd-image-shade{background:linear-gradient(90deg,#20171be8 0%,#20171b99 32%,#20171b00 69%),linear-gradient(0deg,#20171bb3,transparent 24%)}
[data-plan-demo][data-variant=matiere] .pd-kicker,[data-plan-demo][data-variant=matiere] .pd-render-copy em{color:#f2c3b1}
[data-plan-demo][data-variant=matiere] .pd-illustrative-cta{color:#36211c;background:#f2c3b1;border-color:#f2c3b1}
[data-plan-demo][data-variant=matiere] .pd-art-index>i{background:#ffd1ac;box-shadow:0 0 9px #ffc29b88}
@media(max-width:620px){
 [data-plan-demo] .pd-render-content{padding:7% 6%;height:90.4%}
 [data-plan-demo] .pd-render-copy{width:100%}
 [data-plan-demo] .pd-render-copy>strong{font-size:clamp(28px,9vw,38px);margin:12px 0 11px}
 [data-plan-demo] .pd-render-copy p{font-size:9px;line-height:1.65;margin-bottom:13px}
 [data-plan-demo] .pd-render-art{inset:35% 0 0;width:100%;height:65%;z-index:-1}
 [data-plan-demo] .pd-render-image{object-position:72% 50%}
 [data-plan-demo] .pd-image-shade{background:linear-gradient(180deg,#0d1522 0%,#0d152250 28%,#0d152200 56%),linear-gradient(0deg,#0d1522a3,transparent 28%)}
 [data-plan-demo][data-variant=matiere] .pd-image-shade{background:linear-gradient(180deg,#1e171a 0%,#1e171a50 28%,#1e171a00 56%),linear-gradient(0deg,#1e171aa3,transparent 28%)}
 [data-plan-demo] .pd-art-index{right:7%;bottom:5%;width:47%;font-size:6px}
 [data-plan-demo] .pd-art-index>b{font-size:5px}
}
@media(prefers-reduced-motion:reduce){[data-plan-demo] .pd-render-art{transform:none}}

/* Keep mobile render geometry stable in both states, including during reverse fades. */
@media(max-width:620px){
 [data-plan-demo] .pd-stage{overflow-anchor:none}
 [data-plan-demo][data-mode=render] .pd-stage{min-height:0;aspect-ratio:1.5;height:auto;border-radius:10px;background:#0d1522}
 [data-plan-demo][data-mode=render][data-variant=matiere] .pd-stage{background:#1e171a}
 [data-plan-demo] .pd-render-layer{inset:0;transform:none}
 [data-plan-demo] .pd-render-browser{border:0;border-radius:9px;box-shadow:inset 0 1px #e2efff24}
 [data-plan-demo] .pd-render-nav{height:24px;min-height:24px;padding:0 5%;font-size:6px;letter-spacing:.1em}
 [data-plan-demo] .pd-dots{gap:3px}
 [data-plan-demo] .pd-dots i{width:3px;height:3px}
 [data-plan-demo] .pd-render-menu{gap:4px}
 [data-plan-demo] .pd-render-menu i{width:14px}
 [data-plan-demo] .pd-render-content{display:flex;align-items:center;height:calc(100% - 24px);padding:4% 5%;overflow:hidden}
 [data-plan-demo] .pd-render-copy{width:57%;text-shadow:0 1px 12px #0009}
 [data-plan-demo] .pd-kicker{display:block;font-size:5px;letter-spacing:.11em;line-height:1.3}
 [data-plan-demo] .pd-render-copy>strong{font-size:clamp(15px,4.6vw,25px);line-height:1.04;letter-spacing:-.055em;margin:8px 0 7px}
 [data-plan-demo] .pd-render-copy p{font-size:7px;line-height:1.5;margin:0 0 9px}
 [data-plan-demo] .pd-illustrative-cta{padding:6px 8px;gap:12px;font-size:6px;line-height:1.2;white-space:nowrap}
 [data-plan-demo] .pd-illustrative-cta b{font-size:9px}
 [data-plan-demo] .pd-render-art{inset:0;width:100%;height:100%;transform:none}
 [data-plan-demo] .pd-render-image{object-fit:cover;object-position:68% 50%}
 [data-plan-demo] .pd-image-shade{background:linear-gradient(90deg,#0d1522c2 0%,#0d15226b 35%,#0d152200 68%),linear-gradient(0deg,#0d1522a3,transparent 24%)}
 [data-plan-demo][data-variant=matiere] .pd-image-shade{background:linear-gradient(90deg,#20171bc2 0%,#20171b6b 35%,#20171b00 68%),linear-gradient(0deg,#20171ba3,transparent 24%)}
 [data-plan-demo] .pd-art-index{right:5%;bottom:6%;width:30%;gap:5px;font-size:5px;line-height:1.2}
 [data-plan-demo] .pd-art-index>b{font-size:4px}
 [data-plan-demo] .pd-art-index>i{width:3px;height:3px}
 [data-plan-demo] .pd-stage-note{display:none}
}


/* V4: the mobile drawing and render share one fixed landscape geometry. */
@media(max-width:620px){
 [data-plan-demo] .pd-stage{min-height:0;aspect-ratio:1.5;height:auto;border-radius:10px}
 [data-plan-demo] .pd-plan-stamp,[data-plan-demo] .pd-stage-note{display:none}
 [data-plan-demo] .pd-blueprint-mobile{width:100%;height:100%}
 [data-plan-demo] .pd-blueprint-mobile .pd-sketch-soft{stroke-width:2.2}
 [data-plan-demo] .pd-blueprint-mobile .pd-sketch-soft>path:nth-child(2){stroke-width:1.1}
 [data-plan-demo] .pd-blueprint-mobile .pd-measure{stroke-width:1.4}
 [data-plan-demo] .pd-blueprint-mobile .pd-handwriting{font-size:18px}
}