/* =========================================================
   ReelHunter / pages/pricing.css
   Page layer: pricing plans, billing switch, usage matrix,
   billing FAQ, checkout modal.
========================================================= */

  :root{
    --page-bg:#edf2f8;
    --page-bg-2:#f7f9fc;

    --card:#ffffff;
    --border:#d9e1ea;
    --border-strong:#c9d3df;

    --text:#0f172a;
    --muted:#64748b;

    --primary:#615fff;
    --primary-2:#8a63ff;
    --primary-3:#4f46e5;

    --shadow-sm:0 8px 22px rgba(15,23,42,.05);
    --shadow-md:0 16px 40px rgba(15,23,42,.08);
    --shadow-lg:0 24px 60px rgba(15,23,42,.12);

    --sidebar-glass:rgba(255,255,255,.52);
    --sidebar-glass-2:rgba(255,255,255,.34);
    --sidebar-stroke:rgba(255,255,255,.52);

    --editor-bg:#fffdf8;
    --editor-bg-2:#fffaf1;
    --editor-stroke:#e8ddd0;

    --success:#0f9f6e;
    --warning:#d97706;
    --danger:#dc2626;

    --tr:.18s ease;
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0;
    padding:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    color:var(--text);
    background:linear-gradient(180deg, var(--editor-bg) 0%, var(--editor-bg-2) 100%);
  }

  button,a,input{ font:inherit; }
  [hidden]{ display:none !important; }

  .workspace-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:248px 1fr;
    align-items:start;
  }

  .app-sidebar {
    width:248px;
    min-height:100vh;
    position:sticky;
    top:0;
    padding:16px 12px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border-right:1px solid rgba(201,211,223,.7);
    background:linear-gradient(180deg, var(--sidebar-glass) 0%, var(--sidebar-glass-2) 100%);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:inset -1px 0 0 rgba(255,255,255,.55), 12px 0 40px rgba(15,23,42,.03);
  }

  .app-sidebar__top { display:flex; flex-direction:column; gap:18px; }

  .app-sidebar__brand {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:74px;
    border-radius:22px;
    text-decoration:none;
    padding:10px;
    background:rgba(255,255,255,.6);
    border:1px solid var(--sidebar-stroke);
    box-shadow:var(--shadow-sm);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  .app-sidebar__logo {
    max-width:170px;
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
  }

  .app-sidebar__nav-wrap { display:flex; flex-direction:column; gap:18px; }
  .app-sidebar__section { display:flex; flex-direction:column; gap:8px; }

  .app-sidebar__label {
    padding:0 10px;
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#8a99a6;
  }

  .app-sidebar__nav { display:flex; flex-direction:column; gap:5px; }

  .app-sidebar__item {
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:42px;
    padding:0 12px;
    border-radius:14px;
    text-decoration:none;
    color:#516774;
    font-size:14px;
    font-weight:700;
    transition:background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    border:1px solid transparent;
  }

  .app-sidebar__item:hover {
    background:rgba(255,255,255,.62);
    color:#1f2c35;
    box-shadow:0 10px 24px rgba(15,23,42,.05);
    border-color:rgba(255,255,255,.46);
    transform:translateY(-1px);
  }

  .app-sidebar__item.is-active {
    background:linear-gradient(135deg, rgba(97,95,255,.16), rgba(138,99,255,.10));
    color:#2e3eea;
    box-shadow:0 12px 26px rgba(97,95,255,.10), inset 0 0 0 1px rgba(97,95,255,.08);
    border-color:rgba(97,95,255,.14);
  }

  .app-sidebar__item.is-active::before {
    content:"";
    position:absolute;
    left:0;
    top:8px;
    bottom:8px;
    width:4px;
    border-radius:999px;
    background:linear-gradient(180deg, #615fff 0%, #8a63ff 100%);
  }

  .app-sidebar__icon {
    width:18px;
    height:18px;
    flex:0 0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:currentColor;
  }

  .app-sidebar__icon svg { width:18px; height:18px; display:block; }

  .app-sidebar__bottom {
    display:flex;
    flex-direction:column;
    gap:12px;
    padding-top:16px;
  }

  .sidebar-card,
  .sidebar-profile {
    border-radius:20px;
    border:1px solid rgba(255,255,255,.58);
    background:rgba(255,255,255,.62);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:var(--shadow-sm);
  }

  .sidebar-card { padding:14px; }

  .sidebar-card__row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
  }

  .sidebar-card__left { display:flex; align-items:center; gap:8px; min-width:0; }

  .sidebar-card__left-icon {
    width:20px;
    height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#615fff;
  }

  .sidebar-card__left-icon svg { width:18px; height:18px; display:block; }
  .sidebar-card__title { font-size:13px; font-weight:700; color:#536876; white-space:nowrap; }
  .sidebar-card__value { font-size:18px; line-height:1; font-weight:900; color:#0f172a; }

  .sidebar-progress {
    height:8px;
    border-radius:999px;
    background:#e7ecf2;
    overflow:hidden;
  }

  .sidebar-progress__fill {
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg, #615fff 0%, #2f55ff 100%);
  }

  .sidebar-card__meta { margin-top:8px; font-size:12px; color:#8b99a5; }

  .sidebar-card__link {
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:12px;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    color:#2a3dff;
  }

  .sidebar-profile {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
  }

  .sidebar-profile__left { display:flex; align-items:center; gap:10px; }

  .sidebar-profile__avatar {
    width:36px;
    height:36px;
    flex:0 0 36px;
    border-radius:999px;
    background:linear-gradient(135deg, #d9deff 0%, #eef1ff 100%);
    color:#2639d8;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:14px;
  }

  .sidebar-profile__name {
    font-size:14px;
    line-height:1.2;
    font-weight:800;
    color:#1f2b33;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .sidebar-profile__sub { margin-top:2px; font-size:12px; line-height:1.2; color:#8b99a5; }

  .sidebar-profile__action {
    width:36px;
    height:36px;
    flex:0 0 36px;
    border:0;
    border-radius:12px;
    background:#f4f7fa;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#607481;
    cursor:pointer;
    transition:transform .15s ease, background .15s ease;
  }

  .sidebar-profile__action:hover{ transform:translateY(-1px); background:#eef3f8; }
  .sidebar-profile__action svg { min-height:18px; min-width:18px; }

  .main-workspace{
    min-width:0;
    padding:20px;
    background:linear-gradient(180deg, var(--editor-bg) 0%, var(--editor-bg-2) 100%);
  }

  .page-stack{
    display:grid;
    gap:18px;
    max-width:1280px;
  }

  .hero-card,
  .section-card{
    border:1px solid var(--editor-stroke);
    border-radius:28px;
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,251,244,.96));
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  .hero-card{
    position:relative;
    background:
      radial-gradient(circle at top right, rgba(97,95,255,.13), transparent 30%),
      radial-gradient(circle at 12% 10%, rgba(217,119,6,.08), transparent 24%),
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,251,244,.96));
  }

  .hero-card::after{
    content:"";
    position:absolute;
    right:-80px;
    top:-80px;
    width:260px;
    height:260px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(97,95,255,.14), rgba(138,99,255,.06));
    filter:blur(4px);
    pointer-events:none;
  }

  .hero-card__inner,
  .section-card__body{
    position:relative;
    z-index:1;
    padding:28px 30px 30px;
  }

  .section-card__header{
    padding:24px 30px 16px;
    border-bottom:1px solid #ece2d7;
    background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(253,247,239,.78));
  }

  .eyebrow{
    margin-bottom:8px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }

  .hero-title{
    margin:0;
    font-size:42px;
    line-height:1.02;
    letter-spacing:-.045em;
    font-weight:900;
    max-width:850px;
  }

  .hero-subtitle,
  .section-subtitle{
    margin:12px 0 0;
    color:var(--muted);
    font-size:15px;
    line-height:1.65;
    max-width:820px;
  }

  .pricing-hero-grid{
    margin-top:24px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    align-items:end;
  }

  .billing-switch-card{
    border:1px solid #eadfd3;
    border-radius:22px;
    padding:14px;
    background:rgba(255,255,255,.82);
    box-shadow:0 8px 22px rgba(15,23,42,.04);
  }

  .billing-switch-label{
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#8a7d70;
    margin-bottom:10px;
  }

  .billing-switch{
    display:flex;
    gap:6px;
    padding:6px;
    border-radius:999px;
    background:#f1f5f9;
    border:1px solid #e2e8f0;
  }

  .billing-option{
    position:relative;
    border:0;
    background:transparent;
    color:#64748b;
    min-height:38px;
    padding:0 15px;
    border-radius:999px;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    transition:background var(--tr), color var(--tr), transform var(--tr), box-shadow var(--tr);
  }

  .billing-option:hover{
    color:#0f172a;
    transform:translateY(-1px);
  }

  .billing-option.is-active{
    background:linear-gradient(135deg, var(--primary), var(--primary-2));
    color:#fff;
    box-shadow:0 12px 26px rgba(97,95,255,.18);
  }

  .billing-save{
    display:inline-flex;
    margin-left:6px;
    padding:2px 7px;
    border-radius:999px;
    background:rgba(15,159,110,.12);
    color:#0b7a53;
    font-size:11px;
    font-weight:900;
  }

  .hero-pills{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
  }

  .hero-pill{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    border-radius:999px;
    background:rgba(255,255,255,.78);
    border:1px solid #eadfd3;
    color:#5f7085;
    font-size:13px;
    font-weight:800;
    box-shadow:0 8px 18px rgba(15,23,42,.04);
  }

  .hero-pill__dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    box-shadow:0 0 0 4px rgba(97,95,255,.09);
  }

  .pricing-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
  }

  .plan-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:100%;
    padding:20px;
    border:1px solid #eadfd3;
    border-radius:26px;
    background:
      radial-gradient(circle at top right, rgba(97,95,255,.06), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,245,.96));
    box-shadow:0 10px 28px rgba(15,23,42,.05);
    overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    animation:pricingReveal .55s cubic-bezier(.16,1,.3,1) both;
  }

  .plan-card:nth-child(2){ animation-delay:.05s; }
  .plan-card:nth-child(3){ animation-delay:.10s; }
  .plan-card:nth-child(4){ animation-delay:.15s; }

  .plan-card:hover{
    transform:translateY(-4px);
    border-color:rgba(97,95,255,.22);
    box-shadow:0 22px 48px rgba(15,23,42,.10);
  }

  .plan-card--featured{
    border-color:rgba(97,95,255,.32);
    background:
      radial-gradient(circle at top right, rgba(97,95,255,.13), transparent 32%),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,250,245,.98));
    box-shadow:0 24px 58px rgba(97,95,255,.14);
  }

  .plan-card--featured::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(97,95,255,.08);
  }

  .plan-badge{
    position:absolute;
    top:16px;
    right:16px;
    min-height:28px;
    display:inline-flex;
    align-items:center;
    padding:0 10px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--primary), var(--primary-2));
    color:#fff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    box-shadow:0 12px 28px rgba(97,95,255,.18);
  }

  .plan-name{
    font-size:18px;
    font-weight:900;
    letter-spacing:-.03em;
    color:#122033;
    padding-right:70px;
  }

  .plan-for{
    margin-top:7px;
    min-height:44px;
    font-size:13px;
    line-height:1.55;
    color:#748395;
  }

  .plan-price-wrap{
    margin-top:18px;
    display:flex;
    align-items:flex-end;
    gap:6px;
  }

  .plan-price{
    font-size:42px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.055em;
    color:#0f172a;
  }

  .plan-period{
    padding-bottom:7px;
    font-size:13px;
    font-weight:800;
    color:#64748b;
  }

  .plan-note{
    margin-top:8px;
    min-height:36px;
    font-size:12px;
    line-height:1.45;
    color:#7d8c9d;
  }

  .plan-action{
    width:100%;
    min-height:46px;
    margin-top:18px;
    border:0;
    border-radius:16px;
    cursor:pointer;
    font-size:14px;
    font-weight:900;
    color:#fff;
    background:linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow:0 16px 34px rgba(97,95,255,.20);
    transition:transform var(--tr), box-shadow var(--tr), opacity var(--tr);
    position:relative;
    overflow:hidden;
  }

  .plan-action::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,.22) 50%, transparent 75%);
    transform:translateX(-130%);
    transition:transform .8s ease;
  }

  .plan-action:hover{
    transform:translateY(-1px);
    box-shadow:0 22px 42px rgba(97,95,255,.26);
  }

  .plan-action:hover::before{
    transform:translateX(130%);
  }

  .plan-action--ghost{
    background:#fff;
    color:#1d2a39;
    border:1px solid #ddd5cb;
    box-shadow:0 10px 22px rgba(15,23,42,.04);
  }

  .plan-action:disabled{
    opacity:.7;
    cursor:not-allowed;
    transform:none;
  }

  .plan-divider{
    height:1px;
    margin:18px 0;
    background:#ece2d7;
  }

  .features-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0;
    padding:0;
    list-style:none;
  }

  .feature-item{
    display:flex;
    align-items:flex-start;
    gap:9px;
    font-size:13px;
    line-height:1.45;
    color:#475569;
    font-weight:700;
  }

  .feature-check{
    width:19px;
    height:19px;
    flex:0 0 19px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,159,110,.10);
    color:#0f9f6e;
    margin-top:1px;
  }

  .feature-check svg{
    width:13px;
    height:13px;
    display:block;
  }

  .compare-grid{
    display:grid;
    grid-template-columns:1.1fr repeat(3,1fr);
    border:1px solid #eadfd3;
    border-radius:24px;
    overflow:hidden;
    background:rgba(255,255,255,.78);
    box-shadow:0 10px 26px rgba(15,23,42,.04);
  }

  .compare-cell{
    padding:15px 16px;
    border-right:1px solid #eadfd3;
    border-bottom:1px solid #eadfd3;
    font-size:13px;
    color:#5f7085;
    font-weight:750;
  }

  .compare-cell:nth-child(4n){
    border-right:0;
  }

  .compare-cell--head{
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,245,.92));
    color:#122033;
    font-weight:950;
  }

  .compare-cell--feature{
    color:#122033;
    font-weight:900;
  }

  .faq-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }

  .faq-card{
    padding:18px;
    border:1px solid #eadfd3;
    border-radius:22px;
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,250,245,.94));
    box-shadow:0 10px 24px rgba(15,23,42,.04);
  }

  .faq-title{
    font-size:15px;
    font-weight:950;
    letter-spacing:-.025em;
    color:#122033;
  }

  .faq-text{
    margin-top:9px;
    font-size:13px;
    line-height:1.65;
    color:#64748b;
  }

  .checkout-modal{
    position:fixed;
    inset:0;
    z-index:9999;
  }

  .checkout-modal[hidden]{
    display:none !important;
  }

  .checkout-modal__backdrop{
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 20% 10%, rgba(97,95,255,.20), transparent 28%),
      radial-gradient(circle at 82% 0%, rgba(138,99,255,.16), transparent 24%),
      rgba(15,23,42,.34);
    backdrop-filter:blur(18px) saturate(130%);
    -webkit-backdrop-filter:blur(18px) saturate(130%);
    animation:fadeIn .25s ease;
  }

  .checkout-modal__dialog{
    position:relative;
    width:min(920px, 94vw);
    margin:6vh auto;
    border-radius:30px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,251,244,.98));
    border:1px solid rgba(255,255,255,.66);
    box-shadow:0 30px 90px rgba(15,23,42,.20);
    animation:modalIn .34s cubic-bezier(.2,.9,.2,1);
  }

  .checkout-modal__close{
    position:absolute;
    top:16px;
    right:16px;
    z-index:2;
    width:42px;
    height:42px;
    border:1px solid #e2d7c8;
    border-radius:14px;
    background:rgba(255,255,255,.82);
    color:#0f172a;
    font-size:24px;
    cursor:pointer;
    transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
  }

  .checkout-modal__close:hover{
    transform:translateY(-1px);
    background:#fff;
    box-shadow:0 14px 26px rgba(15,23,42,.08);
  }

  .checkout-layout{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    min-height:560px;
  }

  .checkout-left{
    padding:30px;
    color:#f8fafc;
    background:
      radial-gradient(circle at top left, rgba(138,99,255,.28), transparent 30%),
      linear-gradient(180deg, #111827 0%, #0f172a 100%);
  }

  .checkout-right{
    padding:30px;
    padding-right:78px;
  }

  .checkout-badge{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 12px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.12);
    color:#dbe4ff;
    font-size:12px;
    font-weight:900;
    margin-bottom:18px;
  }

  .checkout-title{
    margin:0;
    font-size:34px;
    line-height:1.02;
    letter-spacing:-.05em;
    font-weight:950;
    color:#ffffff;
  }

  .checkout-sub{
    margin:12px 0 22px;
    color:rgba(226,232,240,.72);
    font-size:14px;
    line-height:1.65;
  }

  .checkout-plan-card{
    border:1px solid rgba(255,255,255,.10);
    border-radius:22px;
    padding:18px;
    background:rgba(255,255,255,.06);
    box-shadow:0 20px 42px rgba(0,0,0,.18);
  }

  .checkout-plan-name{
    font-size:20px;
    font-weight:950;
    letter-spacing:-.03em;
  }

  .checkout-plan-price{
    margin-top:10px;
    display:flex;
    align-items:flex-end;
    gap:8px;
  }

  .checkout-plan-price strong{
    font-size:42px;
    line-height:.92;
    letter-spacing:-.06em;
  }

  .checkout-plan-price span{
    padding-bottom:5px;
    color:rgba(226,232,240,.65);
    font-size:13px;
    font-weight:800;
  }

  .checkout-mini-list{
    display:grid;
    gap:10px;
    margin:18px 0 0;
    padding:0;
    list-style:none;
  }

  .checkout-mini-list li{
    display:grid;
    grid-template-columns:20px 1fr;
    gap:9px;
    color:rgba(248,250,252,.82);
    font-size:13px;
    line-height:1.45;
    font-weight:700;
  }

  .checkout-mini-list li::before{
    content:"✓";
    width:20px;
    height:20px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,159,110,.18);
    color:#5ee3b2;
    font-size:12px;
    font-weight:950;
  }

  .checkout-section-title{
    margin:0 0 12px;
    color:#122033;
    font-size:22px;
    line-height:1.1;
    letter-spacing:-.04em;
    font-weight:950;
  }

  .checkout-field-label{
    display:block;
    margin:16px 0 8px;
    color:#526478;
    font-size:12px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
  }

  .promo-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
  }

  .checkout-input{
    min-height:46px;
    width:100%;
    border-radius:15px;
    border:1px solid #e2d7c8;
    outline:none;
    padding:0 14px;
    background:linear-gradient(180deg, #fffefc, #fffdfa);
    color:#1e293b;
    font-size:14px;
    font-weight:700;
    transition:border-color .16s ease, box-shadow .16s ease;
  }

  .checkout-input:focus{
    border-color:rgba(97,95,255,.38);
    box-shadow:0 0 0 5px rgba(97,95,255,.08);
  }

  .checkout-ghost-btn,
  .checkout-primary-btn{
    appearance:none;
    min-height:46px;
    border-radius:15px;
    padding:0 16px;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
  }

  .checkout-ghost-btn{
    border:1px solid #d8cdbf;
    background:#fff;
    color:#122033;
  }

  .checkout-primary-btn{
    width:100%;
    border:0;
    color:#fff;
    background:linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow:0 16px 30px rgba(97,95,255,.20);
  }

  .checkout-ghost-btn:hover,
  .checkout-primary-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 28px rgba(15,23,42,.08);
  }

  .checkout-primary-btn:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
  }

  .checkout-summary{
    display:grid;
    gap:10px;
    margin:18px 0;
    padding:16px;
    border:1px solid #eadfd3;
    border-radius:20px;
    background:rgba(255,255,255,.70);
  }

  .checkout-summary__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    color:#5b6e82;
    font-size:13px;
    font-weight:800;
  }

  .checkout-summary__row strong{
    color:#122033;
    font-size:20px;
    letter-spacing:-.03em;
  }

  .checkout-summary__row.is-total{
    padding-top:10px;
    border-top:1px solid #eadfd3;
    color:#122033;
  }

  .discount-text{
    color:#0b7a53;
  }

  .checkout-agreement{
    display:grid;
    grid-template-columns:20px 1fr;
    gap:10px;
    align-items:start;
    margin:16px 0;
    color:#65778c;
    font-size:13px;
    line-height:1.55;
    font-weight:700;
  }

  .checkout-agreement input{
    width:18px;
    height:18px;
    margin-top:1px;
    accent-color:#615fff;
  }

  .checkout-note{
    min-height:20px;
    margin-top:10px;
    color:#64748b;
    font-size:13px;
    line-height:1.45;
    font-weight:700;
  }

  .checkout-note.is-error{ color:var(--danger); }
  .checkout-note.is-success{ color:var(--success); }

  .toast{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:10000;
    background:#111827;
    color:#fff;
    padding:12px 14px;
    border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.22);
    font-weight:800;
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }

  .toast.is-visible{ opacity:1; transform:translateY(0); }

  @keyframes pricingReveal{
    from{
      opacity:0;
      transform:translateY(16px) scale(.985);
      filter:blur(6px);
    }
    to{
      opacity:1;
      transform:translateY(0) scale(1);
      filter:blur(0);
    }
  }

  @keyframes fadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
  }

  @keyframes modalIn{
    from{
      opacity:0;
      transform:translateY(18px) scale(.985);
    }
    to{
      opacity:1;
      transform:translateY(0) scale(1);
    }
  }

  @media (max-width:1180px){
    .workspace-shell{ grid-template-columns:1fr; }
    .app-sidebar{
      width:100%;
      min-height:auto;
      position:static;
      border-right:0;
      border-bottom:1px solid var(--border);
    }

    .pricing-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .compare-grid{ grid-template-columns:1fr; }
    .compare-cell,
    .compare-cell:nth-child(4n){
      border-right:0;
    }
  }

  @media (max-width: 900px){
    .checkout-layout{ grid-template-columns:1fr; }
    .checkout-right{ padding-right:30px; }
    .checkout-modal__dialog{
      margin:2vh auto;
      max-height:96vh;
      overflow:auto;
    }
  }

  @media (max-width:860px){
    .pricing-hero-grid{
      grid-template-columns:1fr;
      align-items:start;
    }

    .billing-switch-card{
      width:100%;
    }

    .billing-switch{
      width:100%;
    }

    .billing-option{
      flex:1;
    }

    .faq-grid{ grid-template-columns:1fr; }
  }

  @media (max-width:760px){
    .main-workspace{ padding:14px; }
    .hero-card__inner,
    .section-card__header,
    .section-card__body{ padding-left:20px; padding-right:20px; }
    .hero-title{ font-size:30px; }
    .pricing-grid{ grid-template-columns:1fr; }
     .promo-row{ grid-template-columns:1fr; }

    .checkout-left,
    .checkout-right{ padding:22px; }

    .checkout-modal__dialog{
      width:100vw;
      min-height:100vh;
      margin:0;
      border-radius:0;
    }

    .checkout-modal__close{
      top:12px;
      right:12px;
    }
  }

  @media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
      animation:none !important;
      transition:none !important;
      scroll-behavior:auto !important;
    }
  }

  .billing-switch-card--above-plans{
  width:100%;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
  background:
    radial-gradient(circle at top right, rgba(97,95,255,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,250,245,.94));
}

