/* Why Tuition Plus — page-specific styles (extends assets/style.css) */

  /* WHY PAGE — Page hero */
  .page-hero{position:relative; padding:80px 0 70px; overflow:hidden; text-align:center;
    background:linear-gradient(128deg, #FDF1EF 0%, #F8F4FC 48%, #EFE9FC 100%);
  }
  .page-hero::before{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:radial-gradient(rgba(28,24,48,0.07) 1.3px, transparent 1.3px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 20%, #000 40%, transparent 100%);
            mask-image:radial-gradient(ellipse 70% 70% at 50% 20%, #000 40%, transparent 100%);
  }
  .page-hero .wrap{position:relative; z-index:1;}
  .page-hero h1{font-size:clamp(30px,4vw,46px); font-weight:800; line-height:1.15; max-width:820px; margin:0 auto;}
  .page-hero .hl{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .page-hero p{color:var(--ink-soft); font-size:17px; max-width:640px; margin:20px auto 0;}
  .page-hero-ctas{display:flex; gap:14px; justify-content:center; margin-top:32px; flex-wrap:wrap;}

  /* Choose-us checklist band */
  .choose-us{padding:90px 0;}
  .choose-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .choose-grid .check-list{display:grid; grid-template-columns:1fr 1fr; gap:12px 20px;}
  .choose-grid .check-list li{align-items:flex-start;}

  /* Benefit rows (zig-zag) */
  .benefits{padding:20px 0 60px;}
  .benefit-row{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:56px 0; border-bottom:1px solid var(--line);}
  .benefit-row:last-child{border-bottom:none;}
  .benefit-row.reverse .benefit-media{order:1;}
  .benefit-row.reverse .benefit-content{order:2;}
  .benefit-icon{width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
  .benefit-content h3{font-size:25px; font-weight:800; margin-bottom:12px;}
  .benefit-content p.lead-sm{color:var(--ink-soft); font-size:15.5px; margin-bottom:0;}
  .benefit-media{background:var(--bg-alt); border-radius:20px; padding:30px; border:1px solid var(--line);}
  .benefit-media ul{display:flex; flex-direction:column; gap:10px; margin-bottom:20px;}
  .benefit-media ul li{display:flex; gap:10px; font-size:14.5px; font-weight:600; color:var(--ink); align-items:flex-start;}
  .benefit-media ul li::before{content:''; background-color:var(--violet); width:18px; height:18px; border-radius:50%; flex-shrink:0; margin-top:1px; background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l4.5 4.5L20 6'/></svg>"); background-size:10px 10px; background-repeat:no-repeat; background-position:center;}
  .outcome-pill{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); color:var(--violet-dark); padding:10px 16px; border-radius:12px; font-weight:700; font-size:13px; font-family:'Sora',sans-serif;}
  .outcome-pill b{color:var(--ink); font-weight:700;}

  /* Workflow pill band (dark) */
  .workflow-band{padding:80px 0; background:var(--ink); text-align:center;}
  .workflow-band .section-head h2{color:#fff;}
  .workflow-band .section-head p{color:#B6AFCB;}

  /* One Platform category grid */
  .category-section{padding:96px 0; background:var(--bg-alt);}
  .category-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .category-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px;}
  .category-card .ic{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
  .category-card h3{font-size:16.5px; font-weight:700; margin-bottom:14px;}
  .category-card ul{display:flex; flex-direction:column; gap:9px;}
  .category-card ul li{font-size:13.5px; color:var(--ink-soft); padding-left:16px; position:relative;}
  .category-card ul li::before{content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--violet);}

  /* Before / After comparison */
  .compare-section{padding:96px 0;}
  .compare-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:10px;}
  .compare-labels{max-width:820px; margin:0 auto 16px; display:grid; grid-template-columns:1fr 44px 1fr; gap:0;}
  .compare-labels span{font-family:'Sora',sans-serif; font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; text-align:center; padding:0 22px;}
  .compare-labels .lbl-before{color:var(--coral-dark);}
  .compare-labels .lbl-after{color:var(--violet-dark);}
  .compare-row{display:grid; grid-template-columns:1fr 44px 1fr; align-items:stretch; border-radius:14px; overflow:hidden; border:1px solid var(--line);}
  .compare-before, .compare-after{padding:16px 22px; font-size:14px; font-weight:600; display:flex; align-items:center; gap:10px;}
  .compare-before{background:var(--coral-tint); color:var(--ink);}
  .compare-after{background:var(--violet-tint); color:var(--ink); font-weight:700;}
  .compare-arrow{display:flex; align-items:center; justify-content:center; background:#fff; color:var(--ink-faint);}
  .compare-before .mk, .compare-after .mk{width:18px; height:18px; flex-shrink:0;}

  /* Challenge / Solution list */
  .challenge-section{padding:96px 0; background:var(--bg-alt);}
  .challenge-labels{max-width:900px; margin:0 auto 14px; display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:0 22px;}
  .challenge-labels span{font-family:'Sora',sans-serif; font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint);}
  .challenge-list{max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:10px;}
  .challenge-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 22px; align-items:center;}
  .challenge-row .chal{color:var(--ink-soft); font-size:14px; font-weight:600;}
  .challenge-row .sol{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:var(--ink);}
  .challenge-row .sol svg{flex-shrink:0; color:var(--violet);}

  /* Trusted outcomes */
  .outcomes-section{padding:90px 0;}
  .outcomes-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; max-width:900px; margin:40px auto 0;}
  .outcomes-grid li{display:flex; gap:10px; font-size:14.5px; font-weight:600; color:var(--ink); align-items:flex-start;}
  .outcomes-grid li::before{content:''; background-color:var(--violet); width:20px; height:20px; border-radius:50%; flex-shrink:0; margin-top:1px; background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l4.5 4.5L20 6'/></svg>"); background-size:11px 11px; background-repeat:no-repeat; background-position:center;}

  /* Stands out grid */
  .stands-section{padding:96px 0;}
  .stands-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
  .stands-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 20px;}
  .stands-card .ic{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
  .stands-card h3{font-size:15px; font-weight:700; margin-bottom:8px;}
  .stands-card p{font-size:13px; color:var(--ink-soft);}

  @media (max-width:980px){
    .choose-grid, .compare-labels, .challenge-labels{grid-template-columns:1fr;}
    .choose-grid .check-list{grid-template-columns:1fr;}
    .benefit-row, .benefit-row.reverse{grid-template-columns:1fr;}
    .benefit-row.reverse .benefit-media, .benefit-row.reverse .benefit-content{order:initial;}
    .category-grid{grid-template-columns:repeat(2,1fr);}
    .stands-grid{grid-template-columns:repeat(2,1fr);}
    .compare-row{grid-template-columns:1fr; border-radius:14px;}
    .compare-arrow{display:none;}
    .challenge-row{grid-template-columns:1fr; gap:6px;}
    .outcomes-grid{grid-template-columns:1fr;}
  }
  @media (max-width:600px){
    .category-grid, .stands-grid{grid-template-columns:1fr;}
  }