/* ==========================================================================
   Stratboost — Pricing (premium look, emoji-free)
   Safe to load after styles.css
   ========================================================================== */

   :root {
    --sb-bg-dark: #0b1020;
    --sb-card-bg: #0f142b;
    --sb-text: #e6e8ee;
    --sb-text-dim: #b8c0d8;
    --sb-border: rgba(255,255,255,.08);
    --sb-shadow: 0 8px 28px rgba(0, 0, 0, .18);
    --sb-shadow-hover: 0 14px 36px rgba(0, 0, 0, .24);
    --sb-gradient: linear-gradient(90deg, #7366ff 0%, #22d3ee 100%);
    --sb-focus: #7366ff;
    --sb-outline: rgba(115, 102, 255, .35);
    --sb-positive: #22d3ee;
    --sb-danger: #ef4444;
  }
  
  /* ---------- Page Hero ---------- */
  .pricing-hero .kicker { letter-spacing: .04em; font-weight: 700; opacity: .85; }
  .pricing-hero .offer-heading { text-wrap: balance; }

  /* ---------- Pricing Hero ---------- */
.sb-hero {
    position: relative;
    padding-block: clamp(48px, 8vw, 112px);
    background:
      radial-gradient(1200px 600px at 85% -10%, rgba(115,102,255,.18), transparent 70%),
      radial-gradient(900px 500px at 10% 110%, rgba(34,211,238,.14), transparent 72%),
      #ffffff;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  
  .sb-hero .hero-wrap{
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
  }
  
  @media (max-width: 900px){
    .sb-hero .hero-wrap{ grid-template-columns: 1fr; }
  }
  
  .sb-hero .kicker{
    letter-spacing:.06em;
    text-transform: uppercase;
    font-weight: 700;
    font-size:.85rem;
    color:#64748b;
    margin:0 0 .5rem;
  }
  
  .sb-hero .hero-title{
    margin:0 0 .5rem;
    font-size: clamp(1.9rem, 3.5vw, 3rem);
    line-height:1.1;
    font-weight: 900;
    text-wrap: balance;
  }
  
  .sb-hero .hero-sub{
    color:#475569;
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height:1.6;
    margin: .25rem 0 1.1rem;
    max-width: 62ch;
  }
  
  .sb-hero .hero-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
  
  .sb-hero .hero-trust{
    display:flex; gap:1rem; flex-wrap:wrap;
    margin:.9rem 0 0; padding:0; list-style:none;
    color:#334155; font-size:.95rem;
  }
  .sb-hero .hero-trust li{
    display:inline-flex; align-items:center;
    padding:.35rem .6rem; border:1px solid rgba(0,0,0,.08);
    border-radius:999px; background:#fff;
  }
  
  /* Decorative right-side panel */
  .sb-hero .hero-accent{
    min-height: 220px;
    border-radius: 16px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.1)) padding-box,
      var(--sb-gradient) border-box;
    border: 1px solid transparent;
    box-shadow: 0 24px 60px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.5);
  }
  
  @media (max-width: 900px){
    .sb-hero .hero-accent{ display:none; }
  }
  
  
  /* ---------- Billing Toggle (design-only; can be hidden if unused) ---------- */
  .billing-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--sb-bg-dark);
    padding: .25rem; border-radius: 999px; margin-top: .5rem;
  }
  .billing-toggle .seg {
    padding: .45rem .9rem; border-radius: 999px;
    font-weight: 700; font-size: .9rem; cursor: default;
    color: var(--sb-text); opacity: .85;
  }
  .billing-toggle .seg.is-active {
    background: #fff; color: var(--sb-bg-dark); opacity: 1;
  }
  #billingSwitch { display: none !important; } /* no functional toggle for now */
  
  /* ---------- Grid ---------- */
  .plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
    align-items: stretch;
  }
  
  /* ---------- Plan Card ---------- */
  .plan-card {
    position: relative;
    background: var(--sb-card-bg);
    color: var(--sb-text);
    border-radius: 16px;
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);
    padding: clamp(1rem, 2vw, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: .8rem;
    transition: transform .18s ease, box-shadow .18s ease, outline-color .18s ease;
    outline: 2px solid transparent;
    outline-offset: 0;
  }
  .plan-card.popular { outline-color: var(--sb-outline); }
  
  .plan-card.is-hover { transform: translateY(-2px); box-shadow: var(--sb-shadow-hover); }
  .plan-card.is-focus { outline-color: var(--sb-focus); }
  
  .plan-flag, .plan-badge {
    position: absolute; top: 12px; right: 12px;
    padding: .28rem .6rem; border-radius: 999px;
    font-size: .72rem; font-weight: 800; letter-spacing: .04em;
    background: var(--sb-gradient);
    color: var(--sb-bg-dark);
  }
  
  .plan-name { font-weight: 900; font-size: 1.15rem; margin: .25rem 0 0; }
  .plan-tagline { color: var(--sb-text-dim); font-size: .95rem; margin: 0; }
  
  /* ---------- Price Row ---------- */
  .price-row { display: flex; align-items: baseline; gap: .35rem; }
  .price-amount { font-size: 2rem; font-weight: 900; line-height: 1; }
  .price-suffix { font-size: .95rem; opacity: .85; }
  .billing-help { font-size: .85rem; color: var(--sb-text-dim); }
  
  /* ---------- Features ---------- */
  .feature-list { list-style: none; padding: 0; margin: .25rem 0; display: grid; gap: .5rem; }
  .feature-item { display: flex; gap: .55rem; align-items: flex-start; }
  .feature-item .feat-icon {
    width: 18px; height: 18px; flex: 0 0 18px; margin-top: .1rem; opacity: .95;
    color: var(--sb-positive);
  }
  
  /* ---------- Limits ---------- */
  .limits { color: #c1c7dd; font-size: .92rem; display: grid; gap: .4rem; }
  .limit-item { display: flex; gap: .55rem; align-items: flex-start; }
  .limit-item .feat-icon { color: var(--sb-danger); }
  
  /* ---------- CTA ---------- */
  .cta-wrap { margin-top: auto; }
  .choose-btn { width: 100%; }
  
  /* ---------- Compare Table ---------- */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding-bottom: .25rem; }
  .compare {
    width: 100%; border-collapse: collapse; margin-top: 1rem; min-width: 768px;
    border: 1px solid rgba(0,0,0,.12); border-radius: 12px; overflow: hidden;
  }
  .compare thead th {
    background: var(--sb-bg-dark); color: #fff; font-weight: 800;
    text-align: left; padding: .75rem;
  }
  .compare th, .compare td {
    padding: .75rem; border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: top;
  }
  .compare tbody tr:nth-child(odd) td,
  .compare tbody tr:nth-child(odd) th[scope="row"] { background: #fafafa; }
  
  .col-center { text-align: center; }
  .icon { width: 16px; height: 16px; vertical-align: -2px; }
  
  /* ---------- Mobile niceties ---------- */
  @media (max-width: 720px) {
    /* REMOVE any forced ordering. Respect source order (Free → Starter → Growth → Scale). */
    .plan-card.popular { order: initial; } /* ensure no leftover rule flips it */
    .compare th[scope="row"] { position: sticky; left: 0; background: #fff; z-index: 1; }
    .compare tbody tr:nth-child(odd) th[scope="row"] { background: #fafafa; }
  }
  
  /* ---------- Focus states for accessibility ---------- */
  .plan-card a.btn:focus-visible,
  .plan-card .choose-btn:focus-visible,
  .billing-toggle .seg:focus-visible {
    outline: 2px solid var(--sb-focus);
    outline-offset: 2px;
    border-radius: 10px;
  }
  
  /* ---------- Optional per-tier tints ---------- */
  .plan-accent-indigo { background: #13183a; }
  .plan-accent-green  { background: #0f2a22; }
  .plan-accent-plum   { background: #1d1024; }
  .plan-accent-slate  { background: #121621; }

  /* Pricing note — concise, high-contrast */
.pricing-note{
    margin-top:.75rem;
    padding:14px 16px 14px 52px;
    background:#121829;
    color:var(--sb-text);
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    box-shadow:0 4px 14px rgba(0,0,0,.25);
    font-size:.95rem;
    line-height:1.6;
    position:relative;
  }
  .pricing-note::before{
    content:"";
    position:absolute; left:16px; top:14px;
    width:22px; height:22px;
    background:
      url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a3b5ff'>\
  <path d='M12 2a10 10 0 100 20 10 10 0 000-20zm.9 6.2a.9.9 0 11-1.8 0 .9.9 0 011.8 0zM11 10.5a1 1 0 112 0v6a1 1 0 11-2 0v-6z'/>\
  </svg>") no-repeat center/100% 100%;
    opacity:.95;
  }
  .pricing-note br{ display:block; margin-top:.4rem; content:""; }