@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700;900&display=swap');
/* ============================================================
 * LAYER 0 — THEME HARDENING (HANDOVER §3)
 * Must stay ABOVE the component rules: several of these selectors
 * tie on specificity with component rules, so source order is what
 * lets the component win.
 * ============================================================ */

/* 2 — root pin. The theme reaches this block's own root through
   `.entry-content div` (0,1,1), which beats a plain `.ibmi-pp` (0,1,0).
   Tripling the class buys (0,3,0) and stops the cascade at the door.
   font-weight is load-bearing: without it a theme's 300 leaks into
   every descendant and changes line wrapping. */
.ibmi-pp.ibmi-pp.ibmi-pp{
  font-size:16px !important; font-weight:400 !important; line-height:1.55 !important;
  letter-spacing:normal !important; word-spacing:normal !important; text-indent:0 !important;
  text-transform:none !important; font-style:normal !important; text-align:start !important;
}

/* 2b — universal box + inherited-typography reset. A theme that sprays
   `.entry-content *` reaches elements no hand-written list covers (svg,
   picture, source, the icon <i>s). At (0,1,0) this loses to every
   component rule, which carry .ibmi-pp + their own class. font-size is
   deliberately absent: it is handled per element below, so nothing that
   relies on a UA size (small, headings) is flattened. */
.ibmi-pp *{
  margin:0 !important; padding:0 !important;
  line-height:inherit !important; letter-spacing:inherit !important;
  font-weight:inherit !important; font-style:inherit !important;
  text-transform:inherit !important; word-spacing:normal !important;
  text-indent:0 !important;
}

/* 3 — element normaliser for inheritable typography AND for the box
   properties a theme sprays over `*`. Every one of these selectors is
   (0,1,1); every component rule carries the `.ibmi-pp` prefix plus its
   own class, so it is (0,2,x) or higher and always wins. That is what
   makes a blanket !important safe here.
   font-weight has to be in the list — a theme's 300 otherwise reaches
   every descendant and changes line wrapping — so <b>/<strong>, which
   relied on the UA default, are pinned back to 700 right after. */
.ibmi-pp p,.ibmi-pp span,.ibmi-pp small,.ibmi-pp b,.ibmi-pp strong,
.ibmi-pp em,.ibmi-pp i,.ibmi-pp a,.ibmi-pp li,.ibmi-pp ul,.ibmi-pp ol,
.ibmi-pp div,.ibmi-pp section,.ibmi-pp article,.ibmi-pp header,.ibmi-pp footer,
.ibmi-pp nav,.ibmi-pp figure,.ibmi-pp label,.ibmi-pp picture,.ibmi-pp aside,
.ibmi-pp s,.ibmi-pp u,.ibmi-pp img,.ibmi-pp table,.ibmi-pp br,.ibmi-pp source,.ibmi-pp hr,
.ibmi-pp h1,.ibmi-pp h2,.ibmi-pp h3,.ibmi-pp h4,.ibmi-pp h5,.ibmi-pp button{
  font-size:inherit !important; line-height:inherit !important; font-weight:inherit !important;
  letter-spacing:inherit !important; text-transform:inherit !important;
  font-style:inherit !important; word-spacing:normal !important; text-indent:0 !important;
  margin:0 !important; padding:0 !important;
}
.ibmi-pp b,.ibmi-pp strong{ font-weight:700 !important; }
.ibmi-pp em,.ibmi-pp i{ font-style:italic !important; }
.ibmi-pp s{ text-decoration:line-through !important; }
.ibmi-pp u{ text-decoration:underline !important; }
.ibmi-pp ul,.ibmi-pp ol{ list-style:none !important; }

/* the theme restyles <button> globally — radius, padding, alignment and
   text-transform all leak. Neutralise the element once; every button in
   the block re-declares what it needs at higher specificity. */
.ibmi-pp button{
  -webkit-appearance:none !important; appearance:none !important;
  font-family:inherit !important; text-shadow:none !important;
  text-decoration:none !important; float:none !important;
}
/* Box properties are restricted to buttons WITHOUT a class. Every styled
   control in this block carries `.ibmi-pp` plus its own class, i.e.
   (0,2,0), which already beats a theme's `.entry-content button` (0,1,1)
   on specificity — so they need no help, and an !important reset here
   would instead flatten them (it collapsed .pp-modhead from 606px to
   270px and turned .pp-curtoggle black before this was scoped). */
.ibmi-pp button:not([class]){
  color:inherit !important; background:none !important; border:0 !important;
  border-radius:0 !important; width:auto !important; min-width:0 !important;
  height:auto !important; max-height:none !important; text-align:left !important;
}
/* display must NOT be !important here: several images carry
   onerror="this.style.display='none'" (flags, press logos, the
   certificate scan) and an !important rule outranks that inline style,
   which turns a 404 into a visible broken-image icon. */
/* Classed controls that never declared a width or a radius of their own.
   Specificity protects everything they DO declare, but an undeclared
   property still falls through to the theme — a `button{width:100%}`
   stretched .pp-curtoggle across the whole bar and squeezed the
   certificate ID field to zero. */
.ibmi-pp .pp-curtoggle,.ibmi-pp .vbtn{ width:auto !important; }
.ibmi-pp .pp-modhead,.ibmi-pp .pp-faqq{ border-radius:0 !important; }

.ibmi-pp img{ display:block; max-width:100% !important;
  min-width:0 !important; border:0 !important; }
.ibmi-pp svg{ max-width:none !important; }
.ibmi-pp a{ text-decoration:none !important; box-shadow:none !important; }
.ibmi-pp table,.ibmi-pp s{ font-size:inherit !important; }
/* ============================================================
 * IDMI product pages v2 — solid surfaces, no glass.
 * Scope: everything under .ibmi-pp — cannot leak into the theme.
 * Mobile-first: base styles = phone; min-width MQs at 720 / 1000.
 * ============================================================ */

.ibmi-pp{
  /* tokens mirror the homepage build exactly (opaque, blur-free) */
  --ink:#0D0F11; --ink-mid:#2B333A; --ink-soft:#49535C; --ink-faint:#6B7280;
  --paper:#EDF5FA; --card:#FFFFFF; --tint:#DCEEF9;
  --brand:#0088CC; --brand-deep:#006DA3; --brand-soft:#C9E8F7;
  --line:#CBDFEB; --line-soft:#DEEBF3;
  --green:#00B67A; --gold:#FFCC00; --strike:#98A1A8;
  --band:radial-gradient(70% 90% at 6% -6%,rgba(37,182,222,.30) 0%,rgba(37,182,222,0) 58%),linear-gradient(112deg,#04365A 0%,#075E93 58%,#0088CC 100%);
  --grad:linear-gradient(95deg,#0088CC,#25B6DE);
  --card-fill:linear-gradient(150deg,#FFFFFF 0%,#F8FBFE 55%,#F3F9FD 100%);
  --shadow:inset 0 1px 1px rgba(255,255,255,1),0 1px 2px rgba(9,78,128,.07),0 16px 40px -18px rgba(9,78,128,.25);
  --radius:18px;
  background:var(--paper); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
  line-height:1.55 !important; -webkit-font-smoothing:antialiased;
}
.ibmi-pp, .ibmi-pp *{ box-sizing:border-box; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important; }
.ibmi-pp a{ color:inherit; text-decoration:none !important; }
.ibmi-pp img{ display:block; max-width:100%; height:auto; }
.ibmi-pp :focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
.ibmi-pp .pp-wrap{ max-width:1104px; margin:0 auto !important; padding:0 20px !important; }
.ibmi-pp h1,.ibmi-pp h2,.ibmi-pp h3{ margin:0 !important; color:var(--ink); letter-spacing:-.025em !important; }
.ibmi-pp h2{ font-size:clamp(26px,3.4vw,36px) !important; font-weight:700 !important; line-height:1.12 !important; }
.ibmi-pp h3{ font-size:17px !important; font-weight:700 !important; line-height:1.3 !important; }

.ibmi-pp .pp-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px !important; font-weight:600 !important; letter-spacing:.16em !important; line-height:1 !important;
  text-transform:uppercase !important; color:var(--brand-deep); margin:0 0 14px !important;
  padding:8px 15px !important; border-radius:999px;
  background:linear-gradient(150deg,rgba(255,255,255,.96) 0%,rgba(246,251,255,.92) 100%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 1px rgba(255,255,255,1),0 1px 2px rgba(9,78,128,.08);
}
.ibmi-pp .pp-eyebrow.on-band{
  color:#9FE3F5; background:rgba(9,36,58,.38);
  border-color:rgba(255,255,255,.18); box-shadow:none;
}
.ibmi-pp .pp-sechead{ margin-bottom:26px !important; }
.ibmi-pp .pp-sechead.pp-prev-head{ margin-bottom:31px !important; }  /* a touch more breathing room under "Learn your way" */
/* desktop: more air under the centered section headlines (certificate section and everything below it) */
@media (min-width:768px){ .ibmi-pp .pp-sechead.center{ margin-bottom:44px !important; } }
.ibmi-pp .pp-sechead p.lede{ margin:12px 0 0 !important; max-width:60ch; color:var(--ink-soft); font-size:15.5px !important; }
.ibmi-pp .pp-sechead.center p.lede{ margin-left:auto !important; margin-right:auto !important; } /* center the subline under centered headlines */
.ibmi-pp .center{ text-align:center !important; }
.ibmi-pp .center p.lede{ margin-left:auto !important; margin-right:auto !important; }

/* buttons — opaque brand gradient, no blur */
.ibmi-pp .ibtn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:15px !important; font-weight:600 !important; line-height:1 !important; border-radius:12px;
  padding:15px 26px !important; border:0; cursor:pointer; white-space:nowrap;
  min-height:48px; text-decoration:none !important;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ibmi-pp .ibtn-primary{
  background:linear-gradient(150deg,#48C8EC 0%,#0894D5 48%,#0074B0 100%);
  color:#fff !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.70),inset 0 10px 18px -10px rgba(255,255,255,.35),
    0 2px 6px rgba(0,110,170,.28),0 12px 24px -10px rgba(0,110,170,.5);
}
.ibmi-pp .ibtn-primary:hover{ transform:translateY(-1px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.70),inset 0 10px 18px -10px rgba(255,255,255,.35),
    0 3px 8px rgba(0,110,170,.3),0 16px 30px -10px rgba(0,110,170,.55); }
.ibmi-pp .ibtn-ghost{
  background:var(--card); color:var(--brand-deep) !important;
  border:1px solid var(--line); box-shadow:0 1px 2px rgba(9,78,128,.06);
}
.ibmi-pp .ibtn-ghost:hover{ border-color:var(--brand); }
.ibmi-pp .ibtn .arrow{ font-size:16px !important; }

/* generic card */
.ibmi-pp .pp-cardbase{
  background:var(--card-fill); border:1px solid rgba(255,255,255,.75);
  border-radius:var(--radius); box-shadow:var(--shadow);
}

/* section rhythm */
.ibmi-pp .pp-sec{ padding:56px 0 !important; position:relative; }
.ibmi-pp .pp-sec-tint{ padding:56px 0 !important; position:relative;
  background:radial-gradient(72% 130px at 50% 0%,#fff 0%,rgba(255,255,255,0) 100%),
             linear-gradient(180deg,#FBFDFF 0%,var(--tint) 60%,var(--paper) 100%);
  box-shadow:0 4px 12px -4px rgba(9,78,128,.14);
}
.ibmi-pp .pp-sec-tint::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,rgba(223,228,232,0) 0%,var(--line) 14%,var(--line) 86%,rgba(223,228,232,0) 100%); }
@media (min-width:720px){
  .ibmi-pp .pp-sec,.ibmi-pp .pp-sec-tint{ padding:66px 0 !important; }
}

/* ---------- TOP ZONE: hero band + content + sticky buy rail ----------
   Udemy-style: the buy card starts level with the hero copy at the very
   top of the page (grid row 1, column 2), overlapping the dark band and
   extending past it. Band height follows the hero copy exactly via a
   ResizeObserver setting --band-h; 620px is the no-JS fallback. */
.ibmi-pp .pp-topzone{ position:relative; padding-bottom:56px !important; }
.ibmi-pp .pp-band{
  position:absolute; top:0; left:0; right:0; height:var(--band-h,620px);
  z-index:0; overflow:hidden; background:var(--band); pointer-events:none;
  box-shadow:0 18px 34px -16px rgba(6,38,68,.45);  /* soft shadow under the hero section */
}
.ibmi-pp .pp-band picture{ display:block; width:100%; height:100%; }
.ibmi-pp .pp-band img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; opacity:1; }
/* no overlay/filter on the skyline image &mdash; the hero copy sits in its own readable tile instead */
@media (min-width:768px){
  .ibmi-pp .pp-herocopy h1{ text-shadow:0 1px 18px rgba(3,24,44,.45); }
  .ibmi-pp .pp-herocopy .pp-lede{ text-shadow:0 1px 12px rgba(3,24,44,.35); }
}
.ibmi-pp .pp-bandbg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ibmi-pp .pp-bandbg picture{ display:block; width:100%; height:100%; }
.ibmi-pp .pp-bandbg img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
.ibmi-pp .pp-bandbg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(4,54,90,.30) 0%,rgba(4,54,90,.55) 100%); }
.ibmi-pp .pp-final .pp-wrap{ position:relative; z-index:2; }
.ibmi-pp .pp-herocopy{ color:#fff; }
.ibmi-pp .pp-crumbs{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; font-size:13px !important; color:rgba(255,255,255,.9); margin-bottom:16px !important; text-shadow:0 1px 10px rgba(3,20,38,.6); }
.ibmi-pp .pp-crumbs a:hover{ color:#fff; text-decoration:underline !important; }
.ibmi-pp .pp-crumbs span{ color:rgba(255,255,255,.45); }
/* hero eyebrow line (like the homepage "Online courses & certificates" line) &mdash; no pill */
.ibmi-pp .pp-hero-ey{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 14px !important;
  font-size:12.5px !important; font-weight:700 !important; letter-spacing:.14em !important; line-height:1 !important;
  text-transform:uppercase !important; color:var(--brand-deep); transition:opacity .15s ease;
}
.ibmi-pp .pp-hero-ey .ey-arw{ width:14px; height:14px; transform:translateY(-1px); }
.ibmi-pp a.pp-hero-ey:hover{ opacity:.78; }
.ibmi-pp .pp-herocopy h1{ color:#fff; font-size:clamp(31px,4.3vw,48px) !important; font-weight:800 !important; line-height:1.13 !important; max-width:24ch; }
.ibmi-pp .h1-dbr{ display:none; }
@media (min-width:768px){ .ibmi-pp .h1-dbr{ display:inline; } }  /* force a balanced two-line title on desktop */
.ibmi-pp .pp-ratingrow{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px !important; font-size:15px !important; line-height:1 !important; color:#fff; }
.ibmi-pp .pp-ratingrow .stars{ color:var(--gold); display:inline-flex; align-items:center; gap:1px; }
.ibmi-pp .pp-ratingrow .stars svg{ width:16px; height:16px; }
.ibmi-pp .pp-ratingrow b{ color:#fff; font-size:15px !important; font-weight:800 !important; }
.ibmi-pp .pp-ratingrow .rr-link{ color:#fff; font-size:15px !important; }
@media (min-width:768px){
  .ibmi-pp .pp-ratingrow{ font-size:15px !important; gap:8px; margin-top:16px !important; }  /* match the description text size */
  .ibmi-pp .pp-ratingrow b{ font-size:15px !important; }
  .ibmi-pp .pp-ratingrow .rr-link{ font-size:15px !important; }
  .ibmi-pp .pp-ratingrow .stars svg{ width:16px; height:16px; }
}
.ibmi-pp .pp-lede{ margin:16px 0 0 !important; max-width:62ch; font-size:16px !important; line-height:1.6 !important; color:rgba(255,255,255,.88); }
.ibmi-pp .lede-m{ display:none; }
@media (max-width:719px){ .ibmi-pp .lede-d{ display:none; } .ibmi-pp .lede-m{ display:inline; } }
.ibmi-pp .pp-heropills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px !important; }
@media (max-width:767px){ .ibmi-pp .pp-heropills{ display:none; } } /* facts repeat in the buy card directly below */
.ibmi-pp .pp-heropills span{
  font-size:12.5px !important; font-weight:600 !important; color:var(--ink-mid);
  background:linear-gradient(150deg,#FFFFFF 0%,#F3F9FD 100%);
  border:1px solid rgba(255,255,255,.85); border-radius:999px; padding:7px 13px !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,1),0 1px 3px rgba(9,40,64,.22);
}
.ibmi-pp .pp-enrolled{
  margin-top:16px !important; font-size:16px !important; line-height:1.6 !important; color:var(--ink-mid);
  background:var(--card-fill); border:1px solid var(--line); border-radius:12px; padding:17px 16px 12px !important; max-width:560px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,1),0 1px 2px rgba(9,78,128,.07),0 12px 26px -14px rgba(9,78,128,.28);
}
.ibmi-pp .pp-enrolled a{ font-weight:700 !important; color:var(--brand-deep); text-decoration:underline !important; }

/* ---------- TOP-ZONE GRID ---------- */
.ibmi-pp .pp-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:30px; padding-top:28px !important; }
.ibmi-pp .pp-grid > *{ min-width:0; } /* let 1fr tracks shrink so the scrollable jump-nav/pills don't widen the page */
.ibmi-pp .pp-main{ min-width:0; }
.ibmi-pp .pp-main > * + *{ margin-top:44px !important; }
@media (min-width:768px){
  .ibmi-pp .pp-topzone{ padding-bottom:80px !important; }
  .ibmi-pp .pp-grid{ grid-template-columns:minmax(0,1fr) clamp(318px,33vw,412px); column-gap:clamp(26px,3.2vw,44px); row-gap:70px; padding-top:72px !important; align-items:start; }
  /* liquid-glass tile — same treatment as the homepage hero "tile-copy":
     translucent glass panel + refractive rim + one-time specular sheen + content rise-in.
     Panel is a dark blue glass so the white text stays readable over the bright skyline. */
  .ibmi-pp .pp-herocopy{ grid-column:1; grid-row:1; align-self:start; position:relative; overflow:hidden; margin-bottom:15px !important;
    background:linear-gradient(135deg,rgba(11,34,60,.50) 0%,rgba(8,27,48,.40) 40%,rgba(8,25,45,.38) 62%,rgba(11,34,60,.52) 100%);
    -webkit-backdrop-filter:blur(20px) saturate(1.7) brightness(1.05); backdrop-filter:blur(20px) saturate(1.7) brightness(1.05);
    border:1px solid rgba(255,255,255,.16); border-radius:22px;
    padding:32px 34px 34px !important;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.30),inset 0 -1px 1px rgba(255,255,255,.10),inset 0 18px 30px -18px rgba(255,255,255,.12),0 30px 60px -26px rgba(2,18,36,.6); }
  /* refractive rim (bright gradient border) */
  .ibmi-pp .pp-herocopy::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px !important; pointer-events:none; z-index:1;
    background:linear-gradient(125deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,.10) 28%,rgba(255,255,255,.03) 52%,rgba(255,255,255,.12) 74%,rgba(255,255,255,.42) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; }
  /* one-time specular sheen sweep on load */
  .ibmi-pp .pp-herocopy::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
    background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.07) 46%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.07) 54%,transparent 68%);
    background-size:280% 100%; background-position:135% 0;
    animation:pp-lqsheen 2.2s ease-in-out 1.2s 1 both; }
  /* content rises + fades in, staggered */
  .ibmi-pp .pp-herocopy > *{ position:relative; z-index:2; animation:pp-heroRise .6s cubic-bezier(.22,.75,.35,1) both; }
  .ibmi-pp .pp-herocopy > :nth-child(2){ animation-delay:.07s; }
  .ibmi-pp .pp-herocopy > :nth-child(3){ animation-delay:.14s; }
  .ibmi-pp .pp-herocopy > :nth-child(4){ animation-delay:.21s; }
  .ibmi-pp .pp-herocopy > :nth-child(5){ animation-delay:.28s; }
  .ibmi-pp .pp-herocopy .pp-hero-ey{ color:#9FE3F5; }  /* light cyan eyebrow, like the homepage dark hero */
  /* Sticky right rail. It naturally releases at the bottom of the grid — i.e. right
     before the certificate section, which lives outside this grid — so the card
     follows the reader through the whole top zone (skills → curriculum → preview)
     then stops. `top` is a var so JS can park it below the live site's sticky menu
     (see the sticky-rail script); 24px is the standalone fallback. The same script
     also un-clips any WPBakery/theme ancestor whose overflow would otherwise kill
     position:sticky on the live page. */
  .ibmi-pp .pp-aside{ grid-column:2; grid-row:1 / span 2; align-self:start;
    position:sticky; top:var(--pp-sticky-top,24px); }
  .ibmi-pp .pp-main{ grid-column:1; grid-row:2; }
  .ibmi-pp .pp-main > * + *{ margin-top:60px !important; }
}
/* liquid-glass hero tile animations (disabled under prefers-reduced-motion by the global guard) */
@keyframes pp-lqsheen{ from{ background-position:135% 0; } to{ background-position:-45% 0; } }
@keyframes pp-heroRise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ---------- MOBILE HERO TILE (image + copy + buy body as one card) ---------- */
/* Mobile: .pp-herostack is a single white card. Desktop: display:contents so
   its children (herocopy / aside) place directly into the two-column grid. */
.ibmi-pp .pp-herostack{ display:block; position:relative; background:var(--card-fill);
  border:1px solid rgba(255,255,255,.75); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; }
