/* ============================================================
   VoiceX — Featured Use Cases
   Additive stylesheet, loaded site-wide (needed for the Products
   mega-menu's fourth column) plus the Use Cases hub + detail pages.
   Uses the existing Signal Editorial tokens defined in
   light-theme.css (--primary, --forest, --cream, --cream-soft,
   --ink, --muted, --hairline, --font-display) — no new palette
   introduced, no dark-blue surfaces.
   ============================================================ */

/* ------------------------------------------------------------
   1) MEGA-MENU — fourth "FEATURED USE CASES" column
   Sits inside .col-lg-7 of the Products dropdown, below the
   existing DEPLOYMENT / AUTOMATION / PLATFORM row.
   ------------------------------------------------------------ */
.mega-featured-usecases{
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}

.featured-uc-link{
  display: block;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 6px 0;
  transition: .25s;
}

.featured-uc-link:hover{
  color: var(--primary);
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   2) HUB + DETAIL PAGE SHARED PRIMITIVES
   ------------------------------------------------------------ */

.uc-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--primary);
  margin-bottom:18px;
}

.uc-status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: var(--cream-soft);
  border:1px solid var(--hairline);
  color: var(--muted);
  font-size:.82rem;
  font-weight:600;
  padding:8px 16px;
  border-radius:100px;
  margin-bottom:22px;
}

.uc-status-pill i{ color: var(--primary); }

.uc-disclosure{
  max-width: 760px;
  color: var(--muted);
  font-size: .92rem;
  line-height:1.7;
  background: var(--cream-soft);
  border:1px solid var(--hairline);
  border-left: 3px solid var(--primary);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 8px auto 0;
  text-align: left;
}

/* -- hero -- */
.uc-hero{
  padding: 64px 0 20px;
}

.uc-hero-desc{
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.75;
  max-width: 560px;
  margin: 20px 0 28px;
}

.uc-hero-visual{
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(22,38,29,0.08);
}

/* -- generic section rhythm -- */
.uc-section{
  padding: 56px 0;
}

.uc-section-alt{
  background: var(--cream-soft);
}

.uc-section-head{
  max-width: 680px;
  margin: 0 0 36px;
}

.uc-section-head h2{
  color: var(--ink);
  margin-bottom: 14px;
}

.uc-section-head p{
  color: var(--muted);
  line-height: 1.7;
}

.uc-section-head.uc-center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* -- simple content cards (reused for "steps" style sections) -- */
.uc-card{
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:18px;
  padding:28px;
  height:100%;
}

.uc-card-num{
  width:38px;
  height:38px;
  border-radius:11px;
  background:rgba(193,85,44,0.10);
  color: var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.95rem;
  margin-bottom:16px;
}

.uc-card h3, .uc-card h4{
  color: var(--ink);
  font-size:1.1rem;
  margin-bottom:10px;
  font-family: var(--font-display);
}

.uc-card p{
  color: var(--muted);
  line-height:1.65;
  margin:0;
  font-size:.96rem;
}

/* -- boxed / vertical flow (numbered) -- */
.uc-flow-boxed{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.uc-flow-boxed-step{
  display:flex;
  align-items:flex-start;
  gap:20px;
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:16px;
  padding:22px 26px;
}

.uc-flow-boxed-step .uc-card-num{ margin-bottom:0; flex-shrink:0; }

.uc-flow-boxed-step h5{
  color: var(--ink);
  font-size:1.02rem;
  font-weight:600;
  margin-bottom:6px;
}

.uc-flow-boxed-step p{
  color: var(--muted);
  margin:0;
  font-size:.94rem;
  line-height:1.6;
}

/* -- inline workflow strip: A → B → C -- */
.uc-flow-inline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 6px;
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:16px;
  padding:24px 26px;
}

.uc-flow-inline .uc-node{
  background: var(--cream-soft);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:9px 16px;
  font-weight:600;
  font-size:.9rem;
  color: var(--ink);
  white-space:nowrap;
}

.uc-flow-inline .uc-arrow{
  color: var(--muted);
  font-size:.85rem;
  flex-shrink:0;
}