.billing-switch-subtitle{
  margin-top:4px;
  font-size:13px;
  line-height:1.45;
  color:#748395;
  font-weight:700;
}

@media (max-width:860px){
  .billing-switch-card--above-plans{
    flex-direction:column;
    align-items:stretch;
  }
}

/* =========================================================
   PRICING PAGE RESPONSIVE PATCH
   Insert at the VERY END of <style>
========================================================= */

html{
  -webkit-text-size-adjust:100%;
}

body{
  overflow-x:hidden;
}

img,
video{
  max-width:100%;
}

.workspace-shell,
.app-sidebar,
.main-workspace,
.page-stack,
.hero-card,
.section-card,
.pricing-grid,
.plan-card,
.compare-grid,
.checkout-modal__dialog,
.checkout-layout,
.checkout-left,
.checkout-right{
  min-width:0;
}

.mobile-appbar,
.mobile-sidebar-backdrop,
.app-sidebar__mobile-close{
  display:none;
}

/* Desktop / large monitors */
.main-workspace{
  padding:clamp(16px, 2vw, 30px);
}

.page-stack{
  width:100%;
  max-width:1320px;
  margin-inline:auto;
}

.hero-title{
  font-size:clamp(30px, 3.2vw, 48px);
}

.hero-card__inner,
.section-card__body{
  padding:clamp(20px, 2.3vw, 34px);
}

