/* Website-only layout adapter. Canonical theme tokens remain unchanged.
   Not included in customer/API assets or release packages. */
html[data-wpi-theme] .wpi-marketing{
 --website-card-gutter:clamp(16px,2vw,32px);
 --website-section-radius:24px;
 background:#f5fbff;
}
html[data-wpi-theme] .wpi-marketing main>:is(.hero,section){
 width:calc(100% - 2 * var(--website-card-gutter));
 margin:var(--website-card-gutter) auto;
 border-radius:var(--website-section-radius);
 border:1px solid var(--wpi-border);
}
html[data-wpi-theme] .wpi-marketing main>section{
 max-width:1440px;
 padding:clamp(28px,4.4vw,72px);
 scroll-margin-top:var(--website-card-gutter);
 box-shadow:var(--wpi-shadow);
}
html[data-wpi-theme] .wpi-marketing .hero{border-color:#1597c7}
html[data-wpi-theme] .wpi-marketing footer{
 width:calc(100% - 2 * var(--website-card-gutter));
 max-width:1440px;
 margin:var(--website-card-gutter) auto;
 border-radius:var(--website-section-radius);
 padding:28px clamp(24px,4vw,64px);
 border:1px solid var(--wpi-border);
}
body.wpi-auth-page main :is(.panel,.note,.quick-guide,details){
 border-radius:var(--wpi-radius);
 min-width:0;
}
body.wpi-auth-page main .panel{
 border:1px solid var(--wpi-border);
 box-shadow:var(--wpi-shadow);
}
body.wpi-directory-page main .panel{border-width:2px}
body.wpi-auth-page main .grid>*{min-width:0}
@media(max-width:720px){
 html[data-wpi-theme] .wpi-marketing{--website-section-radius:20px}
 html[data-wpi-theme] .wpi-marketing main>section{padding:28px 22px}
 html[data-wpi-theme] .wpi-marketing footer{padding:24px 22px}
}