/* ==========================================================================
   premium.css - premium layer (packet H2)
   Loaded LAST on every page, after monday-core.css and the page stylesheets.
   Enhances existing classes and adds .pr-* components. Never renames markup.
   Palette is the existing monday-core palette; no new accent colours.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* type */
  --pr-display:clamp(40px,5.2vw,64px);
  --pr-h2:clamp(32px,3.6vw,48px);
  --pr-h3:22px;
  --pr-body:18px;

  /* elevation */
  --pr-e1:rgba(205,208,223,.35) 0 2px 24px;
  --pr-e2:rgba(205,208,223,.45) 0 8px 48px;
  --pr-e3:rgba(76,88,184,.18) 0 24px 64px;

  /* radii */
  --pr-r-card:24px;
  --pr-r-lg:32px;
  --pr-r-pill:160px;

  /* surfaces */
  --pr-surface-1:#fff;
  --pr-surface-2:#f5f6f8;
  --pr-surface-3:#eceefa;
  --pr-surface-ink:#1b1c35;

  /* glow behind transparent art */
  --pr-glow:radial-gradient(60% 60% at 50% 45%,rgba(76,88,184,.16),transparent 70%);
}

/* ---------- 2. Global type and polish ---------- */
body{line-height:1.6}
h1,h2,h3{letter-spacing:-.03em;text-wrap:balance}

/* Section band mapping onto the premium surfaces. */
.tint{background:var(--pr-surface-2)}
.lavender{background:var(--pr-surface-3)}
.navy{background:var(--pr-surface-ink)}

/* Cards: 24px radius, soft elevation. Lift on hover is in the hover block below. */
.batch-card,.numbered-step,.hero-summary,.faq-list details,.batch-cta{
  border-radius:var(--pr-r-card);
  box-shadow:var(--pr-e1);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.batch-page [data-results] .batch-card{transition:border-color 180ms,transform .35s var(--ease),box-shadow .35s var(--ease)}
/* Numbered steps had only a top rule; a white surface keeps the elevation visible. */
.numbered-step{background:var(--pr-surface-1);padding:24px 22px 28px;border-top:0}
.navy .numbered-step{background:rgba(255,255,255,.04);box-shadow:none}

/* Illustration frames: glow from CSS, no box or border around transparent art. */
.pr-art,.hero-illustration{
  position:relative;
  background:var(--pr-glow);
  border:0;
  border-radius:0;
  overflow:visible;
}
.pr-art img,.hero-illustration img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(27,28,53,.12))}
/* Keep art in proportion: the hero stays near one screen, tile art never outgrows its copy.
   !important beats the max-width the homepage builder writes inline on the hero figure. */
.pr-hero .pr-art{max-width:min(600px,100%)!important}
.pr-tile>img:first-child{width:auto;max-width:100%;max-height:220px;align-self:center;object-fit:contain}
.pr-tile.span-4>img:first-child{max-height:280px}
.pr-story-media img{max-height:min(460px,60vh);width:auto;margin-inline:auto;object-fit:contain}