.section-card__header{
  padding:clamp(20px, 2vw, 30px) clamp(20px, 2.3vw, 34px) 16px;
}

@media (min-width:1600px){
  .workspace-shell{
    grid-template-columns:280px minmax(0, 1fr) !important;
  }

  .app-sidebar{
    width:280px !important;
  }

  .page-stack{
    max-width:1500px;
  }

  .pricing-grid{
    gap:18px;
  }

  .plan-card{
    padding:24px;
  }
}

/* Small laptops: keep sidebar on the left */
@media (min-width:1025px) and (max-width:1180px){
  .workspace-shell{
    grid-template-columns:230px minmax(0, 1fr) !important;
  }

  .app-sidebar{
    width:230px !important;
    min-height:100vh !important;
    position:sticky !important;
    top:0 !important;
    border-right:1px solid rgba(201,211,223,.7) !important;
    border-bottom:0 !important;
  }

  .app-sidebar__brand{
    min-height:62px !important;
  }

  .app-sidebar__logo{
    max-width:138px !important;
  }

  .app-sidebar__item{
    min-height:40px !important;
    padding-inline:10px !important;
    font-size:13px !important;
  }

  .sidebar-card{
    padding:12px !important;
  }

  .sidebar-card__title{
    font-size:12px !important;
  }

  .main-workspace{
    padding:16px !important;
  }

  .page-stack{
    max-width:none !important;
  }

  .pricing-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .faq-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }

  .compare-grid{
    grid-template-columns:1.1fr repeat(3, 1fr) !important;
  }

  .compare-cell:nth-child(4n){
    border-right:0 !important;
  }
}