/* -- two-path comparison (IVR-to-WhatsApp) -- */
.uc-compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.uc-compare-col{
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:16px;
  padding:22px;
}

.uc-compare-col .uc-compare-label{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--muted);
  margin-bottom:14px;
  display:block;
}

.uc-compare-col.uc-compare-highlight{
  border-color: rgba(193,85,44,0.35);
  background: linear-gradient(180deg, rgba(193,85,44,0.05), rgba(193,85,44,0.02));
}

.uc-compare-col .uc-flow-inline{
  border:none;
  background:transparent;
  padding:0;
}

/* -- route-example (location-based routing) -- */
.uc-route-examples{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.uc-route-example{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:16px;
  padding:20px 24px;
}

.uc-route-example .uc-node{
  background: var(--cream-soft);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:9px 16px;
  font-weight:600;
  font-size:.9rem;
  color: var(--ink);
}

.uc-route-example .uc-node.uc-node-target{
  background: var(--forest);
  color:#fff;
  border-color: var(--forest);
}

/* -- example dialogue (AI Voice Concierge) -- */
.uc-example{
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:20px;
  padding:30px;
}

.uc-msg{
  max-width:80%;
  padding:12px 18px;
  border-radius:14px;
  margin-bottom:12px;
  font-size:.95rem;
  line-height:1.5;
}

.uc-msg-customer{
  background: var(--cream-soft);
  border:1px solid var(--hairline);
  color: var(--ink);
  margin-right:auto;
  border-bottom-left-radius:4px;
}

.uc-msg-ai{
  background: var(--forest);
  color:#fff;
  margin-left:auto;
  border-bottom-right-radius:4px;
}

.uc-msg-system{
  background:transparent;
  border:1px dashed var(--hairline);
  color: var(--muted);
  font-style:italic;
  margin-left:auto;
  font-size:.85rem;
}

/* -- plain bullet list (location-based routing "local knowledge") -- */
.uc-bullets{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 24px;
}

.uc-bullets li{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--ink);
  font-weight:500;
  font-size:.96rem;
}

.uc-bullets li i{ color: var(--primary); font-size:.85rem; }

/* -- record flow chips (instant lead capture) -- */
.uc-record-flow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 8px;
}

.uc-record-flow .uc-node{
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:100px;
  padding:10px 20px;
  font-weight:600;
  font-size:.9rem;
  color: var(--ink);
}

.uc-record-flow .uc-arrow{ color: var(--muted); }

/* -- FAQ (Bootstrap accordion, restyled) -- */
.uc-faq .accordion-item{
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:14px !important;
  margin-bottom:14px;
  overflow:hidden;
}

.uc-faq .accordion-button{
  font-weight:600;
  color: var(--ink);
  background:#fff;
  font-size:1rem;
  padding:20px 24px;
}

.uc-faq .accordion-button:not(.collapsed){
  color: var(--primary);
  background: var(--cream-soft);
  box-shadow:none;
}

.uc-faq .accordion-button:focus{
  box-shadow:none;
  border-color: var(--hairline);
}

.uc-faq .accordion-button::after{
  filter: none;
}

.uc-faq .accordion-body{
  color: var(--muted);
  line-height:1.7;
  padding:0 24px 22px;
}

/* -- closing statement line -- */
.uc-closing-line{
  text-align:center;
  font-family: var(--font-display);
  font-size:1.35rem;
  color: var(--ink);
  max-width:700px;
  margin:0 auto;
}

/* ------------------------------------------------------------
   3) EXPLORE OTHER USE CASES (bottom strip, every detail page)
   ------------------------------------------------------------ */
.uc-explore{
  padding: 56px 0 64px;
  background: var(--cream-soft);
}

.uc-explore-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:26px;
}

.uc-explore-head h2{
  color: var(--ink);
  margin:0;
}

.uc-explore-head a{
  color: var(--primary);
  font-weight:600;
  font-size:.92rem;
  text-decoration:none;
}

.uc-explore-head a:hover{ text-decoration:underline; }

