/* ====================================================================
   AI Tutor Pricing page (client redesign request, 2026-10-30) -- scoped to
   this one marketing page only (loaded directly by site/pages/
   ai-tutor-pricing.php), not part of the global dist/style.scss build, so
   this can iterate independently without touching/recompiling the sitewide
   stylesheet. Palette reuses the site's own existing brand blue (#007aff,
   same value site/pages/pricing.php's .pricing-card already uses) plus the
   AI Tutor app's own mode colours (Explain=blue, Hint=rose, Voice=amber,
   Teach Me=green -- same roles those modes already use inside the app
   itself, e.g. ai-mode-tile/.tv2-line-* -- reused here for consistency
   rather than inventing a new palette for this one page).
   ==================================================================== */

/* Belt-and-braces (2026-11-03, client report: horizontal scroll on mobile,
   no left gutter) -- .aitp-hero-blob is deliberately position:absolute with
   right:-10% so it bleeds past the hero's own edge for the decorative
   overlap look; nothing was clipping that overflow on narrow screens, so it
   was forcing the WHOLE PAGE wider than the viewport (that's also why the
   .container's own left/right padding looked overridden to the browser --
   not actually overridden, just irrelevant once something else already
   pushed the page wide). overflow-x:hidden here contains any such bleed
   without having to chase down every absolutely-positioned decoration. */