/* =========================================================
   MOBILE SIDEBAR DRAWER
========================================================= */

@media (max-width:1024px){
  body.mobile-nav-open{
    overflow:hidden;
  }

  .workspace-shell{
    display:block !important;
    min-height:100vh;
  }

  .mobile-appbar{
    position:sticky;
    top:0;
    z-index:3000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:64px;
    padding:10px 14px;
    border-bottom:1px solid rgba(201,211,223,.72);
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 12px 32px rgba(15,23,42,.06);
  }

  .mobile-appbar__brand{
    display:flex;
    align-items:center;
    min-width:0;
    text-decoration:none;
  }

  .mobile-appbar__logo{
    display:block;
    width:auto;
    max-width:132px;
    max-height:34px;
    object-fit:contain;
  }

  .mobile-appbar__right{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
  }

  .mobile-token-pill{
    min-height:40px;
    padding:6px 12px;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(135deg, rgba(97,95,255,.10), rgba(138,99,255,.08));
    border:1px solid rgba(97,95,255,.14);
    box-shadow:0 8px 20px rgba(97,95,255,.08);
  }

  .mobile-token-pill__label{
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#64748b;
  }

  .mobile-token-pill__value{
    min-width:18px;
    font-size:15px;
    line-height:1;
    font-weight:900;
    color:#302fd8;
    text-align:right;
  }

  .mobile-menu-btn{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border:1px solid rgba(201,211,223,.9);
    border-radius:14px;
    background:#fff;
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(15,23,42,.06);
  }

  .mobile-menu-btn span{
    width:18px;
    height:2px;
    border-radius:999px;
    background:#0f172a;
    display:block;
    transition:transform .18s ease, opacity .18s ease;
  }

  body.mobile-nav-open .mobile-menu-btn span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
  }

  body.mobile-nav-open .mobile-menu-btn span:nth-child(2){
    opacity:0;
  }

  body.mobile-nav-open .mobile-menu-btn span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
  }

  .mobile-sidebar-backdrop{
    position:fixed;
    inset:0;
    z-index:3900;
    display:block;
    background:rgba(15,23,42,.34);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }

  .mobile-sidebar-backdrop[hidden]{
    display:none !important;
  }

  body.mobile-nav-open .mobile-sidebar-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  .app-sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    z-index:4000 !important;

    width:min(340px, calc(100vw - 28px)) !important;
    height:100dvh !important;
    min-height:100dvh !important;

    padding:14px !important;
    padding-top:54px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;

    border-right:1px solid rgba(201,211,223,.88) !important;
    border-bottom:0 !important;
    border-radius:0 26px 26px 0;

    background:
      radial-gradient(circle at top right, rgba(97,95,255,.12), transparent 28%),
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,251,244,.96)) !important;

    box-shadow:26px 0 70px rgba(15,23,42,.18) !important;
    backdrop-filter:blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(140%) !important;

    overflow-y:auto !important;
    transform:translateX(-108%);
    transition:transform .24s cubic-bezier(.16, 1, .3, 1);
  }

  body.mobile-nav-open .app-sidebar{
    transform:translateX(0);
  }

  .app-sidebar__mobile-close{
    position:absolute;
    top:12px;
    right:12px;
    width:36px;
    height:36px;
    border:1px solid rgba(201,211,223,.9);
    border-radius:13px;
    background:#fff;
    color:#0f172a;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(15,23,42,.06);
  }

  .app-sidebar__top{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:18px !important;
  }

  .app-sidebar__brand{
    min-height:62px !important;
    justify-content:center !important;
    border-radius:20px !important;
  }

  .app-sidebar__logo{
    max-width:150px !important;
  }

  .app-sidebar__nav-wrap{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
    overflow:visible !important;
    padding-bottom:0 !important;
  }

  .app-sidebar__section{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
  }

  .app-sidebar__label{
    display:block !important;
    padding:0 10px !important;
    font-size:11px !important;
  }

  .app-sidebar__nav{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
  }

  .app-sidebar__item{
    min-height:44px !important;
    padding:0 12px !important;
    border-radius:15px !important;
    font-size:14px !important;
    white-space:normal !important;
  }

  .app-sidebar__item.is-active::before{
    left:0 !important;
    top:9px !important;
    bottom:9px !important;
    width:4px !important;
    height:auto !important;
    right:auto !important;
  }

  .app-sidebar__bottom{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    padding-top:18px !important;
    margin-top:auto !important;
  }

  .app-sidebar .sidebar-card{
    display:block !important;
    padding:14px !important;
    border-radius:20px !important;
  }

  .app-sidebar .sidebar-card__row{
    display:flex !important;
    margin-bottom:10px !important;
  }

  .app-sidebar .sidebar-progress,
  .app-sidebar .sidebar-card__meta,
  .app-sidebar .sidebar-card__link{
    display:block !important;
  }

  .app-sidebar .sidebar-card__link{
    display:inline-flex !important;
  }

  .app-sidebar .sidebar-profile{
    display:flex !important;
    width:100% !important;
    padding:10px 12px !important;
    border-radius:20px !important;
  }
}

