/* ==========================================================================
   Stratboost Features – Page-scoped overrides (ONLY /features)
   ========================================================================== */

   .features-page {
    --card-maxw: 420px;   /* max width per card */
    --cards-maxw: 1080px; /* max width for the grid */
    --content-maxw: 820px;
    text-align: center;   /* center headings & default text */
  }
  
  /* Headings + subtext */
  .features-page .offer-heading { margin-bottom: .75rem; }
  .features-page .section-subtext {
    max-width: 760px;
    margin: .25rem auto 1.25rem;
    color: #4b5563; /* slate-ish */
  }
  
  /* “Problem” list: keep text left for readability but center the block */
  #reasons .bullet-list {
    max-width: var(--content-maxw);
    margin: .75rem auto 0;
    padding-left: 0;
    text-align: left;
  }
  #reasons .bullet-list li {
    list-style: none;
    padding: .25rem 0;
    font-size: 1.05rem;
    line-height: 1.6;
  }
  
  /* All-in-one hero slab */
  #all-in-one .hero-ctas { justify-content: center; }
  #all-in-one .trust { margin-top: .6rem; font-weight: 700; color: var(--color-primary); }
  
  /* =========================
     Split sections: centering rules
     ========================= */
  .features-page .split-ready .offer-heading,
  .features-page .split-ready .feature-list,
  .features-page .split-ready .hero-ctas { text-align: center; }
  
  .features-page .feature-list { justify-content: center; }
  
  .features-page .hero-ctas { justify-content: center; gap: .6rem; }
  .features-page .hero-ctas a { margin: 0; }
  
  /* Keep body copy left on desktop, center on mobile */
  @media (min-width:1100px){
    .features-page .split-ready .section-subtext { text-align: left; }
  }
  @media (max-width:1099px){
    .features-page .split-ready .section-subtext { text-align: center; }
  }
  
  /* Media tiles centering */
  .features-page .col-media .leo-tile { margin-inline: auto; }
  
  /* Desktop text/media widths */
  @media (min-width:1100px){
    .features-page .split-ready .split-grid {
      grid-template-columns: minmax(480px, 560px) 1fr;
    }
  }
  
  /* =========================
     Tool media tiles (small)
     ========================= */
  .tile-sm.leo-tile {
    max-width: 420px;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .tile-sm.leo-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
    transform: scale(1.02);
  }
  .tile-sm.leo-tile figcaption { display: none; }
  
  /* Keep alternation push on wide screens */
  @media (min-width:1100px){
    #botly .col-media .tile-sm,
    #leo   .col-media .tile-sm { margin-left: auto; }
    #ella  .col-media .tile-sm,
    #mira  .col-media .tile-sm { margin-right: auto; }
  }
  @media (max-width:1099px){
    .tile-sm.leo-tile { margin: 0 auto; }
  }
  
  /* =========================
     “How It Works” steps (clean tiles)
     ========================= */
  #how .how-steps{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--gap);
    max-width: 980px;
    margin: 1rem auto 0;
  }
  #how .how-steps .stratmind-feature{
    text-align: center;
    background: #fff;
    border: 1px solid #ECEAF6;
    border-radius: .75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.04);
  }
  
  /* Testimonials spacing (tighter on this page) */
  .features-page .testimonials.section-alt { padding: 3rem 1rem; }
  
  /* =========================
     Cards grid (if used elsewhere here)
     ========================= */
  .features-page .ai-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--gap);
    max-width: var(--cards-maxw);
    margin: var(--gap) auto 0;
    justify-items: center;
  }
  .features-page .ai-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--color-white);
    border-radius: .75rem;
    padding: 1.25rem 1.25rem 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.05);
    transition: transform .25s ease, box-shadow .25s ease;
    width: 100%;
    max-width: var(--card-maxw);
    min-height: 260px;
  }
  .features-page .ai-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0,0,0,.08);
  }
  .features-page .ai-card::before { content: none !important; }
  .features-page .ai-card h3 { font-size: 1.125rem; font-weight: 800; margin-bottom: .35rem; }
  .features-page .ai-card p { margin: .35rem 0 .5rem; line-height: 1.55; }
  .features-page .value-tag {
    display: inline-block;
    margin: .25rem 0 .9rem;
    background: #f3f4f6;
    color: var(--color-primary);
    padding: .35rem .7rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: .8rem;
  }
  .features-page .card-actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
  }
  .features-page .card-actions .btn {
    padding: .6rem 1.2rem;
    font-size: .9rem;
    white-space: nowrap;
  }
  .features-page .total-value { margin: 1rem 0 .25rem; font-size: 1.05rem; }
  
  /* =========================
     Premium title (gradient highlight + rule)
     ========================= */
  .features-page #stratmind .offer-heading,
  .features-page #botly .offer-heading,
  .features-page #ella .offer-heading,
  .features-page #leo .offer-heading,
  .features-page #mira .offer-heading {
    position:relative; margin:0 0 .6rem; font-weight:800; line-height:1.22;
    letter-spacing:.005em; text-wrap:balance;
    font-size:clamp(1.7rem,3.2vw,2.3rem);
    text-align: center;
  }
  .features-page #stratmind .offer-heading .grad,
  .features-page #botly .offer-heading .grad,
  .features-page #ella .offer-heading .grad,
  .features-page #leo .offer-heading .grad,
  .features-page #mira .offer-heading .grad {
    background:linear-gradient(90deg,#7366ff 0%,#22d3ee 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .features-page #stratmind .offer-heading .rule,
  .features-page #botly .offer-heading .rule,
  .features-page #ella .offer-heading .rule,
  .features-page #leo .offer-heading .rule,
  .features-page #mira .offer-heading .rule {
    display:block; width:clamp(120px,22vw,240px); height:2px; margin:.7rem auto 0;
    background:linear-gradient(90deg,rgba(115,102,255,.95),rgba(34,211,238,.95));
    border-radius:2px; box-shadow:0 0 18px rgba(115,102,255,.25);
  }
  
  /* =========================
     Responsive refinements
     ========================= */
  @media (max-width: 900px) {
    .features-page .ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .features-page .ai-grid { grid-template-columns: 1fr; }
    .features-page .card-actions { flex-wrap: wrap; }
    .features-page .card-actions .btn { width: 100%; text-align: center; }
  }
  
