/* Preview placements reserve space without covering content or workflow controls. */
.ad-preview-slot{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px;min-width:0;margin:0;font-family:var(--font-body)}
.ad-preview-label{color:var(--muted);font-size:10px;font-weight:400;line-height:1.4;letter-spacing:.04em}
.ad-preview-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;max-width:100%;min-height:0;max-height:500px;border:2px solid #DE032D;background:#fff2f5;color:#8f1230;text-align:center;pointer-events:none}
.ad-preview-box strong{font-size:14px;font-weight:600}
.ad-preview-size{font-size:12px;line-height:1.4}
.ad-preview-slot--rectangle .ad-preview-box{width:300px;height:250px}
/* Profit keeps its rectangle on narrower desktop windows; phones use the responsive rule below. */
.ad-preview-slot--profit .ad-preview-box{width:336px;height:280px}
.ad-preview-slot--banner .ad-preview-box{width:728px;height:90px}
/* Reserve initial space; live automatic units may grow to their served height. */
.ad-preview-slot--responsive{--responsive-ad-max-height:500px;--responsive-ad-height-ratio:.2622866011}
.ad-preview-slot--responsive .ad-preview-box{width:min(1933px,100%);height:min(var(--responsive-ad-max-height),calc((100vw - 64px) * var(--responsive-ad-height-ratio)));max-height:var(--responsive-ad-max-height)}
.ad-preview-size-ultrawide{display:none}
/* Compact responsive areas only in very wide ultrawide windows, preserving standard desktop sizing. */
@media(min-width:1920px) and (min-aspect-ratio:21/9){
.ad-preview-slot--responsive{--responsive-ad-max-height:250px}
.ad-preview-slot--responsive .ad-preview-size-desktop{display:none}
.ad-preview-size-ultrawide{display:inline}
}
/* Tool gallery rows and the ad below the form use wide, slim desktop banners. */
@media(min-width:1024px){
.ad-preview-slot--responsive-banner{--responsive-ad-max-height:100px}
.ad-preview-slot--responsive-banner .ad-preview-box{width:min(970px,100%);height:100px}
}
.ad-preview-size-tablet,.ad-preview-size-mobile,.ad-preview-size-small{display:none}
.ad-preview-wide{width:min(1120px,calc(100% - 64px));margin-inline:auto;padding-block:24px}
/* Give app descriptions one 20px gap above the ad, without stacked intro padding. */
.ad-tool-main .intro:has(+ #app-before-workspace-ad){padding-block-end:0}
/* Anchor visible tool controls instead of a late-growing responsive ad. */
#app-before-workspace-ad{padding-block:20px;overflow-anchor:none}
.ad-preview-flow{padding-block:32px}
/* Keep the download banner separated from actions and avoid a second banner below it. */
.download-ad{align-self:stretch;min-width:0;margin-block:20px}
#result-message .download-ad + .result-actions{margin-block-start:0}
#workspace:has(#result-message:not([hidden])) + #app-after-workspace-ad{display:none}
/* Include the preceding banner in existing workspace step scrolls. */
.ad-tool-main #workspace{scroll-margin-block-start:var(--workspace-ad-scroll-space,192px)}
.ad-preview-feed{grid-column:1 / -1;margin-block:16px;padding-block:12px}
.ad-tool-aside,.ad-blog-companion,.ad-blog-sticky{display:none}
:root[data-appearance=dark] .ad-preview-box{background:#2b1c24;color:#ffd6df;border-color:#DE032D}
.ad-tool-main{min-width:0}
/* The upper rectangle scrolls normally; the lower one stays within its sidebar. */
@media(min-width:1200px) and (min-height:600px) and (hover:hover) and (pointer:fine){
.blog .blog-article-layout.ad-blog-layout{grid-template-columns:300px minmax(0,1fr);gap:48px}
.ad-blog-layout .blog-sidebar{display:block;align-self:stretch}
.ad-blog-layout .blog-sidebar-inner{position:static}
.ad-blog-companion{display:block;margin-block-start:32px}
.ad-blog-sticky{display:block;position:sticky;top:24px;margin-block-start:32px}
}
/* Tablet and phone units remain in the normal page flow. */
@media(max-width:1023px){
:is(.ad-preview-slot--banner,.ad-preview-slot--responsive) .ad-preview-box{width:468px;height:60px}
.ad-preview-size-desktop{display:none}
.ad-preview-size-tablet{display:inline}
}
@media(max-width:767px){
:is(.ad-preview-slot--banner,.ad-preview-slot--responsive) .ad-preview-box{width:320px;height:100px}
.ad-preview-size-tablet{display:none}
.ad-preview-size-mobile{display:inline}
.ad-preview-wide{width:calc(100% - 32px);padding-block:16px}
.ad-preview-flow{padding-block:24px}
.download-ad{margin-inline:0}
.ad-tool-main #workspace{scroll-margin-block-start:var(--workspace-ad-scroll-space,186px)}
.ad-preview-feed{margin-block:12px}
}
@media(max-width:359px){
:is(.ad-preview-slot--banner,.ad-preview-slot--responsive) .ad-preview-box{width:300px;height:50px;gap:3px}
.ad-preview-box strong{font-size:12px}
.ad-preview-size{font-size:10px}
.ad-preview-size-mobile{display:none}
.ad-preview-size-small{display:inline}
.ad-tool-main #workspace{scroll-margin-block-start:var(--workspace-ad-scroll-space,136px)}
}
/* Responsive mobile units use the available width and reserve space before loading. */
@media(max-width:767px){
.ad-preview-slot--mobile-responsive .ad-preview-box{width:100%;height:250px;aspect-ratio:auto}
.ad-preview-slot--mobile-responsive .ad-preview-size-mobile{display:inline}
.ad-preview-slot--mobile-responsive .ad-preview-size-small{display:none}
}
body.product-focus :is(.ad-preview-wide,.ad-preview-flow,.ad-preview-feed,.ad-tool-aside){display:none}

/* Download placements use the responsive pool at every width. These heights
   reserve loading space only; the live automatic rule below allows expansion. */
.ad-preview-slot--automatic .ad-preview-box{width:min(970px,100%);height:280px}
@media(max-width:767px){
.ad-preview-slot--automatic .ad-preview-box{height:250px}
}

/* Reserve exactly the preview space through loading, no fill and blocked ads. */
.ad-live-slot > .ad-preview-label{display:none}
.ad-live-slot .ad-preview-box{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;border:0;background:transparent;color:inherit;pointer-events:auto}
/* Automatic units may grow beyond the initial reservation; never crop or hide
   a served creative because Google chose a taller size. */
.ad-live-slot .ad-preview-box--auto{display:block;height:auto;min-height:var(--ad-reserved-height,0px);max-height:none}
:root[data-appearance=dark] .ad-live-slot .ad-preview-box{background:transparent;border:0;color:inherit}
.ad-live-slot .manual-ad-unit{margin:0 auto;padding:0;border:0;text-align:center;text-decoration:none}
/* Google may collapse an unfilled ins while its iframe host still has a size.
   Hide only explicitly unfilled units so that host cannot cover nearby actions.
   Keep the outer reservation, and never retry an unfilled request. */
.ad-live-slot .manual-ad-unit[data-ad-status="unfilled"]{display:none!important}
/* AdSense can return a narrower host with inline zero margins. Center that host,
   leaving the creative's dimensions and iframe contents untouched. */
.ad-live-slot .manual-ad-unit > div[id^="aswift_"][id$="_host"]{margin-inline:auto!important}
.ad-live-slot[hidden]{display:none}

/* The keyboard, candidates and exercises remain one uninterrupted workspace. */
.ad-preview-wide,.ad-preview-flow{overflow-anchor:none}
/* Printed lessons and article content never include advertising reservations. */
@media print{
.ad-preview-wide,.ad-preview-flow,.ad-preview-feed,.ad-preview-slot,.ad-tool-aside,.ad-blog-companion,.ad-blog-sticky{display:none!important}
}