.uc-explore-card{
  display:block;
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:16px;
  padding:22px;
  height:100%;
  text-decoration:none;
  transition:.25s;
}

.uc-explore-card:hover{
  border-color: rgba(193,85,44,0.35);
  transform: translateY(-2px);
}

.uc-explore-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  background: rgba(193,85,44,0.10);
  color: var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  font-size:1rem;
}

.uc-explore-card h5{
  color: var(--ink);
  font-size:1rem;
  font-weight:600;
  margin-bottom:6px;
}

.uc-explore-card p{
  color: var(--muted);
  font-size:.88rem;
  line-height:1.55;
  margin:0;
}

/* ------------------------------------------------------------
   4) HUB PAGE (use-cases/index.html)
   ------------------------------------------------------------ */
.uc-hub-hero{
  padding: 70px 0 20px;
  text-align:center;
}

.uc-hub-hero h1{
  color: var(--ink);
  max-width: 760px;
  margin: 0 auto 18px;
}

.uc-hub-hero p{
  color: var(--muted);
  font-size:1.08rem;
  line-height:1.75;
  max-width:620px;
  margin:0 auto;
}

.uc-hub-grid{
  padding: 40px 0 70px;
}

.uc-hub-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:20px;
  padding:30px;
  text-decoration:none;
  transition:.25s;
}

.uc-hub-card:hover{
  border-color: rgba(193,85,44,0.4);
  box-shadow: 0 20px 50px rgba(22,38,29,0.08);
  transform: translateY(-3px);
}

.uc-hub-icon{
  width:52px;
  height:52px;
  border-radius:15px;
  background: rgba(193,85,44,0.10);
  color: var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  margin-bottom:20px;
}

.uc-hub-card .uc-hub-category{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--muted);
  margin-bottom:10px;
}

.uc-hub-card h3{
  color: var(--ink);
  font-size:1.15rem;
  margin-bottom:10px;
  font-family: var(--font-display);
}

.uc-hub-card p{
  color: var(--muted);
  line-height:1.65;
  font-size:.95rem;
  margin:0 0 18px;
  flex-grow:1;
}

.uc-hub-card .uc-hub-link{
  color: var(--primary);
  font-weight:600;
  font-size:.9rem;
}

.uc-hub-card .uc-hub-status{
  display:inline-block;
  font-size:.72rem;
  font-weight:600;
  color: var(--muted);
  background: var(--cream-soft);
  border:1px solid var(--hairline);
  border-radius:100px;
  padding:4px 12px;
  margin-bottom:14px;
  width:fit-content;
}

/* ------------------------------------------------------------
   6) DETAIL PAGE VISUAL HIERARCHY
   Everything here is scoped to body.uc-page (only the hub +
   six detail pages carry that class) so none of it can bleed
   into the other 40 site pages, even though this stylesheet
   loads site-wide for the mega-menu column.
   ------------------------------------------------------------ */

/* -- section rhythm: more air, a hairline between every section -- */
body.uc-page .uc-section{
  padding: 76px 0;
  border-top: 1px solid var(--hairline);
}

body.uc-page .uc-hero{
  border-top: none;
}

/* -- small uppercase kicker above section headings, distinct from the H2 itself -- */
.uc-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--primary);
  background: rgba(193,85,44,0.08);
  border:1px solid rgba(193,85,44,0.18);
  border-radius:100px;
  padding:6px 14px;
  margin-bottom:16px;
}

/* -- hero: soft decorative glow, contained -- */
body.uc-page .uc-hero{
  position: relative;
  overflow: hidden;
}

body.uc-page .uc-hero::before{
  content:"";
  position:absolute;
  top:-140px; right:-120px;
  width:380px; height:380px;
  background: radial-gradient(circle, rgba(193,85,44,0.14), transparent 70%);
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}

body.uc-page .uc-hero::after{
  content:"";
  position:absolute;
  bottom:-160px; left:-110px;
  width:340px; height:340px;
  background: radial-gradient(circle, rgba(22,38,29,0.10), transparent 70%);
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}