/* =========================================================
   PRICING CONTENT RESPONSIVE
========================================================= */

@media (max-width:1024px){
  .main-workspace{
    padding:16px !important;
  }

  .page-stack{
    width:100%;
    max-width:none !important;
    gap:16px;
  }

  .hero-card,
  .section-card{
    border-radius:26px;
  }

  .hero-card__inner,
  .section-card__header,
  .section-card__body{
    padding:24px !important;
  }

  .hero-title{
    font-size:38px;
  }

  .pricing-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px;
  }

  .plan-card{
    border-radius:24px;
  }

  .faq-grid{
    grid-template-columns:1fr !important;
  }

  .billing-switch-card--above-plans{
    align-items:stretch;
  }

  .billing-switch{
    min-width:310px;
  }

  .compare-grid{
    grid-template-columns:1.1fr repeat(3, 1fr) !important;
  }

  .compare-cell:nth-child(4n){
    border-right:0 !important;
  }
}

@media (max-width:820px){
  .pricing-hero-grid{
    grid-template-columns:1fr !important;
  }

  .billing-switch-card--above-plans{
    flex-direction:column;
    align-items:stretch;
  }

  .billing-switch{
    width:100%;
    min-width:0;
  }

  .billing-option{
    flex:1;
  }

  .hero-pills{
    display:grid;
    grid-template-columns:1fr;
  }

  .hero-pill{
    width:100%;
  }

  .section-card__body{
    overflow-x:auto;
  }

  .compare-grid{
    min-width:640px;
  }
}

