/* Verityprep exam landing pages (AP / SAT / IB / IELTS) styles (Phase 2 per-page split).
   Rules moved verbatim from verityprep_main_theme.css: ap-* layout, hero,
   packages, courses and info grid shared by the four exam preparation pages. */

    .ap-layout {
      width: 100%;
      display: grid;
      gap: 26px;
    }
    .ap-hero {
      display: grid;
      grid-template-columns: 1fr .92fr;
      gap: 42px;
      align-items: center;
    }
    .ap-copy small {
      display: inline-flex;
      margin-bottom: 14px;
      color: var(--accent);
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .ap-copy h1,
    .ap-copy h2 {
      margin: 0 0 30px;
      font-size: clamp(50px, 7vw, 86px);
      line-height: .92;
      letter-spacing: -.07em;
    }
    .ap-copy p {
      max-width: 590px;
      margin: 0 0 24px;
      color: rgb(174, 180, 204);
      font-size: 19px;
      line-height: 1.7;
    }
    .ap-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .ap-panel,
    .ap-course-card,
    .ap-info-card {
      border-radius: 28px;
      color: var(--heading);
      background: linear-gradient(145deg, rgba(18,22,50,.88), rgb(var(--vp-ink-rgb) / .90));
      border: 1px solid rgb(var(--vp-white-rgb) / .12);
      box-shadow: 0 24px 70px rgba(0,0,0,.24), inset 0 1px rgb(var(--vp-white-rgb) / .08);
    }
    .ap-panel {
      padding: 28px;
      position: relative;
      overflow: hidden;
    }
    .ap-panel::before {
      content: "";
      position: absolute;
      inset: -80px -100px auto auto;
      width: 230px;
      height: 230px;
      border-radius: 999px;
      background: radial-gradient(circle, rgb(var(--vp-blue-rgb) / .25), transparent 68%);
    }
    .ap-panel h2 {
      margin: 0 0 16px;
      font-size: clamp(28px, 4vw, 44px);
      letter-spacing: -.045em;
      line-height: 1;
      position: relative;
    }
    .ap-check-list {
      display: grid;
      gap: 13px;
      margin: 0;
      padding: 0;
      list-style: none;
      position: relative;
    }
    .ap-check-list li {
      display: flex;
      gap: 10px;
      color: rgb(223, 229, 251);
      line-height: 1.5;
    }
    .ap-check-list li::before {
      content: "✓";
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 999px;
      color: rgb(5, 17, 38);
      background: rgb(141, 210, 255);
      font-weight: 900;
    }
    .ap-courses {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .ap-course-card {
      padding: 20px;
      min-height: 140px;
    }
    .ap-course-card b {
      display: block;
      color: var(--accent);
      font-size: 18px;
      margin-bottom: 10px;
    }
    .ap-course-card span {
      color: rgb(174, 180, 204);
      font-size: 14px;
      line-height: 1.55;
    }
    .ap-info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .ap-info-card {
      padding: 22px;
    }
    .ap-info-card h3 {
      margin: 0 0 10px;
      font-size: 20px;
    }
    .ap-info-card p {
      margin: 0;
      color: rgb(174, 180, 204);
      line-height: 1.62;
    }
    .ap-packages {
      display: grid;
      gap: 16px;
      margin-top: 2px;
    }
    .ap-package-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
    }
    .ap-package-head h2 {
      margin: 0;
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1;
      letter-spacing: -.045em;
    }
    .ap-package-head p {
      max-width: 440px;
      margin: 0;
      color: rgb(174, 180, 204);
      line-height: 1.6;
    }
    .ap-package-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .ap-package-card {
      min-height: 158px;
      padding: 16px;
      border-radius: 24px;
      color: var(--heading);
      background:
        linear-gradient(145deg, rgba(18,22,50,.88), rgb(var(--vp-ink-rgb) / .90)),
        radial-gradient(circle at 18% 0%, rgb(var(--vp-blue-rgb) / .13), transparent 50%);
      border: 1px solid rgb(var(--vp-white-rgb) / .12);
      box-shadow: 0 20px 58px rgba(0,0,0,.18), inset 0 1px rgb(var(--vp-white-rgb) / .08);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
      display: grid;
      grid-template-columns: 118px 1fr;
      gap: 16px;
      align-items: center;
      overflow: hidden;
      position: relative;
    }
    .ap-package-card:hover {
      transform: translateY(-4px);
      border-color: rgb(var(--vp-blue-rgb) / .42);
      box-shadow: 0 26px 70px rgb(var(--vp-blue-rgb) / .14), inset 0 1px rgb(var(--vp-white-rgb) / .10);
    }
    .ap-package-visual {
      width: 118px;
      height: 118px;
      border-radius: 24px;
      position: relative;
      display: grid;
      place-items: center;
      isolation: isolate;
      color: rgb(16, 19, 31);
      background:
        radial-gradient(circle at 12% 18%, rgb(var(--vp-blue-rgb) / .11) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 74%, rgb(var(--vp-purple-rgb) / .10) 0 2px, transparent 3px),
        linear-gradient(180deg, rgb(255, 254, 247), rgb(242, 246, 255));
      border: 2px solid rgba(248,251,255,.88);
      box-shadow: 0 18px 32px rgba(0,0,0,.24), inset 0 0 0 2px rgba(16,19,31,.08);
      overflow: hidden;
    }
    .ap-package-visual::before,
    .ap-package-visual::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }
    .ap-package-visual::before {
      inset: 9px;
      border: 2px solid rgba(16,19,31,.13);
      border-radius: 19px;
      transform: rotate(-1.5deg);
    }
    .ap-package-visual::after {
      inset: 0;
      background:
        repeating-linear-gradient(0deg, transparent 0 13px, rgba(16,19,31,.045) 14px 15px),
        radial-gradient(circle at 18% 80%, rgba(16,19,31,.10) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 18%, rgba(16,19,31,.10) 0 1px, transparent 2px);
      opacity: .7;
    }
    .ap-package-visual svg {
      width: 104px;
      height: 104px;
      position: relative;
      z-index: 1;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .ap-package-visual .thin {
      stroke-width: 1.75;
    }
    .ap-package-visual .fill {
      fill: currentColor;
      stroke: none;
    }
    .ap-package-visual.bio {
      background:
        radial-gradient(circle at 75% 18%, rgba(36,214,163,.16), transparent 34%),
        linear-gradient(180deg, rgb(255, 254, 247), rgb(239, 255, 248));
    }
    .ap-package-visual.calc {
      background:
        radial-gradient(circle at 28% 18%, rgb(var(--vp-purple-rgb) / .14), transparent 34%),
        linear-gradient(180deg, rgb(255, 254, 247), rgb(244, 241, 255));
    }
    .ap-package-visual.chem {
      background:
        radial-gradient(circle at 76% 20%, rgb(var(--vp-orange-rgb) / .15), transparent 35%),
        linear-gradient(180deg, rgb(255, 254, 247), rgb(255, 244, 234));
    }
    .ap-package-visual.physics {
      background:
        radial-gradient(circle at 35% 22%, rgb(var(--vp-blue-rgb) / .17), transparent 34%),
        linear-gradient(180deg, rgb(255, 254, 247), rgb(238, 248, 255));
    }
    .ap-package-visual.stats {
      background:
        radial-gradient(circle at 76% 24%, rgba(91,141,255,.16), transparent 35%),
        linear-gradient(180deg, rgb(255, 254, 247), rgb(240, 246, 255));
    }
    .ap-package-text {
      display: block;
      min-width: 0;
    }
    .ap-package-card b {
      display: block;
      margin-bottom: 10px;
      color: var(--accent);
      font-size: 18px;
      line-height: 1.25;
    }
    .ap-package-card .package-description {
      display: block;
      color: rgb(174, 180, 204);
      font-size: 14px;
      line-height: 1.55;
    }
    .ap-package-card em {
      display: inline-flex;
      margin-top: 14px;
      color: rgb(var(--vp-white-rgb));
      font-style: normal;
      font-size: 13px;
      font-weight: 900;
    }
    body.light .ap-panel,
    body.light .ap-course-card,
    body.light .ap-info-card {
      background: linear-gradient(145deg, rgb(var(--vp-white-rgb) / .95), rgba(235,241,255,.96));
      border-color: rgb(var(--vp-navyline-rgb) / .14);
      box-shadow: 0 34px 80px rgb(var(--vp-shadow-rgb) / .20), inset 0 1px rgb(var(--vp-white-rgb) / .90);
    }
    body.light .ap-copy p,
    body.light .ap-course-card span,
    body.light .ap-info-card p,
    body.light .ap-package-head p,
    body.light .ap-package-card .package-description {
      color: var(--muted);
    }
    body.light .ap-copy h1,
    body.light .ap-copy h2,
    body.light .ap-panel h2,
    body.light .ap-info-card h3 {
      color: rgb(15, 23, 42);
    }
    body.light .ap-copy p,
    body.light .ap-check-list li,
    body.light .ap-info-card p {
      color: rgb(37, 49, 77);
    }
    body.light .ap-course-card b {
      color: rgb(3, 105, 161);
    }
    body.light .ap-package-card {
      background: linear-gradient(145deg, rgb(var(--vp-white-rgb) / .95), rgba(235,241,255,.96));
      border-color: rgb(var(--vp-navyline-rgb) / .14);
      box-shadow: 0 24px 64px rgb(var(--vp-shadow-rgb) / .14), inset 0 1px rgb(var(--vp-white-rgb) / .90);
    }
    body.light .ap-package-head h2 {
      color: rgb(15, 23, 42);
    }
    body.light .ap-package-card b {
      color: rgb(3, 105, 161);
    }
    body.light .ap-package-card .package-description {
      color: rgb(52, 64, 93);
    }
    body.light .ap-package-card em {
      color: rgb(23, 33, 63);
    }
    body.light .ap-package-visual {
      color: rgb(16, 19, 31);
      background:
        radial-gradient(circle at 12% 18%, rgb(var(--vp-blue-rgb) / .10) 0 2px, transparent 3px),
        linear-gradient(180deg, rgb(255, 254, 247), rgb(242, 246, 255));
      border-color: rgba(15,23,42,.12);
      box-shadow: inset 0 0 0 1px rgb(var(--vp-white-rgb) / .8), 0 18px 36px rgb(var(--vp-shadow-rgb) / .16);
    }
    body.light .ap-package-visual.bio {
      background:
        radial-gradient(circle at 75% 18%, rgba(36,214,163,.16), transparent 34%),
        linear-gradient(180deg, rgb(255, 254, 247), rgb(239, 255, 248));
    }
    body.light .ap-package-visual.calc {
      background:
        radial-gradient(circle at 28% 18%, rgb(var(--vp-purple-rgb) / .14), transparent 34%),
        linear-gradient(180deg, rgb(255, 254, 247), rgb(244, 241, 255));
    }
    body.light .ap-package-visual.chem {
      background:
        radial-gradient(circle at 76% 20%, rgb(var(--vp-orange-rgb) / .15), transparent 35%),
        linear-gradient(180deg, rgb(255, 254, 247), rgb(255, 244, 234));
    }
    body.light .ap-package-visual.physics {
      background:
        radial-gradient(circle at 35% 22%, rgb(var(--vp-blue-rgb) / .17), transparent 34%),
        linear-gradient(180deg, rgb(255, 254, 247), rgb(238, 248, 255));
    }
    body.light .ap-package-visual.stats {
      background:
        radial-gradient(circle at 76% 24%, rgba(91,141,255,.16), transparent 35%),
        linear-gradient(180deg, rgb(255, 254, 247), rgb(240, 246, 255));
    }
    body.light .ap-package-visual::before {
      border-color: rgba(15,23,42,.13);
    }
    body.light .ap-package-visual::after {
      border-color: rgba(3,105,161,.12);
    }
    body.light .ap-course-card span {
      color: rgb(52, 64, 93);
    }
    @media (max-width: 1120px) {
      .ap-hero { grid-template-columns: 1fr; }
      .ap-courses,
      .ap-info-grid,
      .ap-package-grid { grid-template-columns: repeat(2, 1fr); }
      .ap-package-head { align-items: start; flex-direction: column; }
    }
    @media (max-width: 520px) {
      .ap-courses,
      .ap-info-grid,
      .ap-package-grid { grid-template-columns: 1fr; }
    }