body.uc-page .uc-hero > .container{
  position:relative;
  z-index:1;
}

body.uc-page .uc-hero-visual{
  position:relative;
}

body.uc-page .uc-hero-visual::before{
  content:"";
  position:absolute;
  inset:10px -10px -10px 10px;
  background: var(--cream-soft);
  border:1px solid var(--hairline);
  border-radius:24px;
  z-index:-1;
}

/* -- card depth: replace the flat bordered-only look with a soft shadow + lift -- */
body.uc-page .uc-card{
  box-shadow: 0 10px 28px rgba(22,38,29,0.05);
  transition: transform .25s, box-shadow .25s;
}

body.uc-page .uc-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(22,38,29,0.09);
}

body.uc-page .uc-flow-boxed-step,
body.uc-page .uc-flow-inline,
body.uc-page .uc-compare-col,
body.uc-page .uc-route-example,
body.uc-page .uc-example{
  box-shadow: 0 10px 28px rgba(22,38,29,0.05);
}

/* -- connecting "thread" through numbered vertical flows -- */
body.uc-page .uc-flow-boxed{
  position: relative;
}

body.uc-page .uc-flow-boxed::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:45px;
  width:2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(193,85,44,0.25),
    rgba(193,85,44,0.25) 6px,
    transparent 6px,
    transparent 13px
  );
  z-index:0;
}

body.uc-page .uc-flow-boxed-step{
  position: relative;
  z-index:1;
}

body.uc-page .uc-card-num{
  box-shadow: 0 0 0 5px var(--cream-soft);
}

/* -- custom industries cards (kept separate from the global .feature-card
      so nothing here can affect the other 40 pages that reuse it) -- */
.uc-industry-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:22px;
}

.uc-industry-card{
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:18px;
  padding:26px;
  height:100%;
  box-shadow: 0 10px 28px rgba(22,38,29,0.05);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.uc-industry-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(22,38,29,0.09);
  border-color: rgba(193,85,44,0.3);
}

.uc-industry-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(79,70,229,.12));
  color: var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.05rem;
  margin-bottom:18px;
}

.uc-industry-card h4{
  color: var(--ink);
  font-size:1.05rem;
  margin-bottom:8px;
  font-family: var(--font-display);
}

.uc-industry-card p{
  color: var(--muted);
  line-height:1.6;
  font-size:.93rem;
  margin:0;
}

/* -- CTA: wrap the existing global .cta-box with a contained glow, without
      touching .cta-box itself (it's reused sitewide) -- */
.uc-cta-wrap{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}

.uc-cta-wrap::before{
  content:"";
  position:absolute;
  top:-120px; left:50%;
  transform: translateX(-50%);
  width:480px; height:240px;
  background: radial-gradient(ellipse, rgba(193,85,44,0.12), transparent 70%);
  pointer-events:none;
  z-index:0;
}

.uc-cta-wrap > *{
  position: relative;
  z-index:1;
}

/* -- FAQ: numbered accent + slightly richer resting state -- */
body.uc-page .uc-faq .accordion-item{
  box-shadow: 0 8px 22px rgba(22,38,29,0.04);
}

/* -- explore-others / hub cards: consistent lift -- */
body.uc-page .uc-explore-card,
body.uc-page .uc-hub-card{
  box-shadow: 0 8px 22px rgba(22,38,29,0.04);
}

body.uc-page .uc-explore-card:hover,
body.uc-page .uc-hub-card:hover{
  box-shadow: 0 16px 36px rgba(22,38,29,0.09);
}

/* ------------------------------------------------------------
   5) RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 767px){
  .uc-compare{ grid-template-columns: 1fr; }
  .uc-bullets{ grid-template-columns: 1fr; }
  .uc-hero{ padding: 44px 0 12px; }
  .uc-hub-hero{ padding: 48px 0 12px; }
  body.uc-page .uc-section{ padding: 52px 0; }
  body.uc-page .uc-hero::before,
  body.uc-page .uc-hero::after{ width:220px; height:220px; }
  .uc-industry-grid{ grid-template-columns: 1fr 1fr; }
}