.aitp-page{ font-family: 'Poppins', sans-serif; color: #1f2937; overflow-x: hidden; }
.aitp-page h1, .aitp-page h2, .aitp-page h3{ font-family: 'Poppins', sans-serif; }

/* ---- Hero ---- */
/* Real bug found+fixed (2026-10-30, client report: "header is blocking the
   content"): .header-exam's own nav is position:absolute (site/login.php),
   so it floats OVER the page instead of pushing it down -- every other
   public page compensates with the sitewide .inner-padding convention
   (dist/style.css: padding: 200px 0 100px 0), which this page's own custom
   hero never had. Matched here instead of reusing .inner-padding directly,
   since this hero also needs its own background gradient. */
.aitp-hero{
    background: linear-gradient(180deg, #eaf3fc 0%, #f7fbff 100%);
    padding: 150px 0 60px;
}
/* Pill badge (2026-11-03, matches the client's mockup -- replaces the old
   plain-text .aitp-eyebrow). */
.aitp-pill{
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #007aff;
    background: #dbeafe;
    border-radius: 999px;
    padding: 6px 16px;
    margin-bottom: 18px;
}
.aitp-h1{
    font-size: 42px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 18px;
}
.aitp-h1-dark{ color: #0f1b2e; }
.aitp-h1-blue{ color: #007aff; }
.aitp-lead{
    font-size: 16px;
    line-height: 1.7;
    color: #475569;
    max-width: 62ch;
    margin-bottom: 22px;
}
.aitp-notice{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff8e6;
    border: 1px solid #f5dfa3;
    border-radius: 12px;
    padding: 14px 18px;
    max-width: 560px;
    font-size: 14px;
    line-height: 1.6;
    color: #8a6400;
}
.aitp-notice-icon{
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #f5a524;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    margin-top: 1px;
}
.aitp-notice strong{ color: #6b4f00; }

/* Hero illustration (2026-11-03, redesigned to match the client's mockup --
   replaces the old static robot photo with a real HTML/CSS "device" card
   showing the actual AI Tutor UI solving a maths problem, plus a soft blob
   + dot-grid background decoration behind it, same composition as the
   mockup). */
.aitp-hero-art{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}
.aitp-hero-blob{
    position: absolute;
    top: 10%; right: -10%;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,.16), rgba(124,58,237,0) 70%);
    z-index: 0;
}
.aitp-hero-dots{
    position: absolute;
    left: 0; top: 8%;
    width: 90px; height: 90px;
    background-image: radial-gradient(#c7d2e5 1.6px, transparent 1.6px);
    background-size: 14px 14px;
    opacity: .7;
    z-index: 0;
}
/* Hero illustration -- reverted back to the original client-supplied image
   (2026-11-03 client report: "use older image not this one" -- a brief
   HTML/CSS "device" mockup had replaced it, reverted in favour of the real
   photo). Blob/dot decorations kept behind it either way. */
.aitp-hero-illustration{
    position: relative;
    z-index: 1;
    max-width: 100%;
    width: 420px;
    height: auto;
    filter: drop-shadow(0 18px 30px rgba(15, 27, 46, 0.16));
}

/* ---- Section headings (shared by Starting Plan / Top-Up Credits / How it
   works) -- a short accent bar instead of a horizontal rule, same idea used
   elsewhere on this page's own sections. ---- */
/* padding-top/bottom only (2026-11-03 fix) -- this class sits on the SAME
   element as Bootstrap's .container (<div class="container aitp-section">),
   so the old `padding: 32px 0` shorthand was explicitly zeroing left/right
   back out, wiping the container's own 15px side gutter -- that's what was
   showing as "no gap on the left" on mobile, not the hero blob overflow. */
.aitp-section{ padding-top: 32px; padding-bottom: 32px; }
.aitp-h2{
    font-size: 26px;
    font-weight: 800;
    color: #0f1b2e;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}
.aitp-h2-bar{
    display: inline-block;
    width: 28px; height: 4px;
    border-radius: 2px;
    background: #007aff;
}
.aitp-section-lead{
    font-size: 15px;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 28px;
}
/* What's Included heading (2026-11-06 client request: "multi color center")
   -- centered heading + lead, with the "AI Learning Package" portion of the
   heading in the site's own brand blue instead of the solid dark colour. */
.aitp-h2-center{ justify-content: center; }
.aitp-h2-accent{ color: #007aff; }
.aitp-section-lead-center{ text-align: center; max-width: 62ch; margin-left: auto; margin-right: auto; }

/* ---- What's Included feature groups (2026-11-03, matched to the client's
   closer reference crop: icon sits INLINE with the heading in one header
   row, not stacked above it; card is a light tint + colored border rather
   than a solid pastel fill). ---- */
.aitp-features-row{ margin-top: 4px; }
.aitp-feature-group{
    position: relative;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 18px 22px 16px;
    height: 100%;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px rgba(15, 27, 46, 0.05);
}
.aitp-feature-blue{ background: linear-gradient(160deg, #eef6ff 0%, #fbfdff 100%); border-color: #d7e8fc; }
.aitp-feature-purple{ background: linear-gradient(160deg, #f4eefd 0%, #fcfaff 100%); border-color: #e2d3f9; }
.aitp-feature-green{ background: linear-gradient(160deg, #eafbf1 0%, #fafffc 100%); border-color: #c9f0da; }
.aitp-feature-head{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    /* nowrap (2026-11-09 fix) -- the larger icon tile (38px -> 52px) left
       too little room for the longest heading ("AI Personalised Learning"),
       pushing it onto its own row below the icon; the heading itself still
       wraps its own text onto a second line fine within the row. */
    flex-wrap: nowrap;
}
.aitp-feature-head h3{ min-width: 0; }
/* "AI Powered" badge + sub-tagline (2026-11-06, client reference screenshot;
   client follow-up: "place at top of the card" -- same floating-pill
   treatment as the Top-Up Credits "Most Popular" badge, .aitp-featured-badge
   above, overlapping the card's own top edge, right-aligned since the card
   heading already sits top-left). */
.aitp-feature-badge{
    position: absolute;
    top: -13px; right: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
    background: #0f1b2e;
    border-radius: 999px;
    padding: 5px 14px;
    white-space: nowrap;
}
.aitp-feature-blue .aitp-feature-badge{ background: #1d4ed8; }
.aitp-feature-purple .aitp-feature-badge{ background: #7c3aed; }
.aitp-feature-green .aitp-feature-badge{ background: #16a34a; }
.aitp-feature-sub{
    font-size: 13.5px;
    color: #64748b;
    margin: 0 0 14px;
}
.aitp-feature-icon{
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
/* 3D icon images (2026-11-09, client reference: "Colourful 3D Educational
   Icon Collection", replacing the earlier single-colour Font Awesome
   icons) -- own full colour already, sitting inside the same soft circle/
   tile this group already used for the FA icon. Reverted back to its
   original size (2026-11-09 follow-up, client request) -- only the
   per-item icons below stay at the larger size. */
.aitp-feature-icon img{ width: 24px; height: 24px; object-fit: contain; }
.aitp-feature-blue .aitp-feature-icon{ background: #dbeafe; color: #007aff; }
.aitp-feature-purple .aitp-feature-icon{ background: #ede4fb; color: #7c3aed; }
.aitp-feature-green .aitp-feature-icon{ background: #d7f5e3; color: #16a34a; }
.aitp-feature-group h3{
    font-size: 19px;
    font-weight: 800;
    margin: 0;
}
.aitp-feature-blue h3{ color: #007aff; }
.aitp-feature-purple h3{ color: #7c3aed; }
.aitp-feature-green h3{ color: #16a34a; }
.aitp-feature-list{ list-style: none; margin: 0; padding: 0; }
.aitp-feature-list li{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #334155;
    margin-bottom: 12px;
}
.aitp-feature-list li:last-child{ margin-bottom: 0; }
.aitp-feature-list li i{ color: #16a34a; font-size: 15px; margin-top: 2px; flex: 0 0 auto; }

/* Icon-tile list items (2026-11-06 client reference screenshot) -- each
   item gets its own small rounded icon tile instead of a plain checkmark,
   with a bold label + description on one line, matching the mockup. */
.aitp-feature-list-icons li{
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(15, 27, 46, 0.04);
}
.aitp-feature-list-icons li:last-child{ margin-bottom: 0; }
.aitp-feature-item-icon{
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.aitp-feature-item-icon img{ width: 30px; height: 30px; object-fit: contain; }
.aitp-feature-blue .aitp-feature-item-icon{ background: #dbeafe; color: #1d4ed8; }
.aitp-feature-purple .aitp-feature-item-icon{ background: #ede4fb; color: #7c3aed; }
.aitp-feature-green .aitp-feature-item-icon{ background: #d7f5e3; color: #16a34a; }
.aitp-feature-list-icons li strong{ color: #0f1b2e; }

/* ---- See Each Mode In Action (tabbed videos, 2026-11-06 client request;
   redesigned same day to match the client's reference mockup -- one light
   gradient card, text + stacked pill tabs left, dark video panel right).
   Tab colours reuse the same 4 mode-role colours as the rest of this page
   (Explain=blue, Hint=pink/rose, Voice=amber, Teach Me=green). ---- */
/* Section-level heading above the video card (2026-11-09, matches client's
   own mockup wording: pill badge + two-line headline + lead, centered,
   sitting above the existing tabbed video card rather than replacing it). */
.aitp-video-heading{ max-width: 760px; margin: 0 auto 36px; }
.aitp-video-h2-main{
    font-size: 32px;
    font-weight: 800;
    color: #0f1b2e;
    line-height: 1.3;
    margin: 14px 0 14px;
}
.aitp-video-lead-main{
    font-size: 16px;
    color: #475569;
    line-height: 1.6;
}
.aitp-video-footer{
    font-size: 14.5px;
    color: #64748b;
    margin: 22px 0 0;
}
.aitp-video-card{
    background: linear-gradient(135deg, #eaf2fd 0%, #f5f9ff 60%, #ffffff 100%);
    border-radius: 24px;
    padding: 36px;
    box-shadow: 0 20px 44px rgba(15, 27, 46, 0.08);
}
.aitp-video-row{
    display: flex;
    align-items: stretch;
    gap: 32px;
}
.aitp-video-left{ flex: 1 1 42%; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.aitp-video-h2{
    font-size: 25px;
    font-weight: 800;
    color: #0f1b2e;
    margin-bottom: 10px;
}
.aitp-video-h2 span{ color: #007aff; }
.aitp-video-lead{
    font-size: 14.5px;
    color: #475569;
    line-height: 1.65;
    margin-bottom: 22px;
    max-width: 38ch;
}

/* "Try an example 11+ question" card (2026-11-09, matches client's own
   mockup) -- same example question across all 4 mode videos on the right. */
.aitp-video-h3{ font-size: 16px; font-weight: 800; color: #0f1b2e; margin-bottom: 12px; }
.aitp-example-card{
    background: #fff;
    border: 1.5px solid #e1e8f5;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.aitp-example-tag{ display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; color: #8392a8; margin-bottom: 8px; }
.aitp-example-row{ display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.aitp-example-text{ font-size: 15px; font-weight: 700; color: #0f1b2e; line-height: 1.45; margin: 0; }
.aitp-example-clock{ width: 46px; height: 46px; flex: 0 0 auto; }

.aitp-video-tabs{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.aitp-video-tab{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1.5px solid #e1e8f5;
    background: #fff;
    color: #0f1b2e;
    font-weight: 700;
    font-size: 14px;
    border-radius: 12px;
    padding: 13px 16px;
    cursor: pointer;
    transition: background .15s ease-out, color .15s ease-out, border-color .15s ease-out, transform .15s ease-out, box-shadow .15s ease-out;
}
.aitp-video-tab i{ font-size: 13px; }
.aitp-video-tab:hover{ transform: translateY(-1px); }
.aitp-video-tab-blue{ border-color: #bcdcff; color: #007aff; }
.aitp-video-tab-pink{ border-color: #fbcfe8; color: #ec4899; }
.aitp-video-tab-amber{ border-color: #fde3b0; color: #d97706; }
.aitp-video-tab-green{ border-color: #bbf0cf; color: #16a34a; }
.aitp-video-tab-blue i{ color: #007aff; }
.aitp-video-tab-pink i{ color: #ec4899; }
.aitp-video-tab-amber i{ color: #d97706; }
.aitp-video-tab-green i{ color: #16a34a; }
.aitp-video-tab-blue.active{ background: #007aff; border-color: #007aff; color: #fff; box-shadow: 0 10px 20px rgba(0, 122, 255, 0.3); }
.aitp-video-tab-pink.active{ background: #ec4899; border-color: #ec4899; color: #fff; box-shadow: 0 10px 20px rgba(236, 72, 153, 0.3); }
.aitp-video-tab-amber.active{ background: #d97706; border-color: #d97706; color: #fff; box-shadow: 0 10px 20px rgba(217, 119, 6, 0.3); }
.aitp-video-tab-green.active{ background: #16a34a; border-color: #16a34a; color: #fff; box-shadow: 0 10px 20px rgba(22, 163, 74, 0.3); }
.aitp-video-tab.active i{ color: #fff; }
.aitp-video-tab:focus-visible{ outline: 3px solid #93c5fd; outline-offset: 2px; }
.aitp-video-right{ flex: 1 1 58%; min-width: 0; }
.aitp-video-wrap{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 260px;
    aspect-ratio: 16 / 10;
    background: radial-gradient(120% 140% at 85% 110%, #1d2a4d 0%, #0f1b2e 55%, #0a1324 100%);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(15, 27, 46, 0.22);
}
.aitp-video-wrap video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.aitp-video-soon{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
    color: rgba(255,255,255,.85);
}
/* Reordered visually (2026-11-09, matches client's mockup: title/subtitle
   above the play button) -- DOM order is title, desc, play icon, pill;
   flex order puts the play icon between them without reordering markup. */
.aitp-video-soon h4{ order: 1; font-size: 18px; font-weight: 800; color: #fff; margin: 0; }
.aitp-video-soon p{ order: 2; font-size: 13.5px; color: rgba(255,255,255,.7); margin: 0 0 6px; max-width: 32ch; }
.aitp-video-play{
    order: 3;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    color: #fff;
}
.aitp-video-play i{ margin-left: 3px; }
.aitp-video-soon-pill{ order: 4; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.12); padding: 6px 14px; border-radius: 999px; margin-top: 6px; }

/* ---- Plan switcher (2026-11-06, client request: "add yearly and monthly
   plan switcher") -- a simple two-pill toggle above the plan card; JS just
   shows/hides the matching [data-plan-card], no reload. ---- */
.aitp-plan-switcher{
    display: inline-flex;
    background: #eef3fa;
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 20px;
}
.aitp-switch-btn{
    border: 1.5px solid transparent;
    background: transparent;
    color: #475569;
    font-weight: 700;
    font-size: 14.5px;
    border-radius: 999px;
    padding: 9px 26px;
    cursor: pointer;
    transition: background .15s ease-out, color .15s ease-out, border-color .15s ease-out;
}
/* Client report (2026-11-06): the inactive pill was plain transparent text
   sitting on the switcher's own light-grey track (#eef3fa) -- barely
   visible, easy to miss as a clickable option at all. A border on the
   inactive state (not just a hover) makes it read as its own button. */
.aitp-switch-btn:not(.active){ border-color: #c7d2e5; color: #334155; }
.aitp-switch-btn:not(.active):hover{ border-color: #007aff; color: #007aff; }
.aitp-switch-btn.active{
    background: #007aff;
    color: #fff;
    border-color: #007aff;
}
.aitp-switch-btn:focus-visible{ outline: 3px solid #93c5fd; outline-offset: 2px; }
/* Monthly plan's "/month" suffix next to the price (2026-11-06) -- smaller
   and softer than the price itself so it reads as a unit, not part of the
   number. */
.aitp-price-suffix{ font-size: 15px; font-weight: 600; color: rgba(255,255,255,.75); margin-left: 2px; }

/* ---- Plan card (2026-11-03: blue-to-purple gradient banner with
   white text, matching the client's mockup -- was a plain white card. ---- */
/* Background image (2026-11-03, client-supplied) replaces the flat CSS
   gradient -- same blue-to-purple banner shape, just the real asset
   instead of an approximation. Gradient kept as a fallback background so
   there's no visible gap if the image is slow to load. background-size:
   100% 100% (not cover) -- the source PNG's own rounded corners need to
   exactly fill this box, not crop. */
.aitp-plan-card{
    display: flex;
    align-items: center;
    gap: 24px;
    background: url('../img/ai-tutor-plan-banner.png') center / 100% 100% no-repeat, linear-gradient(120deg, #2563eb 0%, #7c3aed 100%);
    border-radius: 20px;
    padding: 26px 32px;
    box-shadow: 0 16px 36px rgba(79, 70, 229, 0.25);
}
.aitp-plan-icon{
    flex: 0 0 auto;
    width: 110px; height: 110px;
    display: flex; align-items: center; justify-content: center;
}
.aitp-plan-icon-img{ width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(15,27,46,.25)); }
.aitp-plan-body{ flex: 1 1 auto; min-width: 0; }
.aitp-plan-eyebrow{
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255,255,255,.85);
    margin-bottom: 6px;
}
.aitp-plan-body h3{ font-size: 26px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.aitp-plan-body p{ font-size: 14.5px; color: rgba(255,255,255,.9); line-height: 1.6; margin-bottom: 14px; }
.aitp-badge{
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255,255,255,.18);
    color: #fff;
    border-radius: 999px;
    padding: 5px 14px;
}
.aitp-plan-divider{ flex: 0 0 auto; width: 1px; align-self: stretch; background: rgba(255,255,255,.25); }
.aitp-plan-price{ flex: 0 0 auto; text-align: center; }
.aitp-price{ font-size: 36px; font-weight: 800; color: #fff; white-space: nowrap; }
/* Client report (2026-11-02): the Starting Plan card showed a price but no
   purchase button at all. Yellow fill matches the mockup's own CTA. */
.aitp-plan-btn{
    display: block;
    margin-top: 14px;
    text-align: center;
    background: #ffc91d;
    color: #0f1b2e;
    font-weight: 700;
    font-size: 15px;
    border-radius: 10px;
    padding: 11px 22px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease-out, transform .15s ease-out;
}
.aitp-plan-btn i{ margin-left: 4px; }
.aitp-plan-btn:hover, .aitp-plan-btn:focus-visible{
    background: #ffd84d;
    color: #0f1b2e;
    text-decoration: none;
    transform: translateY(-1px);
}
.aitp-plan-btn:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; }

/* ---- Top-Up Credits cards ---- */
.aitp-credit-row{ margin-top: 4px; }
.aitp-credit-card{
    position: relative;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 27, 46, 0.06);
    padding: 22px 22px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.aitp-credit-featured{
    border-color: #f9a8d4;
    background: #fff5f9;
    box-shadow: 0 14px 30px rgba(236, 72, 153, 0.14);
}
.aitp-featured-badge{
    position: absolute;
    top: -13px; left: 50%;
    transform: translateX(-50%);
    background: #ec4899;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    border-radius: 999px;
    padding: 5px 14px;
    white-space: nowrap;
}
/* Icon + heading/description inline, icon left (2026-11-03 client request --
   was stacked icon-above-heading before). */
.aitp-credit-head{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}
.aitp-credit-icon{
    flex: 0 0 auto;
    width: 54px; height: 54px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.aitp-credit-icon-blue{ background: #eaf3fc; color: #007aff; }
.aitp-credit-icon-pink{ background: #fce7f3; color: #ec4899; }
.aitp-credit-card h3{ font-size: 19px; font-weight: 800; color: #0f1b2e; margin-bottom: 4px; }
.aitp-credit-card p{ font-size: 14px; color: #475569; line-height: 1.6; margin: 0; }
/* 2026-11-03: split into a plain price line + a separate "Per Student"
   button, matching the mockup -- was one combined dark button showing the
   price as its own label before. */
.aitp-credit-price{ font-size: 24px; font-weight: 800; color: #0f1b2e; margin-bottom: 14px; text-align: center; }
.aitp-credit-btn{
    display: block;
    text-align: center;
    background: transparent;
    border: 1.5px solid #007aff;
    color: #007aff;
    font-weight: 700;
    font-size: 14.5px;
    border-radius: 10px;
    padding: 10px 16px;
    text-decoration: none;
    transition: background .15s ease-out, color .15s ease-out, transform .15s ease-out;
}
.aitp-credit-btn:hover, .aitp-credit-btn:focus-visible{
    background: #eaf3fc;
    color: #007aff;
    text-decoration: none;
    transform: translateY(-1px);
}
.aitp-credit-btn:focus-visible{ outline: 3px solid #93c5fd; outline-offset: 2px; }
.aitp-credit-btn-filled{
    background: #ec4899;
    border-color: #ec4899;
    color: #fff;
}
.aitp-credit-btn-filled:hover, .aitp-credit-btn-filled:focus-visible{
    background: #db2777;
    border-color: #db2777;
    color: #fff;
}

/* ---- How Credits Work (2026-11-03: heading on the left, plain icon
   columns on the right, matching the mockup -- was a centered section
   heading above 4 numbered-badge columns before). ---- */
.aitp-how-box{
    background: #eef3fa;
    border: 1px solid #d7e1f0;
    border-radius: 18px;
    padding: 20px 26px;
}
.aitp-how-heading{
    font-size: 27px;
    font-weight: 800;
    color: #0f1b2e;
    line-height: 1.25;
    margin: 0;
}
.aitp-how-row{ margin-top: 0; }
/* Thin vertical separators between columns (2026-11-03, matched to the
   client's own reference screenshot -- each of the 4 columns is divided by
   a hairline, not just whitespace). Border on all but the first column in
   the row so there's no leading separator before "Separate balance". */
.aitp-how-col{
    padding: 0 10px;
    margin-bottom: 20px;
    border-left: 1px solid #d7e1f0;
}
.aitp-how-col p{ max-width: 22ch; }
.aitp-how-col:first-child{ border-left: none; }
.aitp-how-icon{
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    margin-bottom: 10px;
}
.aitp-how-icon-blue{ background: #dbeafe; color: #1d4ed8; }
.aitp-how-icon-purple{ background: #ede9fe; color: #7c3aed; }
.aitp-how-icon-amber{ background: #fef3c7; color: #d97706; }
.aitp-how-icon-green{ background: #dcfce7; color: #16a34a; }
.aitp-how-col h4{ font-size: 17px; font-weight: 800; color: #0f1b2e; margin-bottom: 6px; }
.aitp-how-col p{ font-size: 15px; color: #475569; line-height: 1.6; margin: 0; }

/* ---- Final CTA ---- */
.aitp-cta-row{ text-align: center; padding-bottom: 20px; }
.aitp-cta{
    display: inline-block;
    background: #007aff;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 10px;
    padding: 14px 32px;
    text-decoration: none;
    transition: background .15s ease-out, transform .15s ease-out;
}
.aitp-cta:hover, .aitp-cta:focus-visible{
    background: #0063d1;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.aitp-cta:focus-visible{ outline: 3px solid #93c5fd; outline-offset: 2px; }

/* ---- Responsive ---- */
@media (max-width: 991.98px){
    /* Top padding deliberately NOT reduced here -- .header-exam's nav stays
       position:absolute at every width (only the collapsed menu toggles),
       same reasoning as the desktop fix above. */
    .aitp-hero{ padding: 150px 0 30px; text-align: center; }
    .aitp-lead{ margin-left: auto; margin-right: auto; }
    .aitp-notice{ margin-left: auto; margin-right: auto; text-align: left; }
    .aitp-hero-art{ margin-top: 32px; }
}
@media (max-width: 767.98px){
    .aitp-video-card{ padding: 24px; }
    .aitp-video-row{ flex-direction: column; gap: 22px; }
    .aitp-video-lead{ max-width: none; }
    .aitp-video-wrap{ min-height: 220px; }
    .aitp-h1{ font-size: 30px; }
    .aitp-plan-card{ flex-wrap: wrap; text-align: center; justify-content: center; }
    .aitp-plan-divider{ display: none; }
    .aitp-plan-price{ width: 100%; margin-top: 10px; }
    .aitp-how-heading{ text-align: center; margin-bottom: 20px; }
    .aitp-how-col{ text-align: center; border-left: none; border-top: 1px solid #d7e1f0; padding-top: 18px; }
    .aitp-how-col:first-child{ border-top: none; padding-top: 0; }
    .aitp-how-icon{ margin-left: auto; margin-right: auto; }
    /* .aitp-how-col p's own max-width:22ch (desktop column-narrowing)
       constrains the box width but was never centered itself -- text-align:
       center on the column only centers the TEXT inside that narrow box,
       not the box, so the paragraph sat flush-left under the centered
       heading/icon above it. Centering the box itself here. */
    .aitp-how-col p{ margin-left: auto; margin-right: auto; }
    /* Client report (2026-11-03): stacked cards (What's Included, Top-Up
       Credits) were touching with no gap on mobile -- margin-bottom on the
       inner .aitp-feature-group/.aitp-credit-card wasn't enough on its own
       at this width (the featured Top-Up card's own negative-margin-free
       box-shadow/border made it look flush against its neighbours even
       with the margin technically present). Belt-and-braces: also margin
       the actual Bootstrap column wrapper, so there's real document-flow
       space between stacked cards regardless. */
    .aitp-features-row > [class*="col-"],
    .aitp-credit-row > [class*="col-"]{ margin-bottom: 24px; }
    .aitp-features-row > [class*="col-"]:last-child,
    .aitp-credit-row > [class*="col-"]:last-child{ margin-bottom: 0; }
}
@media (max-width: 420px){
    .aitp-hero-illustration{ width: 280px; }
    .aitp-hero-blob{ width: 220px; height: 220px; }
}