/* ==========================================================================
   Pulsar Theme — Homepage Sections
   Loaded async on homepage only.
   ========================================================================== */

/* Ad banner above the main grid: label plus a centred ad.
   The house fallback keeps its natural full width, uncentred. */
.pls-grid-spot-top{margin:0 0 45px;padding:14px 18px;background:var(--pls-surface,#fff);border:1px solid var(--pls-border-soft,#eef1f7);border-radius:var(--pls-radius,calc(12px * var(--pls-r)));text-align:center;box-sizing:border-box;overflow:hidden;line-height:0}
/* Desktop: reserve the height so the leaderboard does not shift the layout
   when it arrives — roughly 30px of label, 100px of ad, plus padding and
   border. On a phone no min-height is needed: the slot is a fixed 320×100,
   decided on the server. */
@media (min-width:768px){
    .pls-grid-spot-top{min-height:157px}
}
@media (max-width:767px){
    .pls-grid-spot-top{padding:0;background:transparent;border:none;border-radius:0}
    .pls-grid-spot-top__label{margin:0 0 8px;padding-bottom:0;border-bottom:none}
}
/* A label, in ordinary lettering: the weight and the quieter colour carry the
   hierarchy. Small capitals with wide tracking read as a graphic device, and
   at eleven pixels they are also the hardest thing on the page to read. */
.pls-grid-spot-top__label{display:block;font-size:12px;font-weight:700;color:var(--pls-mute);margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--pls-border-soft,#eef1f7);line-height:1.4}
/* Force the height of the <ins> so the network sees the space available and
   picks the right format: a 90px leaderboard on desktop, 100px on a phone.
   overflow:hidden keeps a taller ad cropped rather than pushing the layout. */
.pls-grid-spot-top > ins.adsbygoogle{display:block;margin:0 auto;width:100%;height:90px;max-height:90px;overflow:hidden;line-height:0}
@media (min-width:768px){
    .pls-grid-spot-top > ins.adsbygoogle{height:100px;max-height:100px}
}

/* --- Stories strip (Instagram-style) --- */
.pls-stories{padding:0}
@media(max-width:640px){.pls-stories{margin:0 0 10px 0}}
/* Reserve the height on a phone as well: the strip sits above the hero, so
   any settling made it grow and pushed the hero down. min-height holds the
   room — a 68px ring plus the name under it. */
.pls-stories__strip{display:flex;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px var(--pls-sp-md);min-height:96px}
@media(min-width:641px){.pls-stories__strip{height:100px;margin:10px 0 30px 0;align-items:center}}
.pls-stories__strip::-webkit-scrollbar{display:none}
.pls-stories__item{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;background:none;border:none;padding:0;flex-shrink:0;width:72px}
.pls-stories__ring{width:68px;height:68px;border-radius:50%;padding:3px;background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.pls-stories__item:hover .pls-stories__ring{transform:scale(1.08)}
.pls-stories__thumb{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid var(--pls-surface);display:block}
.pls-stories__name{font-size:11px;font-weight:500;color:var(--pls-ink2);text-align:center;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Stories overlay */
.pls-story-overlay{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.pls-story-overlay[hidden]{display:none}
.pls-story-overlay__progress{position:absolute;top:12px;left:0;right:0;z-index:3;display:flex;gap:4px;padding:0 16px}
.admin-bar .pls-story-overlay__progress{top:44px}
@media(max-width:782px){.admin-bar .pls-story-overlay__progress{top:58px}}
.pls-story-overlay__progress-bar{flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:calc(2px * var(--pls-r));overflow:hidden}
/* The bar grows with a transform, not with its width: a width animation asks
   the browser to lay the element out again at every frame, a transform is
   handed to the compositor. */
.pls-story-overlay__progress-fill{height:100%;background:#fff;border-radius:calc(2px * var(--pls-r));width:100%;transform:scaleX(0);transform-origin:left center;transition:transform .1s linear;will-change:transform}
.pls-story-overlay__close{position:absolute;top:12px;right:16px;background:none;border:none;color:#fff;font-size:32px;cursor:pointer;z-index:4;line-height:1;padding:4px 8px}
.admin-bar .pls-story-overlay__close{top:44px}
@media(max-width:782px){.admin-bar .pls-story-overlay__close{top:58px}}
.pls-story-overlay__pause{position:absolute;top:18px;left:16px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.25);border-radius:50%;color:#fff;cursor:pointer;z-index:4}
.pls-story-overlay__pause:hover{background:rgba(0,0,0,.75)}
.pls-story-overlay__close:focus-visible,.pls-story-overlay__pause:focus-visible,.pls-story-overlay__nav:focus-visible,.pls-story-overlay__cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
.admin-bar .pls-story-overlay__pause{top:50px}
@media(max-width:782px){.admin-bar .pls-story-overlay__pause{top:64px}}
.pls-story-overlay__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:36px;width:48px;height:48px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .15s;z-index:2;box-shadow:0 2px 12px rgba(0,0,0,.4);line-height:1;padding:0 0 2px}
.pls-story-overlay__nav:hover{background:rgba(0,0,0,.8)}
.pls-story-overlay__nav--prev{left:16px}
.pls-story-overlay__nav--next{right:16px}
.pls-story-overlay__content{max-width:420px;width:100%;display:flex;flex-direction:column;align-items:center}
.pls-story-overlay__image-wrap{width:100%;border-radius:calc(16px * var(--pls-r)) calc(16px * var(--pls-r)) 0 0;overflow:hidden}
.pls-story-overlay__image{width:100%;max-height:60vh;object-fit:cover;display:block}
.pls-story-overlay__card{width:100%;background:var(--pls-surface);border-radius:0 0 calc(16px * var(--pls-r)) calc(16px * var(--pls-r));padding:20px 24px 24px;text-align:left}
.pls-story-overlay__badge{display:inline-block;padding:3px 8px;border-radius:calc(4px * var(--pls-r));font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;background:var(--pls-brand-soft);color:var(--pls-brand);margin-bottom:8px}
.pls-story-overlay__title{font-size:20px;font-weight:700;color:var(--pls-ink);line-height:1.25;margin:0 0 16px;letter-spacing:-.3px}
.pls-story-overlay__meta{display:none}
.pls-story-overlay__cta{display:inline-flex;padding:10px 20px;background:var(--pls-brand);color:#fff;border-radius:calc(10px * var(--pls-r));font-size:13px;font-weight:600;text-decoration:none;transition:background .15s}
.pls-story-overlay__cta:hover{background:var(--pls-brand-dark);color:#fff}
@media(max-width:640px){
.pls-story-overlay__nav{width:40px;height:40px;font-size:26px}
.pls-story-overlay__nav--prev{left:6px}
.pls-story-overlay__nav--next{right:6px}
.pls-story-overlay__title{font-size:17px}
.pls-story-overlay__content{max-width:100%;margin:0 8px}
.pls-story-overlay__card{padding:16px 18px 20px}
}

/* --- Badges section (CSS loaded from mu-plugin account.css via class-assets) --- */

.pls-section--my-badges{margin-top:8px}

/* Grid filters: base pill rules live in base.css (shared with [tabnav] shortcode) */
/* Load more button: its rules travel with partials/components/load-more.php. */

/* --- Section header --- */
.pls-section__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}
/* The three section title sizes arrive as variables on the element (see
   pulsar_title_style): unset, these apply. The phone twin, a little below,
   falls back to the large one when it is missing. */
.pls-section__title{font-family:var(--pls-font-h);font-size:var(--pls-sect-fs,28px);font-weight:700;letter-spacing:var(--pls-sect-ls,-.3px);line-height:var(--pls-sect-lh,1.2);display:flex;align-items:center;gap:8px;margin:0}
@media(max-width:640px){
    .pls-section__title{font-size:var(--pls-sect-fs-m,var(--pls-sect-fs,28px));letter-spacing:var(--pls-sect-ls-m,var(--pls-sect-ls,-.3px));line-height:var(--pls-sect-lh-m,var(--pls-sect-lh,1.2))}
}
.pls-section:not(:has(.pls-section__subtitle)):not(:has(.pls-section__subtitle-row)) .pls-section__title{margin:0}
.pls-section__header:has(+ .pls-section__subtitle),.pls-section__header:has(+ .pls-section__subtitle-row){margin-bottom:5px}
.pls-bento-col>.pls-section__header,
.pls-bento-col__head>.pls-section__header{margin-bottom:0}
.pls-bento-block .pls-card--compact{grid-template-columns:110px 1fr auto;padding:20px 18px}
.pls-bento-block .pls-card--compact .pls-card__cover{width:110px;height:66px}
.pls-bento-block .pls-card--compact .pls-card__cover .pls-img{width:110px;height:66px}
@media(min-width:641px){
  .pls-bento-block .pls-card--compact{grid-template-columns:235px 1fr auto}
  .pls-bento-block .pls-card--compact .pls-card__cover,
  .pls-bento-block .pls-card--compact .pls-card__cover .pls-img{width:235px;height:132px}
}
.pls-bento-block .pls-card--compact .pls-card__title{font-size:calc(var(--pls-bento-compact-title-size,17px) * var(--pls-bento-scale,1) * var(--pls-title-scale,1));line-height:var(--pls-bento-compact-title-lh,1.3)}
.pls-bento-col>.pls-section__subtitle,
.pls-bento-col__head>.pls-section__subtitle{margin-bottom:10px}
.pls-section__subtitle{font-size:15px;font-weight:400;color:var(--pls-mute);margin:0 0 16px;line-height:1.5}

.pls-section__subtitle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.pls-section__subtitle-row .pls-section__subtitle{margin-bottom:0}

/* --- Home top layout (sidebar LEFT + grid RIGHT) --- */
.pls-home-top-layout{display:grid;grid-template-columns:var(--pls-sidebar-w) 1fr;gap:var(--pls-sp-xl);align-items:start;padding:0 0 24px}
.pls-home-top-layout__sidebar{display:flex;flex-direction:column;gap:20px}
.pls-home-top-layout__main{min-width:0}

/* --- Home layout (main + sidebar) --- */
/*
 * The band closes with the same step that holds the blocks inside it: a column
 * `gap` applies between two blocks and not under the last one, so without this
 * the full width band below would stick to it.
 */
.pls-home-layout{display:grid;grid-template-columns:1fr var(--pls-sidebar-w);gap:var(--pls-sp-xl);align-items:start;padding-bottom:var(--pls-block-gap,44px)}
/* A column band whose sidebar is empty: the column takes everything, rather
   than leaving a white strip where there is nothing. */
.pls-home-layout--nosidebar{grid-template-columns:1fr}
/* The gap at the bottom belongs to the band, for both columns: on the sidebar
   alone it would be the only one that really had it. */
.pls-home-layout__sidebar{display:flex;flex-direction:column;gap:20px}
/*
 * The space between blocks belongs to the container, not to the blocks: with
 * each section carrying its own padding, the distance between two would depend
 * on which two they were and in what order.
 */
.pls-home-layout__main{display:flex;flex-direction:column;gap:var(--pls-block-gap,44px)}
.pls-home-layout__main > .pls-section,
.pls-home-layout__main > .pls-lazy-sections > .pls-section{padding-top:0;padding-bottom:0}
/* The container of the deferred blocks is itself a column with the same step,
   so the group behaves as though its blocks were siblings of the others. */
.pls-home-layout__main > .pls-lazy-sections{display:flex;flex-direction:column;gap:var(--pls-block-gap,44px)}
/* A row of chips is a third the height of a block of articles: with the same
   step as the others it looks suspended. Half a step keeps it close to what it
   filters, which is the reason it is there. */
.pls-home-layout__main > .pls-section--categories{--pls-block-gap:22px;margin-bottom:-22px}
.pls-home-layout__main > .pls-lazy-sections > .pls-section--badges-community{padding-bottom:30px}

/* --- Featured section: N blocks side-by-side, each = 1 hero + M compact --- */
.pls-section--bento{padding:24px 0}
.pls-bento-row{display:grid;gap:var(--pls-sp-md);align-items:start;--pls-bento-scale:1}
/* Two or three blocks share the width of one, so their titles step down with
   it. The step multiplies whatever size is set in the panel, so a size chosen
   there keeps its proportions instead of being overridden. */
.pls-bento-row--2{--pls-bento-scale:.94}
.pls-bento-row--3{--pls-bento-scale:.88}
@media(max-width:1024px){.pls-bento-row--3{--pls-bento-scale:.94}}
@media(max-width:640px){.pls-bento-row--2,.pls-bento-row--3{--pls-bento-scale:1}}
.pls-bento-row--2 .pls-card--hero .pls-card__title,
.pls-bento-row--3 .pls-card--hero .pls-card__title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(var(--pls-bento-hero-title-size,20px) * var(--pls-bento-scale,1) * var(--pls-bento-hero-title-lh,1.36) * 3);max-height:calc(var(--pls-bento-hero-title-size,20px) * var(--pls-bento-scale,1) * var(--pls-bento-hero-title-lh,1.36) * 3)}
.pls-bento-row--1{grid-template-columns:1fr}
.pls-bento-row--2{grid-template-columns:repeat(2,1fr)}
.pls-bento-row--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){.pls-bento-row--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pls-bento-row--2,.pls-bento-row--3{grid-template-columns:1fr}}
@media(max-width:640px){.pls-card--compact .pls-card__title{font-size:var(--pls-card-compact-title-size,15px);-webkit-line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}}
.pls-bento-col{display:flex;flex-direction:column;gap:5px;min-width:0}
/* Blocks side by side start on the same line. The headings of all the blocks
   share one row of the parent grid, so a block with no title of its own does
   not ride up to the top while the one beside it starts below a heading.
   Subgrid is what shares that row; where it is missing each block simply keeps
   its own heading, which is where the theme stood before. */
@supports (grid-template-rows: subgrid) {
  .pls-bento-row--2 .pls-bento-col,
  .pls-bento-row--3 .pls-bento-col{display:grid;grid-template-rows:subgrid;grid-row:span 2}
}
@media(max-width:640px){
  /* One under the other: each block carries its own heading again and there is
     nothing left to line up. */
  .pls-bento-row--2 .pls-bento-col,
  .pls-bento-row--3 .pls-bento-col{display:flex;grid-row:auto}
  .pls-bento-col__head--empty{display:none}
}
.pls-bento-block{background:var(--pls-surface);border:1px solid var(--pls-border-soft);border-radius:var(--pls-radius);overflow:hidden}
.pls-bento-block .pls-card--hero .pls-card__title{font-size:calc(var(--pls-bento-hero-title-size,20px) * var(--pls-bento-scale,1) * var(--pls-title-scale,1));line-height:var(--pls-bento-hero-title-lh,1.36);letter-spacing:var(--pls-bento-hero-title-ls,-0.5px);margin:var(--pls-bento-hero-title-margin,10px 0)}
.pls-bento-block .pls-card--hero .pls-meta{padding-top:0}
.pls-bento-block .pls-card--hero .pls-card__body{display:flex;flex-direction:column}
.pls-bento-block .pls-card--hero .pls-card__excerpt{order:3;margin:10px 0 0;display:-webkit-box;-webkit-line-clamp:var(--pls-bento-hero-excerpt-lines,2);-webkit-box-orient:vertical;overflow:hidden}
.pls-bento-block__list .pls-card--compact .pls-card__title,
.pls-hero-list .pls-card--compact .pls-card__title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Hero B, side list: a compact square image, since the column is narrow */
.pls-hero-list--compact .pls-card--compact{grid-template-columns:96px 1fr auto;gap:14px;padding:12px 14px;border-radius:var(--pls-radius,calc(12px * var(--pls-r)))}
.pls-hero-list--compact .pls-card--compact .pls-card__cover{width:96px;height:96px}
.pls-hero-list--compact .pls-card--compact .pls-card__cover .pls-img{width:96px;height:96px;object-fit:cover}
/* Hero B, side list with standard cards: stacked, with spacing */
.pls-hero-list--standard{display:flex;flex-direction:column;gap:16px}
.pls-bento-row--2 .pls-card--compact .pls-card__title,
.pls-bento-row--3 .pls-card--compact .pls-card__title{min-height:calc(var(--pls-bento-compact-title-size,17px) * var(--pls-bento-scale,1) * var(--pls-bento-compact-title-lh,1.3) * 3)}
.pls-bento-block__hero{padding:0}
.pls-bento-block__hero .pls-card--hero{border:0;border-radius:0;background:transparent}
.pls-bento-block__hero .pls-card--hero .pls-card__cover{border-radius:0}
.pls-bento-block__list{display:flex;flex-direction:column}
.pls-bento-block__list .pls-card--compact{border-radius:0;border:0;border-top:1px solid var(--pls-border-soft);background:transparent}
.pls-bento-block__list .pls-card--compact:hover{background:var(--pls-bg)}

/* --- Hero section --- */
.pls-section--hero{padding:0 0 20px 0}
.pls-section--hero .pls-container{max-width:var(--pls-max-w);margin:0 auto;padding:0 var(--pls-sp-xl)}
.pls-section--hero-bg{margin-top:-24px;padding:24px 0 24px;margin-bottom:24px}
/* Hero cards sit on a coloured band, where the light card border reads as a
   white rim around the picture. The card is defined by its own white body and
   by the space around it, so the outline is dropped and the image goes right to
   the edge — with the cover's own bottom line dropped too, since it was drawing
   a hairline between the picture and the text. */
.pls-section--hero .pls-card{border:0}
.pls-section--hero-c .pls-card,.pls-section--hero-b .pls-card{border:0}
/* Title of the big hero card: 26px with an airier line height and a little
   room under the category badge. Layout A used to fall back to the generic
   hero rule (28px, line-height 1.15, tight tracking, no gap after the badge)
   and looked cramped next to B — the two share this now. */
.pls-section--hero-a .pls-card--hero .pls-card__title,
.pls-section--hero-b .pls-card--hero .pls-card__title{font-size:var(--pls-card-hero-title-size,26px);line-height:1.3;letter-spacing:-.4px;padding-top:5px;margin:0 0 10px}
.pls-section--hero-c .pls-carousel__track{cursor:grab;user-select:none}
.pls-section--hero-c .pls-carousel__track--dragging{cursor:grabbing;transition:none!important}
.pls-section--hero-c .pls-carousel__track--dragging a,.pls-section--hero-c .pls-carousel__track--dragging img{pointer-events:none}
.pls-section--hero-c .pls-carousel-dots{display:none}
/* The cards on the left are at least as tall as the sidebar: both columns are
   in the same grid row, so the height was already there — it just was not being
   passed down to the cards. */
.pls-section--hero-c .pls-hero-carousel-wrap{display:flex;flex-direction:column}
.pls-section--hero-c .pls-hero-carousel-wrap .pls-carousel{flex:1 1 auto;display:flex;flex-direction:column}
.pls-section--hero-c .pls-hero-carousel-wrap .pls-carousel__track{flex:1 1 auto}
.pls-section--hero-c .pls-hero-carousel-wrap .pls-carousel__slide>.pls-card{height:100%}
/* Hero D is hero C on a dark background: the section carries --hero-c as well
   and inherits all of it. What is here is only what the dark ground adds. */
.pls-section--hero-d{background:#000;margin-top:-24px;padding:24px 0 24px;margin-bottom:24px}
.pls-section--hero-d .pls-carousel-dot{background:rgba(255,255,255,.28)}
.pls-section--hero-d .pls-carousel-dot--active{background:#fff}
/* The cards on a black ground: white cards on a black band are patches of
   light, and the dark text inside them has nothing to do with the rest of the
   section. No card rule needs rewriting — the tokens they already read are
   enough: surface, borders, inks. Anybody adding an element to a card tomorrow
   finds it dark without having to think about it. */
/* The tokens for a dark ground live in base.css, under .pls-on-dark, because
   the footer needs the same set: two copies of nine colours drift apart at the
   first correction. */
/* The title inherits its colour from the card text, which on the black band
   stays the colour of the page: here it is told otherwise. */
.pls-section--hero-d .pls-card{color:var(--pls-ink)}
.pls-section--hero-d .pls-card__title{color:var(--pls-ink)}
/* A flat category colour would disappear: the brand blue on black is hard to
   read, so it is lightened just enough. */
.pls-section--hero-d .pls-badge--plain{color:color-mix(in srgb,var(--pls-brand) 55%,#fff)}
.pls-section--hero-d .pls-badge--brand{background:color-mix(in srgb,var(--pls-brand) 26%,transparent);color:color-mix(in srgb,var(--pls-brand) 45%,#fff)}
.pls-section--hero-d .pls-badge--neutral{background:rgba(255,255,255,.1);color:var(--pls-ink2)}
.pls-section--hero-d .pls-card--compact:hover{background:rgba(255,255,255,.05)}
/* Hero D: the columns of C the other way round — social and app panel on the
   LEFT, carousel on the RIGHT. Desktop only (≥1025px). The article column fits
   exactly three 281.33px cards; the video column takes what is left. */
@media(min-width:1025px){
.pls-section--hero-d .pls-hero-grid--c-wide{grid-template-columns:minmax(0,1fr) calc(281.33px * 3 + 16px * 2)}
.pls-section--hero-d .pls-hero-sidebar{order:-1}
}
/* Hero D: a video in the side block instead of the social boxes, sized explicitly
   square by design, fluid in its column up to 320px. */
.pls-hero-d-video{width:100%;display:flex;justify-content:center}
.pls-hero-d-video__el{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:calc(14px * var(--pls-r));background:#000}
/* Hero D: the call to action under the video, on the dark ground. */
@property --pls-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes pls-hero-d-spin{to{--pls-angle:360deg}}
.pls-hero-d-cta{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px;margin:14px auto 0}
.pls-hero-d-cta__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:calc(12px * var(--pls-r));font-weight:700;font-size:15px;line-height:1;text-decoration:none;transition:transform .15s,background-color .15s,border-color .15s,filter .15s}
.pls-hero-d-cta__btn--primary{background:var(--pls-brand,#2563eb);color:#fff}
.pls-hero-d-cta__btn--primary:hover{transform:translateY(-1px)}
/* The arrow slides on hover */
.pls-hero-d-cta__btn--primary svg{transition:transform .2s ease}
.pls-hero-d-cta__btn--primary:hover svg{transform:translateX(4px)}
/* The arrow nudges back and forth, but only while the button is on screen —
   the .is-inview class comes from an IntersectionObserver. On hover it stops
   and stays where it moved to. Off under prefers-reduced-motion. */
@keyframes pls-arrow-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.pls-hero-d-cta__btn--primary.is-inview svg{animation:pls-arrow-nudge 1.1s ease-in-out infinite}
.pls-hero-d-cta__btn--primary:hover svg{animation:none}
@media(prefers-reduced-motion:reduce){.pls-hero-d-cta__btn--primary.is-inview svg{animation:none}}
/* Secondary button: dark fill, with a border made of a rotating gradient.
   --pls-angle is registered with @property, which is what makes an angle
   animatable at all — without that registration the conic gradient would jump
   between values instead of turning. */
.pls-hero-d-cta__btn:not(.pls-hero-d-cta__btn--primary){
    color:#e5e5ea;
    border:1.5px solid transparent;
    background:linear-gradient(#1a1a1c,#1a1a1c) padding-box,
               conic-gradient(from var(--pls-angle),#ffffff,#6aa8ff,#0c0c0e,#f6a93b,#ffffff) border-box;
    animation:pls-hero-d-spin 4s linear infinite;
}
.pls-hero-d-cta__btn:not(.pls-hero-d-cta__btn--primary):hover{filter:brightness(1.12)}
@media(prefers-reduced-motion:reduce){.pls-hero-d-cta__btn:not(.pls-hero-d-cta__btn--primary){animation:none}}
/* ── Hero E: a large text and video block plus a card carousel, dark background ── */
.pls-section--hero-e{background:#000;margin-top:-24px;padding:24px 0;margin-bottom:24px}
/* Specificity raised with two classes, to win over the
   regola del critical CSS inline `.pls-section--hero .pls-container`. */
.pls-section--hero.pls-section--hero-e .pls-container{padding:20px 32px 0 32px}
/* ── Hero E: carousel cards in dark mode, on mobile and desktop ──
   Dark ground and border spelled out, with light text and meta so they stay
   readable on black. */
.pls-section--hero-e .pls-card{background:#161a22;border:1px solid #222836}
.pls-section--hero-e .pls-card__cover{border-bottom-color:#222836}
.pls-section--hero-e .pls-card__title{color:#f5f6f8}
.pls-section--hero-e .pls-card__excerpt{color:rgba(255,255,255,.55)}
.pls-section--hero-e .pls-meta{color:rgba(255,255,255,.5)}
.pls-section--hero-e .pls-meta__author{color:rgba(255,255,255,.72)}
.pls-section--hero-e .pls-meta__sep{color:rgba(255,255,255,.22)}
.pls-section--hero-e .pls-card__comments{color:rgba(255,255,255,.5)}
.pls-section--hero-e .pls-card__comments:hover{color:#fff;background:rgba(255,255,255,.08)}
/* On hover, a lighter border instead of a shadow, which is invisible on dark. */
.pls-section--hero-e .pls-card:hover{box-shadow:none;border-color:#33405a}
.pls-hero-e-top{position:relative;isolation:isolate;border-radius:calc(24px * var(--pls-r))}
/* An opaque inner layer with the dark background, sitting above the ::after
   halo (z-index:-1), so the glow stays around the box and the gradient does not
   wash out what is inside. Two parts: the wrapper carries the border and the
   glow, this carries the dark ground. */
/* No position here: an unpositioned block paints under the ::before that draws
   the border but above the ::after halo at a negative z-index. With
   position:relative it would join the same stacking context and cover the
   border. */
.pls-hero-e-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;background:#161a22;border-radius:inherit;padding:48px}
/* Gradient border and glow, shared with the primary call to action.
   ::before is a 1.5px gradient border made with the mask-composite trick;
   ::after is the same gradient, blurred, behind the box. */
.pls-hero-e-top::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(90deg,#5a7bed 0%,#fbfdfe 28%,#fee191 60%,#9f5d4b 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.pls-hero-e-top::after{content:"";position:absolute;inset:-10px;border-radius:calc(34px * var(--pls-r));background:linear-gradient(90deg,#5a7bed 0%,#fbfdfe 28%,#fee191 60%,#9f5d4b 100%);filter:blur(16px);opacity:.55;z-index:-1;pointer-events:none}
/* Eyebrow and accent word: gradient text using the border palette (amber →
   white → blue; black is left out because on text it would be invisible). */
/* The line above the heading: weight and the gradient carry it, without small
   capitals and without a pixel and a half between the letters. */
.pls-hero-e-eyebrow{margin:0 0 14px;font-size:13px;font-weight:800;background-image:linear-gradient(90deg,#f6a93b,#6aa8ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.pls-hero-e-title{margin:0 0 16px;font-size:clamp(30px,3.4vw,50px);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:#fff}
.pls-hero-e-title em{font-style:normal;background-image:linear-gradient(100deg,#f6a93b,#ffffff 50%,#6aa8ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.pls-hero-e-sub{margin:0 0 26px;font-size:17px;line-height:1.5;color:rgba(255,255,255,.62);max-width:46ch}
.pls-hero-e-actions{display:flex;gap:12px;flex-wrap:wrap}
/* Time gated button: the [hidden] attribute alone is not enough, because the
   button is display:inline-flex and author CSS beats the browser's own rule.
   Class plus attribute really does hide it until the script reveals it. */
/* The replay button: a play icon beside the label, growing slightly on hover. */
.pls-hero-e-replay svg{transition:transform .2s ease;transform:scale(.82)}
.pls-hero-e-replay:hover svg{transform:scale(1.1)}
.pls-hero-e-media{display:flex;justify-content:center}
/* Clickable icon in the hero, linking the featured page. The image is
   transparent: no mix-blend, it simply sits on the dark panel. */
.pls-hero-e-media__link{display:block;width:100%;max-width:260px;border-radius:calc(24px * var(--pls-r));transition:transform .25s ease}
.pls-hero-e-media__link:hover,.pls-hero-e-media__link:focus-visible{transform:scale(1.03)}
.pls-hero-e-media__link:focus-visible{outline:2px solid #fff;outline-offset:4px}
.pls-hero-e-media__el{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:transparent}
.pls-hero-e-cards{margin-top:20px}
/* The hero E carousel shows four cards on desktop, and the height is reserved
   here. Without this line the CSS would start at the default of three and the
   script would move it to four after load — a reflow, measured at 857px down to
   809px. Four is pinned on desktop; a phone stays at one, through the
   --pls-cv-mobile override in the max-width:640px query. */
.pls-section--hero-e{--pls-cv-desktop:4}
/* Hero E dots: smaller, with the active one stretched into a pill. */
/* The dots are injected by script after the paint, so their height is reserved
   from the start — 34px, an 18px dot plus 16px of padding — so putting them
   in does not move what is below. */
.pls-section--hero-e .pls-carousel-dots{min-height:34px;box-sizing:border-box}
.pls-section--hero-e .pls-carousel-dot{width:18px;height:18px;padding:6px;border-radius:50%;background:rgba(255,255,255,.3);background-clip:content-box}
.pls-section--hero-e .pls-carousel-dot--active{width:44px;height:18px;padding:6px;border-radius:calc(9px * var(--pls-r));background:#fff;background-clip:content-box}
@media(max-width:900px){
.pls-hero-e-inner{grid-template-columns:1fr;gap:24px;padding:28px}
.pls-hero-e-media__link{max-width:260px}
}
@media(max-width:640px){
/* On a phone the icon is hidden, giving all the room to the text and the two
   buttons. display:none on the whole container, so the grid is not left with
   an empty row. */
.pls-hero-e-media{display:none}
/* On a phone the play icon is hidden, so the two hero buttons fit on one
   line. */
.pls-hero-e-replay svg{display:none}
/* On a phone, cancel the negative top margin that pulls the hero up: it was
   covering the row above, which leaves only 10px of margin below itself. With
   margin-top:0 the hero sits under it with a clean gap. */
.pls-section--hero-e{margin-top:0}
/* Narrower side padding on mobile, to give the content more room
   orizzontale al blocco hero. */
.pls-section--hero.pls-section--hero-e .pls-container{padding:16px 16px 0 16px}
}

/* Desktop: four per row; on mobile it stays a carousel. */

@media(min-width:641px){
.pls-section--hero-c .pls-hero-social__count{font-size:13px}
.pls-section--hero-c .pls-hero-social__name{font-size:12px;overflow:visible;text-overflow:clip;white-space:normal}
.pls-section--hero-c .pls-hero-social__btn{padding:10px 10px;gap:8px}
}
/* The pull upward tucks the hero under the header, and it has to be exactly
   the padding `.pls-main` is carrying — otherwise the hero climbs over the
   last strip of the header, which is the breaking bar when there is one.
   `.pls-main` drops to 8px at 782px, so this does too. */
@media(max-width:782px){.pls-section--hero-bg,.pls-section--hero-d{margin-top:-8px}}
@media(max-width:640px){.pls-section--hero-bg{margin-top:-8px;padding:16px 0 28px;margin-bottom:16px}
.pls-section--hero-d{margin-top:-8px;padding:16px 0 28px;margin-bottom:16px}
.pls-section--hero-a .pls-card--hero .pls-card__title,
.pls-section--hero-b .pls-card--hero .pls-card__title{font-size:var(--pls-card-hero-title-size,18px);line-height:1.3;font-weight:600;letter-spacing:-.2px;color:var(--pls-ink);margin:8px 0}}
.pls-hero-stack{display:flex;flex-direction:column;gap:20px}

/* --- Categories row --- */
.pls-section--categories{padding:8px 0 20px}
/* The first block under the hero: the gap above is already made by the margins
   of that band, and without this it would sit much further from the hero than
   from the block after it. The class comes from PHP — hero C prints its inline
   script between the two sections, so no sibling selector sees them as
   adjacent. */
/* Under the hero band the gap is already made by its margins: without this the
   first block would sit further from the hero than from the block after it. */
.pls-container--underhero>.pls-section--categories{margin-top:-12px}
.pls-categories-row{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0}
.pls-categories-row::-webkit-scrollbar{display:none}
/* The same size and weight as the filter chips under the title
   (.pls-grid-filter): to whoever is looking they are the same thing. */
.pls-cat-chip{display:flex;align-items:center;gap:8px;padding:9px 18px;border-radius:calc(10px * var(--pls-r));font-size:14px;line-height:1.2;font-weight:600;color:var(--pls-ink2);background:var(--pls-surface);border:1px solid var(--pls-border-soft);white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s}
.pls-cat-chip:hover{border-color:var(--pls-brand);color:var(--pls-brand)}
.pls-cat-chip--active{background:var(--pls-brand);color:#fff;border-color:var(--pls-brand)}
/* The number in a muted circle: it is service information, not a second title.
   Grey on grey it reads when looked for and disappears when one looks at the
   name, which is what counts. */
.pls-cat-chip__count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 6px;border-radius:999px;
  background:var(--pls-bg,#f1f3f6);color:var(--pls-mute);
  font-size:11.5px;font-weight:600;line-height:1
}
/* The corners of the chips, chosen in the block's panel. "theme" is the
   default and follows the theme's corner factor. */
/* Three real states, not three shades:
   · "as the style" follows the preset's corner factor — 10px with the round
     corners of "News magazine", 0 with the square ones of "Cars & bikes";
   · "rounded" is an explicit choice and does not depend on the preset;
   · "square" is zero, always. */
.pls-categories-row--pill .pls-cat-chip{border-radius:100px}
.pls-categories-row--square .pls-cat-chip{border-radius:0}
.pls-cat-chip--active .pls-cat-chip__count{background:rgba(255,255,255,.22);color:#fff}

/* --- Article grid section --- */
.pls-section--grid{padding:14px 0}

/* --- Article list section --- */
.pls-section--list{padding:24px 0}


/* --- Post carousel --- */
.pls-section--carousel{padding:24px 0}

/* --- The carousel mechanism, shared by the post carousel and other sections --- */
.pls-carousel{overflow:hidden;position:relative}
.pls-carousel--static .pls-carousel__track{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pls-carousel__track{display:flex;gap:16px;transition:transform .4s ease;will-change:transform}
.pls-carousel__track{--pls-carousel-visible:var(--pls-cv-desktop,var(--pls-cv,3))}
.pls-carousel__slide{flex:0 0 calc((100% - (var(--pls-carousel-visible) - 1) * 16px) / var(--pls-carousel-visible));min-width:0;display:flex}
.pls-carousel__slide>.pls-card{width:100%;display:flex;flex-direction:column}
.pls-carousel__slide>.pls-card .pls-card__body{flex:1;display:flex;flex-direction:column}
.pls-carousel__slide>.pls-card .pls-meta{margin-top:auto}
/* Arrows */
.pls-carousel-nav{display:flex;gap:6px;margin-left:auto}
.pls-carousel-arrow{width:32px;height:32px;border-radius:calc(8px * var(--pls-r));background:var(--pls-surface);border:1px solid var(--pls-border-soft);display:flex;align-items:center;justify-content:center;color:var(--pls-ink2);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s}
.pls-carousel-arrow:hover{border-color:var(--pls-brand);color:var(--pls-brand);background:var(--pls-brand-soft)}
/* Dots */
.pls-carousel-dots{display:flex;justify-content:center;gap:6px;padding:16px 0 0}
/* The dot people see is 8px, but what they can press is 24px, which is the
   WCAG target size. The gap between the two is padding, and background-clip
   keeps the colour off it. */
.pls-carousel-dot{width:24px;height:24px;border-radius:50%;background:var(--pls-border);border:none;cursor:pointer;padding:0;transition:background-color .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s;background-clip:content-box;padding:8px;box-sizing:border-box}
.pls-carousel-dot--active{background:var(--pls-brand);background-clip:content-box;width:36px;border-radius:calc(12px * var(--pls-r));padding:8px}
.pls-carousel-dot:hover:not(.pls-carousel-dot--active){background:var(--pls-mute);background-clip:content-box}
/* Responsive default on mobile: one card per page, overridable with --pls-cv-mobile */
@media(min-width:641px) and (max-width:1024px){
.pls-carousel__track{--pls-carousel-visible:var(--pls-cv-tablet,var(--pls-cv-desktop,var(--pls-cv,3)))}
/* The hero keeps two on a tablet rather than the three it shows on a desktop:
   its carousel shares the row with the column beside it, so a third card
   arrives at a width where the two already have little enough. A count written
   in the panel still wins, through --pls-cv-tablet. */
.pls-section--hero-c .pls-carousel__track,
.pls-section--hero-d .pls-carousel__track{--pls-carousel-visible:var(--pls-cv-tablet,2)}
}
@media(max-width:640px){
.pls-carousel--static .pls-carousel__track{grid-template-columns:1fr}
.pls-carousel__track{--pls-carousel-visible:var(--pls-cv-mobile,1)}
}

/* Card title size adapts to the number of columns, on desktop only.
   Phones and tablets show one or two cards per screen, where the base 16px is
   already the right size, so the scale only starts from the desktop breakpoint. */
@media(min-width:1025px){
    /* The rest of the card follows the width of the card with one number: the
       category, the meta line, the excerpt, the comment badge and the avatar.
       Two per row is the neutral point, because it is what the homepage ships
       with. */
    .pls-grid--1,
    .pls-carousel[data-visible="1"]{--pls-card-scale:1.25}

    .pls-grid--4,
    .pls-carousel[data-visible="4"]{--pls-card-scale:.94}

    /* One and two per row: the card is wide, and a title set for four across
       looks lost in it. Same value as the base size unless it is changed. */
    .pls-grid--1 .pls-card__title,
    .pls-carousel[data-visible="1"] .pls-card__title{font-size:calc(var(--pls-card-title-size-1col) * var(--pls-title-scale,1))}

    .pls-grid--2 .pls-card__title,
    .pls-carousel[data-visible="2"] .pls-card__title{font-size:calc(var(--pls-card-title-size-2col) * var(--pls-title-scale,1))}

    /* Three cards per row, in a static grid or a carousel */
    .pls-grid--3 .pls-card__title,
    .pls-carousel[data-visible="3"] .pls-card__title{font-size:calc(var(--pls-card-title-size-3col) * var(--pls-title-scale,1))}

    /* Four cards per row, in a static grid or a carousel */
    .pls-grid--4 .pls-card__title,
    .pls-carousel[data-visible="4"] .pls-card__title{font-size:calc(var(--pls-card-title-size-4col) * var(--pls-title-scale,1))}
}
/* --- Timeline --- */
.pls-section--timeline{padding:32px 0}

/* --- Deals Strip --- */
.pls-home-layout__main > .pls-section--deals{min-width:0;margin:0 0 10px 0;padding:60px 0 0 0;border-radius:0}
.pls-section--deals .pls-section__header{justify-content:flex-start;flex-wrap:nowrap}
.pls-section--deals .pls-carousel-nav{margin-left:0}
.pls-section--deals .pls-carousel{overflow:hidden}
/* Two classes, to win over the critical CSS, which is inlined after the
   stylesheet in the <head>: at equal specificity its rule would apply. */

@media(min-width:1025px){
    /* Desktop: a 3x3 grid, no coloured background or padding, no carousel controls. */
    .pls-section--deals{background:transparent;padding:0;margin:0 0 10px;border-radius:0}
    .pls-section--deals .pls-carousel{overflow:visible}
    .pls-section--deals .pls-carousel__track{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;transform:none!important;width:auto!important}
    .pls-section--deals .pls-carousel__slide{flex:none;width:auto;min-width:0}
    .pls-section--deals .pls-carousel-nav,
    .pls-section--deals .pls-carousel-dots{display:none}
    
}
@media(max-width:1024px){.pls-section--deals .pls-carousel__track{--pls-carousel-visible:var(--pls-cv-tablet)}}
@media(max-width:640px){.pls-section--deals{background:#e7efff;margin:30px -16px 10px -16px;padding:30px 16px;border-radius:0}.pls-section--deals .pls-carousel__track{--pls-carousel-visible:var(--pls-cv-mobile)}.pls-section--deals .pls-section__title{font-size:27px}}

/* --- Newsletter --- */
/* The full width bands at the bottom of the home: the column rules above do not
   reach them, so their air is set here. The last one also holds the page off
   the footer, which starts with its own dark block. */
.pls-section--newsletter{padding:64px 0 72px}
.pls-newsletter{background:var(--pls-ink);border-radius:var(--pls-radius-lg);padding:48px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;color:#fff}
/* The line above the heading carries the accent colour, lightened towards
   white: the accent is chosen by the site and some choices are dark enough to
   sink into this band, so the mix keeps the words readable whichever one it
   is. Browsers without color-mix keep the accent as it comes. */
/* Ten pixels in small capitals, spaced a pixel and a half apart, on a dark
   band: the least readable thing the theme printed. Twelve, in ordinary
   lettering, says the same word. */
.pls-newsletter__label{font-size:12px;font-weight:700;color:var(--pls-accent);color:color-mix(in srgb, var(--pls-accent) 75%, #fff);margin-bottom:12px;display:block}
.pls-newsletter__title{font-size:28px;font-weight:700;letter-spacing:-.6px;line-height:1.2;margin:0 0 12px}
.pls-newsletter__text{font-size:14px;opacity:.65;margin:0;line-height:1.6}
/* The form belongs to a newsletter plugin: this is the room it is given, not
   a shape of its own — imposing flex or overflow here squashed whatever the
   plugin drew. No frame either: the field carries its own border, and a box
   around the pair puts a third outline inside a block that already has one. */
.pls-newsletter__form{background:none;border:0;padding:0}
/* .35 left this line at 3.18:1 on the dark band — legible on a good screen
   and not on a phone in daylight. .6 brings it to 6.76:1 and it still reads
   as the quiet line it is meant to be. */
.pls-newsletter__disclaimer{font-size:12px;color:rgba(255,255,255,.6);margin:10px 0 0;text-align:left}

/* --- Lazy sections wrapper --- */
.pls-lazy-sections{min-height:200px;min-width:0}
.pls-home-layout__main,.pls-home-layout__sidebar{min-width:0}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media(max-width:1024px){
.pls-home-top-layout{grid-template-columns:1fr;padding:0 0 16px}
.pls-home-top-layout__sidebar{position:static}
.pls-home-layout{grid-template-columns:1fr}
.pls-home-layout__sidebar{position:static;width:100%;max-width:none}

.pls-newsletter{grid-template-columns:1fr;text-align:center;padding:36px 24px;gap:24px}
.pls-newsletter__form{max-width:420px;margin:0 auto}
.pls-newsletter__disclaimer{text-align:center}
.pls-section--hero .pls-container{padding:0 var(--pls-sp-md)}
}

@media(max-width:640px){

.pls-newsletter{padding:24px 16px}
.pls-newsletter__title{font-size:20px}

.pls-section__header{flex-wrap:wrap}
/* On a phone the filter chips get a row of their own, under the title, and
   scroll sideways: squeezed next to the title they were cut off mid-word.
   The subtitle of the grid is dropped here — on a narrow screen it is a line of
   text between the reader and the articles. */
.pls-section--grid .pls-section__header{align-items:flex-start;margin-bottom:12px}
.pls-grid-filters{flex:1 0 100%;order:2;margin-top:8px;padding-bottom:2px}
.pls-section--grid>.pls-section__subtitle{display:none}
}

/* iPhone mockup — CSS-only frame */

@keyframes pls-icon-breathe{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-6px) scale(1.03)}
}
@keyframes pls-icon-pulse{
    0%,100%{transform:scale(.92);opacity:.7}
    50%{transform:scale(1.18);opacity:1}
}
@keyframes pls-icon-spin{
    to{transform:rotate(360deg)}
}

@keyframes pls-phone-float{
    0%,100%{transform:translate(28%,8%) rotate(6deg)}
    50%{transform:translate(28%,4%) rotate(6deg)}
}
@keyframes pls-phone-float-rev{
    0%,100%{transform:translate(-58%,-2%) rotate(-9deg)}
    50%{transform:translate(-58%,2%) rotate(-9deg)}
}

/* Compact variant, when the block sits in the main column next to the sidebar */

@keyframes pls-phone-float-c{
    0%,100%{transform:translate(22%,8%) rotate(6deg)}
    50%{transform:translate(22%,4%) rotate(6deg)}
}
@keyframes pls-phone-float-rev-c{
    0%,100%{transform:translate(-48%,-2%) rotate(-9deg)}
    50%{transform:translate(-48%,2%) rotate(-9deg)}
}

@media(max-width:640px){

@keyframes pls-phone-float{0%,100%{transform:translate(24%,8%) rotate(5deg)}50%{transform:translate(24%,4%) rotate(5deg)}}
@keyframes pls-phone-float-rev{0%,100%{transform:translate(-52%,-2%) rotate(-8deg)}50%{transform:translate(-52%,2%) rotate(-8deg)}}
}

/* --- Promo (WC + Offerte) --- */

@media(min-width:1025px){.pls-section--promo{padding:32px 0 2px 0}}

/* ──────────────────────────────────────────────
   Variant A — Carousel marquee
   Text header plus a thumbnail strip scrolling in an endless loop.
   ────────────────────────────────────────────── */

/* ──────────────────────────────────────────────
   Variant C — Glass deck
   Sfondo blur + 5 carte tilted impilate, glassmorphism.
   ────────────────────────────────────────────── */

/* ──────────────────────────────────────────────
   Responsive
   ────────────────────────────────────────────── */

/* ══════════════════════════════════════════════
   DEALS PROMO — 3 design variants
   ══════════════════════════════════════════════ */

/* Full width section under the sidebar layout */
.pls-section--deals-promo-b{padding:32px 0;min-width:0;max-width:100%}

/* ──────────────────────────────────────────────
   Variant B — Deals strip
   Pill header, live banner and scrolling cards with a corner badge.
   ────────────────────────────────────────────── */

/* WC Download Modal — moved to shortcodes.css for global availability. */

/* --- Badge Community (homepage) --- */
.pls-section--badges{padding:32px 0}

/* --- Community badges: four in a row, the first fixed and the other three random --- */
.pls-section--badges-community{padding:32px 0 64px;min-width:0;max-width:100%}

/* --- App banner: a promo block for an iOS app, off by default --- */
.pls-section--app-download{padding:64px 0 0}
@media(max-width:640px){
.pls-section--app-download{padding:40px 0 0}
.pls-section--newsletter{padding:40px 0 48px}
}
.pls-app-download{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:48px 56px;background:linear-gradient(135deg,#0a1628 0%,#1a2a44 55%,#0f3460 100%);border-radius:var(--pls-radius-lg);color:#fff;gap:32px;overflow:hidden;isolation:isolate}
.pls-app-download__bg{position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 78% 50%,rgba(30,99,212,.45) 0%,rgba(30,99,212,0) 55%),radial-gradient(circle at 12% 30%,rgba(212,87,44,.12) 0%,rgba(212,87,44,0) 45%)}
.pls-app-download__content{position:relative;z-index:1}
.pls-app-download__badge{display:inline-flex;align-items:center;padding:6px 14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:calc(99px * var(--pls-r));font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pls-app-download__title{font-size:32px;font-weight:700;margin:0 0 12px;letter-spacing:-.5px;line-height:1.15}
.pls-app-download__desc{font-size:15px;color:rgba(255,255,255,.78);margin:0 0 24px;line-height:1.55;max-width:460px}
.pls-app-download__cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pls-app-download__btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;background:#fff;color:var(--pls-ink);border-radius:var(--pls-radius-sm);font-size:15px;font-weight:700;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.pls-app-download__btn:hover{color:var(--pls-ink);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.pls-app-download__rating{display:inline-flex;align-items:center;gap:6px;line-height:1;font-size:13px}
.pls-app-download__stars{color:#ffb800;letter-spacing:1px;font-size:14px}
.pls-app-download__rating-num{color:rgba(255,255,255,.7);font-size:13px;font-weight:600}
.pls-app-download__visual{position:relative;height:100%;min-height:420px;display:flex;align-items:center;justify-content:center}
.pls-app-download__glow{position:absolute;width:90%;height:90%;background:radial-gradient(circle at 50% 50%,rgba(99,179,255,.42) 0%,rgba(99,179,255,.12) 35%,rgba(99,179,255,0) 65%);filter:blur(28px);z-index:0;pointer-events:none}

/* Phone mockup — a CSS-only frame, no image of a device to license */
/* ── Shapes that are not the theme's to square off ───────────────────
   The app icon, the drawn iPhone and its screen keep their own corners
   whatever the Corners setting says: they are pictures of real objects. */
.pls-phone{position:absolute;width:240px;aspect-ratio:240/492;background:#0f0f0f;border-radius:38px;padding:7px;box-shadow:0 0 0 1.5px rgba(255,255,255,.08) inset,0 0 0 2px #1f1f1f,0 30px 60px rgba(0,0,0,.55),0 12px 24px rgba(0,0,0,.35);z-index:1;will-change:transform}
.pls-phone__notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:74px;height:22px;background:#000;border-radius:99px;z-index:2}
.pls-phone__screen{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;background:#000}
/* A phone waiting for its screenshot: a light, flat grey, so the mockup keeps
   its shape and reads as empty rather than broken. */
.pls-phone__screen--empty{background:var(--pls-bg)}
.pls-phone__screenshot{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}

.pls-phone--back{transform:translate(-58%,-2%) rotate(-9deg);z-index:1;opacity:.92;filter:saturate(.9)}
.pls-phone--front{transform:translate(28%,8%) rotate(6deg);z-index:3;animation:pls-phone-float 6s ease-in-out infinite}
.pls-phone--back{animation:pls-phone-float-rev 7s ease-in-out infinite}

.pls-app-download__icon{position:relative;display:block;width:94px;height:94px;border-radius:22px;margin:0 0 20px;isolation:isolate;animation:pls-icon-breathe 4s ease-in-out infinite}
.pls-app-download__icon::before{content:"";position:absolute;inset:-26px;border-radius:50%;background:radial-gradient(circle,rgba(99,179,255,.55) 0%,rgba(99,179,255,.18) 40%,rgba(99,179,255,0) 70%);filter:blur(8px);z-index:-2;animation:pls-icon-pulse 3.5s ease-in-out infinite}
.pls-app-download__icon::after{content:"";position:absolute;inset:-3px;border-radius:24px;background:conic-gradient(from 0deg,transparent 0%,rgba(255,255,255,.7) 8%,rgba(99,179,255,.4) 14%,transparent 22%,transparent 100%);z-index:-1;animation:pls-icon-spin 5s linear infinite;filter:blur(2px);opacity:.85}
/* The tile with no icon in it: a flat, quiet grey, and none of the glow or the
   breathing the real one has — it is a placeholder, not something to look at. */
.pls-app-download__icon--empty{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);animation:none}
.pls-app-download__icon--empty::before,
.pls-app-download__icon--empty::after{display:none}
.pls-app-download__icon-img{position:relative;display:block;width:100%;height:100%;border-radius:22px;object-fit:cover;box-shadow:0 18px 40px rgba(0,0,0,.55),0 6px 18px rgba(99,179,255,.4),0 0 0 1px rgba(255,255,255,.14);z-index:1}

@keyframes pls-icon-breathe{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-6px) scale(1.03)}
}
@keyframes pls-icon-pulse{
    0%,100%{transform:scale(.92);opacity:.7}
    50%{transform:scale(1.18);opacity:1}
}
@keyframes pls-icon-spin{
    to{transform:rotate(360deg)}
}

@keyframes pls-phone-float{
    0%,100%{transform:translate(28%,8%) rotate(6deg)}
    50%{transform:translate(28%,4%) rotate(6deg)}
}
@keyframes pls-phone-float-rev{
    0%,100%{transform:translate(-58%,-2%) rotate(-9deg)}
    50%{transform:translate(-58%,2%) rotate(-9deg)}
}
@media(prefers-reduced-motion:reduce){
.pls-phone--front,.pls-phone--back,.pls-app-download__icon,.pls-app-download__icon::before,.pls-app-download__icon::after{animation:none}
}

/* Compact variant, for when the block sits in the main column beside the sidebar */
.pls-home-layout__main .pls-app-download{padding:36px 40px;gap:24px}
.pls-home-layout__main .pls-app-download__title{font-size:26px}
.pls-home-layout__main .pls-app-download__desc{font-size:14px}
.pls-home-layout__main .pls-app-download__visual{min-height:340px}
.pls-home-layout__main .pls-phone{width:180px}
.pls-home-layout__main .pls-phone--front{animation-name:pls-phone-float-c}
.pls-home-layout__main .pls-phone--back{animation-name:pls-phone-float-rev-c}
.pls-home-layout__main .pls-app-download__icon{width:78px;height:78px;border-radius:18px}
@keyframes pls-phone-float-c{
    0%,100%{transform:translate(22%,8%) rotate(6deg)}
    50%{transform:translate(22%,4%) rotate(6deg)}
}
@keyframes pls-phone-float-rev-c{
    0%,100%{transform:translate(-48%,-2%) rotate(-9deg)}
    50%{transform:translate(-48%,2%) rotate(-9deg)}
}

@media(max-width:1024px){
.pls-app-download{grid-template-columns:1fr;text-align:center;padding:36px 28px 56px;gap:24px}
.pls-app-download__desc{margin-left:auto;margin-right:auto}
.pls-app-download__cta{justify-content:center}
.pls-app-download__visual{min-height:380px}
.pls-phone{width:200px}
.pls-app-download__icon{margin-left:auto;margin-right:auto;width:84px;height:84px}
}
@media(max-width:640px){
.pls-app-download{padding:28px 20px 44px}
.pls-app-download__title{font-size:26px}
/* The phone is 170px wide here against 240 elsewhere, and the frame does not
   scale with it: an island and a bezel written in pixels stay the size they
   were and swallow a phone this small. Both are brought down by the same 0.71
   the width was. The corners are not: scaled strictly they came out squarer
   than the object they draw, so they keep a little more curve than the ratio
   asks. The screen follows the shell minus the bezel, or the black frame would
   show a gap at each corner. */
.pls-phone{width:170px;border-radius:31px;padding:5px}
.pls-phone__screen{border-radius:26px}
.pls-phone__notch{top:10px;width:52px;height:16px}
/* Mirrored offsets, so the pair sits on the centre of the block: the two were
   at -52% and +24%, which put their midpoint a seventh of a phone to the left.
   The vertical ones are gentler too, because at this size the phone is taller
   than the slot and the lower one was being cut off. */
.pls-phone--back{transform:translate(-38%,-2%) rotate(-8deg)}
.pls-phone--front{transform:translate(38%,2%) rotate(5deg)}
.pls-app-download__visual{min-height:370px}
.pls-app-download__icon{margin-left:auto;margin-right:auto;width:74px;height:74px;border-radius:18px}
@keyframes pls-phone-float{0%,100%{transform:translate(38%,2%) rotate(5deg)}50%{transform:translate(38%,-2%) rotate(5deg)}}
@keyframes pls-phone-float-rev{0%,100%{transform:translate(-38%,-2%) rotate(-8deg)}50%{transform:translate(-38%,2%) rotate(-8deg)}}
}

/* --- Hero promo boxes (layout C sidebar) --- */
.pls-hero-promos{display:flex;flex-direction:column;gap:8px}
/* One box and, above it, the heading it may have been given: outside the white
   box on purpose, so it names the box rather than being read as its first
   line. */
.pls-hero-promo-item{display:flex;flex-direction:column;min-width:0}
/* The ink of the article titles at 70%, so the heading names the box below
   without competing with it. Mixed towards transparent and not towards a
   background colour: this strip sits on the coloured band of the hero, and a
   mix with the page background would come out wrong there and wrong again in
   the dark appearance. The space under it is a margin rather than a gap on the
   item, so the box sits at the top when there is no heading at all. */
.pls-hero-promo__heading{font-size:14px;font-weight:700;color:color-mix(in srgb, var(--pls-ink) 70%, transparent);line-height:1.25;padding-left:2px;text-transform:uppercase;margin-bottom:7px}
/* A heading that follows another box needs air above it, or it reads as the
   caption of the box it sits under rather than the title of the one below.
   Only from the second box down: above the first there is nothing to part it
   from. */
.pls-hero-promo-item + .pls-hero-promo-item .pls-hero-promo__heading{margin-top:9px}
/* The social buttons and the heading above them, kept together so the column's
   own 16px gap falls between blocks and not between a heading and what it
   names: the three headings of this column then sit the same distance from
   what they head. */
.pls-hero-socialblock{display:flex;flex-direction:column}
/* Four pixels more under this one, and it is not an inconsistency: the same
   measure reads as less space above a grid of small pills than above a card
   with a picture in it. The number that matters is the one the eye sees. */
.pls-hero-socialblock .pls-hero-promo__heading{margin-bottom:11px}
/* The column beside the articles finishes level with them: the promo boxes
   take whatever room the social buttons above them leave, and share it
   between themselves. Nothing is measured — the sidebar is already a flex
   column as tall as the row, so growing is all that was missing.
   `min-height:0` on the boxes: without it a flex item refuses to shrink past
   its content, and a long name would push the column past the articles it is
   supposed to match. */
.pls-hero-promos--fill{flex:1 1 auto}
/* Sharing the room left over, but never giving any of their own back: `1 0 auto`
   grows the boxes into empty space and forbids them to shrink under the height
   they need — the icon is 52px, and squeezed under that the picture and the two
   lines start colliding.

   The consequence is deliberate: when the column wants more room than the
   articles beside it, it takes it, the row grows, and the articles grow with it.
   Better a taller hero than boxes crushed against the edge of the band. */
.pls-hero-promos--fill .pls-hero-promo-item{flex:1 0 auto}
.pls-hero-promos--fill .pls-hero-promo{flex:1 1 auto}
.pls-hero-promo{display:flex;align-items:center;gap:11px;padding:10px 12px;min-height:74px;box-sizing:border-box;background:var(--pls-surface);border:1px solid var(--pls-border-soft);border-radius:calc(14px * var(--pls-r));text-decoration:none;color:inherit;min-width:0}
a.pls-hero-promo:hover{border-color:var(--pls-brand);transition:border-color .15s}
/* The promo thumbnail keeps its corners whatever the Corners setting says,
   like the app icon and the drawn phones: it reads as a small picture of a
   thing, and squared off it turns into a stray rectangle beside the text.
   Written without the factor on purpose — the exception is the point. */
.pls-hero-promo__icon{width:52px;height:52px;border-radius:13px;flex:0 0 auto;object-fit:cover;background:var(--pls-border-soft)}
.pls-hero-promo__info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pls-hero-promo__name{font-size:14px;font-weight:700;color:var(--pls-ink);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pls-hero-promo__sub{font-size:12.5px;color:var(--pls-mute);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pls-hero-promo__cta{flex:0 0 auto;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--pls-brand);background:var(--pls-brand-soft);border-radius:calc(999px * var(--pls-r));padding:6px 11px}
@media(max-width:640px){.pls-hero-promo__icon{width:44px;height:44px;border-radius:11px}}

/* --- Placeholder for an empty video/image slot (hero D and E) --- */
.pls-media-ph{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;border-radius:calc(14px * var(--pls-r));background:linear-gradient(155deg,#2a3446 0%,#151b27 100%);color:#e8ecf4;text-align:center;padding:18px}
.pls-media-ph--square{aspect-ratio:1/1;max-width:250px;margin-inline:auto}
.pls-media-ph__play{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}
.pls-media-ph__play .pls-micon{background-color:rgba(255,255,255,.85);margin-left:4px}
.pls-media-ph__label{font-size:13px;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.72);max-width:80%;line-height:1.35}
.pls-media-ph__sweep{position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.13) 50%,transparent 62%);transform:translateX(-100%);animation:pls-ph-sweep 3.2s ease-in-out infinite}
@keyframes pls-ph-sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.pls-media-ph__sweep{animation:none;opacity:.5;transform:none}}

/* The block is not rendered at all while no plugin collects the addresses.
   This line takes its place, and only an administrator ever sees it. */
/* The note only an administrator sees, where the newsletter block would be.
   It used to be small grey text on white, wedged against the block above it —
   easy to walk past, which is the one thing a message like this must not be.
   Amber, spaced away from its neighbours, and with a label saying who it is
   for, so nobody mistakes it for something the readers can see. */
.pls-newsletter-setup{display:flex;align-items:flex-start;gap:14px;
  margin:var(--pls-sp-lg) auto;max-width:var(--pls-max-w);padding:18px 20px;
  border:1px solid #f0d9a8;border-left:4px solid #e2a83b;border-radius:calc(12px * var(--pls-r));
  background:#fffaf0;color:var(--pls-ink)}
.pls-newsletter-setup__tag{flex:0 0 auto;padding:4px 10px;border-radius:calc(999px * var(--pls-r));background:#f6e6c4;
  color:#7a5312;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;line-height:1.5}
.pls-newsletter-setup__body{min-width:0}
.pls-newsletter-setup strong{display:block;font-size:16px;line-height:1.35;color:var(--pls-ink)}
.pls-newsletter-setup p{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--pls-ink2)}
.pls-newsletter-setup a{color:var(--pls-brand);text-decoration:underline}
@media(max-width:640px){.pls-newsletter-setup{flex-direction:column;gap:10px;margin-left:var(--pls-sp-md);margin-right:var(--pls-sp-md)}}