@media (max-width:640px){
  .mobile-appbar{
    min-height:58px;
    padding:8px 10px;
  }

  .mobile-appbar__logo{
    max-width:118px;
    max-height:30px;
  }

  .mobile-token-pill{
    min-height:38px;
    padding:5px 10px;
    gap:6px;
  }

  .mobile-token-pill__label{
    display:none;
  }

  .mobile-token-pill__value{
    font-size:14px;
  }

  .mobile-menu-btn{
    width:40px;
    height:40px;
    flex-basis:40px;
    border-radius:13px;
  }

  .app-sidebar{
    width:min(326px, calc(100vw - 18px)) !important;
    border-radius:0 22px 22px 0;
  }

  .main-workspace{
    padding:10px !important;
  }

  .page-stack{
    gap:12px;
  }

  .hero-card,
  .section-card{
    border-radius:22px;
  }

  .hero-card__inner,
  .section-card__header,
  .section-card__body{
    padding:16px !important;
  }

  .hero-card::after{
    width:190px;
    height:190px;
    right:-90px;
    top:-90px;
  }

  .hero-title{
    font-size:28px;
    letter-spacing:-.04em;
  }

  .hero-subtitle,
  .section-subtitle{
    font-size:14px;
    line-height:1.55;
  }

  .section-title{
    font-size:24px !important;
  }

  .billing-switch-card--above-plans{
    padding:14px;
    border-radius:20px;
  }

  .billing-switch{
    border-radius:18px;
    display:grid;
    grid-template-columns:1fr;
  }

  .billing-option{
    width:100%;
  }

  .billing-save{
    margin-left:4px;
  }

  .pricing-grid{
    grid-template-columns:1fr !important;
  }

  .plan-card{
    padding:18px;
    border-radius:22px;
  }

  .plan-name{
    padding-right:84px;
  }

  .plan-price{
    font-size:38px;
  }

  .plan-action{
    min-height:48px;
  }

  .feature-item{
    font-size:13px;
  }

  .compare-grid{
    min-width:600px;
    border-radius:20px;
  }

  .compare-cell{
    padding:12px;
    font-size:12px;
  }

  .faq-card{
    padding:16px;
    border-radius:20px;
  }

  .toast{
    left:10px;
    right:10px;
    bottom:10px;
    text-align:center;
  }
}

@media (max-width:420px){
  .hero-title{
    font-size:26px;
  }

  .plan-badge{
    top:14px;
    right:14px;
    font-size:10px;
  }

  .plan-name{
    padding-right:78px;
  }

  .plan-price{
    font-size:34px;
  }

  .billing-save{
    display:block;
    width:max-content;
    margin:5px auto 0;
  }
}

/* =========================================================
   CHECKOUT MODAL RESPONSIVE FIXES
========================================================= */

.checkout-modal{
  overscroll-behavior:contain;
}

.checkout-modal__dialog{
  max-height:88vh;
  overflow:auto;
}

@media (max-width:900px){
  .checkout-modal__dialog{
    width:min(620px, 94vw);
    margin:3vh auto;
    max-height:94vh;
    border-radius:26px;
  }

  .checkout-layout{
    grid-template-columns:1fr !important;
    min-height:0;
  }

  .checkout-left,
  .checkout-right{
    padding:24px !important;
  }

  .checkout-right{
    padding-right:24px !important;
  }

  .checkout-title{
    font-size:30px;
  }
}

@media (max-width:640px){
  .checkout-modal__dialog{
    width:100vw !important;
    min-height:100dvh;
    max-height:100dvh;
    margin:0 !important;
    border-radius:0 !important;
  }

  .checkout-modal__close{
    top:10px !important;
    right:10px !important;
    width:38px;
    height:38px;
    border-radius:12px;
  }

  .checkout-left{
    padding:22px 16px 18px !important;
  }

  .checkout-right{
    padding:18px 16px 22px !important;
  }

  .checkout-badge{
    margin-right:46px;
  }

  .checkout-title{
    font-size:27px;
    padding-right:42px;
  }

  .checkout-sub{
    font-size:13px;
    line-height:1.55;
  }

  .checkout-plan-card{
    border-radius:20px;
    padding:16px;
  }

  .checkout-plan-price strong{
    font-size:36px;
  }

  .promo-row{
    grid-template-columns:1fr !important;
  }

  .checkout-ghost-btn,
  .checkout-primary-btn,
  .checkout-input{
    width:100%;
    min-height:48px;
  }

  .checkout-summary{
    padding:14px;
    border-radius:18px;
  }

  .checkout-summary__row{
    align-items:flex-start;
  }

  .checkout-agreement{
    font-size:12px;
  }
}

/* =========================================================
   PREMIUM USAGE LIMITS + BILLING FAQ REDESIGN
   Insert at the VERY END of <style>
========================================================= */

.section-title{
  margin:0;
  font-size:28px;
  line-height:1.08;
  letter-spacing:-.03em;
  font-weight:900;
}

/* =========================
   Usage limits redesign
========================= */

.usage-limits-section{
  position:relative;
  overflow:hidden;
}

.usage-limits-section::before{
  content:"";
  position:absolute;
  right:-120px;
  top:-120px;
  width:340px;
  height:340px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(97,95,255,.16), transparent 62%);
  pointer-events:none;
}

.usage-section-header{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  background:
    radial-gradient(circle at top right, rgba(97,95,255,.12), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,245,.86)) !important;
}