/* Primary buttons: inner highlight. Gradient CTA becomes solid violet. */
.btn--v{box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.btn--g{background:var(--violet);color:#fff}

/* ---------- 3. Header (glass state, set by motion.js via .is-scrolled) ---------- */
.hdr .in{transition:height .3s var(--ease)}
.hdr.is-scrolled{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid rgba(222,224,234,.6);
  box-shadow:var(--pr-e1);
}
.hdr.is-scrolled .in{height:64px}
/* backdrop-filter makes the header the containing block for fixed children; keep the mega menu under the shorter bar. */
.hdr.is-scrolled .nav>li .mega-menu{top:64px}

/* ---------- 4. Hero, blobs, art, floats ---------- */
.pr-hero{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.pr-hero h1{font-size:var(--pr-display);line-height:1.1}

.pr-blobs{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.pr-blobs span{
  position:absolute;display:block;border-radius:50%;
  width:420px;height:420px;
  filter:blur(80px);opacity:.45;
}
.pr-blobs span:nth-child(1){top:-160px;left:-120px;background:var(--violet)}
.pr-blobs span:nth-child(2){top:10%;right:-140px;width:360px;height:360px;background:var(--sky)}
.pr-blobs span:nth-child(3){bottom:-180px;left:38%;width:300px;height:300px;background:var(--mint)}

/* Floating chips. Position comes from --x / --y; animation is owned by motion.css. */
.pr-float{
  position:absolute;z-index:2;
  left:var(--x,auto);top:var(--y,auto);
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:#fff;border-radius:18px;
  box-shadow:var(--pr-e2);
  font-size:14px;font-weight:500;line-height:1.2;color:var(--ink);white-space:nowrap;
}
.pr-float::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--violet);flex:none}

/* ---------- 5. Bento grid ---------- */
.pr-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.pr-bento>.pr-tile{grid-column:span 2}
.pr-bento>.span-2{grid-column:span 2}
.pr-bento>.span-3{grid-column:span 3}
.pr-bento>.span-4{grid-column:span 4}
.pr-tile{
  position:relative;min-width:0;
  display:flex;flex-direction:column;gap:12px;
  padding:28px;
  background:var(--pr-surface-2);
  border-radius:var(--pr-r-card);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.pr-tile h3{font-size:var(--pr-h3);margin:0}

/* ---------- 6. Marquee (layout and edge mask; keyframes live in motion.css) ---------- */
.pr-marquee{position:relative;overflow:hidden;padding:8px 0}
.pr-marquee-track{
  display:flex;flex-wrap:wrap;justify-content:center;row-gap:24px;
  align-items:center;
}
.pr-marquee-track>*{flex:none;margin-right:56px}
.pr-marquee-track img{height:28px;width:auto}
.pr-marquee-track>[aria-hidden="true"]{display:none}

/* Animated only when motion.js has cloned the track (js-motion is absent under reduced motion). */
.js-motion .pr-marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.js-motion .pr-marquee-track{
  flex-wrap:nowrap;justify-content:flex-start;row-gap:0;width:max-content;
  animation:pr-marquee var(--dur,40s) linear infinite;
}
.js-motion .pr-marquee-track>[aria-hidden="true"]{display:flex}
.js-motion .pr-marquee-track.is-paused,
.js-motion .pr-marquee.is-paused .pr-marquee-track{animation-play-state:paused}

/* ---------- 7. Story (sticky media plus numbered steps) ---------- */
.pr-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.pr-story-media{position:sticky;top:96px;align-self:start}
.pr-story-steps{display:grid}
.pr-story-step{
  display:flex;flex-direction:column;justify-content:center;
  min-height:min(60vh,520px);padding:24px 0;
  transition:opacity .4s var(--ease);
}
/* Dimming only when JS drives the story, so no-JS readers see every step at full strength. */
.js-motion .pr-story-step{opacity:.45}
.js-motion .pr-story-step.is-active{opacity:1}

/* Panels stack in one grid cell; only .is-active shows. Without js-motion (or under reduced motion) they flow normally. */
.js-motion .pr-story-media{display:grid}
.js-motion .pr-story-media [data-story-panel]{
  grid-area:1/1;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s;
}
.js-motion .pr-story-media [data-story-panel].is-active{opacity:1;visibility:visible}

/* ---------- 8. Stat ---------- */
.pr-stat strong{
  display:block;
  font-size:var(--pr-display);font-weight:400;line-height:1;letter-spacing:-.04em;
  color:var(--violet);font-variant-numeric:tabular-nums;
}
.pr-stat span{display:block;margin-top:14px;font-size:16px;line-height:1.5;color:var(--slate)}
/* On dark bands the violet figure loses contrast: switch to the lime accent and a light label. */
.navy .pr-stat strong,.hm-why .pr-stat strong,.pr-cta .pr-stat strong{color:var(--mint)}
.navy .pr-stat span,.hm-why .pr-stat span,.pr-cta .pr-stat span{color:rgba(255,255,255,.72)}

/* ---------- 9. CTA band (navy, sits inside .batch-cta) ---------- */
.pr-cta{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--pr-surface-ink);color:#fff;
  border-radius:var(--pr-r-lg);
  padding:clamp(28px,6vw,80px);
  box-shadow:none;
}
.pr-cta h2,.pr-cta h3{color:#fff}
.pr-cta p{color:#c6c8d6}
/* Lime underline on an <em> inside the heading. */
.pr-cta em{
  font-style:normal;
  background:linear-gradient(var(--mint),var(--mint)) 0 88%/100% .32em no-repeat;
}

/* ---------- 10. Hover (fine pointers, motion allowed only) ---------- */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .batch-card:hover,.numbered-step:hover,.hero-summary:hover,
  .faq-list details:hover,.batch-cta:hover,.pr-tile:hover{
    transform:translateY(-4px);
    box-shadow:var(--pr-e2);
  }
  .btn--v:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 28px rgba(76,88,184,.32)}
  .btn--g:hover{background:var(--violet-d);box-shadow:0 10px 30px rgba(76,88,184,.38);transform:translateY(-1px)}
  .pr-marquee:hover .pr-marquee-track,
  .pr-marquee:focus-within .pr-marquee-track{animation-play-state:paused}
}

/* ---------- 11. Responsive ---------- */
@media (max-width:899px){
  .pr-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-bento>.pr-tile,.pr-bento>.span-2{grid-column:auto}
  .pr-bento>.span-3,.pr-bento>.span-4{grid-column:span 2}
  .pr-story{grid-template-columns:minmax(0,1fr);gap:48px}
  /* without sticky scrolling the panel would sit far above the step it belongs to, so the steps carry the story alone */
  .pr-story-media,.js-motion .pr-story-media{display:none}
  .pr-story-step{min-height:0}
}
@media (max-width:639px){
  .pr-float{display:none}
  .pr-blobs span{width:240px;height:240px;filter:blur(60px)}
}
@media (max-width:600px){
  .pr-hero h1{font-size:38px}
}

/* ---------- 12. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  /* Static logo strip, wrapped so every name is visible. */
  .pr-marquee-track{animation:none}
}

/* Hero is flat white: no drifting blobs and no glow behind the hero art (blobs stay on the dark CTA band). */
.pr-hero>.pr-blobs,.pr-hero .pr-blobs{display:none}
.pr-hero .pr-art,.pr-hero .hero-illustration{background:none}

/* No gradient washes anywhere: blobs are off on every band and the pillar's own hero/CTA glows are removed. */
.pr-blobs{display:none}
.pillar-hero:before,.closing-cta:before{content:none;background:none}
.pr-cta,.batch-cta.pr-cta{background-image:none}

/* ---------- Mega menu: complete menus for every major page group ---------- */
.mega-intro{background:var(--pr-surface-3)}
.hdr .nav>li .mega-menu{max-height:calc(100vh - 88px);overflow-y:auto}
.mega-col{display:grid;gap:10px;align-content:start}
.mega-label{margin:6px 0 0;padding:0 12px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.mega-label:first-child{margin-top:0}
.mega-links.is-cols3{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.mega-links.is-cols3>a{grid-template-columns:34px 1fr 14px;padding:10px 10px;gap:10px;font-size:14px}
.mega-links.is-cols3 img{width:30px;height:30px}
.mega-links.is-text>a{grid-template-columns:1fr 14px;padding:10px 12px;font-size:14px}
.mega-links>a>svg{width:14px;height:14px;opacity:0;transition:opacity .2s,transform .25s var(--ease)}
.mega-links>a:hover>svg,.mega-links>a:focus-visible>svg{opacity:.7;transform:translateX(2px)}
.mega-more{display:flex;flex-wrap:wrap;gap:6px 18px;margin:6px 0 0;padding:14px 12px 0;border-top:1px solid var(--pebble)}
.mega-more a{font-size:13px;font-weight:500;color:var(--violet)}
.mega-more a:hover{text-decoration:underline}
@media (max-width:1180px){.mega-links.is-cols3{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Pages that are not published yet are rendered as plain text by the site; keep them out of the menus until they go live. */
.mega-links>span,.mega-more>span,.hdr .nav>li>span{display:none}
.mm>span,.mm details>span{display:none}
.hdr .nav>li:not(.has-menu):not(:has(a)){display:none}