/* ===== Features hero (centered, no underlines) ===== */
.hero.hero--features .container{
  display:flex;                 /* keep single-column */
  flex-direction:column;
  align-items:center;
  gap:2rem;
  padding:3rem 1rem 2.5rem;
}

.hero.hero--features .hero-text{ text-align:center; }
.hero.hero--features .hero-ctas{ justify-content:center; gap:.75rem; flex-wrap:wrap; }
.hero.hero--features .kicker{
  text-transform:uppercase; letter-spacing:.04em; font-weight:600;
  font-size:.9rem; opacity:.9; margin-bottom:.25rem;
}

/* keep centered on desktop (index switches to left by default) */
@media (min-width:1024px){
  .hero.hero--features .container{ padding:4.5rem 1rem 3rem; }
  .hero.hero--features .hero-text,
  .hero.hero--features .hero-text h1,
  .hero.hero--features .hero-text p{ text-align:center; }
  .hero.hero--features .hero-ctas{ justify-content:center; }
}

/* remove underline treatment & allow wrapping */
.hero--features .hero-title .ink{ white-space:normal; position:static; }
.hero--features .hero-title .ink::after{ content:none !important; }

/* trust line tint */
.hero--features .trust{ margin-top:.4rem; font-weight:700; color:var(--color-primary); }