.usage-header-badge{
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex:0 0 auto;
  border:1px solid rgba(97,95,255,.16);
  background:rgba(255,255,255,.78);
  color:#334155;
  font-size:13px;
  font-weight:900;
  box-shadow:0 10px 24px rgba(97,95,255,.08);
}

.usage-header-badge__dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow:0 0 0 5px rgba(97,95,255,.10);
}

.usage-body{
  overflow:visible !important;
}

.usage-plan-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}

.usage-plan-pill{
  min-height:86px;
  padding:16px;
  border-radius:22px;
  border:1px solid #eadfd3;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,250,245,.88));
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}

.usage-plan-pill span{
  display:block;
  margin-bottom:7px;
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8a7d70;
}

.usage-plan-pill strong{
  display:block;
  font-size:17px;
  line-height:1.18;
  letter-spacing:-.03em;
  color:#122033;
}

.usage-plan-pill--featured{
  border-color:rgba(97,95,255,.24);
  background:
    radial-gradient(circle at top right, rgba(97,95,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,245,.92));
  box-shadow:0 18px 38px rgba(97,95,255,.10);
}

.usage-plan-pill--featured span{
  color:#4f46e5;
}

.usage-matrix{
  display:grid;
  gap:12px;
}

.usage-row{
  display:grid;
  grid-template-columns:minmax(260px, .9fr) minmax(0, 1.5fr);
  gap:14px;
  align-items:stretch;
  padding:14px;
  border-radius:24px;
  border:1px solid #eadfd3;
  background:
    radial-gradient(circle at top right, rgba(97,95,255,.045), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,245,.92));
  box-shadow:0 10px 26px rgba(15,23,42,.045);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.usage-row:hover{
  transform:translateY(-2px);
  border-color:rgba(97,95,255,.18);
  box-shadow:0 18px 36px rgba(15,23,42,.07);
}

.usage-feature{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:12px;
}

.usage-feature__icon{
  width:44px;
  height:44px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#4f46e5;
  background:linear-gradient(135deg, rgba(97,95,255,.12), rgba(138,99,255,.08));
  border:1px solid rgba(97,95,255,.12);
  font-size:12px;
  font-weight:950;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.usage-feature h3{
  margin:0;
  font-size:17px;
  line-height:1.15;
  letter-spacing:-.03em;
  font-weight:950;
  color:#122033;
}

.usage-feature p{
  margin:7px 0 0;
  color:#64748b;
  font-size:13px;
  line-height:1.55;
  font-weight:700;
}

.usage-values{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}

.usage-value{
  min-height:116px;
  padding:15px;
  border-radius:20px;
  border:1px solid rgba(234,223,211,.9);
  background:rgba(255,255,255,.72);
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:0 8px 18px rgba(15,23,42,.035);
}

.usage-value span{
  font-size:10px;
  line-height:1;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#94a3b8;
}

.usage-value strong{
  margin-top:9px;
  font-size:32px;
  line-height:1;
  letter-spacing:-.055em;
  font-weight:950;
  color:#0f172a;
}

.usage-values--text .usage-value strong{
  font-size:22px;
  letter-spacing:-.04em;
}

.usage-value small{
  margin-top:7px;
  font-size:12px;
  line-height:1.35;
  color:#64748b;
  font-weight:800;
}

.usage-value--featured{
  border-color:rgba(97,95,255,.24);
  background:
    radial-gradient(circle at top right, rgba(97,95,255,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,245,.92));
  box-shadow:0 16px 34px rgba(97,95,255,.10);
}

.usage-value--featured span,
.usage-value--featured strong{
  color:#4f46e5;
}

/* =========================
   FAQ redesign
========================= */

.billing-faq-section{
  position:relative;
  overflow:hidden;
}

.billing-faq-section::before{
  content:"";
  position:absolute;
  left:-120px;
  top:-120px;
  width:320px;
  height:320px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(217,119,6,.10), transparent 62%);
  pointer-events:none;
}

.faq-section-header{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:20px;
  align-items:stretch;
  background:
    radial-gradient(circle at top right, rgba(217,119,6,.07), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,245,.86)) !important;
}

.faq-help-card{
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(97,95,255,.15);
  background:
    radial-gradient(circle at top right, rgba(97,95,255,.12), transparent 32%),
    rgba(255,255,255,.78);
  box-shadow:0 12px 26px rgba(15,23,42,.05);
}

.faq-help-card__label{
  display:block;
  margin-bottom:8px;
  font-size:10px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8a7d70;
}

.faq-help-card strong{
  display:block;
  color:#122033;
  font-size:16px;
  line-height:1.2;
  letter-spacing:-.025em;
}

.faq-help-card p{
  margin:8px 0 0;
  color:#64748b;
  font-size:13px;
  line-height:1.5;
  font-weight:700;
}

.faq-body{
  overflow:visible !important;
}

.faq-accordion{
  display:grid;
  gap:12px;
}

.faq-item{
  border:1px solid #eadfd3;
  border-radius:22px;
  background:
    radial-gradient(circle at top right, rgba(97,95,255,.045), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,250,245,.94));
  box-shadow:0 10px 24px rgba(15,23,42,.04);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.faq-item:hover{
  transform:translateY(-1px);
  border-color:rgba(97,95,255,.16);
  box-shadow:0 16px 32px rgba(15,23,42,.06);
}

.faq-item[open]{
  border-color:rgba(97,95,255,.22);
  box-shadow:0 18px 38px rgba(97,95,255,.08);
}

.faq-item summary{
  min-height:72px;
  padding:16px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 36px;
  gap:12px;
  align-items:center;
  cursor:pointer;
  list-style:none;
}

.faq-item summary::-webkit-details-marker{
  display:none;
}

.faq-item__icon{
  width:44px;
  height:44px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#4f46e5;
  background:linear-gradient(135deg, rgba(97,95,255,.12), rgba(138,99,255,.08));
  border:1px solid rgba(97,95,255,.12);
  font-size:12px;
  font-weight:950;
}

.faq-item__title{
  color:#122033;
  font-size:16px;
  line-height:1.25;
  font-weight:950;
  letter-spacing:-.025em;
}

.faq-item__arrow{
  width:36px;
  height:36px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  justify-self:end;
  color:#4f46e5;
  background:rgba(97,95,255,.08);
  border:1px solid rgba(97,95,255,.10);
  font-size:20px;
  line-height:1;
  font-weight:800;
  transition:transform .18s ease, background .18s ease;
}

.faq-item[open] .faq-item__arrow{
  transform:rotate(45deg);
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
}