.ibmi-pp .pp-tile-hr{ border:0; height:1px; background:var(--line-soft); margin:6px 18px 0 !important; }
.ibmi-pp .pp-crumbs .crumb-back{ display:inline-flex; align-items:center; gap:5px; font-weight:600 !important; }
.ibmi-pp .pp-crumbs .crumb-full{ display:none; }   /* just the "← All Courses" back link on every breakpoint */
.ibmi-pp .pp-crumbs .crumb-back svg{ width:15px; height:15px; }
@media (min-width:768px){ .ibmi-pp .pp-crumbs{ display:none; } }  /* desktop/tablet: back link lives in the tile eyebrow instead */
@media (max-width:767px){
  .ibmi-pp .pp-band{ display:none; }                          /* no skyline on mobile */
  /* modern, energetic (but light) hero backdrop — soft colour blobs over a vertical base
     that reaches the paper colour BEFORE the cap, so there's no seam line (cheap gradients, no blur) */
  .ibmi-pp .pp-topzone{ padding-top:16px !important;
    background:
      radial-gradient(90% 54% at 94% -12%, rgba(46,146,233,.60) 0%, rgba(46,146,233,0) 56%),
      radial-gradient(74% 48% at -4% -8%, rgba(122,132,230,.28) 0%, rgba(122,132,230,0) 58%),
      radial-gradient(66% 44% at 42% -16%, rgba(40,200,214,.32) 0%, rgba(40,200,214,0) 54%),
      radial-gradient(54% 42% at 68% 12%, rgba(108,170,240,.28) 0%, rgba(108,170,240,0) 55%),
      linear-gradient(180deg,#d6e4f6 0%,#e4ebf7 42%,var(--paper) 64%,var(--paper) 100%);
    background-repeat:no-repeat; background-position:top center; background-size:100% 450px; background-color:var(--paper); }
  .ibmi-pp .pp-grid{ padding-top:4px !important; }
  /* simple "All courses" back link above the card (nav, not part of the course tile) */
  .ibmi-pp .pp-crumbs{ display:flex; margin:0 0 8px !important; }
  .ibmi-pp .pp-crumbs .crumb-full{ display:none; }
  .ibmi-pp .pp-crumbs .crumb-back{ display:inline-flex; color:var(--brand-deep); text-shadow:none; }
  .ibmi-pp .pp-herostack .pp-heromedia{ box-shadow:none; aspect-ratio:auto; height:clamp(240px,64vw,300px); width:100%; }  /* explicit height + higher specificity (base aspect-ratio was over-widening the image) */
  .ibmi-pp .pp-herocopy{ position:relative; padding:14px 18px 14px !important; }
  .ibmi-pp .pp-main{ margin-top:6px !important; }   /* breathing room above "Skills you will learn" on mobile */
  .ibmi-pp .pp-herocopy h1{ color:var(--ink); }
  .ibmi-pp .pp-lede{ color:var(--ink-mid); }
  .ibmi-pp .pp-ratingrow{ color:var(--ink-soft); }
  .ibmi-pp .pp-ratingrow b{ color:var(--ink); }
  .ibmi-pp .pp-ratingrow .rr-link{ color:var(--ink-soft); text-decoration-color:rgba(9,78,128,.35); }
  .ibmi-pp .pp-ratingrow:hover .rr-link{ text-decoration-color:var(--brand-deep); }
  .ibmi-pp .pp-herostack .pp-buycard{ border:0; box-shadow:none; border-radius:0; background:transparent; }

  /* --- mobile hero polish --- */
  /* TITLE ON IMAGE: overlay eyebrow + title + rating on the course image.
     .pp-herohead is pulled up over the image bottom (bottom:100% of the copy block),
     so the real <h1> stays in the DOM — no duplication, desktop untouched. */
  .ibmi-pp .pp-herohead{ position:absolute; left:0; right:0; bottom:100%; z-index:2; padding:0 20px 18px !important; }
  .ibmi-pp .pp-herohead .pp-hero-ey{ display:none; }        /* eyebrow dropped on mobile */
  .ibmi-pp .pp-herohead .pp-ratingrow{ display:none; }      /* rating shown as a pill top-right instead */
  .ibmi-pp .pp-herohead h1{ color:#fff; font-size:clamp(22px,6.3vw,26px) !important; line-height:1.14 !important;
    text-shadow:0 2px 18px rgba(2,14,30,.65),0 1px 3px rgba(2,14,30,.55); }
  /* back filter on the image — subtle dark top, clears in the middle, strong dark bottom for the title
     (cheap gradient, no blur). Extra ancestor class raises specificity over the base ::after sheen. */
  .ibmi-pp .pp-herostack .pp-heromedia::after{ background:linear-gradient(180deg,rgba(3,16,32,.40) 0%,rgba(3,16,32,.12) 16%,rgba(3,16,32,0) 34%,rgba(3,16,32,.16) 56%,rgba(2,12,26,.60) 80%,rgba(2,11,24,.92) 100%); }
  /* rating pill, top-right, like the course cards (solid — no backdrop-filter) */
  .ibmi-pp .hm-rate{ position:absolute; top:12px; right:12px; z-index:3; display:inline-flex; align-items:center; gap:4px;
    padding:5px 11px 5px 9px !important; border-radius:999px; font-size:13px !important; font-weight:800 !important; color:var(--ink);
    background:linear-gradient(150deg,#ffffff 0%,#f3f9fd 100%); border:1px solid rgba(255,255,255,.85);
    box-shadow:0 2px 10px rgba(9,50,90,.28); }
  .ibmi-pp .hm-rate .star{ width:14px; height:14px; color:var(--gold); }
  /* punchy one-line description sits tight so the buy box rises */
  .ibmi-pp .pp-herocopy .pp-lede{ margin-top:14px !important; font-size:15.5px !important; }
}
@media (min-width:768px){
  .ibmi-pp .pp-herostack{ display:contents; }
  .ibmi-pp .pp-tile-hr{ display:none; }
}

/* ---------- BUY CARD ---------- */
.ibmi-pp .pp-buycard{ overflow:hidden; }
.ibmi-pp .pp-media{ position:relative; aspect-ratio:1000/667; background:var(--tint); border-bottom:1px solid var(--line); }
.ibmi-pp .pp-media img{ width:100%; height:100%; object-fit:cover; }
/* mobile-first hero image — its own grid item, sits above the title on phones */
.ibmi-pp .pp-heromedia{ position:relative; aspect-ratio:1000/667; background:var(--tint);
  border-radius:var(--radius) var(--radius) 0 0; overflow:hidden; box-shadow:var(--shadow); }
.ibmi-pp .pp-heromedia img{ width:100%; height:100%; object-fit:cover; }
/* subtle brand gradient sheen over the course image */
.ibmi-pp .pp-media::after, .ibmi-pp .pp-heromedia::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(150deg, rgba(0,136,204,.14) 0%, rgba(4,54,90,.02) 46%, rgba(4,54,90,.22) 100%); }
@media (min-width:768px){ .ibmi-pp .pp-heromedia{ display:none; } }
@media (max-width:767px){ .ibmi-pp .pp-media{ display:none; } } /* phones use the hero image above the title instead */
.ibmi-pp .pp-buybody{ padding:20px !important; }
@media (max-width:767px){ .ibmi-pp .pp-buybody{ padding:18px 16px !important; } }
.ibmi-pp .pp-pricerow{ display:flex; align-items:center; gap:10px; }
.ibmi-pp .pp-price-orig{ font-size:15px !important; color:var(--strike); text-decoration:line-through !important; }
.ibmi-pp .pp-price{ font-size:32px !important; font-weight:800 !important; letter-spacing:-.02em !important; line-height:1 !important; }
.ibmi-pp .pp-off{
  font-size:15px !important; font-weight:700 !important; color:#067A55;
  background:#E3F5EC; border-radius:999px; padding:3px 10px !important; line-height:1.15 !important;
}
.ibmi-pp .pp-buycta{ margin-top:16px !important; }
.ibmi-pp .pp-buycta .ibtn{ width:100%; font-size:16px !important; padding:16px 24px !important; }
.ibmi-pp .pp-secure{
  display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap;
  margin-top:11px !important; font-size:clamp(10px,2.9vw,12px) !important; color:var(--ink-faint); text-align:center !important;
}
.ibmi-pp .pp-secure svg{ width:13px; height:13px; flex:none; color:var(--green); }
.ibmi-pp .pp-facts{
  display:grid; grid-template-columns:1fr 1fr; gap:14px 12px;
  margin-top:18px !important; padding-top:18px !important; border-top:1px solid var(--line-soft);
}
.ibmi-pp .pp-fact{ display:flex; gap:9px; align-items:center; min-width:0; }
.ibmi-pp .pp-fact .fi{ flex:none; width:33px; height:33px; display:flex; align-items:center; justify-content:center; color:var(--brand-deep); background:var(--tint); border-radius:9px; }
.ibmi-pp .pp-fact .fi svg{ width:20px; height:20px; display:block; }
.ibmi-pp .pp-fact .ft{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ibmi-pp .pp-fact .ft b{ font-size:13.5px !important; line-height:1.2 !important; white-space:nowrap; }
.ibmi-pp .pp-fact .ft small{ font-size:12px !important; color:var(--ink-soft); line-height:1.25 !important; white-space:nowrap; }
.ibmi-pp .pp-fact .ft small a{ color:var(--brand-deep); text-decoration:underline !important; }
.ibmi-pp .pp-fact .ft small a.ft-tr{ text-decoration:none !important; font-weight:600 !important; white-space:nowrap; }
.ibmi-pp .pp-fact .ft small a.ft-tr .tr-n{ text-decoration:none !important; }
@media (max-width:1023px){
  .ibmi-pp .pp-fact .ft small a.ft-tr .tr-d{ display:none; }  /* "transl." on desktop only; mobile + tablet show the globe */
}
@media (min-width:1024px){
  .ibmi-pp .pp-fact .ft small a.ft-tr svg{ display:none; }    /* globe on mobile + tablet; desktop says "transl." */
}
.ibmi-pp .pp-fact .ft small a.ft-tr svg{ width:15px; height:15px; vertical-align:-3px; }
.ibmi-pp .pp-fact .ft small a.ft-tr:hover svg{ color:var(--brand); }
@media (max-width:1023px){ .ibmi-pp .sec-otp{ display:none; } }  /* drop "one-time payment" from the secure line on mobile + tablet */
.ibmi-pp .pp-programs-note{
  margin-top:16px !important; padding-top:14px !important; border-top:1px solid var(--line-soft);
  font-size:13px !important; color:var(--ink-soft); line-height:1.5 !important;
}
.ibmi-pp .pp-programs-note a{ color:var(--brand-deep); font-weight:600 !important; text-decoration:underline !important; }

/* ---------- JUMP NAV + anchors ---------- */
.ibmi-pp [id]{ scroll-margin-top:18px; }
.ibmi-pp .pp-jump{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding:2px !important; margin:-2px !important; -webkit-overflow-scrolling:touch; }
.ibmi-pp .pp-jump::-webkit-scrollbar{ display:none; }
.ibmi-pp .pp-jump a{
  flex:none; font-size:13px !important; font-weight:600 !important; color:var(--brand-deep);
  background:linear-gradient(150deg,rgba(255,255,255,.96) 0%,rgba(246,251,255,.92) 100%);
  border:1px solid rgba(255,255,255,.85); border-radius:999px; padding:9px 15px !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,1),0 1px 2px rgba(9,78,128,.08);
  transition:transform .15s ease, color .15s ease; white-space:nowrap;
}
.ibmi-pp .pp-jump a:hover{ transform:translateY(-1px); color:var(--brand); }
@media (max-width:719px){
  .ibmi-pp .pp-jump{ display:none; } /* on-page jump pills are desktop-only */
}

/* ---------- SKILLS (numbered, accent-coloured, 2x2) ---------- */
.ibmi-pp #overview{ padding-top:36px !important; }  /* breathing room above "Skills you will learn" */
@media (max-width:767px){ .ibmi-pp #overview{ padding-top:4px !important; } }  /* much tighter on mobile */
.ibmi-pp .pp-skillgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (min-width:720px){ .ibmi-pp .pp-skillgrid{ gap:18px; } }
.ibmi-pp .pp-skill{ position:relative; overflow:hidden; padding:18px 16px !important;
  transition:transform .18s ease, box-shadow .18s ease; }
.ibmi-pp .pp-skill:hover{ transform:translateY(-3px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,1),0 2px 4px rgba(9,78,128,.08),0 20px 38px -16px rgba(9,78,128,.32); }
.ibmi-pp .pp-skill .sk-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px !important; }
.ibmi-pp .pp-skill .sk-num{
  flex:none; pointer-events:none;
  font-size:40px !important; font-weight:800 !important; letter-spacing:-.04em !important; line-height:1 !important;
  color:color-mix(in srgb, var(--sc,#0088CC) 18%, transparent);
  transition:color .2s ease;
}
.ibmi-pp .pp-skill:hover .sk-num{ color:color-mix(in srgb, var(--sc,#0088CC) 32%, transparent); }
.ibmi-pp .pp-skill .sk-icn{
  flex:none; width:40px; height:40px; display:grid; place-items:center;
  color:var(--sc,#0088CC); background:color-mix(in srgb, var(--sc,#0088CC) 12%, #fff); border-radius:11px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,1);
  transition:transform .18s ease;
}
.ibmi-pp .pp-skill:hover .sk-icn{ transform:scale(1.07); }
.ibmi-pp .pp-skill .sk-icn svg{ width:21px; height:21px; }
.ibmi-pp .pp-skill h3{ font-size:15.5px !important; letter-spacing:-.01em !important; }
.ibmi-pp .pp-skill p{ margin:6px 0 0 !important; font-size:13.5px !important; line-height:1.5 !important; color:var(--ink-soft); }
@media (max-width:719px){
  .ibmi-pp .pp-skill h3{ font-size:14.5px !important; }
  .ibmi-pp .pp-skill p{ font-size:13px !important; line-height:1.45 !important; }
}
@media (min-width:720px){
  .ibmi-pp .pp-skill{ padding:22px 20px !important; }
  .ibmi-pp .pp-skill .sk-num{ font-size:46px !important; }
  .ibmi-pp .pp-skill p{ font-size:14px !important; }
}

/* ---------- COURSE HIGHLIGHTS (checklist + tiles + read-more + pull-quote) ---------- */
.ibmi-pp .pp-hl-checks{ list-style:none !important; margin:0 0 22px !important; padding:0 !important; display:flex; flex-direction:column; gap:10px; }
.ibmi-pp .pp-hl-checks li{ display:flex; gap:10px; margin:0 !important; padding:0 !important; font-size:14.5px !important; line-height:1.55 !important; color:var(--ink-mid); }
.ibmi-pp .pp-hl-checks li::marker{ content:""; }
.ibmi-pp .pp-hl-checks li svg.tk-chk{ flex:none; width:19px; height:19px; color:var(--green); margin-top:2px !important; }
@media (min-width:720px){ .ibmi-pp .pp-hl-checks{ margin-bottom:24px !important; } .ibmi-pp .pp-hl-checks li{ font-size:15px !important; } }

.ibmi-pp .pp-hl-box{ position:relative; margin-top:9px !important; padding:26px 16px 18px !important; }
@media (min-width:720px){ .ibmi-pp .pp-hl-box{ padding:28px 18px 20px !important; } }
.ibmi-pp .pp-hl-box .pp-hl-checks{ margin:0 !important; padding:0 !important; }
.ibmi-pp .pp-hl-pill{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%); z-index:5;
  display:inline-flex; align-items:center; height:26px; padding:2px 15px 0 !important; white-space:nowrap;
  font-size:11.5px !important; font-weight:800 !important; letter-spacing:.12em !important; line-height:1 !important; text-transform:uppercase !important;
  color:var(--brand-deep); background:#FDFEFF; border:1px solid var(--line); border-radius:999px;
  box-shadow:0 1px 2px rgba(9,78,128,.08),0 6px 14px -8px rgba(9,78,128,.30);
}
.ibmi-pp .pp-hl-box .pp-hl-checks li svg.hl-chk{ flex:none; width:18px; height:18px; color:var(--brand); margin-top:1px !important; }

/* detailed description + shadowy divider read-more */
.ibmi-pp .pp-cdesc{ margin-top:26px !important; }
.ibmi-pp .pp-cdesc .pp-cdesc-lead,.ibmi-pp .pp-cdesc-rest p{ margin:0 0 12px !important; font-size:15px !important; line-height:1.65 !important; color:var(--ink-mid); }
.ibmi-pp .pp-cdesc-rest{ display:none; }
.ibmi-pp .pp-cdesc.is-open .pp-cdesc-rest{ display:block; }
.ibmi-pp .pp-cdesc-rest p:last-child{ margin-bottom:0 !important; }
.ibmi-pp .pp-cdesc-divide{ display:flex; align-items:center; gap:14px; margin-top:16px !important; }
.ibmi-pp .pp-cdesc-divide::before,.ibmi-pp .pp-cdesc-divide::after{ content:""; flex:1; height:1px;
  background:linear-gradient(90deg,rgba(203,223,235,0) 0%,var(--line) 22%,var(--line) 78%,rgba(203,223,235,0) 100%);
  box-shadow:0 1px 3px -1px rgba(9,78,128,.22); }
.ibmi-pp .pp-more{ flex:none; display:inline-flex !important; align-items:center; gap:7px; width:auto !important; min-width:0 !important; min-height:0 !important; height:auto !important; margin:0 !important;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important; font-size:13.5px !important; font-weight:700 !important; line-height:1 !important; letter-spacing:normal !important; text-transform:none !important; text-decoration:none !important; color:var(--brand-deep) !important;
  background:var(--card) !important; border:1px solid var(--line) !important; border-radius:999px !important; padding:9px 17px !important; cursor:pointer; -webkit-appearance:none !important; appearance:none !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,1),0 1px 2px rgba(9,78,128,.08),0 10px 22px -12px rgba(9,78,128,.34) !important;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.ibmi-pp .pp-more:hover,.ibmi-pp .pp-more:focus{ text-decoration:none !important; }
.ibmi-pp .pp-more:hover{ transform:translateY(-1px); border-color:var(--brand); }
.ibmi-pp .pp-more svg{ width:15px; height:15px; transition:transform .2s ease; }
.ibmi-pp .pp-cdesc.is-open .pp-more svg{ transform:rotate(180deg); }

/* employer-value pull-quote */
.ibmi-pp .pp-hl-text{ margin:26px 0 0 !important; font-size:15px !important; line-height:1.65 !important; color:var(--ink-mid); }
/* mobile: center these two section headlines but keep their intro text left-aligned */
@media (max-width:719px){ .ibmi-pp #pp-hl-h, .ibmi-pp #pp-chap-h{ text-align:center !important; } }
.ibmi-pp .pp-whybox{ position:relative; margin:30px 0 0 !important; padding:26px 18px 13px !important; }
@media (min-width:720px){ .ibmi-pp .pp-whybox{ padding:28px 20px 15px !important; } }
.ibmi-pp .pp-whystats{ list-style:none !important; margin:0 !important; padding:0 !important; display:flex; flex-direction:column; gap:14px; }
.ibmi-pp .pp-whystats li{ display:flex; align-items:center; gap:15px; }
.ibmi-pp .pp-whystats b{ flex:none; width:46px; font-size:19px !important; font-weight:800 !important; letter-spacing:-.02em !important; line-height:1 !important;
  background:linear-gradient(150deg,#48C8EC 0%,#0894D5 48%,#0074B0 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.ibmi-pp .pp-whystats span{ flex:1 1 auto; font-size:14px !important; line-height:1.4 !important; color:var(--ink-mid); }
@media (min-width:720px){ .ibmi-pp .pp-whystats span{ font-size:14.5px !important; } }
.ibmi-pp .pp-whystats cite{ flex:none; font-style:normal !important; font-size:10.5px !important; line-height:1.4 !important; color:var(--ink-faint); white-space:nowrap; text-align:right !important; }
.ibmi-pp .pp-whyfig{ display:flex; align-items:center; gap:14px; margin:0 !important; padding:0 !important; border:0; background:none; font-style:normal !important; quotes:none; }
.ibmi-pp .pp-whyfig::before,.ibmi-pp .pp-whyfig::after{ content:none; }
.ibmi-pp .pp-whyfig .wf-num{ flex:none; font-size:31px !important; font-weight:800 !important; letter-spacing:-.03em !important; line-height:1 !important;
  background:linear-gradient(150deg,#48C8EC 0%,#0894D5 48%,#0074B0 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.ibmi-pp .pp-whyfig .wf-body{ min-width:0; }
.ibmi-pp .pp-whyfig .wf-txt{ margin:0 !important; font-size:15px !important; line-height:1.65 !important; color:var(--ink-mid); font-style:normal !important; }
.ibmi-pp .pp-whyfig .wf-src{ display:block; margin-top:4px !important; font-style:normal !important; font-size:11.5px !important; color:var(--ink-faint); }
@media (min-width:720px){ .ibmi-pp .pp-whyfig .wf-num{ font-size:34px !important; } }
@media (max-width:479px){
  .ibmi-pp .pp-whyfig{ flex-direction:column; align-items:stretch; gap:8px; }
  .ibmi-pp .pp-whyfig .wf-num{ text-align:center !important; }
  .ibmi-pp .pp-whyfig .wf-src{ text-align:center !important; }
}

/* ---------- CHAPTERS ---------- */
.ibmi-pp .pp-chapmeta{ font-size:13.5px !important; font-weight:600 !important; color:var(--brand-deep); margin:0 !important; }
.ibmi-pp .pp-curbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0 14px !important; }
.ibmi-pp .pp-chaplist{ margin-top:20px !important; display:grid; grid-template-columns:1fr; gap:10px; counter-reset:chap; }
@media (min-width:720px){ .ibmi-pp .pp-chaplist{ grid-template-columns:1fr 1fr; gap:12px; } }
.ibmi-pp .pp-chap{ display:flex; gap:13px; padding:15px 16px !important; }
.ibmi-pp .pp-chap .ch-num{
  flex:none; width:32px; height:32px; display:grid; place-items:center;
  font-size:13px !important; font-weight:700 !important; color:var(--brand-deep);
  background:var(--tint); border-radius:10px;
}
.ibmi-pp .pp-chap b{ display:block; font-size:14.5px !important; }
.ibmi-pp .pp-chap p{ margin:3px 0 0 !important; font-size:13.5px !important; color:var(--ink-soft); line-height:1.45 !important; }
@media (max-width:719px){
  .ibmi-pp .pp-chaplist{ gap:8px; }
  .ibmi-pp .pp-chap{ padding:11px 14px !important; align-items:center; }
  .ibmi-pp .pp-chap p{ display:none; } /* titles-only index scans in seconds; detail lives in the lede + About section */
}

/* ---------- CURRICULUM ACCORDION ---------- */
.ibmi-pp .pp-curtoggle{
  flex:none;
  font-family:inherit !important; font-size:13px !important; font-weight:600 !important; color:var(--brand-deep);
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:9px 14px !important; min-height:40px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 1px 2px rgba(9,78,128,.06); transition:border-color .15s ease, transform .15s ease;
}
.ibmi-pp .pp-curtoggle:hover{ border-color:var(--brand); transform:translateY(-1px); }
.ibmi-pp .pp-curtoggle .pp-modchev{ width:15px; height:15px; }
.ibmi-pp .pp-curtoggle[aria-expanded="true"] .pp-modchev{ transform:rotate(180deg); }
.ibmi-pp .pp-acc{ display:grid; grid-template-columns:1fr; gap:10px; }
.ibmi-pp .pp-mod{ overflow:hidden; }
.ibmi-pp .pp-modhead{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left !important;
  background:none; border:0; cursor:pointer; font-family:inherit !important; color:var(--ink);
  padding:15px 16px !important; min-height:56px;
}
.ibmi-pp .pp-modnum{
  flex:none; width:34px; height:34px; display:grid; place-items:center;
  font-size:13px !important; font-weight:800 !important; color:var(--brand-deep);
  background:var(--tint); border-radius:10px;
}
.ibmi-pp .pp-modmain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.ibmi-pp .pp-modtitle{ font-size:15.5px !important; font-weight:700 !important; line-height:1.22 !important; letter-spacing:-.01em !important;
  display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ibmi-pp .pp-modmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:12.5px !important; color:var(--ink-soft); }
.ibmi-pp .pp-modmeta > span:first-child{ white-space:nowrap; }
.ibmi-pp .pp-modtag{
  display:inline-flex; align-items:center; white-space:nowrap; font-size:11px !important; font-weight:600 !important; letter-spacing:.01em !important;
  color:var(--ink-faint); background:transparent; border:1px solid var(--line-soft); border-radius:999px; padding:2px 9px !important;
}
@media (max-width:420px){
  .ibmi-pp .pp-modmeta{ gap:5px 6px; }
  .ibmi-pp .pp-modtag{ font-size:10.5px !important; padding:3px 8px !important; letter-spacing:0 !important; }
  .ibmi-pp .pp-modhead{ gap:11px; padding-left:14px !important; padding-right:12px !important; }
}
.ibmi-pp .pp-modchev{ flex:none; width:18px; height:18px; color:var(--brand-deep); transition:transform .25s ease; }
.ibmi-pp .pp-modhead[aria-expanded="true"] .pp-modchev{ transform:rotate(180deg); }
.ibmi-pp .pp-modbody{ display:none; padding:0 16px 6px !important; }
.ibmi-pp .pp-modhead[aria-expanded="true"] + .pp-modbody{ display:block; }
.ibmi-pp .pp-lessons{ list-style:none !important; margin:0 !important; padding:0 0 8px !important; display:flex; flex-direction:column; gap:0; }
.ibmi-pp .pp-lessons li{ display:flex; gap:11px; align-items:flex-start; padding:10px 2px !important; font-size:14px !important; line-height:1.45 !important; color:var(--ink-mid); border-top:1px solid var(--line-soft); }
.ibmi-pp .pp-lessons li:first-child{ border-top:0; }
.ibmi-pp .pp-lessons li svg{ flex:none; width:13px; height:13px; margin-top:3px !important; color:var(--brand); opacity:.9; }
.ibmi-pp .pp-lessons li .ln-tool{ color:var(--brand-deep); font-weight:700 !important; }
.ibmi-pp .pp-exam{ display:flex; align-items:center; gap:13px; padding:15px 16px !important; margin-top:2px !important;
  background:linear-gradient(150deg,#F1FAF5 0%,#E7F5EE 100%); border:1px solid #CDE9DA; }
.ibmi-pp .pp-exam .ex-ic{ flex:none; width:34px; height:34px; display:grid; place-items:center; color:#0E8A5F; background:#D6F0E4; border-radius:10px; }
.ibmi-pp .pp-exam .ex-ic svg{ width:18px; height:18px; }
.ibmi-pp .pp-exam b{ font-size:14.5px !important; font-weight:700 !important; display:block; margin-bottom:2px !important; }
.ibmi-pp .pp-exam small{ font-size:12.5px !important; color:var(--ink-soft); line-height:1.25 !important; display:block; }
@media (min-width:720px){
  .ibmi-pp .pp-modhead{ padding:17px 20px !important; }
  .ibmi-pp .pp-modbody{ padding:0 20px 8px 67px !important; }
  .ibmi-pp .pp-exam{ padding:16px 20px !important; }
}
.ibmi-pp .cert-mbr{ display:none; }
.ibmi-pp .prev-mbr{ display:none; }
.ibmi-pp .pp-mbr{ display:none; }
@media (max-width:600px){ .ibmi-pp .pp-mbr{ display:inline; } }  /* controlled headline wraps on phones */
@media (max-width:719px){
  .ibmi-pp .pp-meta-x{ display:none; }
  .ibmi-pp .cert-mbr{ display:inline; }    /* break the certificate headline after "can" on phones */
}
@media (max-width:430px){
  .ibmi-pp .prev-mbr{ display:inline; }    /* break "What the course / looks like:" only when it won't fit one line */
}

/* ---------- PREVIEW + PILLARS ---------- */



/* ---------- CERTIFICATE ---------- */


/* ---------- PROGRAMS ---------- */
.ibmi-pp .pp-proggrid{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:24px !important; }
@media (min-width:720px){ .ibmi-pp .pp-proggrid{ grid-template-columns:1fr 1fr; gap:18px; } }
@media (min-width:760px){ .ibmi-pp .pp-proggrid.pp-pg3{ grid-template-columns:repeat(3,1fr); } }
.ibmi-pp .pp-progcard{ padding:22px !important; display:flex; flex-direction:column; gap:9px;
  transition:transform .18s ease, box-shadow .18s ease; }
.ibmi-pp .pp-progcard:hover{ transform:translateY(-3px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,1),0 2px 4px rgba(9,78,128,.08),0 22px 40px -16px rgba(9,78,128,.32); }
.ibmi-pp .pp-progcard .pg-head{ display:flex; align-items:center; gap:12px; }
.ibmi-pp .pp-progcard .pg-head h3{ flex:1; min-width:0; margin:0 !important; font-size:16px !important; line-height:1.25 !important; }
.ibmi-pp .pp-progcard .pg-icn{
  flex:none; width:44px; height:44px; display:grid; place-items:center;
  color:var(--pa,#0088CC); background:color-mix(in srgb, var(--pa,#0088CC) 12%, #fff);
  border:1px solid color-mix(in srgb, var(--pa,#0088CC) 20%, #fff);
  border-radius:13px; box-shadow:inset 0 1px 1px rgba(255,255,255,1),0 2px 6px rgba(9,78,128,.12);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.ibmi-pp .pp-progcard:hover .pg-icn{ background:var(--pa,#0088CC); color:#fff; border-color:var(--pa,#0088CC); }
.ibmi-pp .pp-progcard .pg-icn svg{ width:22px; height:22px; }
.ibmi-pp .pp-progcard .pg-badge{
  flex:none; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:12.5px !important; font-weight:700 !important; color:var(--ink-mid);
  background:color-mix(in srgb, var(--pa,#0088CC) 9%, #fff);
  border:1px solid color-mix(in srgb, var(--pa,#0088CC) 18%, #fff);
  border-radius:999px; padding:5px 12px !important;
}
.ibmi-pp .pp-progcard .pg-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--pa,#0088CC); }
.ibmi-pp .pp-progcard .pg-track{ display:flex; align-items:center; gap:10px; margin-top:2px !important; }
.ibmi-pp .pp-progcard .pg-dots{ display:inline-flex; gap:5px; }
.ibmi-pp .pp-progcard .pg-dots i{ width:9px; height:9px; border-radius:50%; border:0; background:color-mix(in srgb, var(--pa,#0088CC) 28%, #fff); }
.ibmi-pp .pp-progcard .pg-dots i.on{ background:var(--pa,#0088CC); box-shadow:0 0 0 3px color-mix(in srgb, var(--pa,#0088CC) 16%, transparent); }
.ibmi-pp .pp-progcard .pg-track-lbl{ font-size:12px !important; font-weight:600 !important; color:var(--ink-soft); line-height:1 !important; }
.ibmi-pp .pg-free{ color:inherit; }  /* "Free." in the programs headline (same color as the rest) */
.ibmi-pp .pp-progcard p{ margin:0 !important; font-size:14px !important; color:var(--ink-soft); }
.ibmi-pp .pp-progcard .pg-link{ font-size:14px !important; font-weight:600 !important; color:var(--pa,var(--brand-deep)); margin-top:2px !important; }
.ibmi-pp .pp-progcard:hover .pg-link{ text-decoration:underline !important; }

/* ---------- REVIEWS ---------- */
/* rating summary — ONE tile split into two halves by a vertical rule */
.ibmi-pp .pp-ratewrap{ display:flex; align-items:stretch; margin:22px 0 26px !important; overflow:hidden; }
.ibmi-pp .pp-ratehalf{ flex:1; display:flex; align-items:center; gap:16px; padding:20px 24px !important; }
.ibmi-pp .pp-ratehalf + .pp-ratehalf{ border-left:1px solid var(--line-soft); }
.ibmi-pp a.pp-ratehalf-link{ transition:background .15s ease; }
.ibmi-pp a.pp-ratehalf-link:hover{ background:color-mix(in srgb, var(--brand) 6%, transparent); }
.ibmi-pp a.pp-ratehalf-link:hover .rc-sub{ color:var(--brand-deep); }
.ibmi-pp .pp-ratewrap .rc-big{ flex:none; font-size:40px !important; font-weight:800 !important; letter-spacing:-.02em !important; line-height:1 !important; }
.ibmi-pp .pp-ratewrap .rc-txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ibmi-pp .pp-ratewrap .rc-txt b{ font-size:16px !important; font-weight:700 !important; line-height:1.15 !important; }
.ibmi-pp .pp-ratewrap .rc-sub{ font-size:13px !important; color:var(--ink-soft); line-height:1.35 !important; }
.ibmi-pp .pp-ratewrap .rc-stars{ color:var(--gold); font-size:16px !important; letter-spacing:2px !important; line-height:1 !important; }
@media (max-width:560px){
  /* keep the two halves side by side; stack icon over text inside each */
  .ibmi-pp .pp-ratehalf{ flex-direction:column; align-items:center; text-align:center !important; gap:8px; padding:16px 12px !important; }
  .ibmi-pp .pp-ratewrap .rc-big{ font-size:32px !important; }
  .ibmi-pp .pp-ratewrap .rc-txt{ align-items:center; gap:3px; }
  .ibmi-pp .pp-ratewrap .rc-sub{ font-size:12px !important; }
}
/* --- review wall: single row, INFINITE pointer-drag ---
   Row is cloned once for a seamless loop; drag moves a transform that wraps into
   one copy's width, so it loops forever. (The loop length is re-measured once the
   row actually lays out — see the ResizeObserver in JS — because content-visibility
   on mobile used to make the first measurement wrong and cause white gaps.) */
.ibmi-pp .pp-twwall{ position:relative; overflow:hidden; margin:22px -20px 0 !important; cursor:grab; touch-action:pan-y; } /* iOS-FIX: pan-y on the capture element too, so the browser keeps vertical page scroll while JS owns horizontal drag */
.ibmi-pp .pp-twwall.dragging{ cursor:grabbing; }
@media (min-width:720px){ .ibmi-pp .pp-twwall{ margin-left:0 !important; margin-right:0 !important; } }
/* left/right shadows so it's clear the row continues (faded top+bottom, no hard cut) */
.ibmi-pp .pp-twwall::before, .ibmi-pp .pp-twwall::after{ content:""; position:absolute; top:0; bottom:0; width:52px; z-index:3; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 82%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 82%, transparent 100%); }
.ibmi-pp .pp-twwall::before{ left:0; background:linear-gradient(90deg, var(--paper) 8%, rgba(237,245,250,0) 100%); }
.ibmi-pp .pp-twwall::after{ right:0; background:linear-gradient(270deg, var(--paper) 8%, rgba(237,245,250,0) 100%); }
.ibmi-pp .pp-twrow{ display:flex; gap:14px; width:max-content; padding:10px 20px 30px !important;
  touch-action:pan-y; user-select:none; } /* iOS-FIX: dropped will-change:transform — a persistent compositor layer on this ~5600px row can exceed iOS's max texture size and paint blank */
@media (min-width:720px){ .ibmi-pp .pp-twrow{ padding:10px 2px 30px !important; } }
.ibmi-pp .pp-twwall.dragging .pp-twc{ pointer-events:none; }
.ibmi-pp .pp-twc{ flex:0 0 clamp(250px,76vw,326px);
  padding:18px !important; display:flex; flex-direction:column; gap:12px; }
/* drag hint (homepage style) */
.ibmi-pp .pp-tw-hint{ text-align:center !important; margin:2px 0 0 !important; font-size:13.5px !important; letter-spacing:.03em !important; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; gap:8px; }
.ibmi-pp .pp-tw-hint b{ font-weight:700 !important; color:var(--ink-mid); }
.ibmi-pp .pp-tw-hint .dg{ display:inline-flex; position:relative; top:-1px; color:var(--brand-deep); animation:pp-dragsway 2.8s ease-in-out infinite; }
.ibmi-pp .pp-tw-hint .dg svg{ display:block; width:27px; height:15px; }
.ibmi-pp .pp-tw-hint .hint-swipe{ display:none; }
@media (max-width:719px){ .ibmi-pp .pp-tw-hint .hint-drag{ display:none; } .ibmi-pp .pp-tw-hint .hint-swipe{ display:inline; } }
@keyframes pp-dragsway{ 0%,100%{ transform:translateX(-3px); } 50%{ transform:translateX(3px); } }
@media (prefers-reduced-motion:reduce){ .ibmi-pp .pp-tw-hint .dg{ animation:none; } }
.ibmi-pp .pp-twc .tq{ margin:0 !important; font-size:14px !important; line-height:1.55 !important; color:var(--ink-mid); }
.ibmi-pp .pp-twc .twho{ display:flex; align-items:center; gap:10px; margin-top:auto !important; }
.ibmi-pp .pp-twc .tav{
  flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:50%;
  font-size:13px !important; font-weight:700 !important; color:#fff; background:var(--av,#4A90C7);
}
.ibmi-pp .pp-twc .tid{ display:flex; flex-direction:column; min-width:0; font-size:12.5px !important; }
.ibmi-pp .pp-twc .tid b{ font-size:13px !important; }
.ibmi-pp .pp-twc .tloc{ display:flex; align-items:center; gap:5px; color:var(--ink-soft); }
.ibmi-pp .pp-twc .tloc img{ width:16px; height:12px; border-radius:2px; }
.ibmi-pp .pp-twc .tstars{ margin-left:auto !important; color:var(--gold); font-size:12px !important; letter-spacing:1px !important; white-space:nowrap; }

/* ---------- FEATURED-IN STRIP ---------- */
.ibmi-pp .pp-featstrip{ margin-top:36px !important; text-align:center !important; }
.ibmi-pp .pp-featstrip small{ display:block; font-size:11.5px !important; font-weight:600 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--ink-faint); margin-bottom:14px !important; }
.ibmi-pp .pp-featlogos{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px 28px; }
.ibmi-pp .pp-featitem{ display:inline-flex; align-items:center; transition:opacity .15s ease, transform .15s ease; }
.ibmi-pp .pp-featitem.noimg{ display:none; }
.ibmi-pp .pp-featitem img{ height:26px; width:auto; opacity:.6; filter:grayscale(1); transition:opacity .15s ease, filter .15s ease; }
.ibmi-pp .pp-featitem:hover img{ opacity:.9; filter:grayscale(0); }
.ibmi-pp .pp-featitem{ cursor:zoom-in; }
@media (max-width:719px){
  .ibmi-pp .pp-featitem.feat-hide-m{ display:none; }               /* drop IBT + Star Tribune on phones */
  .ibmi-pp .pp-featlogos{ flex-wrap:nowrap; justify-content:space-between; gap:12px; }
  .ibmi-pp .pp-featlogos .pp-featitem img{ height:22px; }
}

/* ---------- FEATURED-IN LIGHTBOX (ported from homepage) ---------- */
.ibmi-pp .pp-lightbox{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:24px !important; }
.ibmi-pp .pp-lightbox[hidden]{ display:none; }
.ibmi-pp .pp-lightbox-backdrop{ position:absolute; inset:0; background:rgba(5,20,34,.62); animation:pp-lb-fade .2s ease; }
.ibmi-pp .pp-lightbox-panel{ position:relative; z-index:1; background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55); animation:pp-lb-pop .2s ease; max-width:min(940px,94vw); max-height:90vh; }
.ibmi-pp .pp-lightbox-panel img{ display:block; width:auto; height:auto; max-width:min(940px,94vw); max-height:90vh; }
.ibmi-pp .pp-lightbox-close{ position:absolute; top:max(24px,env(safe-area-inset-top,0px)); right:24px; z-index:3;
  width:38px; height:38px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.94); color:var(--ink);
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.28); transition:transform .15s ease; }
.ibmi-pp .pp-lightbox-close:hover{ transform:scale(1.06); }
@keyframes pp-lb-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pp-lb-pop{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:scale(1); } }

/* ---------- ABOUT THE SUBJECT (editorial / SEO) ---------- */
.ibmi-pp .pp-learngrid{ display:grid; grid-template-columns:1fr; gap:28px; }
@media (min-width:860px){ .ibmi-pp .pp-learngrid{ grid-template-columns:1.15fr .85fr; gap:48px; align-items:start; } }
.ibmi-pp .pp-prose h3{ margin:22px 0 8px !important; font-size:16.5px !important; }
.ibmi-pp .pp-prose h3:first-child{ margin-top:0 !important; }
.ibmi-pp .pp-prose p{ margin:0 0 12px !important; font-size:15px !important; line-height:1.65 !important; color:var(--ink-mid); }
.ibmi-pp .pp-tkcard{ padding:20px !important; }
.ibmi-pp .pp-tkcard h3{ font-size:16.5px !important; margin-bottom:12px !important; }
.ibmi-pp .pp-tkcard ul{ margin:0 !important; padding:0 !important; list-style:none !important; display:flex; flex-direction:column; gap:11px; }
.ibmi-pp .pp-tkcard li{ display:flex; gap:10px; font-size:15px !important; line-height:1.65 !important; color:var(--ink-mid); }
.ibmi-pp .pp-tkcard li svg.tk-chk{ flex:none; width:19px; height:19px; color:var(--green); margin-top:3px !important; }
.ibmi-pp .pp-statrow{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:16px !important; }
@media (min-width:480px){ .ibmi-pp .pp-statrow{ grid-template-columns:1fr 1fr 1fr; } }
.ibmi-pp .pp-stat{ padding:16px !important; }
.ibmi-pp .pp-stat b{ display:block; font-size:28px !important; font-weight:800 !important; letter-spacing:-.02em !important;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; width:max-content; }
@media (max-width:479px){ .ibmi-pp .pp-stat b{ margin-left:auto !important; margin-right:auto !important; } }
.ibmi-pp .pp-stat p{ margin:6px 0 0 !important; font-size:15px !important; line-height:1.65 !important; color:var(--ink-mid); }
.ibmi-pp .pp-stat small{ display:block; margin-top:8px !important; font-size:11.5px !important; color:var(--ink-faint); }
@media (max-width:479px){ .ibmi-pp .pp-stat{ text-align:center !important; } }
/* mobile-centred section heads */
@media (max-width:719px){
  .ibmi-pp .pp-mc{ text-align:center !important; }
  .ibmi-pp .pp-mc .lede{ margin-left:auto !important; margin-right:auto !important; }
}

/* ---------- FAQ ---------- */
.ibmi-pp .pp-faqlist{ display:grid; grid-template-columns:1fr; gap:10px; max-width:820px; margin:0 auto !important; }
@media (min-width:720px){ .ibmi-pp .pp-faqlist{ grid-template-columns:1fr 1fr; align-items:start; gap:12px; max-width:980px; } }
.ibmi-pp .pp-faqitem{ overflow:hidden; align-self:start; }
.ibmi-pp .pp-faqq{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; text-align:left !important; background:none; border:0; cursor:pointer;
  padding:16px 18px !important; font-size:15px !important; font-weight:600 !important; color:var(--ink); min-height:48px;
}
.ibmi-pp .pp-faqq svg{ flex:none; width:16px; height:16px; color:var(--brand-deep); transition:transform .2s ease; }
.ibmi-pp .pp-faqq[aria-expanded="true"] svg{ transform:rotate(180deg); }
.ibmi-pp .pp-faqa{ display:none; padding:0 18px 16px !important; font-size:14.5px !important; line-height:1.6 !important; color:var(--ink-soft); }
.ibmi-pp .pp-faqa a{ color:var(--brand-deep); text-decoration:underline !important; }
.ibmi-pp .pp-faqq[aria-expanded="true"] + .pp-faqa{ display:block; }
.ibmi-pp .pp-faqmore{ margin:22px 0 0 !important; text-align:center !important; font-size:14px !important; color:var(--ink-soft); }
.ibmi-pp .pp-faqmore a{ color:var(--brand-deep); font-weight:600 !important; text-decoration:underline !important; }

/* ---------- THEME HARDENING (live WordPress/WPBakery overrides) ----------
   The curriculum heads, the "Expand all" toggle and the FAQ questions are all
   <button> elements. The live theme styles buttons with text-transform:uppercase
   (plus its own letter-spacing / line-height / padding), and text-transform
   INHERITS — so on the live page the chapter titles, the "N topics" meta and the
   tool pills all rendered in caps with the wrong spacing even though our own CSS
   never asked for that. These rules force our design back, scoped to only these
   components so intentional uppercase elsewhere (eyebrows, badges) is untouched.
   !important is used deliberately here to out-rank whatever the theme sets. */
.ibmi-pp button{ text-transform:none !important; letter-spacing:normal !important; -webkit-appearance:none; appearance:none; }
.ibmi-pp .pp-modhead, .ibmi-pp .pp-modhead b, .ibmi-pp .pp-modhead span,
.ibmi-pp .pp-curtoggle, .ibmi-pp .pp-curtoggle span,
.ibmi-pp .pp-faqq{ text-transform:none !important; }
.ibmi-pp .pp-modtitle{ letter-spacing:-.01em !important; line-height:1.22 !important; }
.ibmi-pp .pp-modmeta, .ibmi-pp .pp-modmeta > span{ letter-spacing:normal !important; line-height:1.3 !important; }
.ibmi-pp .pp-modtag{ letter-spacing:.01em !important; line-height:1.35 !important; }
.ibmi-pp .pp-curtoggle, .ibmi-pp .pp-curlabel{ letter-spacing:normal !important; line-height:1.1 !important; }
.ibmi-pp .pp-faqq{ letter-spacing:normal !important; line-height:1.35 !important; }
/* padding got clobbered by the theme's button padding — pin ours back */
.ibmi-pp .pp-modhead{ padding:15px 16px !important; }
.ibmi-pp .pp-modtitle{ padding:0 !important; }
.ibmi-pp .pp-modtag{ padding:2px 9px !important; }
.ibmi-pp .pp-curtoggle{ padding:9px 14px !important; }
.ibmi-pp .pp-faqq{ padding:16px 18px !important; }
@media (min-width:720px){ .ibmi-pp .pp-modhead{ padding:17px 20px !important; } }
@media (max-width:420px){
  .ibmi-pp .pp-modhead{ padding:11px 14px 11px 14px !important; }
  .ibmi-pp .pp-modtag{ padding:3px 8px !important; letter-spacing:0 !important; }
}
/* theme also flattened the "Expand all" pill radius and injected a button margin */
.ibmi-pp .pp-curtoggle{ border-radius:999px !important; }
.ibmi-pp .pp-modhead, .ibmi-pp .pp-faqq, .ibmi-pp .pp-curtoggle{ margin:0 !important; }

/* ---------- ALSO BOUGHT (courselist-style cards) ---------- */
.ibmi-pp .pp-alsogrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px !important; }
@media (min-width:900px){ .ibmi-pp .pp-alsogrid{ grid-template-columns:repeat(4,1fr); gap:18px; } }
.ibmi-pp .pp-card{ overflow:hidden; display:flex; flex-direction:column; --cat:var(--brand);
  transition:transform .15s ease, box-shadow .15s ease; }
.ibmi-pp .pp-card:hover{ transform:translateY(-3px); box-shadow:inset 0 1px 1px rgba(255,255,255,1),0 2px 4px rgba(9,78,128,.08),0 20px 38px -16px rgba(9,78,128,.30); }
.ibmi-pp .pp-card .pc-img{ position:relative; aspect-ratio:400/267; background:var(--tint); }
.ibmi-pp .pp-card .pc-img img{ width:100%; height:100%; object-fit:cover; }
.ibmi-pp .pp-card .pc-rate{
  position:absolute; top:11px; right:11px; display:inline-flex; align-items:center; gap:5px;
  font-size:12px !important; font-weight:700 !important; color:var(--ink);
  background:linear-gradient(150deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.90) 45%,rgba(255,255,255,.96) 100%);
  border:1px solid rgba(255,255,255,.75);
  border-radius:999px; padding:4px 11px 3px 10px !important; box-shadow:0 1px 3px rgba(9,40,64,.2);
}
.ibmi-pp .pp-card .pc-rate .st{ color:var(--gold); }
.ibmi-pp .pp-card .pc-badge{
  position:absolute; top:11px; left:11px; display:inline-flex; align-items:center;
  font-size:11px !important; font-weight:700 !important; color:#fff;
  background:var(--cat,var(--brand)); border:1px solid rgba(255,255,255,.2);
  border-radius:999px; padding:5px 11px !important; box-shadow:0 2px 8px rgba(9,78,128,.26);
}
.ibmi-pp .pp-card .pc-body{ padding:14px 15px 15px !important; display:flex; flex-direction:column; flex:1; }
.ibmi-pp .pp-card h3{ font-size:15px !important; font-weight:700 !important; line-height:1.3 !important; color:var(--ink); margin:0 0 9px !important;
  display:flex; align-items:flex-start; gap:6px; transition:color .15s ease; }
.ibmi-pp .pp-card:hover h3{ color:var(--cat,var(--brand)); }
.ibmi-pp .pp-card h3 .pc-arrow{ flex:none; margin-top:3px !important; opacity:0; transform:translateX(-4px); color:var(--cat,var(--brand)); transition:opacity .18s ease, transform .18s ease; }
.ibmi-pp .pp-card:hover h3 .pc-arrow{ opacity:1; transform:none; }
.ibmi-pp .pp-card .pc-line{ display:flex; align-items:center; gap:6px; font-size:12.5px !important; color:var(--ink-soft); line-height:1.2 !important; margin-bottom:6px !important; }
.ibmi-pp .pp-card .pc-line svg{ flex:none; width:14px; height:14px; color:var(--cat,var(--brand)); }
.ibmi-pp .pp-card .pc-hs{ display:none; }
@media (max-width:899px){  /* 2-up card grid: trim the meta lines to fit narrow cards */
  .ibmi-pp .pp-card .pc-x{ display:none; }
  .ibmi-pp .pp-card .pc-hf{ display:none; }
  .ibmi-pp .pp-card .pc-hs{ display:inline; }
}
.ibmi-pp .pp-card .pc-foot{ margin-top:auto !important; padding-top:11px !important; border-top:1px dashed var(--line);
  display:flex; align-items:center; gap:8px; }
.ibmi-pp .pp-card .pc-foot s{ font-size:12px !important; color:var(--strike); }
.ibmi-pp .pp-card .pc-foot b{ font-size:18px !important; font-weight:700 !important; letter-spacing:-.02em !important; color:var(--ink); }
.ibmi-pp .pp-card .pc-disc{ font-size:11px !important; font-weight:700 !important; color:#067A55; background:#E3F5EC; border-radius:6px; padding:2px 7px !important; }
.ibmi-pp .pp-also-cta{ display:flex; justify-content:center; margin-top:30px !important; }
/* clear the fixed mobile smartbar at the very end of the page */
@media (max-width:767px){ .ibmi-pp .pp-endsec{ padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important; } }

/* ---------- FIRST EVENING TIMELINE ---------- */
.ibmi-pp .pp-evsec{ padding-bottom:38px !important; }               /* tighter gap into the final CTA */
@media (min-width:720px){ .ibmi-pp .pp-evsec{ padding-bottom:46px !important; } }
.ibmi-pp .pp-evline{ position:relative; margin-top:28px !important; display:grid; grid-template-columns:1fr; gap:0; }
.ibmi-pp .pp-evstep{ position:relative; padding:0 0 28px 48px !important; }
.ibmi-pp .pp-evline .pp-evstep:last-child{ padding-bottom:0 !important; }
.ibmi-pp .pp-evstep::before{
  content:""; position:absolute; left:16px; top:38px; bottom:0; width:2px;
  background:var(--line);
}
.ibmi-pp .pp-evstep:last-child::before{ display:none; }
.ibmi-pp .pp-evstep .ev-dot{
  position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%;
  background:var(--grad); display:grid; place-items:center;
  box-shadow:0 6px 14px -6px rgba(0,136,204,.6), inset 0 1px 1px rgba(255,255,255,.5);
}
.ibmi-pp .pp-evstep .ev-dot svg{ width:17px; height:17px; color:#fff; }
.ibmi-pp .pp-evstep .ev-when{ font-size:12px !important; font-weight:700 !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:var(--brand-deep); }
.ibmi-pp .pp-evstep b{ display:block; font-size:15.5px !important; margin-top:3px !important; }
.ibmi-pp .pp-evstep p{ margin:4px 0 0 !important; font-size:14px !important; color:var(--ink-soft); }
@media (min-width:860px){
  .ibmi-pp .pp-evline{ grid-template-columns:repeat(4,1fr); gap:0 18px; }
  .ibmi-pp .pp-evstep{ padding:46px 0 0 !important; }
  .ibmi-pp .pp-evstep::before{ left:40px; right:-18px; top:17px; bottom:auto; width:auto; height:2px; }
  .ibmi-pp .pp-evstep .ev-dot{ top:0; }
}

/* ---------- FINAL CTA (solid band) ---------- */
.ibmi-pp .pp-final{ position:relative; overflow:hidden; background:var(--band); color:#fff; padding:76px 0 76px !important; text-align:center !important; }
.ibmi-pp .pp-final .pp-bandbg img{ object-position:center 40%; }
.ibmi-pp .pp-final h2{ color:#fff; }
.ibmi-pp .fin-mbr{ display:none; }
.ibmi-pp .fin-nb{ white-space:nowrap; }   /* headline breaks after "and" only when it can't fit one line */
.ibmi-pp .fin-subm{ display:none; }
@media (max-width:767px){ .ibmi-pp .fin-subd{ display:none; } .ibmi-pp .fin-subm{ display:inline; } }
/* course identity: 1:1 image + title */
.ibmi-pp .fin-course{ display:inline-flex; align-items:center; gap:12px; margin-bottom:16px !important;
  padding:8px 16px 8px 8px !important; border-radius:999px; background:rgba(9,36,58,.30); border:1px solid rgba(255,255,255,.18); }
.ibmi-pp .fin-course .fin-img{ flex:none; width:44px; height:44px; border-radius:10px; overflow:hidden; background:rgba(255,255,255,.1); }
.ibmi-pp .fin-course .fin-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ibmi-pp .fin-course .fin-course-t{ font-size:14.5px !important; font-weight:700 !important; color:#fff; letter-spacing:-.01em !important; }
.ibmi-pp .pp-final .fin-price{ display:flex; justify-content:center; align-items:center; gap:10px; margin:18px 0 8px !important; }
.ibmi-pp .pp-final .fin-price s{ font-size:17px !important; color:rgba(255,255,255,.55); }
.ibmi-pp .pp-final .fin-price b{ font-size:38px !important; font-weight:800 !important; line-height:1 !important; }
.ibmi-pp .pp-final .fin-price .pp-off{ font-size:17px !important; background:rgba(255,255,255,.15); color:#CFEAF8; display:inline-flex; align-items:center; line-height:1 !important; padding:6px 10px 4px !important; }
.ibmi-pp .pp-final p.fin-sub{ margin:0 auto !important; max-width:52ch; font-size:15px !important; color:rgba(255,255,255,.82); }
.ibmi-pp .fin-ctas{ display:flex; flex-wrap:nowrap; justify-content:center; gap:12px; margin-top:24px !important; }
.ibmi-pp .fin-ctas .ibtn{ flex:0 1 auto; padding:16px 46px !important; min-height:52px; font-size:16px !important; }
.ibmi-pp .fin-ctas .ibtn-ghost{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28); color:#fff !important; }
/* Desktop: mirror the hero — bright skyline background + one big frosted-glass tile.
   Mobile keeps the flat dark band (no backdrop-filter on phones). */
@media (min-width:768px){
  .ibmi-pp .pp-final{ padding:88px 0 !important; }
  .ibmi-pp .pp-final .pp-bandbg img{ opacity:1; object-position:center 32%; }   /* full-bright skyline, like the hero */
  .ibmi-pp .pp-final .pp-bandbg::after{ display:none; }                          /* drop the dark overlay — the tile carries readability */
  .ibmi-pp .fin-tile{ position:relative; overflow:hidden; max-width:660px; margin:0 auto !important;
    background:linear-gradient(135deg,rgba(11,34,60,.50) 0%,rgba(8,27,48,.40) 40%,rgba(8,25,45,.38) 62%,rgba(11,34,60,.52) 100%);
    -webkit-backdrop-filter:blur(20px) saturate(1.7) brightness(1.05); backdrop-filter:blur(20px) saturate(1.7) brightness(1.05);
    border:1px solid rgba(255,255,255,.16); border-radius:22px;
    padding:44px 48px 46px !important;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.30),inset 0 -1px 1px rgba(255,255,255,.10),inset 0 18px 30px -18px rgba(255,255,255,.12),0 30px 60px -26px rgba(2,18,36,.6); }
  /* refractive rim */
  .ibmi-pp .fin-tile::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px !important; pointer-events:none; z-index:1;
    background:linear-gradient(125deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,.10) 28%,rgba(255,255,255,.03) 52%,rgba(255,255,255,.12) 74%,rgba(255,255,255,.42) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; }
  /* specular sheen — replays when the tile scrolls into view (see JS) */
  .ibmi-pp .fin-tile::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
    background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.07) 46%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.07) 54%,transparent 68%);
    background-size:280% 100%; background-position:135% 0; }
  .ibmi-pp .fin-tile.is-seen::after{ animation:pp-lqsheen 2.2s ease-in-out .15s 1 both; }
  .ibmi-pp .fin-tile > *{ position:relative; z-index:2; }
}
@media (max-width:420px){
  .ibmi-pp .fin-mbr{ display:inline; }                 /* break headline after "and" on small phones */
  .ibmi-pp .fin-ctas .ibtn{ padding-left:40px !important; padding-right:40px !important; font-size:15.5px !important; }
}
.ibmi-pp .fin-trust{ margin:22px auto 0 !important; max-width:44ch; text-align:center !important; font-size:13px !important; line-height:1.7 !important; color:rgba(255,255,255,.72); }

/* ============================================================
   PORTED FROM IDMIhomepage-FINAL-60 (2026-07-22):
   'Learn on any device' laptop+phone mockups + certificate
   console (frame, stamp, verify demo). Scope renamed to
   .ibmi-pp; backdrop-filter stripped (opaque overrides below).
   ============================================================ */
@keyframes lqsweep{from{background-position:140% 0}to{background-position:-60% 0}}
@keyframes certpop{0%{transform:scale(.985)}55%{transform:scale(1.012)}100%{transform:scale(1)}}
@keyframes vbar{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){.ibmi-pp .vbtn:hover::after{animation:none}}
.ibmi-pp .vd::before{display:none}
.ibmi-pp .cert-verify{display:flex;flex-direction:column}
.ibmi-pp .vd-demo{margin-left:auto !important;flex:none;font-size:10px !important;font-weight:800 !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:var(--ink-mid);border:1px solid var(--line);border-radius:999px;padding:3px 9px !important;line-height:1 !important}
.ibmi-pp .cert-facts{list-style:none !important;margin:2px 2px 22px !important;padding:0 !important;display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.ibmi-pp .cert-facts li{display:flex;align-items:center;gap:12px;margin:0 !important;padding:0 !important;min-width:0}
.ibmi-pp .cert-facts .cf-wide{grid-column:1/-1}
.ibmi-pp .cert-facts b{display:block;font-size:14.5px !important;font-weight:700 !important;line-height:1.3 !important;letter-spacing:-.01em !important;color:var(--ink)}
.ibmi-pp .cert-facts small{display:block;font-size:12.5px !important;line-height:1.45 !important;color:var(--ink-soft);margin-top:2px !important}
.ibmi-pp .cert-facts i{font-style:normal !important;flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--brand-deep);background:var(--brand-soft)}
.ibmi-pp .cert-facts i svg{width:18px;height:18px}
.ibmi-pp .vnote-short{display:none}
.ibmi-pp .cf-short{display:none}
@media (max-width:560px){.ibmi-pp .cert-media{width:100%;margin-left:auto !important;margin-right:auto !important}
.ibmi-pp .vr-dot{display:none}
.ibmi-pp .vnote-full{display:none}
.ibmi-pp .vnote-short{display:inline}
.ibmi-pp .cf-full{display:none}
.ibmi-pp .cf-short{display:inline}
.ibmi-pp .vd-demo{font-size:10.5px !important}
.ibmi-pp .cert-facts{grid-template-columns:1fr 1fr;gap:12px 10px}}
.ibmi-pp .cert-verify h3{font-size:22px !important;font-weight:800 !important;color:var(--ink);letter-spacing:-.01em !important;margin-bottom:8px !important}
.ibmi-pp .cert-verify>p{font-size:14.5px !important;line-height:1.6 !important;color:var(--ink-soft);margin:0 0 24px !important;max-width:40ch}
.ibmi-pp .vd{margin-top:0 !important;width:100%;position:relative;z-index:2;border-radius:0;padding:0 !important; opacity:0;transform:translateY(26px); background:transparent; border:0; transition:border-color .3s,background .3s,opacity .8s cubic-bezier(.22,.75,.35,1),transform .8s cubic-bezier(.22,.75,.35,1)}
.ibmi-pp .vd.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ibmi-pp .vd{opacity:1;transform:none}}
.ibmi-pp .vd.ok{border-color:rgba(155,223,198,.95);background:rgba(232,251,242,.6)}
.ibmi-pp .vbtn{position:relative;overflow:hidden;font-family:inherit !important;line-height:1.2 !important;text-transform:none !important;letter-spacing:normal !important;margin:0 !important;min-height:0 !important;min-width:114px !important;text-align:center !important;text-shadow:none !important;-webkit-appearance:none !important;appearance:none !important;box-sizing:border-box;flex:none;font-size:13px !important;font-weight:700 !important;color:#fff !important;background:linear-gradient(150deg,rgba(72,200,236,.92) 0%,rgba(8,148,213,.84) 48%,rgba(0,116,176,.92) 100%) !important;border:none !important;border-radius:9px !important;padding:10px 16px !important;cursor:pointer;box-shadow:inset 0 1px 1px rgba(255,255,255,.70),inset 0 10px 18px -10px rgba(255,255,255,.35),inset 0 -1px 2px rgba(2,40,64,.25),0 1px 2px rgba(3,50,80,.25),0 14px 30px -10px rgba(0,136,204,.55);transition:transform .15s,box-shadow .15s}
.ibmi-pp .vbtn:hover{transform:translateY(-1px)}
.ibmi-pp .vbtn:disabled{opacity:.7;cursor:default;transform:none}
.ibmi-pp .vd-pillrow{position:absolute;top:-14px;left:0;right:0;display:flex;justify-content:center;pointer-events:none}
.ibmi-pp .vd-pillrow .vd-demo{margin-left:0 !important;background:#FDFEFF;font-size:11.5px !important;height:26px;display:inline-flex;align-items:center;padding:2px 15px 0 !important; box-shadow:0 1px 2px rgba(9,78,128,.08),0 6px 14px -8px rgba(9,78,128,.30)}
.ibmi-pp .vpanel .vd{box-shadow:none;border:0;border-top:1px solid rgba(9,78,128,.12); width:auto;margin:28px -24px 0 !important;border-radius:0 0 21px 21px;padding:26px 24px 20px !important; background:linear-gradient(165deg,rgba(198,227,245,.40) 0%,rgba(214,236,249,.20) 55%,rgba(198,227,245,.34) 100%)}
.ibmi-pp .vpanel .vd.ok{border-color:transparent;background:linear-gradient(165deg,rgba(198,227,245,.40) 0%,rgba(214,236,249,.20) 55%,rgba(198,227,245,.34) 100%)}
.ibmi-pp .vd-bar{position:absolute;left:6px;right:6px;bottom:-11px;height:3px;margin:0 !important;border-radius:999px;overflow:hidden;background:transparent;opacity:0;transition:opacity .25s ease}
.ibmi-pp .vd.checking .vd-bar, .ibmi-pp .vd.ok .vd-bar{opacity:1}
.ibmi-pp .vnote{text-align:center !important}
.ibmi-pp .vd-field{position:relative;display:flex;align-items:center;gap:10px;padding:5px 5px 5px 14px !important;border-radius:13px; background:rgba(255,255,255,.85);border:1px solid rgba(9,78,128,.14); box-shadow:inset 0 1px 2px rgba(9,78,128,.06),inset 0 1px 0 rgba(255,255,255,.9);transition:border-color .3s ease}
.ibmi-pp .vd-field>svg{width:16px;height:16px;flex:none;color:var(--ink-faint)}
.ibmi-pp .vf-id{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace !important;font-size:14px !important;font-weight:700 !important;letter-spacing:.02em !important;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ibmi-pp .vd-field .vbtn{min-width:100px !important;border-radius:10px !important;padding:12px 16px !important;font-size:13px !important;color:#fff !important;border:0 !important;cursor:pointer; background:linear-gradient(150deg,rgba(72,200,236,.95) 0%,rgba(8,148,213,.9) 48%,rgba(0,116,176,.95) 100%) !important; box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 6px 14px -6px rgba(0,116,176,.55);transition:transform .15s ease,box-shadow .15s ease,background .3s ease}
.ibmi-pp .vd-field .vbtn:hover{transform:translateY(-1px)}
.ibmi-pp .vd-field .vbtn:disabled{opacity:.8;transform:none;cursor:default}
.ibmi-pp .vd.ok .vd-field{border-color:rgba(14,138,95,.4)}
.ibmi-pp .vd.ok .vd-field .vbtn{background:linear-gradient(150deg,#3ECD96 0%,#17A06C 55%,#0E8A5F 100%) !important;box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 6px 14px -6px rgba(14,138,95,.55)}
.ibmi-pp .vd-bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#3ECD96,#0E8A5F);transition:width .3s ease}
.ibmi-pp .vd.checking .vd-bar i{animation:vbar .9s linear forwards}
.ibmi-pp .vd.ok .vd-bar i{width:100%}
@media (prefers-reduced-motion:reduce){.ibmi-pp .vd.checking .vd-bar i{animation:none;width:100%}}
.ibmi-pp .vres{display:flex;flex-direction:column;align-items:center;text-align:center !important;gap:4px;opacity:0;transform:translateY(6px);max-height:0;overflow:hidden;transition:opacity .35s ease,transform .35s ease,max-height .35s ease,margin .35s ease;margin-top:0 !important}
.ibmi-pp .vd.ok .vres{opacity:1;transform:none;max-height:140px;margin-top:22px !important}
.ibmi-pp .vres .sh{width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.ibmi-pp .vres .sh svg{width:12px;height:12px}
.ibmi-pp .vnote{font-size:12.5px !important;font-weight:400 !important;color:var(--ink-soft);margin-top:14px !important}
.ibmi-pp .vnote a{color:var(--brand-deep) !important;text-decoration:underline !important}
.ibmi-pp .cert{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center}
.ibmi-pp .cert-media{position:relative;perspective:1100px}
.ibmi-pp .cert-frame{position:relative;z-index:1;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform;aspect-ratio:868/623;border-radius:9px;overflow:hidden;background:#fff; box-shadow: inset 0 0 0 1px rgba(9,60,110,.07), 0 1px 1px rgba(9,40,70,.05), 0 3px 6px -1px rgba(9,50,90,.08), 0 12px 24px -8px rgba(9,60,110,.18), 0 34px 64px -16px rgba(9,78,128,.32), 0 74px 130px -42px rgba(9,78,128,.30); -webkit-mask-image:-webkit-radial-gradient(white,black)}
.ibmi-pp .cert-frame::after{display:none}
.ibmi-pp .cert-frame::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit; background: linear-gradient(115deg,transparent 34%,rgba(255,255,255,.05) 44%,rgba(255,255,255,.34) 50%,rgba(199,236,250,.18) 54%,transparent 66%), linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 16%); background-size:240% 100%,100% 100%;background-repeat:no-repeat; background-position:var(--shx,50%) 0,0 0}
@media (prefers-reduced-motion:reduce){.ibmi-pp .cert-frame::before{background-position:62% 0,0 0}}
.ibmi-pp .vd::before, .ibmi-pp .cert-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px !important;pointer-events:none;z-index:2; background:linear-gradient(155deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.45) 16%,rgba(110,180,220,.42) 44%,rgba(70,150,200,.46) 58%,rgba(255,255,255,.5) 80%,rgba(255,255,255,.95) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.ibmi-pp .vbtn::before{background:linear-gradient(155deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.25) 30%,rgba(255,255,255,.05) 55%,rgba(255,255,255,.45) 100%)}
.ibmi-pp .vbtn{position:relative}
.ibmi-pp .vbtn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3; background:linear-gradient(115deg,transparent 35%,rgba(105,170,215,.18) 47%,rgba(130,190,230,.38) 51%,rgba(105,170,215,.18) 55%,transparent 68%);background-size:260% 100%;background-position:140% 0}
.ibmi-pp .vbtn::after{background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.13) 48%,rgba(255,255,255,.26) 52%,rgba(255,255,255,.13) 56%,transparent 70%);background-size:260% 100%;background-position:140% 0}
.ibmi-pp .vbtn:hover::after{animation:lqsweep .75s ease-out}
.ibmi-pp .vbtn:active{transform:translateY(0) scale(.975)}
@media (prefers-reduced-motion:reduce){.ibmi-pp .vbtn:hover::after{animation:none}}
/* ---- liquid-glass hover sweep (homepage style) across interactive tiles ----
   One-shot 0.75s specular glint on hover. Pure CSS, no JS, no load cost; hover-capable +
   motion-OK pointers only (off on touch & reduced-motion); only animates the hovered element.
   Blue glint on light cards, white glint on the colored CTAs. */
.ibmi-pp .pp-skill,.ibmi-pp .pp-mod,.ibmi-pp .pp-progcard,.ibmi-pp .pp-stat,.ibmi-pp .pp-twc,.ibmi-pp .pp-faqitem,.ibmi-pp .pp-card,.ibmi-pp .ibtn-primary{ position:relative; overflow:hidden; }
.ibmi-pp .pp-skill::after,.ibmi-pp .pp-mod::after,.ibmi-pp .pp-progcard::after,.ibmi-pp .pp-stat::after,.ibmi-pp .pp-twc::after,.ibmi-pp .pp-faqitem::after,.ibmi-pp .pp-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4; background:linear-gradient(115deg,transparent 35%,rgba(105,170,215,.18) 47%,rgba(130,190,230,.38) 51%,rgba(105,170,215,.18) 55%,transparent 68%); background-size:260% 100%; background-position:140% 0; }
.ibmi-pp .ibtn-primary::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.13) 48%,rgba(255,255,255,.26) 52%,rgba(255,255,255,.13) 56%,transparent 70%); background-size:260% 100%; background-position:140% 0; }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ibmi-pp .pp-skill:hover::after,.ibmi-pp .pp-mod:hover::after,.ibmi-pp .pp-progcard:hover::after,.ibmi-pp .pp-stat:hover::after,.ibmi-pp .pp-twc:hover::after,.ibmi-pp .pp-faqitem:hover::after,.ibmi-pp .pp-card:hover::after,.ibmi-pp .ibtn-primary:hover::after{ animation:lqsweep .75s ease-out; }
}
.ibmi-pp .cert-frame>img{display:block;width:100%;height:100%;object-fit:cover}
/* name + course overlaid on the (blank) certificate template; sized to the frame via container units.
   Nudge --cert-name-y / --cert-course-y if they don't line up with the template's blank lines. */
.ibmi-pp .cert-frame{ container-type:inline-size; }
.ibmi-pp .cert-name{ position:absolute; left:6%; right:6%; top:var(--cert-name-y,42%); transform:translateY(-50%); z-index:3; text-align:center !important; font-family:'Lato','Helvetica Neue',Arial,sans-serif !important; font-weight:700 !important; font-size:var(--cert-fs,4.8cqw) !important; letter-spacing:.03em !important; line-height:1.1 !important; color:#000; pointer-events:none; white-space:nowrap; }
.ibmi-pp .cert-course{ position:absolute; left:10%; right:10%; top:var(--cert-course-y,65%); transform:translateY(-50%); z-index:3; text-align:center !important; font-family:'Lato','Helvetica Neue',Arial,sans-serif !important; font-weight:700 !important; font-size:var(--cert-fs,4.8cqw) !important; letter-spacing:.03em !important; line-height:1.2 !important; color:#000; pointer-events:none; }
.ibmi-pp .cert-media::before{content:"";position:absolute;inset:-14% -12%;z-index:-1;pointer-events:none; background:radial-gradient(58% 52% at 50% 42%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 72%)}
.ibmi-pp .cert-media::after{content:"";position:absolute;left:9%;right:9%;bottom:-26px;height:30px;z-index:-1;pointer-events:none; background:radial-gradient(50% 100% at 50% 50%,rgba(9,78,128,.30) 0%,rgba(9,78,128,0) 72%);filter:blur(5px)}
.ibmi-pp .vpanel{border-radius:22px;padding:24px 24px 0 !important;display:flex;flex-direction:column; background:linear-gradient(150deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.62) 45%,rgba(250,253,255,.80) 100%);  border:1px solid rgba(255,255,255,.65); box-shadow:inset 0 1px 1px rgba(255,255,255,1),0 1px 2px rgba(9,78,128,.08),0 26px 56px -22px rgba(9,78,128,.30)}
.ibmi-pp .vpanel .cert-facts{margin:0 !important}
.ibmi-pp .vpanel-div{height:1px;margin:18px 2px !important;background:linear-gradient(90deg,rgba(9,78,128,0) 0%,rgba(9,78,128,.12) 18%,rgba(9,78,128,.12) 82%,rgba(9,78,128,0) 100%)}
.ibmi-pp .cf-one{display:block;margin:0 !important}
.ibmi-pp .cf-one .cf-wide{display:flex}
.ibmi-pp .cs-sheen{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit; background:linear-gradient(115deg,transparent 35%,rgba(62,205,150,.15) 47%,rgba(62,205,150,.38) 51%,rgba(62,205,150,.15) 55%,transparent 68%); background-size:260% 100%;background-position:140% 0}
.ibmi-pp .cert-frame.stamped .cs-sheen{animation:lqsweep 1.15s ease-out .2s}
@media (prefers-reduced-motion:reduce){.ibmi-pp .cs-sheen{animation:none!important}}
.ibmi-pp .vres-top{display:inline-flex;align-items:center;gap:8px}
.ibmi-pp .vres-top b{font-size:11.5px !important;font-weight:800 !important;letter-spacing:.08em !important;text-transform:uppercase !important;color:#0E8A5F}
.ibmi-pp .vr-line{font-size:16px !important;font-weight:700 !important;line-height:1.3 !important;color:var(--ink)}
.ibmi-pp .vr-sub{font-size:12.5px !important;line-height:1.45 !important;color:var(--ink-soft);font-weight:400 !important}
.ibmi-pp .cert-stamp{position:absolute;top:14%;right:9%;z-index:3;display:inline-flex;align-items:center;gap:6px; font-size:15px !important;font-weight:800 !important;letter-spacing:.08em !important;text-transform:uppercase !important;color:#0E8A5F; border:2.5px solid #0E8A5F;border-radius:8px;padding:6px 12px 6px 13px !important; transform:rotate(-9deg) scale(1.7);opacity:0;pointer-events:none;mix-blend-mode:multiply; transition:opacity .25s ease,transform .4s cubic-bezier(.2,1.6,.4,1)}
.ibmi-pp .cert-frame.stamped .cert-stamp{opacity:.92;transform:rotate(-9deg) scale(1)}
@media (prefers-reduced-motion:reduce){.ibmi-pp .cert-stamp{transition:opacity .2s ease}
.ibmi-pp .cert-frame.stamped .cert-stamp{transform:rotate(-9deg) scale(1)}}
@media (max-width:940px){.ibmi-pp .cert{grid-template-columns:1fr;gap:40px}
.ibmi-pp .cert-media{max-width:460px;margin-left:auto !important;margin-right:auto !important}}
@media (max-width:560px){.ibmi-pp .cert{gap:18px}
.ibmi-pp .vpanel{padding:18px 18px 0 !important}
.ibmi-pp .cert-facts{gap:10px 14px}
.ibmi-pp .vpanel-div{margin:14px 2px !important}
.ibmi-pp .vpanel .vd{margin-top:20px !important;padding:20px 18px 16px !important}
.ibmi-pp .vpanel .vd{margin-left:-18px !important;margin-right:-18px !important}}
@media (max-width:360px){.ibmi-pp .vpanel{padding:16px 16px 0 !important}
.ibmi-pp .vpanel .vd{margin-left:-16px !important;margin-right:-16px !important}}
@media (max-width:379px){.ibmi-pp .vd-field{padding:5px 5px 5px 10px !important;gap:7px}
.ibmi-pp .vd-field>svg{display:none}
.ibmi-pp .vf-id{font-size:12.5px !important}
.ibmi-pp .vd-field .vbtn{min-width:84px !important;padding:12px 10px !important;font-size:12px !important}}
@media (max-width:720px){.ibmi-pp .vpanel.cf-anim .cert-facts li{opacity:0;transform:translateY(10px); transition:opacity .45s ease,transform .45s ease}
.ibmi-pp .vpanel.cf-anim .cert-facts li:nth-child(2){transition-delay:.09s}
.ibmi-pp .vpanel.cf-anim .cert-facts li:nth-child(3){transition-delay:.18s}
.ibmi-pp .vpanel.cf-anim .cert-facts li:nth-child(4){transition-delay:.27s}
.ibmi-pp .vpanel.cf-anim .cf-one li{transition-delay:.38s}
.ibmi-pp .vpanel.cf-anim.cf-in .cert-facts li{opacity:1;transform:none}}
@media (hover:none){.ibmi-pp .vbtn:hover{transform:none !important}
.ibmi-pp .vbtn:hover::after{animation:none !important}}
.ibmi-pp .anyw .cert-facts{grid-template-columns:1fr;gap:13px;margin:0 !important}
.ibmi-pp #how.jrn-sec{overflow:visible}
.ibmi-pp .jrn{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:stretch}
.ibmi-pp .jrn-stage{position:relative;display:flex;justify-content:center;align-items:flex-start}
.ibmi-pp .jrn-phone{position:sticky;top:calc(50vh - 252px);width:252px;border-radius:40px;background:#0D0F11;padding:11px !important; box-shadow:0 2px 4px rgba(9,40,64,.18),0 30px 62px -20px rgba(9,60,100,.5),inset 0 1px 1px rgba(255,255,255,.14)}
.ibmi-pp .jrn-phone::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%); width:78px;height:19px;background:#0D0F11;border-radius:0 0 13px 13px;z-index:5}
.ibmi-pp .jrn-screens{position:relative;height:466px;border-radius:30px;overflow:hidden; background:linear-gradient(180deg,#F6FBFE 0%,#EAF4FB 100%)}
.ibmi-pp .jrn-screen{position:absolute;inset:0;padding:34px 15px 15px !important;display:flex;flex-direction:column;gap:9px; opacity:0;transform:translateY(12px) scale(.985);transition:opacity .55s ease,transform .55s ease;pointer-events:none}
.ibmi-pp .jrn-screen.on{opacity:1;transform:none}
.ibmi-pp .jrn-search{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line-soft); border-radius:99px;padding:8px 11px !important;font-size:10.5px !important;font-weight:600 !important;color:var(--ink-faint)}
.ibmi-pp .jrn-search svg{width:12px;height:12px;color:var(--ink-faint);flex:none}
.ibmi-pp .jrn-cats{display:flex;gap:6px}
.ibmi-pp .jrn-cat{font-size:9.5px !important;font-weight:700 !important;padding:5px 9px !important;border-radius:99px;background:#fff; border:1px solid var(--line-soft);color:var(--ink-soft);white-space:nowrap}
.ibmi-pp .jrn-cat.sel{background:var(--brand);border-color:var(--brand);color:#fff}
.ibmi-pp .jrn-card{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line-soft); border-radius:12px;padding:8px 10px !important;box-shadow:0 1px 2px rgba(9,78,128,.05)}
.ibmi-pp .jrn-card.sel{border-color:var(--brand); box-shadow:0 0 0 2px rgba(0,136,204,.26),0 10px 22px -12px rgba(0,136,204,.5)}
.ibmi-pp .jrn-card .ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff}
.ibmi-pp .jrn-card .ic svg{width:16px;height:16px}
.ibmi-pp .jrn-card .tx{flex:1;min-width:0}
.ibmi-pp .jrn-card .tx b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;font-size:11px !important;font-weight:800 !important;color:var(--ink);line-height:1.2 !important;overflow:hidden}
.ibmi-pp .jrn-card .tx span{font-size:9.5px !important;font-weight:600 !important;color:var(--ink-faint)}
.ibmi-pp .jrn-card .chk{flex:none;width:19px;height:19px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center}
.ibmi-pp .jrn-card .chk svg{width:11px;height:11px;color:#fff}
.ibmi-pp .jrn-cert{position:relative;background:#fff;border:1px solid var(--line-soft);border-radius:13px; padding:17px 13px 12px !important;text-align:center !important;box-shadow:0 10px 24px -14px rgba(9,78,128,.4);overflow:hidden}
.ibmi-pp .jrn-cert::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--grad)}
.ibmi-pp .jrn-seal{margin:0 auto 7px !important;width:34px;height:34px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#FFE58A,#FFCC00 62%,#E0A800);display:flex;align-items:center;justify-content:center; box-shadow:0 4px 10px -4px rgba(224,168,0,.7)}
.ibmi-pp .jrn-seal svg{width:17px;height:17px;color:#7a5b00}
.ibmi-pp .jrn-cert .cap{font-size:8px !important;font-weight:800 !important;letter-spacing:.16em !important;color:var(--brand-deep);margin-top:0 !important}
.ibmi-pp .jrn-cert h5{margin:7px 0 0 !important;font-size:13px !important;font-weight:800 !important;line-height:1.2 !important;color:var(--ink)}
.ibmi-pp .jrn-cert .awd{font-size:9px !important;color:var(--ink-faint);margin-top:8px !important;font-style:italic !important}
.ibmi-pp .jrn-cert .nm{font-family:Georgia,'Times New Roman',serif !important;font-size:16px !important;font-weight:700 !important;color:var(--brand-deep);line-height:1.1 !important;margin-top:2px !important}
.ibmi-pp .jrn-cert-foot{display:flex;justify-content:space-between;margin-top:12px !important;padding-top:9px !important; border-top:1px solid var(--line-soft);font-size:8px !important;font-weight:700 !important;color:var(--ink-faint);letter-spacing:.03em !important}
.ibmi-pp .jrn-cbtns{display:flex;flex-direction:column;gap:7px;margin-top:11px !important}
.ibmi-pp .jrn-cbtn{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px !important;font-weight:800 !important; border-radius:10px;padding:9px 8px !important;border:1px solid var(--line-soft);background:#fff;color:var(--ink-mid);cursor:pointer}
.ibmi-pp .jrn-cbtn svg{width:13px;height:13px;flex:none}
.ibmi-pp .jrn-cbtn.li{background:#0A66C2;border-color:#0A66C2;color:#fff}
.ibmi-pp .jrn-cbtn.vf{color:var(--brand-deep);border-color:rgba(0,136,204,.35)}
.ibmi-pp .jrn-cbtn.vf svg{color:var(--green)}
.ibmi-pp .jrn-cert-pop{position:absolute;z-index:7;top:10px;left:-16px;right:-16px; display:flex;align-items:center;gap:12px;text-align:left !important;padding:12px 15px !important; box-shadow:0 18px 38px -10px rgba(9,60,100,.5),0 5px 12px rgba(9,60,100,.2); opacity:0;transform:translateY(12px) scale(.96);transition:opacity .55s ease,transform .55s ease;pointer-events:none}
.ibmi-pp .jrn-cert-pop .jrn-seal{margin:0 !important;flex:none;width:38px;height:38px}
.ibmi-pp .jrn-cert-pop .pop-tx{min-width:0}
.ibmi-pp .jrn-cert-pop .cap{margin-top:0 !important}
.ibmi-pp .jrn-cert-pop h5{margin:3px 0 0 !important;font-size:13px !important}
.ibmi-pp .jrn-cert-pop .pop-meta{margin-top:3px !important;font-size:9px !important;font-weight:700 !important;color:var(--ink-faint)}
.ibmi-pp .jrn-cert-pop.on{opacity:1;transform:none}
.ibmi-pp .jrn-s3{justify-content:flex-start}
.ibmi-pp .jrn-s3-pad{flex:none;height:44px}
.ibmi-pp .jrn-s3-share{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px}
.ibmi-pp .jrn-s3-h{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px !important;font-weight:800 !important;color:var(--green);margin-bottom:3px !important}
.ibmi-pp .jrn-s3-h svg{width:14px;height:14px;flex:none}
.ibmi-pp .jrn-bub-verify{gap:8px;padding:5px 5px 5px 13px !important}
.ibmi-pp .jrn-bub-verify .vid{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;font-size:11px !important;font-weight:800 !important;letter-spacing:.02em !important;color:var(--ink-mid)}
.ibmi-pp .jrn-bub-verify .vgo{font-size:11px !important;font-weight:800 !important;color:#fff;background:linear-gradient(150deg,#25B6DE,#0074B0);border-radius:999px;padding:5px 11px !important;box-shadow:inset 0 1px 1px rgba(255,255,255,.5)}
.ibmi-pp .jrn-s4-list{display:flex;flex-direction:column;gap:5px}
.ibmi-pp .jrn-s4-row{display:flex;align-items:center;gap:8px;font-size:10.5px !important;font-weight:700 !important;color:var(--ink-mid);background:#fff;border:1px solid var(--line-soft);border-radius:8px;padding:6px 9px !important}
.ibmi-pp .jrn-s4-row .rc{flex:none;width:15px;height:15px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center}
.ibmi-pp .jrn-s4-row .rc svg{width:9px;height:9px;color:#fff}
.ibmi-pp .jrn-s4-row.todo{color:var(--ink-faint);background:#F6FAFD}
.ibmi-pp .jrn-s4-row.todo .rc{background:transparent;border:2px solid var(--line)}
.ibmi-pp .jrn-s4-cert{margin-top:2px !important;display:flex;align-items:center;gap:9px;padding:10px 11px !important;border-radius:12px;color:#fff; background:linear-gradient(150deg,rgba(72,200,236,.96),rgba(0,116,176,.96));box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 8px 18px -8px rgba(0,136,204,.6)}
.ibmi-pp .jrn-s4-cert .s4c-ic{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center}
.ibmi-pp .jrn-s4-cert .s4c-ic svg{width:15px;height:15px;color:#fff}
.ibmi-pp .jrn-s4-cert .s4c-tx b{display:block;font-size:11px !important;font-weight:800 !important;line-height:1.2 !important}
.ibmi-pp .jrn-s4-cert .s4c-tx small{font-size:9.5px !important;opacity:.92}
.ibmi-pp .jrn-s4-sub{font-size:10px !important;font-weight:700 !important;letter-spacing:.03em !important;color:var(--ink-soft);margin-top:-3px !important}
.ibmi-pp .jrn-s4-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ibmi-pp .jrn-s4-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center !important;background:#fff;border:1px solid var(--line-soft);border-radius:10px;padding:9px 6px !important;min-height:52px;box-shadow:0 1px 2px rgba(9,78,128,.05)}
.ibmi-pp .jrn-s4-tile .tc{flex:none;width:20px;height:20px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center}
.ibmi-pp .jrn-s4-tile .tc svg{width:12px;height:12px;color:#fff}
.ibmi-pp .jrn-s4-tile b{font-size:9.5px !important;font-weight:800 !important;color:var(--ink-mid);line-height:1.15 !important}
.ibmi-pp .jrn-s4-tile.todo{background:#F6FAFD;border-style:dashed}
.ibmi-pp .jrn-s4-tile.todo .tc{background:transparent;border:2px solid var(--line)}
.ibmi-pp .jrn-s4-tile.todo b{color:var(--ink-faint)}
.ibmi-pp .jrn-s4-flow{display:flex;justify-content:center;align-items:center;color:var(--brand-deep);margin:-1px 0 !important}
.ibmi-pp .jrn-s4-flow svg{width:22px;height:22px}
.ibmi-pp .jrn-cgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ibmi-pp .jrn-ccard{background:#fff;border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(9,78,128,.06);display:flex;flex-direction:column}
.ibmi-pp .jrn-ccard.sel{border-color:var(--brand);box-shadow:0 0 0 2px rgba(0,136,204,.25),0 12px 24px -12px rgba(0,136,204,.5)}
.ibmi-pp .jrn-cthumb{position:relative;height:54px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ibmi-pp .jrn-cthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ibmi-pp .jrn-cthumb .cc-ic{color:#fff;opacity:.96}
.ibmi-pp .jrn-cthumb .cc-ic svg{width:22px;height:22px}
.ibmi-pp .jrn-cthumb .cc-badge{position:absolute;top:5px;right:5px;z-index:2;width:18px;height:18px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(9,60,100,.35)}
.ibmi-pp .jrn-cthumb .cc-badge svg{width:11px;height:11px;color:#fff}
.ibmi-pp .jrn-cbody{padding:8px 9px 9px !important;flex:1;display:flex;flex-direction:column}
.ibmi-pp .jrn-cbody b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:10.5px !important;font-weight:800 !important;color:var(--ink);line-height:1.18 !important}
.ibmi-pp .jrn-cbody small{display:block;margin-top:auto !important;padding-top:5px !important;font-size:9px !important;color:var(--ink-faint);font-weight:700 !important}
.ibmi-pp .jrn-s2-head{display:flex;align-items:center;gap:9px}
.ibmi-pp .jrn-s2-ic{flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -6px rgba(0,136,204,.6)}
.ibmi-pp .jrn-s2-ic svg{width:18px;height:18px;color:#fff}
.ibmi-pp .jrn-s2-ht{display:flex;flex-direction:column;min-width:0}
.ibmi-pp .jrn-s2-ht b{font-size:12px !important;font-weight:800 !important;color:var(--ink);line-height:1.2 !important}
.ibmi-pp .jrn-s2-ht small{font-size:9.5px !important;font-weight:700 !important;color:var(--ink-soft)}
.ibmi-pp .jrn-ch{display:flex;flex-direction:column;gap:7px}
.ibmi-pp .jrn-ch-row{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line-soft);border-radius:11px;padding:8px 10px !important}
.ibmi-pp .jrn-ch-row.now{border-color:var(--brand-soft);background:linear-gradient(180deg,#F4FBFE,#E9F5FD);box-shadow:0 8px 18px -10px rgba(0,136,204,.45)}
.ibmi-pp .jrn-ch-row .ch-ic{flex:none;width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.ibmi-pp .jrn-ch-row .ch-ic.done{background:var(--green)}
.ibmi-pp .jrn-ch-row .ch-ic.done svg{width:13px;height:13px;color:#fff}
.ibmi-pp .jrn-ch-row .ch-ic.now{background:linear-gradient(150deg,#25B6DE,#0074B0)}
.ibmi-pp .jrn-ch-row .ch-ic.now svg{width:11px;height:11px;color:#fff;margin-left:1px !important}
.ibmi-pp .jrn-ch-row .ch-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.ibmi-pp .jrn-ch-row .ch-tx b{font-size:11px !important;font-weight:800 !important;color:var(--ink);line-height:1.15 !important}
.ibmi-pp .jrn-ch-row.done .ch-tx b{color:var(--ink-soft)}
.ibmi-pp .jrn-ch-row .ch-tx small{font-size:9px !important;font-weight:700 !important;color:var(--ink-faint)}
.ibmi-pp .jrn-ch-row .ch-time{flex:none;font-size:9px !important;font-weight:800 !important;color:var(--ink-faint)}
.ibmi-pp .jrn-ch-row.now .ch-time{color:var(--brand-deep)}
.ibmi-pp .jrn-audio{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:9px 11px !important;box-shadow:0 8px 18px -10px rgba(9,78,128,.3)}
.ibmi-pp .jrn-audio .au-play{flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(150deg,#25B6DE,#0074B0);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -6px rgba(0,136,204,.7)}
.ibmi-pp .jrn-audio .au-play svg{width:13px;height:13px;color:#fff;margin-left:1px !important}
.ibmi-pp .jrn-audio .au-wave{flex:1;display:flex;align-items:center;gap:2px;height:24px}
.ibmi-pp .jrn-audio .au-wave i{flex:1;height:35%;background:var(--line-soft);border-radius:2px}
.ibmi-pp .jrn-audio .au-wave i.p{background:linear-gradient(180deg,#25B6DE,#0074B0)}
.ibmi-pp .jrn-audio .au-wave i:nth-child(3n){height:72%}
.ibmi-pp .jrn-audio .au-wave i:nth-child(3n+1){height:45%}
.ibmi-pp .jrn-audio .au-wave i:nth-child(3n+2){height:60%}
.ibmi-pp .jrn-audio .au-wave i:nth-child(5n){height:95%}
.ibmi-pp .jrn-audio .au-wave i:nth-child(7n){height:30%}
.ibmi-pp .jrn-audio .au-time{flex:none;font-size:10px !important;font-weight:800 !important;color:var(--ink-soft)}
.ibmi-pp .jrn-ch-row.up{background:#F7FAFD}
.ibmi-pp .jrn-ch-row .ch-ic.up{background:var(--paper-tint);color:var(--brand-deep);font-size:11px !important;font-weight:800 !important}
.ibmi-pp .jrn-ch-row.up .ch-tx b{color:var(--ink-mid)}
.ibmi-pp .jrn-s3-rdy{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px !important;font-weight:800 !important;color:var(--green);margin-bottom:4px !important}
.ibmi-pp .jrn-s3-rdy svg{width:14px;height:14px;flex:none}
.ibmi-pp .jrn-devices{display:flex;justify-content:center;position:relative}
.ibmi-pp .jrn-laptop{width:100%;max-width:540px;margin:0 auto !important}
.ibmi-pp .jrn-lid{background:#0D0F11;border-radius:16px;padding:10px !important;box-shadow:0 2px 4px rgba(9,40,64,.2),0 34px 66px -26px rgba(9,60,100,.6),inset 0 1px 1px rgba(255,255,255,.12)}
.ibmi-pp .jrn-lscreen{position:relative;aspect-ratio:16/10;border-radius:7px;overflow:hidden;background:linear-gradient(180deg,#F6FBFE,#EAF4FB)}
.ibmi-pp .jrn-lp{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:scale(1.01);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.ibmi-pp .jrn-lp.on{opacity:1;transform:none}
.ibmi-pp .jrn-lbase{position:relative;height:15px;width:118%;margin:0 -9% !important;background:linear-gradient(180deg,#DAE2E9,#B2BEC8);border-radius:0 0 13px 13px;box-shadow:0 12px 22px -12px rgba(9,60,100,.5)}
.ibmi-pp .jrn-lbase::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:84px;height:6px;background:#A6B2BC;border-radius:0 0 7px 7px}
.ibmi-pp .lp-bar{display:flex;align-items:center;gap:8px;padding:6px 9px !important;background:#fff;border-bottom:1px solid var(--line-soft)}
.ibmi-pp .lp-dots{display:flex;gap:4px}
.ibmi-pp .lp-dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.ibmi-pp .lp-url{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;background:var(--paper);border-radius:99px;padding:3px 10px !important;font-size:8.5px !important;font-weight:700 !important;color:var(--ink-soft)}
.ibmi-pp .lp-url svg{width:8px;height:8px;color:var(--green);flex:none}
.ibmi-pp .lp-body{flex:1;min-height:0;padding:14px 32px !important;display:flex;flex-direction:column;gap:9px}
.ibmi-pp .lp-h b{font-size:12px !important;font-weight:800 !important;color:var(--ink);display:block}
.ibmi-pp .lp-h span{font-size:9px !important;color:var(--ink-faint);font-weight:600 !important}
.ibmi-pp .lp-cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ibmi-pp .lp-ccard{background:#fff;border:1px solid var(--line-soft);border-radius:9px;overflow:hidden;display:flex;flex-direction:column}
.ibmi-pp .lp-ccard.sel{border-color:var(--brand);box-shadow:0 0 0 2px rgba(0,136,204,.22)}
.ibmi-pp .lp-cthumb{position:relative;height:34px;display:flex;align-items:center;justify-content:center}
.ibmi-pp .lp-cthumb svg{width:15px;height:15px;color:#fff}
.ibmi-pp .lp-cbadge{position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center}
.ibmi-pp .lp-cbadge svg{width:9px;height:9px;color:#fff}
.ibmi-pp .lp-cbody{padding:5px 7px 7px !important;flex:1;display:flex;flex-direction:column}
.ibmi-pp .lp-cbody b{font-size:8.5px !important;font-weight:800 !important;color:var(--ink);line-height:1.15 !important}
.ibmi-pp .lp-cbody small{font-size:7.5px !important;color:var(--ink-faint);font-weight:700 !important;margin-top:auto !important;padding-top:3px !important}
.ibmi-pp .lp-two{flex-direction:row;gap:11px}
.ibmi-pp .lp-side{width:40%;display:flex;flex-direction:column;gap:5px}
.ibmi-pp .lp-side-h{display:flex;align-items:center;gap:6px;font-size:9px !important;font-weight:800 !important;color:var(--ink);line-height:1.15 !important;margin-bottom:2px !important}
.ibmi-pp .lp-side-ic{flex:none;width:18px;height:18px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.ibmi-pp .lp-side-ic svg{width:11px;height:11px;color:#fff}
.ibmi-pp .lp-chap{display:flex;align-items:center;gap:6px;font-size:8px !important;font-weight:700 !important;padding:5px 7px !important;border-radius:7px;background:#fff;border:1px solid var(--line-soft);color:var(--ink-soft)}
.ibmi-pp .lp-chap svg{width:11px;height:11px;flex:none;border-radius:3px;padding:1px !important;color:#fff}
.ibmi-pp .lp-chap.done svg{background:var(--green)}
.ibmi-pp .lp-chap.on{background:linear-gradient(180deg,#F4FBFE,#E9F5FD);border-color:var(--brand-soft);color:var(--ink)}
.ibmi-pp .lp-chap.on svg{background:linear-gradient(150deg,#25B6DE,#0074B0)}
.ibmi-pp .lp-main{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.ibmi-pp .lp-main-h{font-size:11px !important;font-weight:800 !important;color:var(--ink)}
.ibmi-pp .lp-line{height:5px;border-radius:99px;background:var(--line-soft)}
.ibmi-pp .lp-line.w95{width:95%}
.ibmi-pp .lp-line.w92{width:92%}
.ibmi-pp .lp-line.w90{width:90%}
.ibmi-pp .lp-line.w88{width:88%}
.ibmi-pp .lp-line.w70{width:70%}
.ibmi-pp .lp-line.w60{width:60%}
.ibmi-pp .lp-audio{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line-soft);border-radius:9px;padding:7px 9px !important;margin:2px 0 !important}
.ibmi-pp .lp-audio .au-play{flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(150deg,#25B6DE,#0074B0);display:flex;align-items:center;justify-content:center}
.ibmi-pp .lp-audio .au-play svg{width:11px;height:11px;color:#fff;margin-left:1px !important}
.ibmi-pp .lp-audio .au-wave{flex:1;display:flex;align-items:center;justify-content:space-between;gap:0;height:20px}
.ibmi-pp .lp-audio .au-wave i{flex:none;width:2px;height:35%;background:#D8E8F0;border-radius:99px;transition:height .24s ease,background .24s ease}
.ibmi-pp .lp-audio .au-wave i.p{background:linear-gradient(180deg,#25B6DE,#0074B0);box-shadow:0 0 4px rgba(37,182,222,.3)}
.ibmi-pp .lp-audio .au-wave i:nth-child(3n){height:70%}
.ibmi-pp .lp-audio .au-wave i:nth-child(5n){height:95%}
.ibmi-pp .lp-audio .au-wave i:nth-child(4n){height:50%}
.ibmi-pp .lp-audio .au-wave i:nth-child(7n){height:28%}
.ibmi-pp .lp-audio:hover .au-wave i.p{box-shadow:0 0 6px rgba(37,182,222,.5)}
.ibmi-pp .lp-audio .au-time{flex:none;font-size:8px !important;font-weight:800 !important;color:var(--ink-soft)}
.ibmi-pp .lp-chead{display:flex;align-items:center;gap:8px}
.ibmi-pp .lp-ch-ic{flex:none;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#2AA4E0,#0074B0);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 12px -5px rgba(0,136,204,.6)}
.ibmi-pp .lp-ch-ic svg{width:14px;height:14px;color:#fff}
.ibmi-pp .lp-ch-t{display:flex;flex-direction:column;line-height:1.2 !important;min-width:0}
.ibmi-pp .lp-ch-t small{font-size:7.5px !important;font-weight:800 !important;letter-spacing:.1em !important;text-transform:uppercase !important;color:var(--brand-deep)}
.ibmi-pp .lp-ch-t b{font-size:12px !important;font-weight:800 !important;color:var(--ink)}
.ibmi-pp .lp-flow{display:flex;align-items:center;gap:4px;margin-top:2px !important}
.ibmi-pp .lp-ftile{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:1px solid var(--line-soft);border-radius:9px;padding:8px 4px !important;font-size:8px !important;font-weight:800 !important;color:var(--ink-mid);text-align:center !important;white-space:nowrap}
.ibmi-pp .lp-ftile i{flex:none;width:19px;height:19px;border-radius:6px;background:color-mix(in srgb,var(--fc,#0088CC) 14%,#fff);display:flex;align-items:center;justify-content:center}
.ibmi-pp .lp-ftile i svg{width:12px;height:12px;color:var(--fc,#0088CC)}
.ibmi-pp .lp-farr{flex:none;display:flex;color:var(--line)}
.ibmi-pp .lp-farr svg{width:9px;height:9px}
.ibmi-pp .lp-sprog{display:flex;flex-direction:column;gap:3px;margin:1px 0 2px !important}
.ibmi-pp .lp-pbar{height:4px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.ibmi-pp .lp-pbar i{display:block;height:100%;width:62%;border-radius:inherit;background:var(--grad)}
.ibmi-pp .lp-sprog small{font-size:7.5px !important;font-weight:800 !important;color:var(--green)}
.ibmi-pp .lp-p2{display:flex;flex-direction:column;gap:6px;margin-top:2px !important}
.ibmi-pp .lp-two .lp-main{gap:5px;justify-content:space-between}
.ibmi-pp .lp-sider{width:30%;gap:5px}
.ibmi-pp .lp-slbl{font-size:7px !important;font-weight:800 !important;letter-spacing:.1em !important;text-transform:uppercase !important;color:var(--ink-faint)}
.ibmi-pp .lp-slbl2{margin-top:7px !important}
.ibmi-pp .lp-spct{font-size:7.5px !important;font-weight:800 !important;color:var(--green)}
.ibmi-pp .lp-sider .lp-chap{padding:4px 6px !important;font-size:7.5px !important;gap:5px}
.ibmi-pp .lp-sider .lp-chap svg{width:10px;height:10px}
.ibmi-pp .lp-sider .lp-chap.on svg{background:linear-gradient(150deg,#25B6DE,#0074B0);fill:#fff}
.ibmi-pp .lp-ftx{margin:0 !important;font-size:6px !important;line-height:1.65 !important;color:var(--ink-soft);text-align:justify !important}
.ibmi-pp .jrn-txtwrap{flex:1;display:flex;flex-direction:column;gap:8px;justify-content:center;padding:0 3px !important}
.ibmi-pp .jrn-ftx{margin:0 !important;font-size:7px !important;line-height:1.7 !important;color:var(--ink-soft);text-align:justify !important}
.ibmi-pp .lp-chead-c{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center !important}
.ibmi-pp .lp-chead-c small{font-size:7px !important;font-weight:800 !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:var(--brand-deep)}
.ibmi-pp .lp-chead-c b{font-size:12.5px !important;font-weight:800 !important;color:var(--ink);letter-spacing:-.01em !important}
.ibmi-pp .jrn-chead{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center !important;margin-top:2px !important}
.ibmi-pp .jrn-chead small{font-size:8px !important;font-weight:800 !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:var(--brand-deep)}
.ibmi-pp .jrn-chead b{font-size:14.5px !important;font-weight:800 !important;color:var(--ink);letter-spacing:-.01em !important}
.ibmi-pp .lp-graph{background:#fff;border:1px solid var(--line-soft);border-radius:9px;padding:7px 9px 6px !important;display:flex;flex-direction:column;gap:4px}
.ibmi-pp .lp-gh{display:flex;align-items:center;justify-content:space-between}
.ibmi-pp .lp-gt{font-size:7px !important;font-weight:800 !important;letter-spacing:.09em !important;text-transform:uppercase !important;color:var(--ink-faint)}
.ibmi-pp .lp-gd{display:inline-flex;align-items:center;gap:3px;font-size:7.5px !important;font-weight:800 !important;color:var(--green)}
.ibmi-pp .lp-gd svg{width:8px;height:8px}
.ibmi-pp .lp-gsvg{width:100%;height:32px;display:block}
.ibmi-pp .jrn-graph{border-radius:11px;padding:9px 11px 8px !important}
.ibmi-pp .jrn-graph .lp-gt{font-size:8px !important}
.ibmi-pp .jrn-graph .lp-gd{font-size:8.5px !important}
.ibmi-pp .jrn-graph .lp-gsvg{height:42px}
.ibmi-pp .lp-graph2{flex-direction:row;align-items:center;gap:12px;padding:8px 11px !important}
.ibmi-pp .lp-cyc{flex:none;display:grid;grid-template-columns:auto auto auto;gap:3px 4px;align-items:center;justify-items:center}
.ibmi-pp .cyc-n{font-size:6px !important;font-weight:800 !important;line-height:1 !important;white-space:nowrap;color:var(--ink-mid);background:color-mix(in srgb,var(--cc,#0088CC) 10%,#fff);border:1px solid color-mix(in srgb,var(--cc,#0088CC) 32%,#fff);border-radius:99px;padding:3.5px 7px !important}
.ibmi-pp .cyc-a{display:flex;align-items:center;justify-content:center;color:#9DBBD0}
.ibmi-pp .cyc-a svg{width:8px;height:8px}
.ibmi-pp .cyc-dn svg{transform:rotate(90deg)}
.ibmi-pp .cyc-lt svg{transform:rotate(180deg)}
.ibmi-pp .cyc-up svg{transform:rotate(-90deg)}
.ibmi-pp .lp-g2t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ibmi-pp .lp-nav{display:flex;align-items:center;justify-content:space-between}
.ibmi-pp .lp-nbtn{display:inline-flex;align-items:center;gap:4px;font-size:7px !important;font-weight:800 !important;color:var(--ink-soft);background:#fff;border:1px solid var(--line-soft);border-radius:99px;padding:4px 9px !important}
.ibmi-pp .lp-nbtn svg{width:8px;height:8px}
.ibmi-pp .lp-nbtn.nb-next{background:linear-gradient(150deg,#25B6DE,#0074B0);color:#fff;border-color:transparent;box-shadow:0 4px 10px -4px rgba(0,136,204,.6)}
.ibmi-pp .jrn-nav .lp-nbtn{font-size:8.5px !important;padding:6px 11px !important;gap:5px}
.ibmi-pp .jrn-nav .lp-nbtn svg{width:10px;height:10px}
.ibmi-pp .jrn-txt{flex:1;display:flex;flex-direction:column;gap:8px;justify-content:center;padding:1px 2px !important}
.ibmi-pp .jrn-txt i{height:6px;border-radius:99px;background:#DCE9F2}
.ibmi-pp .jrn-flow{display:flex;align-items:center;gap:5px}
.ibmi-pp .jrn-flow .lp-ftile{padding:9px 5px !important;font-size:8.5px !important;border-radius:10px;gap:5px}
.ibmi-pp .jrn-flow .lp-ftile i{width:23px;height:23px;border-radius:7px}
.ibmi-pp .jrn-flow .lp-ftile i svg{width:14px;height:14px}
.ibmi-pp .jrn-flow .lp-farr svg{width:10px;height:10px}
.ibmi-pp .jrn-pfoot{display:flex;flex-direction:column;gap:4px;margin-top:2px !important}
.ibmi-pp .jrn-pfoot small{font-size:9px !important;font-weight:800 !important;color:var(--green);text-align:center !important}
.ibmi-pp .jrn-s2-ht small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ibmi-pp .lp-cert{align-items:center;justify-content:center;gap:12px}
.ibmi-pp .lp-certcard{width:86%;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:13px 15px !important;position:relative;overflow:hidden;box-shadow:0 14px 30px -14px rgba(9,60,100,.4)}
.ibmi-pp .lp-certcard::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)}
.ibmi-pp .lp-seal{flex:none;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE58A,#FFCC00 62%,#E0A800);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px -4px rgba(224,168,0,.7)}
.ibmi-pp .lp-seal svg{width:19px;height:19px;color:#7a5b00}
.ibmi-pp .lp-ct{flex:1;min-width:0}
.ibmi-pp .lp-cap{font-size:7.5px !important;font-weight:800 !important;letter-spacing:.14em !important;color:var(--brand-deep)}
.ibmi-pp .lp-ctitle{font-size:13px !important;font-weight:800 !important;color:var(--ink);margin:2px 0 !important}
.ibmi-pp .lp-cwho{font-size:8.5px !important;color:var(--ink-faint);font-weight:600 !important}
.ibmi-pp .lp-cwho b{color:var(--ink-mid)}
.ibmi-pp .lp-cverify{flex:none;display:flex;align-items:center;gap:4px;font-size:8px !important;font-weight:800 !important;color:var(--green)}
.ibmi-pp .lp-cverify svg{width:11px;height:11px;background:var(--green);color:#fff;border-radius:3px;padding:1px !important}
.ibmi-pp .lp-share{display:flex;gap:8px}
.ibmi-pp .lp-sbtn{display:flex;align-items:center;gap:5px;font-size:8.5px !important;font-weight:800 !important;color:var(--ink-mid);background:#fff;border:1px solid var(--line-soft);border-radius:8px;padding:7px 11px !important}
.ibmi-pp .lp-sbtn svg{width:11px;height:11px}
.ibmi-pp .lp-sbtn.li{background:#0A66C2;border-color:#0A66C2;color:#fff}
.ibmi-pp .lp-sbtn.vf{color:var(--brand-deep);border-color:rgba(0,136,204,.35)}
.ibmi-pp .lp-sbtn.vf svg{color:var(--green)}
.ibmi-pp .lp-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ibmi-pp .lp-ptile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center !important;font-size:8.5px !important;font-weight:800 !important;color:var(--ink-mid);background:#fff;border:1px solid var(--line-soft);border-radius:8px;padding:8px 5px !important;min-height:44px}
.ibmi-pp .lp-ptile .pt-c{flex:none;width:16px;height:16px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center}
.ibmi-pp .lp-ptile .pt-c svg{width:10px;height:10px;color:#fff}
.ibmi-pp .lp-ptile.todo{color:var(--ink-faint);background:#F7FAFD;border-style:dashed}
.ibmi-pp .lp-ptile.todo .pt-c{background:transparent;border:2px solid var(--line)}
.ibmi-pp .lp-pcert{display:flex;align-items:center;gap:9px;padding:9px 11px !important;border-radius:10px;color:#fff;font-size:9.5px !important;font-weight:700 !important;background:linear-gradient(150deg,rgba(72,200,236,.96),rgba(0,116,176,.96));box-shadow:0 8px 18px -8px rgba(0,136,204,.6)}
.ibmi-pp .lp-pcert b{font-weight:800 !important}
.ibmi-pp .lp-pc-ic{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center}
.ibmi-pp .lp-pc-ic svg{width:14px;height:14px;color:#fff}
@media (min-width:861px){.ibmi-pp .jrn{grid-template-columns:1.16fr .84fr;gap:38px}
.ibmi-pp .jrn-devices{display:block;position:sticky;top:calc(50vh - 172px);width:100%;max-width:560px;margin:0 auto !important}
.ibmi-pp .jrn-phone{position:absolute;right:-4px;bottom:-54px;top:auto;left:auto;margin:0 !important;width:252px;transform:scale(.6);transform-origin:bottom right;z-index:3}}
@media (max-width:860px){.ibmi-pp .jrn-laptop{display:none}}
.ibmi-pp .anyd-lead{max-width:56ch;margin:14px auto 0 !important;font-size:15.5px !important;line-height:1.6 !important;color:var(--ink-soft);text-align:center !important}
.ibmi-pp .anyd-stack{position:relative;display:flex;justify-content:center;margin:28px auto 0 !important;max-width:560px}
.ibmi-pp .anyd-phone{position:relative;width:232px;border-radius:40px;background:#0D0F11;padding:10px !important;box-shadow:0 2px 4px rgba(9,40,64,.18),0 30px 60px -20px rgba(9,60,100,.5),inset 0 1px 1px rgba(255,255,255,.14)}
@media (max-width:860px){.ibmi-pp .anyd-phone{zoom:.82}}
.ibmi-pp .anyd-phone::before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:74px;height:18px;background:#0D0F11;border-radius:0 0 12px 12px;z-index:5}
.ibmi-pp .anyd-pscreen{border-radius:30px;overflow:hidden;background:linear-gradient(180deg,#F6FBFE,#EAF4FB);padding:30px 14px 14px !important;display:flex;flex-direction:column;gap:10px;min-height:430px}
.ibmi-pp .anyd-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;margin-top:34px !important}
.ibmi-pp .anyd-ufacts{max-width:420px;margin-left:auto !important;margin-right:auto !important;margin-top:22px !important}
/* USP tiles: icon on top, one-line headline + one-line subtext, centred */
.ibmi-pp .anyd-ufacts li{flex-direction:column;align-items:center;text-align:center !important;gap:8px}
.ibmi-pp .anyd-ufacts li>span{display:flex;flex-direction:column;gap:1px;min-width:0}
.ibmi-pp .anyd-ufacts b{font-size:13.5px !important;line-height:1.25 !important}
.ibmi-pp .anyd-ufacts small{font-size:12px !important;line-height:1.3 !important}
@media (max-width:860px){.ibmi-pp .anyd-ufacts b, .ibmi-pp .anyd-ufacts small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.ibmi-pp .anyd-fact{display:inline-flex;align-items:center;gap:8px;font-size:14px !important;font-weight:700 !important;color:var(--ink-mid);background:var(--paper-raised);border:1px solid var(--line-soft);border-radius:99px;padding:11px 17px !important;box-shadow:var(--shadow-card)}
.ibmi-pp .anyd-fact svg{width:16px;height:16px;color:var(--brand-deep);flex:none}
@media (min-width:861px){.ibmi-pp .anyd-stack{display:block;max-width:700px}
.ibmi-pp .anyd-sec .jrn-laptop{margin:0 !important}
.ibmi-pp .anyd-phone{position:absolute;right:-8px;bottom:-40px;transform:scale(.66);transform-origin:bottom right;z-index:3}
.ibmi-pp .anyd-facts{margin-top:70px !important}
.ibmi-pp .anyd-ufacts{margin-top:70px !important;max-width:960px;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 26px}}
@media (max-width:860px){.ibmi-pp .anyd-stack{max-width:none}}
.ibmi-pp .jrn-steps{display:flex;flex-direction:column}
.ibmi-pp .jrn-step{min-height:88vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0 !important; opacity:.38;transition:opacity .45s ease}
.ibmi-pp .jrn-step.act{opacity:1}
.ibmi-pp .jrn-num{display:inline-flex;align-items:center;gap:11px;font-size:12px !important;font-weight:800 !important; letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--brand-deep);margin-bottom:16px !important}
.ibmi-pp .jrn-num i{flex:none;width:36px;height:36px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center; background:var(--grad);color:#fff;box-shadow:0 8px 18px -8px rgba(0,136,204,.6),inset 0 1px 1px rgba(255,255,255,.5)}
.ibmi-pp .jrn-num i svg{width:19px;height:19px}
.ibmi-pp .jrn-step h3{font-size:clamp(21px,2.5vw,28px) !important;font-weight:800 !important;line-height:1.14 !important;color:var(--ink);letter-spacing:-.022em !important}
.ibmi-pp .jrn-step>p{font-size:15px !important;line-height:1.62 !important;color:var(--ink-soft);margin:13px 0 0 !important;max-width:42ch}
.ibmi-pp .jrn-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px !important}
.ibmi-pp .jrn-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px !important;font-weight:700 !important;color:var(--ink-mid); background:var(--paper-raised);border:1px solid var(--line-soft);border-radius:99px;padding:8px 13px !important; box-shadow:0 1px 2px rgba(9,78,128,.05)}
.ibmi-pp .jrn-pill svg{width:13px;height:13px;color:var(--brand-deep);flex:none}
.ibmi-pp .jrn-mini{display:none}
.ibmi-pp .jrn-mcap, .ibmi-pp .jrn-mdots{display:none}
.ibmi-pp .jrn-mc .st{font-size:11px !important;font-weight:800 !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--brand-deep)}
.ibmi-pp .jrn-mc h4{margin:0 !important;font-size:21px !important;font-weight:800 !important;color:var(--ink);letter-spacing:-.022em !important;line-height:1.14 !important}
.ibmi-pp .jrn-mc .mp{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.ibmi-pp .jrn-mc .mp span{font-size:11.5px !important;font-weight:700 !important;color:var(--ink-mid);background:var(--paper-raised);border:1px solid var(--line-soft);border-radius:99px;padding:6px 12px !important;box-shadow:0 1px 2px rgba(9,78,128,.05)}
.ibmi-pp .jrn-mdots span{width:7px;height:7px;border-radius:99px;background:var(--line);transition:width .45s ease,background .45s ease}
.ibmi-pp .jrn-mdots span.on{width:24px;background:var(--brand)}
.ibmi-pp .jrn-bub{display:none;position:absolute;z-index:6;align-items:center;gap:6px;font-size:13px !important;font-weight:800 !important;color:var(--ink-mid);background:#fff;border:1px solid rgba(255,255,255,.85);border-radius:999px;padding:8px 12px !important;white-space:nowrap;box-shadow:0 2px 4px rgba(9,60,100,.14),0 16px 32px -8px rgba(9,60,100,.5);opacity:0;transform:scale(.92);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.ibmi-pp .jrn-bub svg{width:14px;height:14px;color:var(--brand-deep);flex:none}
.ibmi-pp .jrn-bub.on{opacity:1;transform:none}
.ibmi-pp .jrn-bub.tr{top:34px;right:-20px}
.ibmi-pp .jrn-bub.bl{bottom:40px;left:-20px}
.ibmi-pp .jrn-mcap-bot .jrn-mc p{margin:0 !important;font-size:13.5px !important;line-height:1.5 !important;color:var(--ink-soft);max-width:34ch}
@media (max-width:860px){.ibmi-pp .jrn{display:block;position:relative}
.ibmi-pp .jrn-stage{position:sticky;top:0;height:100svh;min-height:560px;display:flex;flex-direction:column; align-items:center;justify-content:center;z-index:3; background:radial-gradient(125% 78% at 50% 10%,#FFFFFF 0%,var(--paper) 44%,#E4F0F9 100%)}
.ibmi-pp .jrn-phone{position:static;top:auto;transform:scale(.84);transform-origin:center;margin:-39px 0 !important}
.ibmi-pp .jrn-mcap-top, .ibmi-pp .jrn-mcap-bot{display:block;position:relative;width:100%;max-width:340px}
.ibmi-pp .jrn-mcap-top{height:64px;margin-bottom:22px !important}
.ibmi-pp .jrn-mcap-bot{height:96px;margin-top:16px !important}
.ibmi-pp .jrn-mc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center !important; opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.ibmi-pp .jrn-mcap-top .jrn-mc{justify-content:flex-end}
.ibmi-pp .jrn-mcap-bot .jrn-mc{justify-content:flex-start}
.ibmi-pp .jrn-mc.on{opacity:1;transform:none}
.ibmi-pp .jrn-mdots{display:flex;gap:8px;margin-top:2px !important}
.ibmi-pp .jrn-bub{display:inline-flex}
.ibmi-pp .jrn-steps{position:relative;z-index:1}
.ibmi-pp .jrn-step{min-height:100svh;visibility:hidden;padding:0 !important;display:block}
.ibmi-pp .jrn-step:last-child{min-height:150svh}}
@media (max-width:379px){.ibmi-pp .jrn-stage{min-height:520px}
.ibmi-pp .jrn-phone{transform:scale(.72);margin:-68px 0 !important}
.ibmi-pp .jrn-mc h4{font-size:20px !important}
.ibmi-pp .jrn-mcap-top{height:58px;margin-bottom:8px !important}
.ibmi-pp .jrn-mcap-bot{height:110px;margin-top:12px !important}}
@media (prefers-reduced-motion:reduce){.ibmi-pp .jrn-screen{transition:opacity .001s}
.ibmi-pp .jrn-step{transition:none}}
.ibmi-pp .anyd-ufacts{margin-bottom:0 !important}
@media (min-width:721px){.ibmi-pp .anyd-sec{padding-top:64px !important}
.ibmi-pp .anyd-sec .sec-head{margin-bottom:64px !important}}
@media (max-width:720px){.ibmi-pp .anyd-sec{padding-top:32px !important}
.ibmi-pp .anyd-sec .sec-head{margin-bottom:32px !important}}
.ibmi-pp .cert .cert-media{width:100%}
/* rules the port filter missed: phone url bar (sizes the lock icon)
   and the phone footer progress bar */
.ibmi-pp .anyw-urlbar{display:flex;align-items:center;justify-content:center;gap:5px;background:#fff;border:1px solid var(--line-soft);border-radius:99px;padding:6px 10px !important;margin:0 2px !important;font-size:10px !important;font-weight:700 !important;letter-spacing:.01em !important;color:var(--ink-soft);box-shadow:0 1px 2px rgba(9,78,128,.06)}
.ibmi-pp .anyw-urlbar svg{width:10px;height:10px;color:var(--green);flex:none}
.ibmi-pp .anyw-bar{height:7px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.ibmi-pp .anyw-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),#25B6DE)}
/* opaque surfaces for the ported glass panels (PDP is blur-free) */
.ibmi-pp .vpanel{background:var(--card-fill);border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 1px rgba(255,255,255,1),0 1px 2px rgba(9,78,128,.07),0 16px 40px -18px rgba(9,78,128,.25)}

/* ---------- SMARTBAR (fixed add-to-cart, all widths) ----------
   Mobile stays compact (title + short meta + button). Desktop is richer:
   a square course thumbnail, the star rating, and the full fact list. */
.ibmi-pp .pp-smartbar{
  position:fixed; left:0; right:0; bottom:0; z-index:99990;
  display:flex; align-items:center; gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
  background:#fff; border-top:1px solid var(--line);
  box-shadow:0 -4px 18px -6px rgba(9,78,128,.18);
  transform:translateY(105%); transition:transform .28s cubic-bezier(.22,.75,.35,1);
}
@media (min-width:768px){
  .ibmi-pp .pp-smartbar{ gap:14px; padding-left:max(16px,calc(50vw - 552px)) !important; padding-right:max(16px,calc(50vw - 552px)) !important; }
}
.ibmi-pp .pp-smartbar.on{ transform:translateY(0); }
.ibmi-pp .pp-smartbar[hidden]{ display:none !important; }
/* square course image — desktop only. background-image so a blocked/failed
   remote image degrades to the brand-gradient tile instead of a broken icon. */
.ibmi-pp .sb-thumb{ display:none; flex:none; background-size:cover; background-position:center;
  background-color:#0B3D66; background-image:linear-gradient(135deg,#2E92E9 0%,#094E80 100%);
  border:1px solid rgba(9,78,128,.16); box-shadow:0 1px 3px rgba(9,78,128,.14); }
.ibmi-pp .sb-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.ibmi-pp .sb-title{ display:flex; align-items:center; font-size:14px !important; line-height:1.25 !important; font-weight:700 !important;
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ibmi-pp .sb-meta{ font-size:12.5px !important; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ibmi-pp .sb-meta s{ color:var(--strike); margin-right:5px !important; }
.ibmi-pp .sb-price b{ font-size:13.5px !important; color:var(--ink); }
.ibmi-pp .sb-rate{ display:none; }        /* mobile: hidden to keep the bar compact */
.ibmi-pp .sb-d{ display:none; }           /* desktop-only extended fact list */
.ibmi-pp .pp-smartbar .ibtn{ flex:none; padding:13px 20px !important; font-size:14.5px !important; }
@media (min-width:768px){
  .ibmi-pp .sb-thumb{ display:block; width:50px; height:50px; border-radius:12px; }
  .ibmi-pp .sb-title{ font-size:15px !important; }
  .ibmi-pp .sb-meta{ font-size:13px !important; }
  .ibmi-pp .sb-d{ display:inline; }
  .ibmi-pp .sb-m{ display:none; }
  /* rating pill: white chip, light border + shadow (same as course-tile ratings) */
  .ibmi-pp .sb-rate{ display:inline-flex; align-items:center; gap:4px; margin-left:10px !important; flex:none;
    font-size:12px !important; font-weight:700 !important; line-height:1 !important; color:var(--ink);
    background:#fff; border:1px solid var(--line-soft); border-radius:999px; padding:3px 9px 3px 8px !important; box-shadow:0 1px 3px rgba(9,40,64,.18); }
  .ibmi-pp .sb-rate svg{ width:12px; height:12px; color:var(--gold); }
}

/* ---------- performance: lazy-render below-fold sections on mobile ---------- */
@media (max-width:719px){
  .ibmi-pp .pp-cv{ content-visibility:auto; contain-intrinsic-size:auto 800px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ibmi-pp *{ transition:none !important; animation:none !important; }
}
/* ============================================================
 * LANGUAGE-TEST additions on top of the shared product-page sheet.
 * Scoped to .ibmi-pt so the course pages are untouched. Everything
 * else on this page reuses the course-page components as-is.
 * ============================================================ */

/* The hero photo is dimmed to .78 over the band's dark gradient. Dimming the
   picture and deepening the tile are two ways of buying the same contrast, so
   they trade off: at full brightness the tile needed .70, at .78 it only needs
   .58 and sits closer to the chassis value. Measured — see NOTES.md. */
.ibmi-pt .pp-band img{ opacity:.78 !important; object-position:center 42% !important; }
.ibmi-pt .pp-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(4,44,74,.16) 0%,rgba(4,44,74,.10) 45%,rgba(4,44,74,.28) 100%);
}

/* ---------- test UI mock: laptop question screen ---------- */
.ibmi-pt .pt-qhead{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ibmi-pt .pt-qhead b{ font-size:10px !important; font-weight:800 !important; color:var(--ink); }
.ibmi-pt .pt-qhead span{ font-size:8px !important; font-weight:800 !important; letter-spacing:.08em !important;
  text-transform:uppercase !important; color:var(--brand-deep); }
.ibmi-pt .pt-qbar{ height:4px; border-radius:99px; background:var(--line-soft); overflow:hidden; margin:5px 0 2px !important; }
.ibmi-pt .pt-qbar i{ display:block; height:100%; border-radius:inherit; background:var(--grad); }
.ibmi-pt .pt-qcard{ background:#fff; border:1px solid var(--line-soft); border-radius:10px;
  padding:10px 11px !important; display:flex; flex-direction:column; gap:7px;
  box-shadow:0 8px 20px -14px rgba(9,78,128,.5); }
.ibmi-pt .pt-qk{ font-size:7px !important; font-weight:800 !important; letter-spacing:.14em !important;
  text-transform:uppercase !important; color:var(--ink-faint); }
.ibmi-pt .pt-qtx{ margin:0 !important; font-size:10px !important; font-weight:700 !important; line-height:1.45 !important; color:var(--ink); }
.ibmi-pt .pt-qtx u{ text-decoration:none !important; border-bottom:2px solid var(--brand-soft); padding:0 14px !important; }
.ibmi-pt .pt-opts{ display:flex; flex-direction:column; gap:5px; }
.ibmi-pt .pt-opt{ display:flex; align-items:center; gap:7px; font-size:8.5px !important; font-weight:700 !important;
  color:var(--ink-mid); background:#fff; border:1px solid var(--line-soft);
  border-radius:7px; padding:5px 8px !important; }
.ibmi-pt .pt-opt i{ flex:none; width:12px; height:12px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-style:normal !important; }
.ibmi-pt .pt-opt.sel{ border-color:var(--brand); background:linear-gradient(180deg,#F4FBFE,#E9F5FD); color:var(--ink); }
.ibmi-pt .pt-opt.sel i{ border-color:var(--brand); background:var(--brand); }
.ibmi-pt .pt-opt.sel i::after{ content:""; width:4px; height:4px; border-radius:50%; background:#fff; }
.ibmi-pt .pt-qstrip{ display:flex; align-items:center; gap:10px; padding:7px 10px !important;
  background:#fff; border:1px solid var(--line-soft); border-radius:8px; }
.ibmi-pt .pt-qstrip span{ font-size:8px !important; font-weight:700 !important; color:var(--ink-soft); }
.ibmi-pt .pt-qstrip b{ font-size:9px !important; font-weight:800 !important; color:var(--ink); }
.ibmi-pt .pt-qstrip .pt-qsx{ margin-left:auto !important; color:var(--brand-deep); font-weight:800 !important; }
.ibmi-pt .pt-qfoot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px !important; }
.ibmi-pt .pt-qflag{ display:inline-flex; align-items:center; gap:4px; font-size:7px !important; font-weight:800 !important;
  color:var(--ink-faint); }
.ibmi-pt .pt-qflag svg{ width:8px; height:8px; }
/* the mock has to fit a 16:10 laptop screen exactly — the harness reports
   any overflow, so these are tuned rather than guessed */
.ibmi-pt .lp-body{ padding:12px 26px !important; gap:7px; }

/* ---------- test UI mock: phone result screen ---------- */
.ibmi-pt .pt-res{ display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center !important;
  background:#fff; border:1px solid var(--line-soft); border-radius:13px; padding:13px 12px !important;
  box-shadow:0 12px 26px -16px rgba(9,78,128,.5); }
.ibmi-pt .pt-res .pt-rk{ font-size:8px !important; font-weight:800 !important; letter-spacing:.14em !important;
  text-transform:uppercase !important; color:var(--brand-deep); }
.ibmi-pt .pt-score{ font-size:34px !important; font-weight:800 !important; line-height:1 !important;
  letter-spacing:-.03em !important; color:var(--ink); margin-top:4px !important; }
.ibmi-pt .pt-score small{ font-size:13px !important; font-weight:700 !important; color:var(--ink-faint); }
.ibmi-pt .pt-lvl{ display:inline-flex; align-items:center; gap:6px; margin-top:8px !important;
  font-size:10px !important; font-weight:800 !important; color:#fff;
  background:linear-gradient(150deg,#25B6DE,#0074B0); border-radius:99px; padding:5px 12px !important;
  box-shadow:0 8px 16px -8px rgba(0,136,204,.7); }
.ibmi-pt .pt-lvl em{ font-style:normal !important; font-weight:600 !important; opacity:.9; }
.ibmi-pt .pt-rsub{ margin-top:7px !important; font-size:8px !important; line-height:1.45 !important; color:var(--ink-soft); }
.ibmi-pt .pt-band{ display:flex; gap:3px; margin-top:9px !important; width:100%; }
.ibmi-pt .pt-band span{ flex:1; height:5px; border-radius:99px; background:var(--line-soft); position:relative; }
.ibmi-pt .pt-band span.on{ background:var(--grad); }
.ibmi-pt .pt-band small{ position:absolute; top:7px; left:50%; transform:translateX(-50%);
  font-size:6px !important; font-weight:800 !important; color:var(--ink-faint); }
.ibmi-pt .pt-bandwrap{ padding-bottom:11px !important; width:100%; }

/* ---------- CEFR ladder ----------
   Six equal boxes read as a list; the section is arguing that the scale is a
   progression and that one test spans all of it. So the tiles step upward,
   the chips deepen along the brand ramp, and a gradient rail runs above them.
   The step is a top margin driven by --i, which collapses to nothing at the
   narrower breakpoints where a staircase would just look like broken
   alignment. No rung is emphasised — see the note in the markup. */
.ibmi-pt .pt-ladder{ margin-top:30px !important; }
.ibmi-pt .pt-rail{ display:none; }
@media (min-width:1104px){
  /* sits UNDER the tiles, where it works as the axis the bars stand on */
  .ibmi-pt .pt-rail{ display:block; margin:14px 2px 0 !important; }
}
.ibmi-pt .pt-railline{ display:block; height:5px; border-radius:99px;
  background:linear-gradient(90deg,#C9E8F7 0%,#8ECFED 34%,#25B6DE 68%,#006DA3 100%);
  box-shadow:0 2px 10px -4px rgba(0,109,163,.5); }
.ibmi-pt .pt-railtx{ display:flex; justify-content:space-between; margin-top:8px !important; }
.ibmi-pt .pt-railtx small{ font-size:11.5px !important; font-weight:700 !important; letter-spacing:.14em !important;
  text-transform:uppercase !important; color:var(--ink-faint); }

/* it is an <ol> because the levels are an ordered scale; the list marker and
   the UA indent have to be turned off here rather than left to the hardening
   reset, or the component only looks right inside this block */
.ibmi-pt .pt-steps{ display:grid; grid-template-columns:1fr; gap:10px;
  margin:0 !important; padding:0 !important; list-style:none !important; }
.ibmi-pt .pt-step{ display:flex; flex-direction:column; padding:16px 16px 18px !important;
  transition:transform .15s ease, box-shadow .15s ease; }
/* the tiles are cards, so they lift on hover like every other card here */
@media (hover:hover){
  .ibmi-pt .pt-step:hover{ transform:translateY(-2px);
    box-shadow:inset 0 1px 1px rgba(255,255,255,1),0 2px 4px rgba(9,78,128,.08),0 18px 34px -14px rgba(9,78,128,.28); }
}
/* font metrics and radius are declared rather than inherited from the UA
   button defaults: without them the tile renders one way inside this block
   and another outside it, and a theme's button radius bleeds through */
.ibmi-pt .pt-lvhead{ display:flex; flex-direction:column; align-items:flex-start;
  width:100%; padding:0 !important; background:none; border:0; border-radius:0; text-align:left !important;
  font-size:15px !important; line-height:1.3 !important; cursor:default; }
.ibmi-pt .pt-lvchev{ display:none; }
.ibmi-pt .pt-chip{ flex:none; width:44px; height:44px; display:grid; place-items:center;
  font-size:15px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.02em !important; border-radius:12px;
  color:var(--cc,var(--brand-deep)); background:var(--cb,var(--tint)); }
.ibmi-pt .pt-step b{ display:block; font-size:15px !important; line-height:1.3 !important; margin-top:12px !important; }
.ibmi-pt .pt-step .lg{ display:block; font-size:11.5px !important; font-weight:700 !important; line-height:1.25 !important;
  letter-spacing:.08em !important; text-transform:uppercase !important; color:var(--ink-faint); margin-top:3px !important; }
.ibmi-pt .pt-step p{ margin:9px 0 0 !important; font-size:13px !important; line-height:1.5 !important; color:var(--ink-soft); }

/* the ramp: pale at A1, full brand at C2 */
.ibmi-pt .pt-step:nth-child(1){ --cb:#DCEEF9; --cc:#0B6A9C; }
.ibmi-pt .pt-step:nth-child(2){ --cb:#C9E8F7; --cc:#0B6A9C; }
.ibmi-pt .pt-step:nth-child(3){ --cb:#A9DBF2; --cc:#075E93; }
.ibmi-pt .pt-step:nth-child(4){ --cb:#6FC6E8; --cc:#04395C; }
.ibmi-pt .pt-step:nth-child(5){ --cb:linear-gradient(150deg,#25B6DE,#0A8CC9); --cc:#fff; }
.ibmi-pt .pt-step:nth-child(6){ --cb:linear-gradient(150deg,#0894D5,#00639A); --cc:#fff; }
.ibmi-pt .pt-step:nth-child(5) .pt-chip,
.ibmi-pt .pt-step:nth-child(6) .pt-chip{ box-shadow:0 8px 16px -8px rgba(0,109,163,.75); }

/* phone: chip beside the text, no staircase */
@media (max-width:599px){
  .ibmi-pt .pt-step{ padding:0 !important; }
  .ibmi-pt .pt-lvhead{ flex-direction:row; align-items:center; gap:13px;
    padding:11px 14px !important; min-height:60px; cursor:pointer; }
  .ibmi-pt .pt-chip{ width:38px; height:38px; font-size:13.5px !important; }
  .ibmi-pt .pt-lvtx{ flex:1; min-width:0; }
  .ibmi-pt .pt-step b{ margin-top:0 !important; font-size:14.5px !important; }
  .ibmi-pt .pt-step .lg{ margin-top:2px !important; }
  .ibmi-pt .pt-lvchev{ display:block; flex:none; width:16px; height:16px;
    color:var(--brand-deep); transition:transform .2s ease; }
  .ibmi-pt .pt-lvhead[aria-expanded="true"] .pt-lvchev{ transform:rotate(180deg); }
  .ibmi-pt .pt-step p{ margin:0 !important; padding:0 14px 14px 65px !important; }
  /* only collapse once the script has confirmed it can expand them again */
  .ibmi-pt .pt-steps.pt-js .pt-step p{ display:none; }
  .ibmi-pt .pt-steps.pt-js .pt-step.is-open p{ display:block; }
}
@media (min-width:600px){
  .ibmi-pt .pt-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
}
@media (min-width:900px){
  .ibmi-pt .pt-rail{ display:none; }
}
/* Six columns only once the container is at its full 1104px, where each column
   is 167px and every card's natural content height is exactly 204px. Below
   that the columns narrow, descriptions gain a line or two unevenly, and at
   900px A1 grew past A2 — the bars stopped rising. Three columns there
   instead. The 224px base leaves a line of headroom so a fallback font
   cannot reintroduce the inversion; the harness asserts the rise. */
@media (min-width:1104px){
  .ibmi-pt .pt-rail{ display:block; }
  .ibmi-pt .pt-steps{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; align-items:end; }
  .ibmi-pt .pt-step{ min-height:calc(224px + var(--i) * 28px); }
}

/* ---------- small print ---------- */
.ibmi-pt .pt-note{ margin:18px auto 0 !important; font-size:13px !important; line-height:1.55 !important;
  color:var(--ink-soft); max-width:62ch; }
.ibmi-pt .pt-center{ text-align:center !important; }

/* ---------- horizontal overflow guard ----------
   A single-column `1fr` track has an auto floor equal to the column's
   min-content, which a wide flex child can blow past. minmax(0,1fr) plus
   min-width:0 removes the floor. */
.ibmi-pt .pp-main,.ibmi-pt .pp-herocopy,.ibmi-pt .pp-aside,.ibmi-pt .pp-herostack{ min-width:0; }

/* ---------- mobile ---------- */
@media (max-width:719px){
  .ibmi-pt .pt-lev{ padding:13px 14px !important; }
  .ibmi-pt .pt-lev .lv{ width:38px; height:38px; font-size:13.5px !important; }
}

/* ---------- declared-intent fixes ----------
   .pp-modhead and .pp-lightbox-close carry no text of their own — every
   string sits in a classed child — so in the unhardened sheet they simply
   kept the UA button font metrics. The normaliser replaces those with the
   inherited 16px/1.55, which is invisible but shows up as a diff, so the
   intent is stated explicitly instead. */
.ibmi-pt .pp-modhead,.ibmi-pt .pp-lightbox-close,.ibmi-pt .pp-modmain{ font-size:13.3333px !important; line-height:normal !important; }
.ibmi-pt .pp-lightbox-close{ padding:0 !important; }
.ibmi-pt .pp-modnum{ line-height:normal !important; }

/* ---------- cross-sell badges ----------
   At two columns the card is ~155px wide and "Language test" runs into the
   rating pill. Same full/short pattern the chassis uses for durations. */
.ibmi-pt .pc-badge .bg-s{ display:none; }
@media (max-width:899px){
  .ibmi-pt .pc-badge .bg-f{ display:none; }
  .ibmi-pt .pc-badge .bg-s{ display:inline; }
}

/* ---------- "What's assessed" ----------
   Absorbed the old curriculum accordion: each check now carries the topics
   that were its three accordion rows. */
.ibmi-pt .pt-assessed-lede{ margin:0 0 16px !important; font-size:14px !important; line-height:1.55 !important; color:var(--ink-soft); }
.ibmi-pt .pt-checks li{ align-items:flex-start; }
.ibmi-pt .pt-checks b{ display:block; font-size:15px !important; font-weight:700 !important; color:var(--ink); line-height:1.35 !important; }
.ibmi-pt .pt-checks small{ display:block; margin-top:3px !important; font-size:13px !important; line-height:1.5 !important; color:var(--ink-soft); }
@media (min-width:720px){
  .ibmi-pt .pt-checks{ gap:15px; }
  .ibmi-pt .pt-assessed-lede{ font-size:14.5px !important; }
}

/* ---------- certificate: the language scans are portrait ----------
   The frame is 868/623 landscape for the course certificate, so a portrait
   scan was being cropped top and bottom by object-fit:cover. A4 portrait with
   `contain` fits the scan whichever way round it turns out to be — a
   landscape file letterboxes instead of losing its head and feet. */
.ibmi-pt .cert-frame{ aspect-ratio:1000/1414; background:#fff; }
.ibmi-pt .cert-frame > img{ object-fit:contain; }
.ibmi-pt .cert-media{ width:100%; max-width:320px; margin-left:auto !important; margin-right:auto !important; }
@media (min-width:941px){
  /* A portrait scan is much taller than the verify panel, which left the
     right-hand column stranded in white space. Narrowing the certificate and
     opening the panel up brings the two columns within ~60px of each other. */
  /* Column balance is handled by narrowing the certificate alone. Padding the
     verify panel out to match its height was the first attempt and it wrecked
     the panel's own proportions — a top gap larger than its side padding. */
  .ibmi-pt .cert{ align-items:center; }
}

/* Name, score and ID dropped into the blanks on the scan. All three
   positions are ESTIMATES taken off a screenshot of the real certificate —
   they are variables precisely so they can be nudged against the actual file.
   Sizes are container units, so they track the frame at any width. */
.ibmi-pt .cert-name{ top:var(--cert-name-y,37.48%); font-size:var(--cert-fs,5cqw) !important; }
.ibmi-pt .cert-score,
.ibmi-pt .cert-id{ position:absolute; z-index:3; pointer-events:none;
  font-family:'Lato','Helvetica Neue',Arial,sans-serif !important; color:#000; line-height:1.1 !important; }
/* score matches the name exactly (same --cert-fs), and sits ~8px higher than
   the first pass at the 340px frame — 8/481 of the document height. */
.ibmi-pt .cert-score{ left:6%; right:6%; top:var(--cert-score-y,46.06%); transform:translateY(-50%);
  text-align:center !important; font-weight:700 !important; font-size:var(--cert-fs,5cqw) !important; letter-spacing:.03em !important; }
.ibmi-pt .cert-id{ right:var(--cert-id-x,7%); top:var(--cert-id-y,89.1%); transform:translateY(-50%);
  font-weight:600 !important; font-size:var(--cert-id-fs,2.2cqw) !important; letter-spacing:.02em !important; color:#3A4750; }

/* ---------- two CTAs under the cross-sell ---------- */
.ibmi-pt .pp-also-cta{ flex-wrap:wrap; gap:12px; }

/* the enrolled notice sat on the UA <p> bottom margin; the spacing below it
   comes from the lede's own margin-top, so declare it rather than inherit */
.ibmi-pt .pp-enrolled{ margin-bottom:0 !important; }

/* ---------- animation parity ----------
   The chassis gives a hover lift plus a `lqsweep` sheen to .pp-skill, .pp-mod,
   .pp-progcard, .pp-stat, .pp-twc, .pp-faqitem, .pp-card and .ibtn-primary.
   Two things on this page were left out of that list: the CEFR tiles (a new
   component) and the ghost button (which only ever changed border colour).
   Both are opted in here with the chassis's own gradients and timing, rather
   than a lookalike. */
.ibmi-pt .pt-step,.ibmi-pt .ibtn-ghost{ position:relative; overflow:hidden; }
.ibmi-pt .pt-step::after{ content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; z-index:4;
  background:linear-gradient(115deg,transparent 35%,rgba(105,170,215,.18) 47%,rgba(130,190,230,.38) 51%,rgba(105,170,215,.18) 55%,transparent 68%);
  background-size:260% 100%; background-position:140% 0; }
.ibmi-pt .ibtn-ghost::after{ content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; z-index:3;
  background:linear-gradient(115deg,transparent 35%,rgba(105,170,215,.16) 47%,rgba(130,190,230,.34) 51%,rgba(105,170,215,.16) 55%,transparent 68%);
  background-size:260% 100%; background-position:140% 0; }
.ibmi-pt .ibtn-ghost:hover{ transform:translateY(-1px); border-color:var(--brand);
  box-shadow:0 2px 6px rgba(9,78,128,.10),0 12px 24px -12px rgba(0,110,170,.35); }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ibmi-pt .pt-step:hover::after,
  .ibmi-pt .ibtn-ghost:hover::after{ animation:lqsweep .75s ease-out; }
}

/* ---------- cross-sell tiles sit on white ----------
   The shared --card-fill gradient runs white to #F3F9FD, which reads as a
   grey cast on these tiles against the light section behind them. */
.ibmi-pt .pp-endsec .pp-card{ background:#fff; }

/* ---------- headline ----------
   The chassis forces a break after the first two words. That is tuned to one
   font; with a wider one the acronym orphaned onto a third line by itself.
   Balanced wrapping adapts to whatever font actually loads, and the nbsp in
   the markup keeps "Test (BECT)" together whatever happens. */
.ibmi-pt .pp-herocopy h1{ text-wrap:balance; }
.ibmi-pt .h1-dbr{ display:none; }

/* ---------- plain-English subtitle ----------
   Sits on the dark glass panel on desktop and on the white tile on phones, so
   it needs both colours. */
.ibmi-pt .pt-sub{ margin:10px 0 0 !important; font-size:clamp(16px,1.7vw,19px) !important; font-weight:600 !important;
  line-height:1.35 !important; letter-spacing:-.01em !important; color:#9FE3F5; max-width:38ch; }
@media (max-width:767px){
  .ibmi-pt .pt-sub{ color:var(--brand-deep); font-size:16px !important; }
}

/* ---------- buy rail: the certificate is the product shot ----------
   The rail used to repeat the hero photograph, so the same image appeared
   twice side by side. The certificate answers "what do I get" at the point of
   decision. Portrait art in a landscape slot, so the slot is reshaped and the
   image contained rather than cropped. */
/* Same composition as the phone hero: the London photograph at full strength
   with the certificate large, tilted and cut on the right and bottom. */
.ibmi-pt .pt-media-cert{ aspect-ratio:1/0.82; background:var(--tint);
  display:block; padding:0 !important; overflow:hidden; }
.ibmi-pt .pt-media-cert::before{
  content:""; position:absolute; inset:0;
  /* 100%, not 50%: with cover, a higher percentage slides the image left
     inside the box, which is what brings the middle of the photograph into
     the strip left of the certificate. At 32% that strip showed the image's
     7–51%; at 100% it shows 31–64%. */
  background:url("https://idm-institute.com/wp-content/uploads/2026/08/business-german-test.webp") 100% center/cover no-repeat;
}
/* tilted a couple of degrees so it reads as a sheet of paper rather than a
   flat thumbnail; kept small enough that the rotated corners stay inside the
   slot */
/* The overlays are anchored to a wrapper the exact size of the document, not
   to the slot — otherwise their percentages are measured against a box the
   certificate only partly fills, and they drift. This way the rail and the
   certificate section share one set of coordinates, and the tilt is applied
   once to the wrapper so text and paper rotate together. */
.ibmi-pt .pt-certwrap{ position:absolute; display:block; top:15%; right:-13%;
  height:104%; aspect-ratio:1000/1414; container-type:inline-size; transform:rotate(-7deg);
  box-shadow:0 3px 10px rgba(3,20,40,.32),0 26px 46px -14px rgba(3,20,40,.62); }
.ibmi-pt .pt-certwrap img{ width:100%; height:100%; object-fit:contain; background:#fff; }
/* the same gradient foot as the phone hero, for depth and to seat the paper.
   No z-index here or on the wrapper: DOM order puts this above the ::before
   photo and below nothing else, exactly as on mobile. */
.ibmi-pt .pt-media-cert::after{ content:""; display:block; position:absolute; inset:0;
  pointer-events:none; opacity:1;
  background:linear-gradient(180deg,rgba(3,16,32,.26) 0%,rgba(3,16,32,.05) 24%,
    rgba(3,16,32,0) 50%,rgba(3,16,32,.10) 68%,rgba(2,12,26,.30) 86%,rgba(2,11,24,.46) 100%); }




/* ---------- BECT lockup ----------
   Full-colour artwork, so it goes on the white card rather than the dark hero
   panel where it would have to be knocked out to white and lose the flag. */





/* ---------- hero tile ----------
   Paired with the .78 photo dim above. Measured against a near-white
   worst-case photo, white text on the tile reads: lede 5.05:1, subtitle
   4.78:1, h1 4.51:1 — clear of the 4.5 body / 3.0 large-text floors.
   Re-measure if either the dim or this gradient is touched; they are one
   setting split across two elements. */
@media (min-width:768px){
  .ibmi-pt .pp-herocopy{
    background:linear-gradient(135deg,rgba(11,34,60,.58) 0%,rgba(8,27,48,.48) 40%,rgba(8,25,45,.46) 62%,rgba(11,34,60,.60) 100%);
  }
}

/* ---------- mobile hero corrections ----------
   .pp-herohead is an absolutely positioned overlay on phones, so the subtitle,
   rating and enrolled notice now live outside it. Two consequences to handle:
   the chassis hid the rating via `.pp-herohead .pp-ratingrow`, which no longer
   matches, and the phone shows the rating as a pill on the photo anyway. */
@media (max-width:767px){
  .ibmi-pt .pp-ratingrow{ display:none; }
  /* the buy card carries no image on phones — the hero photo above the title
     does that job. Our certificate slot re-declared display and reinstated it. */
  .ibmi-pt .pt-media-cert{ display:none; }
  .ibmi-pt .pt-sub{ margin-top:3px !important; }
  /* the lede-to-price gap was 39px: 14px of tile padding + 6px above the rule
     + the rule + 18px of buy-card padding, four separate values stacking */
  .ibmi-pt .pp-herocopy{ padding-bottom:8px !important; }
  .ibmi-pt .pp-tile-hr{ margin-top:4px !important; }
  .ibmi-pt .pp-buybody{ padding-top:12px !important; }
}

/* ---------- phone hero: the certificate on the photo ----------
   Phones never see the buy-card certificate (the chassis hides .pp-media
   there), so it rides on the hero photo instead. The whole .pp-heromedia is
   aria-hidden, so this decorative copy adds nothing for screen readers.
   Sits below the rating pill (top:12px, z-index:3) and clear of the title,
   which overlays the bottom of the same photo. */
.ibmi-pt .pt-hm-cert{ display:none; }
@media (max-width:767px){
  .ibmi-pt .pp-heromedia img{ object-position:100% center; }  /* see the note on the rail: pushes the photo's middle into the visible strip */
  /* the pill lives top-right in the chassis, which is now where the
     certificate is — a white pill on white paper loses its edges, so it moves
     to the photo side where it has something to sit on */
  .ibmi-pt .hm-rate{ left:12px; right:auto; }
  .ibmi-pt .pt-hm-cert{
    /* the bleed is capped in px: as a bare percentage it grew with the
       viewport, and by 600px it had pushed the centred name off the right
       edge of the photo */
    display:block; position:absolute; top:17%; right:clamp(-56px,-13%,-34px);
    height:104%; aspect-ratio:1000/1414; transform:rotate(-7deg);
    box-shadow:0 3px 10px rgba(3,20,40,.32),0 26px 46px -14px rgba(3,20,40,.62);
    /* container so the .cert-name / .cert-score percentages and cqw sizes
       resolve against the document, exactly as they do in the buy rail —
       one set of coordinates serves all three certificates on the page */
    container-type:inline-size;
    /* No z-index on purpose. The ::after gradient comes later in paint order,
       so it lies OVER the certificate — which is what lets the white title
       stay readable where it crosses the paper. Give this a z-index and the
       certificate jumps above the gradient and the title turns white-on-white.
       The rating pill is z-index:3 and still floats above both. */
  }
  .ibmi-pt .pt-hm-cert img{ display:block; width:100%; height:100%;
    object-fit:contain; background:#fff; }
  /* a touch larger than the shared 5cqw: this certificate renders at about
     180px wide, where 5cqw is 9px and the name stops being readable */
  .ibmi-pt .pt-hm-cert .cert-name,
  .ibmi-pt .pt-hm-cert .cert-score{ font-size:5.6cqw !important; }
  /* Deeper foot than the chassis (.60/.92), which was tuned for a night
     skyline. It has to be this strong because the title now crosses the white
     certificate, which is far brighter than any part of the photo: lightening
     the falloff to .62/.95 drops the title to 2.94:1 and to .48/.93 drops it
     to 1.84:1 — both under the 3:1 floor for large text. Measured, not
     guessed. The cost is that the lower part of the certificate sits in
     shadow, which reads as the paper being lit from above. */
  .ibmi-pt .pp-herostack .pp-heromedia::after{
    background:linear-gradient(180deg,rgba(3,16,32,.34) 0%,rgba(3,16,32,.10) 18%,rgba(3,16,32,0) 34%,rgba(3,16,32,.30) 54%,rgba(2,12,26,.78) 76%,rgba(2,11,24,.96) 100%);
  }
}

/* the About lede was 15.5px in --ink-soft against 15px in --ink-mid for every
   other paragraph in the section, so it read as a mismatch rather than as
   emphasis. Scoped to #overview: the other sections' ledes are centred under
   their headings, where the softer colour is doing its job. */
.ibmi-pt #overview .pp-sechead .lede{ font-size:15px !important; line-height:1.65 !important; color:var(--ink-mid); }

/* "Business English Certification Test (BECT)" is 41 characters, which runs to
   three lines at the chassis hero size. Same graded step the generator applies
   to the other seven by name length. */
.ibmi-pt .pp-herocopy h1{ font-size:clamp(25px,3.0vw,34px) !important; }

/* ---------- reviews: rating in the title ---------- */
.ibmi-pt .pp-rev-title .rt-num{
  background:linear-gradient(100deg,#12A0DE 0%,#2472D8 52%,#4A54C8 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; }
/* .pp-rev-sub keeps the chassis' own .lede spacing — overriding it by 1px
   created a reference-vs-hardened mismatch for no visible gain */
/* min(): a bare 66ch computes to ~536px, and with `margin:auto` the excess
   is split either side rather than wrapping — 146px of page overflow at
   390px. The harness caught it; do not drop the min(). */
.ibmi-pt .pp-tw-note{ max-width:min(66ch,100%); margin:16px auto 0 !important; text-align:center !important;
  font-size:12.5px !important; line-height:1.5 !important; color:var(--ink-faint); }
.ibmi-pt .pp-tw-note a{ color:var(--brand-deep); text-decoration:underline !important; }
/* the break only fires from 768px, where the note has room for two
   balanced lines; below that it wraps naturally */
.ibmi-pt .pp-tw-note .note-br{ display:none; }
@media (min-width:768px){ .ibmi-pt .pp-tw-note .note-br{ display:inline; } }

/* ---------- lightbox close button ----------
   Flatsome styles every <button> with border-radius:3px and ~18.6px of side
   padding, which squeezed the 18px SVG to under a pixel — the control rendered
   as a blank white square. Pinned, since the theme rule is more specific than
   the component's. */
.ibmi-pt .pp-lightbox-close{ padding:0 !important; border-radius:50% !important;
  width:38px !important; height:38px !important; min-width:0 !important;
  min-height:0 !important; line-height:1 !important; }
.ibmi-pt .pp-lightbox-close svg{ flex:0 0 auto !important; width:18px !important;
  height:18px !important; display:block !important; }

/* ---------- parity fixes: values that used to come from UA defaults ---------- */
.ibmi-pt .pp-secure,.ibmi-pt .pp-programs-note,.ibmi-pt .pt-note{ margin-bottom:0 !important; }
.ibmi-pt .lp-cwho b{ font-weight:800 !important; }

/* the official name is long at the chassis hero size, so the clamp
   steps down for this page only (48 characters) */
.ibmi-pt .pp-herocopy h1{ font-size:clamp(23px,2.7vw,31px) !important; }