/* ===========================
   Premium “Reasons” (glass)
   =========================== */
   .sb-reasons-luxe{
    --ink:#7366ff;
    --ink-2:#22d3ee;
    --muted:#475569;
    --text:#0f172a;
    --rule: rgba(26,32,44,.06);
    position: relative;
    isolation: isolate;
    padding: clamp(56px, 6.5vw, 88px) 0;
    background:
      radial-gradient(900px 480px at 50% -20%, rgba(115,102,255,.10), transparent 70%),
      #fafbff;
  }
  .sb-reasons-luxe::before{
    content:""; position:absolute; inset:0; z-index:-1; opacity:.35;
    background:
      linear-gradient(transparent 31px, var(--rule) 32px),
      linear-gradient(90deg, transparent 31px, var(--rule) 32px);
    background-size:32px 32px;
    mask-image: radial-gradient(70% 70% at 50% 0, #000 40%, transparent 100%);
  }
  
  .sb-reasons-luxe .wrap{ max-width: 1000px; margin-inline: auto; padding: 0 1.25rem; }
  .sb-reasons-luxe .panel{
    max-width: 820px; margin: 0 auto;
    padding: clamp(20px, 3vw, 32px);
    border-radius: 18px;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 40px rgba(15,23,42,.08);
    position: relative;
  }
  .sb-reasons-luxe .panel::before{
    content:""; position:absolute; inset:-1px; border-radius:20px; padding:1px;
    background: linear-gradient(135deg, rgba(115,102,255,.85), rgba(34,211,238,.85));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
  }
  
  .sb-reasons-luxe .kicker{
    text-align:center; margin:0 0 .5rem;
    font-size:.85rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color: var(--muted);
  }
  .sb-reasons-luxe .title{
    margin:0; text-align:center; font-weight:800; letter-spacing:.005em;
    line-height:1.24; color:var(--text);
    font-size: clamp(1.45rem, 3vw, 2.1rem);
  }
  .sb-reasons-luxe .title .grad{
    background: linear-gradient(90deg, var(--ink), var(--ink-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  
  /* Bullet list (left-aligned, premium bullets) */
  .sb-reasons-luxe .issue-list{
    list-style:none; margin: .9rem auto 0; padding:0;
    max-width: 720px; text-align: left;
  }
  .sb-reasons-luxe .issue-list li{
    display:flex; align-items:flex-start; gap:.6rem;
    font-size: clamp(.98rem, 1.6vw, 1.05rem);
    line-height: 1.6; color:#2b2f3c;
    padding: .4rem 0;
    position: relative;
  }
  .sb-reasons-luxe .issue-list li::before{
    content:""; flex:0 0 10px; height:10px; margin-top:.45rem;
    border-radius:50%;
    background: linear-gradient(135deg, var(--ink), var(--ink-2));
    box-shadow: 0 0 0 5px rgba(115,102,255,.10);
  }
  
  /* ambient orbs */
  .sb-reasons-luxe .orb{ position:absolute; border-radius:999px; filter:blur(32px); opacity:.45; z-index:-1; }
  .sb-reasons-luxe .orb.one{ width:220px; height:220px; left:8%; top:-40px; background: radial-gradient(circle at 30% 30%, #a78bfa, transparent 60%); }
  .sb-reasons-luxe .orb.two{ width:240px; height:240px; right:6%; bottom:-60px; background: radial-gradient(circle at 70% 70%, #60a5fa, transparent 60%); }
  
  @media (max-width:520px){
    .sb-reasons-luxe .panel{ padding:18px; border-radius:16px; }
    .sb-reasons-luxe .panel::before{ border-radius:18px; }
  }
  
  /* ===== Bridge title (premium, minimal) ===== */
.sb-bridge{
  --ink:#7366ff; --ink2:#22d3ee; --text:#0f172a; --muted:#475569;
  position:relative; isolation:isolate;
  padding: clamp(48px, 6vw, 80px) 0;
  background:
    radial-gradient(900px 420px at 50% -25%, rgba(115,102,255,.10), transparent 70%),
    var(--color-gray-100);
}
.sb-bridge .kicker{
  margin:0 0 .45rem;
  font-size:.84rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.sb-bridge .title{
  margin:0;
  font-weight:800; letter-spacing:.005em; line-height:1.22;
  font-size: clamp(1.6rem, 3.1vw, 2.2rem);
  color:var(--text);
}
.sb-bridge .title .grad{
  background:linear-gradient(90deg,var(--ink),var(--ink2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sb-bridge .punch{
  margin:.55rem auto 0; max-width:760px;
  color:var(--muted); font-weight:600; line-height:1.5;
  font-size: clamp(.98rem, 1.7vw, 1.12rem);
}

@media (max-width:520px){
  .sb-bridge{ padding: 44px 0; }
}