.faq-item__content{
  margin:0 16px 16px 72px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(234,223,211,.9);
  background:rgba(255,255,255,.72);
  color:#64748b;
  font-size:14px;
  line-height:1.65;
  font-weight:700;
}

/* Responsive for redesigned sections */

@media (max-width:1024px){
  .usage-section-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .usage-header-badge{
    width:max-content;
    max-width:100%;
  }

  .usage-row{
    grid-template-columns:1fr;
  }

  .faq-section-header{
    grid-template-columns:1fr;
  }

  .faq-help-card{
    max-width:none;
  }
}

@media (max-width:760px){
  .usage-plan-strip{
    grid-template-columns:1fr;
  }

  .usage-row{
    padding:12px;
    border-radius:20px;
  }

  .usage-feature{
    grid-template-columns:38px minmax(0,1fr);
    padding:8px;
  }

  .usage-feature__icon{
    width:38px;
    height:38px;
    border-radius:14px;
    font-size:11px;
  }

  .usage-values{
    grid-template-columns:1fr;
  }

  .usage-value{
    min-height:auto;
    padding:14px;
  }

  .usage-value strong{
    font-size:28px;
  }

  .usage-values--text .usage-value strong{
    font-size:20px;
  }

  .faq-item summary{
    grid-template-columns:38px minmax(0,1fr) 34px;
    gap:10px;
    padding:14px;
  }

  .faq-item__icon{
    width:38px;
    height:38px;
    border-radius:14px;
  }

  .faq-item__arrow{
    width:34px;
    height:34px;
    border-radius:13px;
  }

  .faq-item__content{
    margin:0 14px 14px;
    padding:13px 14px;
  }
}

.app-sidebar__item.is-soon {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.app-sidebar__badge {
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 999px;   
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.12);
  white-space: nowrap;
}

.plan-card.is-current-plan {
  border-color: rgba(31, 79, 255, 0.45);
}

.plan-action.is-current-plan {
  cursor: default;
  opacity: 1;
}

/* =========================================================
   PRICING CARDS — LANDING PAGE DESIGN
========================================================= */

.pricing-grid--landing {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  align-items: stretch;
  padding-top: 12px;
}

/* Reset old plan-card design only inside this grid */

.pricing-grid--landing .landing-plan-card {
  position: relative;
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 25px;
  overflow: visible;

  border: 1px solid rgba(234, 223, 211, 0.92);
  border-radius: 25px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.91),
      rgba(255, 251, 244, 0.91)
    );

  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);

  animation: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.pricing-grid--landing .landing-plan-card::before {
  display: none;
}

.pricing-grid--landing .landing-plan-card:hover {
  transform: translateY(-3px);
  border-color: rgba(97, 95, 255, 0.23);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.09);
}

/* Featured Pro */

.pricing-grid--landing .landing-plan-card--featured {
  border-color: rgba(97, 95, 255, 0.25);

  background:
    radial-gradient(
      circle at top right,
      rgba(97, 95, 255, 0.13),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96),
      rgba(247, 246, 255, 0.95)
    );

  box-shadow:
    0 26px 64px rgba(97, 95, 255, 0.14);

  transform: translateY(-9px);
}

.pricing-grid--landing .landing-plan-card--featured:hover {
  transform: translateY(-12px);
}

.landing-plan-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);

  padding: 7px 12px;
  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-2)
    );

  color: #fff;
  font-size: 9px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;

  box-shadow:
    0 10px 22px rgba(97, 95, 255, 0.22);
}

/* Plan name */

.landing-plan-card__name {
  color: #546578;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Price */

.landing-plan-card__price {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin-top: 17px;
}

.landing-plan-card__price strong {
  color: #172033;
  font-size: 43px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.055em;
}

.landing-plan-card__price span {
  padding-bottom: 5px;
  color: #7b8999;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 750;
}

.landing-plan-card__billing {
  min-height: 18px;
  margin-top: 7px;
  color: #8794a4;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 800;
}

/* Description */

.landing-plan-card__description {
  min-height: 62px;
  margin: 15px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 650;
}

/* Tokens */

.landing-plan-card__tokens {
  margin-top: 17px;
  padding: 11px 12px;
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(97, 95, 255, 0.09),
      rgba(138, 99, 255, 0.05)
    );

  color: var(--primary-3);
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 950;
}

/* Features */

.landing-plan-card__features {
  display: grid;
  gap: 10px;
  margin: 22px 0 25px;
  padding: 0;
  list-style: none;
}

.landing-plan-card__features li {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  gap: 7px;

  color: #5e6f82;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 750;
}

.landing-plan-card__features li::before {
  content: "✓";
  color: var(--success);
  font-weight: 950;
}

/* Buttons */

.pricing-grid--landing .landing-plan-card__button {
  min-height: 46px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: auto;
  padding: 0 16px;

  border: 1px solid #ded5ca;
  border-radius: 15px;

  background: #fff;
  color: #334155;

  font-size: 12px;
  line-height: 1;
  font-weight: 950;

  box-shadow: none;
  cursor: pointer;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.pricing-grid--landing .landing-plan-card__button::before {
  display: none;
}

.pricing-grid--landing
.landing-plan-card__button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(97, 95, 255, 0.23);
  box-shadow: 0 13px 25px rgba(15, 23, 42, 0.07);
}

.pricing-grid--landing
.landing-plan-card__button--primary {
  border: 0;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-2)
    );

  color: #fff;

  box-shadow:
    0 14px 27px rgba(97, 95, 255, 0.22);
}

.pricing-grid--landing
.landing-plan-card__button.plan-action--ghost,
.pricing-grid--landing
.landing-plan-card__button:disabled {
  border: 1px solid #ded5ca;
  background: #f7f8fa;
  color: #7b8795;
  box-shadow: none;
  cursor: not-allowed;
}

/* Current plan */

.pricing-grid--landing
.landing-plan-card.is-current-plan {
  border-color: rgba(15, 159, 110, 0.3);

  box-shadow:
    0 18px 42px rgba(15, 159, 110, 0.08),
    inset 0 0 0 1px rgba(15, 159, 110, 0.05);
}

/* Responsive */

@media (max-width: 1180px) {
  .pricing-grid--landing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-grid--landing .landing-plan-card--featured,
  .pricing-grid--landing .landing-plan-card--featured:hover {
    transform: none;
  }
}

@media (max-width: 680px) {
  .pricing-grid--landing {
    grid-template-columns: 1fr;
  }

  .landing-plan-card__description {
    min-height: auto;
  }
}