/**
 * What's New page styles.
 *
 * Ported from the standalone whats-new.html design. Every rule is scoped under
 * .vl-whats-new-page so the page's global-ish resets (*, body, .btn-outline,
 * .btn-solid) can never leak into the shared header/footer. This mirrors the
 * scoping convention already used by css/success-stories.css.
 *
 * @package VoiceLink_Classic_Theme
 */

.vl-whats-new-page *{box-sizing:border-box;margin:0;padding:0}
.vl-whats-new-page{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f8faff;color:#0a0a0a}
.vl-whats-new-page .vl-page-wrap{max-width:1180px;margin:0 auto;padding:0 3rem}

/* ── HERO ── */
/* padding-top clears the theme's fixed navbar (~80px desktop / ~64px mobile). */
.vl-whats-new-page .vl-hero{background:#fff;text-align:center;padding:6rem 3rem 2.5rem;position:relative;overflow:hidden;border-bottom:1px solid #e8eef7}
.vl-whats-new-page .vl-hero-blob-l{position:absolute;left:-80px;top:-60px;width:280px;height:280px;border-radius:50%;background:rgba(26,86,219,0.07);pointer-events:none}
.vl-whats-new-page .vl-hero-blob-r{position:absolute;right:-80px;top:-40px;width:320px;height:320px;border-radius:50%;background:rgba(249,115,22,0.07);pointer-events:none}
.vl-whats-new-page .vl-hero-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:#1a56db;background:#eef3fd;border:1px solid #c7d9f9;border-radius:20px;padding:4px 14px;margin-bottom:1.25rem}
.vl-whats-new-page .vl-hero-title{font-size:48px;font-weight:800;color:#0a0a0a;line-height:1.08;margin-bottom:0.8rem;letter-spacing:-1px}
.vl-whats-new-page .vl-hero-title span{color:#1a56db}
.vl-whats-new-page .vl-hero-sub{font-size:16px;color:#666;max-width:520px;margin:0 auto 1.75rem;line-height:1.7;font-weight:400}
.vl-whats-new-page .vl-hero-badge{background:#fff;border:1px solid #e8eef7;border-radius:10px;padding:9px 16px;display:inline-flex;align-items:center;gap:10px;box-shadow:0 2px 10px rgba(0,0,0,0.06);font-size:13px;font-weight:500}

/* ── FEATURE HIGHLIGHTS ── */
.vl-whats-new-page .vl-highlights{background:#fff;padding:2.5rem 3rem 0;border-bottom:1px solid #e8eef7;overflow:hidden}
.vl-whats-new-page .vl-hl-inner{display:flex;align-items:stretch}
.vl-whats-new-page .vl-hl-blob{flex:0 0 230px;background:#1a56db;border-radius:0 130px 130px 0;display:flex;flex-direction:column;justify-content:center;padding:2rem 2.25rem;min-height:210px}
.vl-whats-new-page .vl-hl-blob-title{font-size:21px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:1.4rem}
.vl-whats-new-page .vl-hl-arrows{display:flex;gap:8px}
.vl-whats-new-page .vl-hl-arrow{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,0.45);background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:background 0.15s}
.vl-whats-new-page .vl-hl-arrow:hover{background:rgba(255,255,255,0.18)}
.vl-whats-new-page .vl-hl-track-wrap{flex:1;overflow:hidden;padding:0 1.75rem 1.75rem;margin-right:3rem}
.vl-whats-new-page .vl-hl-track{display:flex;gap:16px;transition:transform 0.35s ease}
.vl-whats-new-page .vl-hl-card{flex:0 0 340px;background:#fff;border:1px solid #e8eef7;border-radius:14px;padding:1.5rem;display:flex;flex-direction:column;gap:14px}
.vl-whats-new-page .vl-hl-card:hover{border-color:#1a56db;box-shadow:0 2px 14px rgba(26,86,219,0.09)}
.vl-whats-new-page .vl-hl-card-visual{width:100%;height:140px;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.vl-whats-new-page .vl-hl-card-visual img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.vl-whats-new-page .vl-hl-card-title{font-size:16px;font-weight:600;color:#0a0a0a;margin-bottom:5px;line-height:1.3}
.vl-whats-new-page .vl-hl-card-sub{font-size:13px;color:#666;line-height:1.5;margin-bottom:8px}
.vl-whats-new-page .vl-hl-card-link{font-size:13px;font-weight:500;color:#1a56db;display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.vl-whats-new-page .vl-hl-card-link:hover{text-decoration:underline}

/* ── UPDATES ── */
.vl-whats-new-page .vl-updates{padding:3.5rem 2.5rem}
.vl-whats-new-page .vl-updates-title{font-size:30px;font-weight:700;color:#0a0a0a;text-align:center;margin-bottom:0.35rem}
.vl-whats-new-page .vl-updates-sub{font-size:14px;color:#888;text-align:center;margin-bottom:2.75rem}

/* Single-line date divider */
.vl-whats-new-page .vl-date-divider{display:flex;align-items:center;gap:10px;margin-bottom:2.25rem}
.vl-whats-new-page .vl-date-divider-left{display:flex;align-items:center;gap:6px;flex-shrink:0}
.vl-whats-new-page .vl-date-divider-text{font-size:11px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:#94a3b8}
.vl-whats-new-page .vl-date-divider-anchor{color:#94a3b8;cursor:pointer;display:flex;align-items:center}
.vl-whats-new-page .vl-date-divider-anchor:hover{color:#1a56db}
.vl-whats-new-page .vl-date-divider-line{flex:1;height:1px;background:#e8eef7}
.vl-whats-new-page .vl-date-divider-blog{font-size:12px;color:#1a56db;text-decoration:none;flex-shrink:0}
.vl-whats-new-page .vl-date-divider-blog:hover{text-decoration:underline}

/* Month group — date once on left, entries stacked right */
.vl-whats-new-page .vl-month-group{display:grid;grid-template-columns:150px 1fr;gap:0 2.25rem;margin-bottom:3.5rem;align-items:start}
.vl-whats-new-page .vl-month-meta{padding-top:4px}
.vl-whats-new-page .vl-month-meta-date{font-size:11px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:#0a0a0a;margin-bottom:8px}
.vl-whats-new-page .vl-month-meta-link{font-size:13px;color:#1a56db;display:flex;align-items:center;gap:3px;text-decoration:none}
.vl-whats-new-page .vl-month-meta-link:hover{text-decoration:underline}
.vl-whats-new-page .vl-month-entries{display:flex;flex-direction:column}
.vl-whats-new-page .vl-entry{display:grid;grid-template-columns:1fr 400px;gap:2.25rem;margin-bottom:2.75rem;padding-bottom:2.75rem;border-bottom:1px solid #f1f5f9;align-items:start}
.vl-whats-new-page .vl-entry:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.vl-whats-new-page .vl-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;padding:3px 10px;border-radius:4px;margin-bottom:10px}
.vl-whats-new-page .tag-new{background:#eef3fd;color:#1a56db;border:1px solid #c7d9f9}
.vl-whats-new-page .tag-enhance{background:#fef3e8;color:#c2410c;border:1px solid #fed7aa}
.vl-whats-new-page .tag-integration{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.vl-whats-new-page .tag-compliance{background:#fdf4ff;color:#7e22ce;border:1px solid #e9d5ff}
.vl-whats-new-page .tag-fixed{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0}
.vl-whats-new-page .vl-entry-title{font-size:24px;font-weight:700;color:#0a0a0a;line-height:1.2;margin-bottom:0.75rem;letter-spacing:-0.3px}
.vl-whats-new-page .vl-entry-desc{font-size:15px;color:#555;line-height:1.75;margin-bottom:0.8rem;font-weight:400}
/* Rich text inside descriptions: bullet lists, paragraphs, links, emphasis.
   Font size / colour / line-height are restated on the children (not just the
   container) so pasted markup carrying its own classes cannot override them —
   an inherited value loses to any direct rule, however weak its specificity. */
.vl-whats-new-page .vl-entry-desc p,
.vl-whats-new-page .vl-entry-desc li,
.vl-whats-new-page .vl-entry-desc span,
.vl-whats-new-page .vl-entry-desc div{
	font-size:15px;
	color:#555;
	line-height:1.75;
	font-family:inherit;
	font-weight:400;
	letter-spacing:normal;
	background:none
}
.vl-whats-new-page .vl-entry-desc p{margin:0 0 .7rem}
.vl-whats-new-page .vl-entry-desc p:last-child{margin-bottom:0}
.vl-whats-new-page .vl-entry-desc ul,
.vl-whats-new-page .vl-entry-desc ol{margin:0 0 .7rem;padding-left:1.25rem}
.vl-whats-new-page .vl-entry-desc ul{list-style:disc}
.vl-whats-new-page .vl-entry-desc ol{list-style:decimal}
.vl-whats-new-page .vl-entry-desc li{margin:0 0 .35rem;padding-left:.15rem}
.vl-whats-new-page .vl-entry-desc li:last-child{margin-bottom:0}
.vl-whats-new-page .vl-entry-desc ul ul,
.vl-whats-new-page .vl-entry-desc ol ol{margin:.35rem 0 0}
.vl-whats-new-page .vl-entry-desc a{color:#1a56db;text-decoration:underline}
.vl-whats-new-page .vl-entry-desc strong,
.vl-whats-new-page .vl-entry-desc b{font-weight:600;color:#334155}
.vl-whats-new-page .vl-entry-note{font-size:12px;color:#1a56db;display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.vl-whats-new-page .vl-entry-note:hover{text-decoration:underline}

/* ── FAQ ── */
.vl-whats-new-page .vl-faq-wrap{padding:4rem 2.5rem;max-width:860px;margin:0 auto}
.vl-whats-new-page .vl-faq-title{font-size:30px;font-weight:700;color:#0a0a0a;text-align:center;margin-bottom:3rem}
.vl-whats-new-page .vl-faq-list{border-top:1px solid #e8eef7}
.vl-whats-new-page .vl-faq-item{border-bottom:1px solid #e8eef7}
.vl-whats-new-page .vl-faq-q{width:100%;background:none;border:none;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.5rem 0;cursor:pointer;font-size:16px;font-weight:600;color:#0a0a0a;text-align:left;font-family:inherit}
.vl-whats-new-page .vl-faq-q:hover span{color:#1a56db}
.vl-whats-new-page .vl-faq-chevron{flex-shrink:0;transition:transform 0.25s ease}
.vl-whats-new-page .vl-faq-q.open .vl-faq-chevron{transform:rotate(180deg)}
.vl-whats-new-page .vl-faq-a{font-size:14px;color:#555;line-height:1.75;padding:0 0 1.5rem;display:none}
.vl-whats-new-page .vl-faq-a.open{display:block}
.vl-whats-new-page .vl-faq-a a{color:#1a56db}

/* ── CTA CARD ── */
.vl-whats-new-page .vl-cta-wrap{padding:0 3rem 4rem}
.vl-whats-new-page .vl-cta-card{
  background:linear-gradient(135deg,#1a56db 0%,#1e3fa8 55%,#162d8a 100%);
  border-radius:20px;
  padding:4rem 2rem;
  text-align:center;
  max-width:100%;
}
.vl-whats-new-page .vl-cta-headline{
  font-size:40px;font-weight:800;color:#fff;
  line-height:1.15;margin-bottom:2rem;
  letter-spacing:-0.5px;
}
.vl-whats-new-page .vl-cta-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:16px;font-weight:700;
  background:#f97316;
  color:#fff;
  border:none;border-radius:8px;
  padding:17px 44px;
  cursor:pointer;
  font-family:"Inter",sans-serif;
  letter-spacing:0.01em;
  box-shadow:0 6px 24px rgba(249,115,22,0.45);
  text-decoration:none;
}
.vl-whats-new-page .vl-cta-btn:hover{background:#ea6c0a}

/* ── THUMBNAILS ── */
.vl-whats-new-page .vl-thumb{position:relative;width:100%;max-width:400px;border-radius:14px;overflow:hidden;cursor:pointer;border:1px solid #e8eef7;background:#f8faff}
/* Static image / illustration: no play button, so no clickable affordance. */
.vl-whats-new-page .vl-thumb--static{cursor:default}
.vl-whats-new-page .vl-thumb-img{width:100%;height:auto;display:block;border-radius:14px}
.vl-whats-new-page .vl-thumb-overlay{position:absolute;inset:0;background:rgba(10,14,26,0.08);border-radius:14px;display:flex;align-items:flex-start;justify-content:flex-end;padding:12px;transition:background 0.2s}
.vl-whats-new-page .vl-thumb:hover .vl-thumb-overlay{background:rgba(10,14,26,0.35)}
.vl-whats-new-page .vl-thumb-play{width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.18);transition:transform 0.15s}
.vl-whats-new-page .vl-thumb:hover .vl-thumb-play{transform:scale(1.08)}
.vl-whats-new-page .vl-thumb-play svg{width:22px;height:22px;margin-left:3px}
.vl-whats-new-page .vl-thumb-label{position:absolute;bottom:10px;left:12px;font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#fff;background:rgba(26,86,219,0.85);border-radius:4px;padding:3px 8px}
.vl-whats-new-page .vl-thumb-popup-src{display:none}

/* ── GIF POPUP ── */
.vl-whats-new-page .vl-popup-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.72);z-index:9999;align-items:center;justify-content:center}
.vl-whats-new-page .vl-popup-overlay.active{display:flex}
.vl-whats-new-page .vl-popup-box{background:#fff;border-radius:16px;overflow:hidden;max-width:760px;width:90%;position:relative;box-shadow:0 24px 80px rgba(0,0,0,0.4)}
.vl-whats-new-page .vl-popup-header{background:#1a56db;padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.vl-whats-new-page .vl-popup-title{font-size:13px;font-weight:600;color:#fff;letter-spacing:0.02em}
.vl-whats-new-page .vl-popup-close{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.15);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}
.vl-whats-new-page .vl-popup-close:hover{background:rgba(255,255,255,0.28)}
.vl-whats-new-page .vl-popup-body{padding:0}
.vl-whats-new-page .vl-popup-body svg{width:100%;height:auto;display:block}
.vl-whats-new-page .vl-popup-body img{width:100%;display:block}
.vl-whats-new-page .vl-popup-body video{width:100%;display:block}
.vl-whats-new-page .vl-popup-caption{font-size:12px;color:#555;padding:12px 18px;line-height:1.5;border-top:1px solid #eef2f7}

/* Hamburger / mobile-nav placeholders (nav itself comes from the theme header) */
.vl-whats-new-page .vl-hamburger{display:none}
.vl-whats-new-page .vl-mobile-nav{display:none}

/* ── RESPONSIVE ─────────────────────────────────── */

/* Tablet 1024px */
@media(max-width:1024px){
  .vl-whats-new-page .vl-hero{padding:5.5rem 1.5rem 2rem}
  .vl-whats-new-page .vl-hero-title{font-size:36px}
  .vl-whats-new-page .vl-highlights{padding:2rem 1.5rem}
  .vl-whats-new-page .vl-hl-blob{flex:0 0 180px;border-radius:0 100px 100px 0;padding:1.5rem 1.5rem}
  .vl-whats-new-page .vl-hl-blob-title{font-size:17px}
  .vl-whats-new-page .vl-hl-track-wrap{padding:0 1rem 1.5rem;margin-right:0}
  .vl-whats-new-page .vl-hl-card{flex:0 0 260px}
  .vl-whats-new-page .vl-updates{padding:2.5rem 1.5rem}
  .vl-whats-new-page .vl-month-group{grid-template-columns:120px 1fr;gap:0 1.5rem}
  .vl-whats-new-page .vl-entry{grid-template-columns:1fr 300px;gap:1.5rem}
  .vl-whats-new-page .vl-faq-wrap{padding:3rem 0}
  .vl-whats-new-page .vl-cta-wrap{padding:0 1.5rem 3rem}
  .vl-whats-new-page .vl-page-wrap{padding:0 1.5rem}
}

/* Mobile 768px — stacked layout */
@media(max-width:768px){

  /* ── Hero ── */
  .vl-whats-new-page .vl-hero{padding:5rem 1.25rem 1.75rem}
  .vl-whats-new-page .vl-hero-title{font-size:28px;letter-spacing:-0.5px}
  .vl-whats-new-page .vl-hero-sub{font-size:14px;margin-bottom:1.25rem}
  .vl-whats-new-page .vl-hero-badge{font-size:11px;gap:6px;flex-wrap:wrap;justify-content:center;padding:8px 12px}
  .vl-whats-new-page .vl-hero-badge span[style*="bbb"]{display:none}

  /* ── Feature highlights ── */
  .vl-whats-new-page .vl-highlights{padding:1.5rem 0}
  .vl-whats-new-page .vl-hl-inner{align-items:stretch}
  .vl-whats-new-page .vl-hl-blob{flex:0 0 130px;border-radius:0 70px 70px 0;padding:1.25rem 1rem;min-height:180px}
  .vl-whats-new-page .vl-hl-blob-title{font-size:15px;margin-bottom:1rem}
  .vl-whats-new-page .vl-hl-arrow{width:30px;height:30px;font-size:13px}
  .vl-whats-new-page .vl-hl-track-wrap{padding:0 1rem 1.25rem;margin-right:0;overflow:hidden}
  .vl-whats-new-page .vl-hl-card{flex:0 0 220px;padding:1rem}
  .vl-whats-new-page .vl-hl-card-visual{height:80px}
  .vl-whats-new-page .vl-hl-card-title{font-size:13px;margin-bottom:3px}
  .vl-whats-new-page .vl-hl-card-sub{font-size:12px;line-height:1.4}

  /* ── All Updates ── */
  .vl-whats-new-page .vl-updates{padding:2rem 1.25rem}
  .vl-whats-new-page .vl-updates-title{font-size:22px}
  .vl-whats-new-page .vl-updates-sub{font-size:13px}

  /* Month group — date row above entries */
  .vl-whats-new-page .vl-month-group{grid-template-columns:1fr;gap:0}
  .vl-whats-new-page .vl-month-meta{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0 1rem;border-bottom:1px solid #e8eef7;margin-bottom:1.5rem}
  .vl-whats-new-page .vl-month-meta-date{margin-bottom:0;font-size:11px}
  .vl-whats-new-page .vl-month-meta-link{font-size:12px}
  .vl-whats-new-page .vl-month-entries{display:flex;flex-direction:column}

  /* Entry — text stacks above thumbnail */
  .vl-whats-new-page .vl-entry{grid-template-columns:1fr;gap:1.25rem;padding-bottom:2rem;margin-bottom:2rem}
  .vl-whats-new-page .vl-entry:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
  .vl-whats-new-page .vl-entry-title{font-size:18px;letter-spacing:-0.2px}
  .vl-whats-new-page .vl-entry-desc{font-size:13px;line-height:1.65}
  .vl-whats-new-page .vl-entry-desc p,
  .vl-whats-new-page .vl-entry-desc li,
  .vl-whats-new-page .vl-entry-desc span,
  .vl-whats-new-page .vl-entry-desc div{font-size:13px;line-height:1.65}
  .vl-whats-new-page .vl-tag{font-size:9px;padding:3px 9px}
  .vl-whats-new-page .vl-thumb{max-width:100%;width:100%}
  .vl-whats-new-page .vl-thumb-img{width:100%;height:auto}

  /* ── FAQ ── */
  .vl-whats-new-page .vl-faq-wrap{padding:2rem 0}
  .vl-whats-new-page .vl-faq-title{font-size:22px;margin-bottom:1.75rem}
  .vl-whats-new-page .vl-faq-q{font-size:14px;padding:1.1rem 0;gap:1rem}
  .vl-whats-new-page .vl-faq-a{font-size:13px}

  /* ── CTA card ── */
  .vl-whats-new-page .vl-cta-wrap{padding:0 1.25rem 2.5rem}
  .vl-whats-new-page .vl-cta-card{padding:2.5rem 1.5rem;border-radius:16px}
  .vl-whats-new-page .vl-cta-headline{font-size:24px;margin-bottom:1.5rem}
  .vl-whats-new-page .vl-cta-btn{font-size:14px;padding:14px 28px;width:100%;justify-content:center}

  /* ── Page wrap ── */
  .vl-whats-new-page .vl-page-wrap{padding:0 1.25rem}

  /* ── Popup ── */
  .vl-whats-new-page .vl-popup-overlay{align-items:flex-end}
  .vl-whats-new-page .vl-popup-box{width:100%;border-radius:16px 16px 0 0;max-width:100%}
  .vl-whats-new-page .vl-popup-header{padding:14px 16px}
  .vl-whats-new-page .vl-popup-title{font-size:12px}
}

/* Small mobile 480px */
@media(max-width:480px){
  /* Hero */
  .vl-whats-new-page .vl-hero{padding:4.5rem 1rem 1.5rem}
  .vl-whats-new-page .vl-hero-title{font-size:24px}
  .vl-whats-new-page .vl-hero-eyebrow{font-size:10px;padding:3px 10px}
  .vl-whats-new-page .vl-hero-badge{padding:6px 10px}

  /* Highlights */
  .vl-whats-new-page .vl-hl-blob{flex:0 0 110px;border-radius:0 55px 55px 0;padding:1rem 0.75rem}
  .vl-whats-new-page .vl-hl-blob-title{font-size:14px;margin-bottom:0.75rem}
  .vl-whats-new-page .vl-hl-card{flex:0 0 190px}
  .vl-whats-new-page .vl-hl-card-visual{height:70px}

  /* Updates */
  .vl-whats-new-page .vl-updates{padding:1.5rem 1rem}
  .vl-whats-new-page .vl-updates-title{font-size:20px}
  .vl-whats-new-page .vl-entry-title{font-size:16px}
  .vl-whats-new-page .vl-month-meta{flex-direction:column;align-items:flex-start;gap:4px}

  /* CTA */
  .vl-whats-new-page .vl-cta-headline{font-size:20px}
  .vl-whats-new-page .vl-cta-btn{padding:13px 24px}

  /* FAQ */
  .vl-whats-new-page .vl-faq-wrap{padding:1.5rem 0}
  .vl-whats-new-page .vl-faq-q{font-size:13px}

  /* Page wrap */
  .vl-whats-new-page .vl-page-wrap{padding:0 1rem}
  .vl-whats-new-page .vl-cta-wrap{padding:0 1rem 2rem}
}