/* Why Ads — KS HackZone
   Uses variables from layout.css (:root) */

   .ads-hero{
    display:grid; gap:.6rem; place-items:center; text-align:center;
    padding:10px 0 18px;
  }
  .ads-hero .chip{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.28rem .6rem; border-radius:999px; font-weight:700; letter-spacing:.2px;
    background:linear-gradient(180deg,#ffffff24,#ffffff12);
    border:1px solid var(--stroke);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  }
  .ads-hero h1{
    font-size:clamp(1.6rem, 2.2vw + 1rem, 2.2rem);
    line-height:1.2; margin:0;
  }
  .ads-hero p{
    margin:0; max-width:860px; color:var(--muted)
  }
  
  /* Document-style container */
  .ads-doc{
    background:
      radial-gradient(260px 180px at 20% 0%, #8a64ff2a, transparent 60%),
      linear-gradient(180deg,#ffffff20,#ffffff10);
    border:1px solid var(--stroke);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    backdrop-filter: blur(12px) saturate(140%);
    padding:18px;
  }
  .ads-doc h2{
    margin:1.1rem 0 .3rem; font-size:1.25rem;
    border-bottom:1px dashed #a176ff55; padding-bottom:.35rem
  }
  .ads-doc h3{margin:.8rem 0 .2rem; font-size:1.05rem}
  .ads-doc p{margin:.32rem 0}
  .ads-doc ul{margin:.2rem 0 .2rem 1.1rem}
  .ads-doc li{margin:.18rem 0}
  .ads-doc a{color:var(--cyan); text-decoration:none}
  .ads-doc a:hover{filter:brightness(1.08)}
  
  /* Grids */
  .kv{
    display:grid; grid-template-columns: 200px 1fr; gap:.4rem .8rem;
    padding:.6rem; border-radius:12px; border:1px dashed #7d69e955;
    background:linear-gradient(180deg,#ffffff18,#ffffff0e);
  }
  @media (max-width: 640px){ .kv{grid-template-columns:1fr} }
  
  .benefits-grid{
    display:grid; gap:1rem; margin-top:.6rem;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  @media (max-width: 1080px){ .benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (max-width: 720px){ .benefits-grid{grid-template-columns:1fr} }
  
  .card{
    position:relative;
    background:linear-gradient(180deg,#ffffff22,#ffffff12);
    border:1px solid var(--stroke);
    border-radius:16px;
    box-shadow:var(--shadow);
    backdrop-filter: blur(12px) saturate(140%);
    padding:14px;
    transition:.2s transform, .2s filter, .2s border-color;
  }
  .card:hover{transform:translateY(-2px); filter:brightness(1.02); border-color:#7d69e955}
  .card .head{display:flex; align-items:center; gap:.7rem; margin-bottom:.2rem}
  .card .ico{
    width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
    background:linear-gradient(180deg,#6c3cff33,#a176ff22);
    border:1px solid #a176ff55;
    box-shadow:0 8px 22px rgba(108,60,255,.28), inset 0 0 8px rgba(255,255,255,.06);
  }
  .card .ico i{font-size:20px}
  
  /* Callouts */
  .callout{
    margin:.6rem 0; padding:.7rem .8rem; border-radius:12px;
    border:1px solid var(--stroke);
    background:linear-gradient(180deg,#ffffff22,#ffffff10);
  }
  .callout.info{background:linear-gradient(180deg,#6be2ff22,#6be2ff10)}
  .callout.warn{background:linear-gradient(180deg,#ffd16633,#ffd16618)}
  .callout strong{color:#fff}
  
  /* CTA row */
  .cta{
    display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:.6rem
  }
  .cta .btn{border-radius:12px}
  
  /* List markers */
  .ads-doc ul.checks{list-style: none; padding-left:0}
  .ads-doc ul.checks li{padding-left:1.3rem; position:relative}
  .ads-doc ul.checks li::before{
    content:"✔"; position:absolute; left:0; opacity:.9; color:var(--accent);
  }
  
  /* Small meta text */
  .small{color:var(--muted); font-size:.95rem}
  .sep{
    height:1px; margin:18px 0 8px;
    background:linear-gradient(90deg, transparent, #a176ff55, transparent);
    border:0;
  }