/* ============================================================================
 * tti-course-tablet.css — v12 "Disciplined Editorial"
 * Scope: 768–1023px on /courses/<slug>/
 *
 * Design direction: modern-sleek compliance authority. Trusted, editorial,
 * never templated. White cards on maroon wallpaper with brass moments
 * (chip border, h2 underline accent, focus ring) — restraint over
 * decoration.
 *
 * v12 changes from v11:
 *   - Removed SVG noise texture (source of visual noise)
 *   - Removed decorative quote glyph behind instructor (caused circle artifacts)
 *   - Removed brass top stripe on every card (too busy)
 *   - Fixed CTA trap: force ancestor chain out of flex/grid narrow columns
 *   - Fixed module double-card: single card on dp794i0s, dpwy7tt7 transparent
 *   - Removed module diamond glyph, kept numeric counter only
 *   - Fixed module title clipping (removed max-height)
 *   - Killed lavender Droip default bg on outcomes + instructor wrappers
 *   - Fixed instructor circular bio container inheritance
 *   - Fixed hero "$145 · Self-paced" spacing
 * ========================================================================== */

@media (min-width: 600px) and (max-width: 1023px){

  /* ---- Cross-viewport hides (relocated from mobile.css 2026-04-24) ----
   * These 3 rules were previously in tti-course-mobile.css inside a stray
   * @media (min-width: 768px) block. Copied here per user request so the
   * mobile file is fully isolated to <=767px. More-specific rules later
   * in this file (e.g. .tti-hero{display:block !important}) override these
   * where tablet needs the element visible. */
  .tti-course-sticky{display:none !important}
  .tti-hero{display:none !important}
  .tti-course-final-cta{display:none !important}

  /* ---- Design tokens -------------------------------------------------- */
  main.tti-course{
    --tti-maroon:        #7a0012;
    --tti-maroon-deep:   #4c0404;
    --tti-maroon-ink:    #5a000d;
    --tti-brass:         #C9A961;
    --tti-brass-soft:    rgba(201,169,97,0.38);
    --tti-cream:         #f8f4ec;
    --tti-cream-2:       #f2ecdf;
    --tti-cream-line:    #e8e1d6;
    --tti-ink:           #0f0f10;
    --tti-ink-2:         #1a1a1c;
    --tti-muted:         #5a5a63;
    --tti-muted-2:       #7a7a83;
    --tti-card-shadow:   0 8px 24px rgba(14,10,8,0.08),
                         0 1px 3px rgba(14,10,8,0.04);
    --tti-card-shadow-hi:0 16px 34px rgba(14,10,8,0.13),
                         0 3px 8px rgba(14,10,8,0.05);
    --tti-radius:        14px;
    --tti-radius-sm:     10px;
    --tti-radius-pill:   999px;
    --tti-ease:          cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ---- Wallpaper ------------------------------------------------------- */
  html, body{
    background:
      radial-gradient(at 92% -4%, rgba(201,169,97,0.07) 0%, transparent 42%),
      radial-gradient(at 8% 108%, rgba(255,255,255,0.03) 0%, transparent 38%),
      linear-gradient(180deg, #500000 0%, #4c0404 100%) !important;
    background-attachment: fixed !important;
    color: var(--tti-ink);
  }
  body.single-courses{
    font-family: 'Epilogue', ui-sans-serif, system-ui, sans-serif !important;
  }

  /* ---- Container ------------------------------------------------------- */
  main.tti-course{
    max-width: 860px !important;
    margin: 0 auto !important;
    padding: 16px 28px 120px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    font-size: 16px;
    line-height: 1.68;
    color: var(--tti-ink);
  }
  /* Tight to header — no extra breathing above hero per user request */
  main.tti-course > .tti-hero:first-child,
  main.tti-course .tti-hero{
    margin-top: 0 !important;
  }
  main.tti-course,
  main.tti-course *,
  main.tti-course *::before,
  main.tti-course *::after{ box-sizing: border-box; max-width: 100% }

  /* Force all Droip chrome wrappers to 100% width */
  main.tti-course > .droip-body,
  main.tti-course > [class*="droip-body"],
  main.tti-course .droip-body,
  main.tti-course .droip-container,
  main.tti-course [class*="droip-container"],
  main.tti-course [class*="post-3206-section"],
  main.tti-course [class*="post-3206-dped6anj"],
  main.tti-course [class*="dptbqvj2"],
  main.tti-course [class*="dptbqvj2"] > [class*="dphry4bp"],
  main.tti-course [class*="dp8h97bx"],
  main.tti-course [class*="dp436lui"],
  main.tti-course [class*="dptk43sj"],
  main.tti-course [class*="dpwcywdl"],
  main.tti-course [class*="dp0lc8fb"]{
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  main.tti-course > .droip-body,
  main.tti-course > [class*="droip-body"],
  main.tti-course .droip-body,
  main.tti-course .droip-container,
  main.tti-course [class*="droip-container"],
  main.tti-course [class*="post-3206-section"],
  main.tti-course [class*="post-3206-dped6anj"]{
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* Purge any Droip default theme-color bg inside our cards. We re-apply
     surface backgrounds to ONLY the section wrappers we know. Anything
     nested inherits transparent by default — no more lavender. */
  main.tti-course [class*="dp8h97bx"] *:not(li):not(ul):not(h1):not(h2):not(h3):not(p):not(span):not(svg):not(path):not(a):not(button):not(img),
  main.tti-course [class*="dp436lui"] > *:not([class*="dp794i0s"]):not([class*="dpwy7tt7"]):not(h1):not(h2):not(h3):not(p){
    background: transparent !important;
  }

  /* ---- Page-load staggered reveal ------------------------------------- */
  @keyframes tti-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  main.tti-course > *{
    animation: tti-rise 500ms var(--tti-ease) both;
  }
  main.tti-course > *:nth-of-type(1){ animation-delay: 0ms }
  main.tti-course > *:nth-of-type(2){ animation-delay: 60ms }
  main.tti-course > *:nth-of-type(3){ animation-delay: 120ms }
  main.tti-course > *:nth-of-type(4){ animation-delay: 180ms }
  main.tti-course > *:nth-of-type(5){ animation-delay: 240ms }
  main.tti-course > *:nth-of-type(6){ animation-delay: 300ms }

  /* ---- Typography ------------------------------------------------------ */
  main.tti-course h1{
    font-size: clamp(28px, 4.3vw, 38px) !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
    margin: 0 0 10px !important;
  }
  main.tti-course h2{
    font-size: clamp(22px, 3vw, 26px) !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    color: var(--tti-ink) !important;
    margin: 0 0 18px !important;
    padding: 0 0 14px !important;
    position: relative;
  }
  main.tti-course h2::after{
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 44px; height: 3px;
    background: var(--tti-maroon);
    border-radius: 2px;
  }
  main.tti-course h2::before{
    content: "";
    position: absolute;
    left: 52px; bottom: 1px;
    width: 22px; height: 1px;
    background: var(--tti-brass);
    opacity: 0.85;
  }
  main.tti-course h3{
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin: 12px 0 6px !important;
    color: var(--tti-ink) !important;
  }
  main.tti-course p{
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--tti-ink);
    max-width: 64ch;
  }
  main.tti-course a{
    color: var(--tti-maroon);
    text-decoration-color: var(--tti-brass-soft);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: text-decoration-color 180ms var(--tti-ease);
  }
  main.tti-course a:hover{ text-decoration-color: var(--tti-maroon) }

  /* ---- Force-show PHP hero at tablet width ---------------------------- */
  main.tti-course .tti-hero{ display: block !important }
  .tti-course-sticky{ display: none !important }

  /* =====================================================================
   * HERO — editorial composition
   * =================================================================== */
  main.tti-course .tti-hero{
    position: relative;
    background:
      radial-gradient(at 90% 0%, rgba(201,169,97,0.14) 0%, transparent 50%),
      radial-gradient(at 4% 100%, rgba(0,0,0,0.28) 0%, transparent 50%),
      linear-gradient(135deg, #5c0010 0%, #3a0303 100%) !important;
    padding: 24px 24px 24px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #fff !important;
    display: grid !important;
    grid-template-columns: 1fr 260px !important;
    grid-template-areas:
      "eyebrow eyebrow"
      "title   price"
      "subtitle price"
      "stats   stats"
      "proof   proof" !important;
    column-gap: 28px;
    row-gap: 16px;
    align-items: start;
    box-shadow: 0 18px 48px rgba(0,0,0,0.28);
    overflow: hidden;
  }
  /* Brass hairline at top of hero */
  main.tti-course .tti-hero::before{
    content: "";
    position: absolute;
    top: 0; left: 32px; right: 32px;
    height: 1px;
    background: linear-gradient(90deg,
      transparent, var(--tti-brass) 30%, var(--tti-brass) 70%, transparent);
    opacity: 0.7;
  }

  main.tti-course .tti-hero__eyebrow{
    grid-area: eyebrow;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    background: transparent !important;
    color: var(--tti-brass) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    justify-self: start;
    width: auto !important;
    margin: 0 !important;
  }
  main.tti-course .tti-hero__eyebrow::before{
    content: "";
    display: inline-block;
    width: 22px; height: 1px;
    background: var(--tti-brass);
  }

  main.tti-course .tti-hero__title,
  main.tti-course .tti-hero h1{
    grid-area: title;
    color: #fff !important;
    margin: 0 !important;
  }
  main.tti-course .tti-hero__lede,
  main.tti-course .tti-hero__subtitle,
  main.tti-course .tti-hero h1 + p{
    grid-area: subtitle;
    color: rgba(255,255,255,0.82) !important;
    font-size: 15.5px !important;
    line-height: 1.6 !important;
    max-width: 46ch !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }

  /* Price + enroll card (right column) — .tti-hero__cta wraps price + enroll */
  main.tti-course .tti-hero__cta{
    grid-area: price;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 12px;
    padding: 20px 18px;
    align-self: start;
    position: relative;
    backdrop-filter: blur(6px);
    list-style: none !important;
  }
  main.tti-course .tti-hero__cta::before{
    content: "";
    position: absolute;
    top: -1px; left: 20px; right: 20px;
    height: 1px;
    background: var(--tti-brass);
    opacity: 0.85;
  }
  /* Price contains "$145<small>Self-paced online training</small>".
     Force <small> to its own line with proper spacing. */
  main.tti-course .tti-hero__price{
    color: #fff !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin: 0 !important;
    letter-spacing: -0.02em;
    display: block !important;
  }
  main.tti-course .tti-hero__price small{
    display: block !important;
    margin-top: 6px !important;
    color: rgba(255,255,255,0.78) !important;
    font-size: 11.5px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }
  main.tti-course .tti-hero__enroll{
    background: #fff !important;
    color: var(--tti-maroon-deep) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 13px 18px !important;
    border-radius: 9px !important;
    font-weight: 800 !important;
    font-size: 14.5px !important;
    letter-spacing: 0.03em;
    text-decoration: none !important;
    min-height: 46px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.16);
    transition: transform 180ms var(--tti-ease),
                box-shadow 180ms var(--tti-ease);
  }
  main.tti-course .tti-hero__enroll:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.28);
  }

  /* Stats grid — <ul class="tti-hero__facts"><li class="tti-hero__fact"> */
  main.tti-course .tti-hero__facts{
    grid-area: stats;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  main.tti-course .tti-hero__fact{
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 9px;
    padding: 14px 8px 12px;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    color: #fff !important;
    position: relative;
    list-style: none !important;
    margin: 0 !important;
    min-height: 64px;
    transition: transform 220ms var(--tti-ease),
                border-color 220ms var(--tti-ease);
  }
  main.tti-course .tti-hero__fact::marker{ content: "" !important }
  main.tti-course .tti-hero__fact:hover{
    transform: translateY(-1px);
    border-color: rgba(201,169,97,0.4);
  }
  main.tti-course .tti-hero__fact strong{
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em;
    display: block !important;
  }
  /* Text after <strong> is the label — we style via parent + its direct text */
  main.tti-course .tti-hero__fact{
    font-size: 10.5px !important;
    letter-spacing: 0.08em;
    line-height: 1.25;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78) !important;
  }
  /* When a plate has NO <strong> value (e.g. "Self-paced online" or
     "Certificate included"), bump the label size so visual weight
     matches the plates that do have a value. */
  main.tti-course .tti-hero__fact:not(:has(strong)){
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 0.05em;
    line-height: 1.35;
  }

  /* Proof row — <ul class="tti-hero__proof"><li> */
  main.tti-course .tti-hero__proof{
    grid-area: proof;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    justify-content: flex-start;
    list-style: none !important;
  }
  main.tti-course .tti-hero__proof > *,
  main.tti-course .tti-hero__proof li,
  main.tti-course .tti-hero__proof-mark{
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(201,169,97,0.38);
    border-radius: var(--tti-radius-pill);
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #fff !important;
    letter-spacing: 0.02em;
    margin: 0 !important;
    list-style: none !important;
    display: inline-flex !important;
    align-items: center;
  }
  main.tti-course .tti-hero__proof-rating{
    background: var(--tti-brass) !important;
    border-color: var(--tti-brass) !important;
    color: var(--tti-maroon-deep) !important;
    font-weight: 700 !important;
  }
  main.tti-course .tti-hero__proof li::marker,
  main.tti-course .tti-hero__facts li::marker{ content: "" !important }

  /* =====================================================================
   * SECTION CARD SURFACE — clean white card, subtle eyebrow
   * =================================================================== */
  /* v29 fix: dptbqvj2 wraps WAY more than image+stats (also dp8h97bx,
     similar, reviews — everything below hero). Styling it as a single
     card created a 6606px-tall white slab. Revert to transparent.
     Unify image+stats visually by giving each its own card-like edge
     that merges with the other (image = top half, stats = bottom half). */
  main.tti-course [class*="dptbqvj2"] img[class*="dpg8khjp"],
  main.tti-course [class*="dptbqvj2"] [class*="dpg8khjp"]{
    margin: 0 !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    object-fit: cover !important;
    background: #fff !important;
    border: 1px solid var(--tti-cream-line) !important;
    border-bottom: 0 !important;
    box-shadow: var(--tti-card-shadow) !important;
    position: relative !important;
    z-index: 1 !important;
  }
  main.tti-course [class*="dptbqvj2"]{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  main.tti-course [class*="dptbqvj2"] p{ color: #fff }

  main.tti-course [class*="dp8h97bx"],
  main.tti-course [class*="dp436lui"],
  main.tti-course [class*="dptk43sj"],
  main.tti-course [class*="dpwcywdl"],
  main.tti-course [class*="dp0lc8fb"]{
    position: relative;
    background: #fff !important;
    border: 1px solid var(--tti-cream-line) !important;
    border-radius: var(--tti-radius) !important;
    box-shadow: var(--tti-card-shadow);
    padding: 30px 30px 26px !important;
    color: var(--tti-ink) !important;
    overflow: hidden;
  }

  /* v28 fix: at 1023 the row-gap from post-3206-container collapses to 0,
     causing the course image (inside dpngulak/dptbqvj2) to touch the
     "What You'll Learn" h2 with no breathing room. The image and h2 are
     COUSINS (not siblings), so margin on dptbqvj2 alone won't help.
     Add explicit gap on the wrapper that holds the image-row AND on the
     dp8h97bx that holds the learn h2. */
  main.tti-course [class*="dpngulak"]{
    margin-bottom: 40px !important;
  }
  main.tti-course [class*="post-3206-container"]{
    row-gap: 40px !important;
  }
  main.tti-course [class*="dp8h97bx"]{
    margin-top: 48px !important;
  }
  /* v29: trim excess gap between Key Outcomes and Curriculum h2.
     Probe @744 showed 157px gap — pull syllabus card up by 110px to
     leave ~47px breathing room. Apply ONLY to dp436lui (parent) so the
     h2 inside doesn't double-up. */
  main.tti-course [class*="dp436lui"]:has(h2.tti-h-syllabus){
    margin-top: -55px !important;
  }

  /* Eyebrow labels — scoped to SINGLE-topic section cards only.
     dp8h97bx is a MULTI-topic wrapper (contains learn + cert + instructor
     + reviews + similar) — no single eyebrow fits it. The individual
     sub-sections inside get their own eyebrows via h2::before. */
  main.tti-course [class*="dp436lui"]::before                               { content: "Curriculum" }
  main.tti-course [class*="dptk43sj"]::before                               { content: "Certification" }
  main.tti-course [class*="dpwcywdl"]::before                               { content: "What Students Say" }
  main.tti-course [class*="dp0lc8fb"]::before                               { content: "Related Training" }
  main.tti-course [class*="dp436lui"]::before,
  main.tti-course [class*="dptk43sj"]::before,
  main.tti-course [class*="dpwcywdl"]::before,
  main.tti-course [class*="dp0lc8fb"]::before{
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--tti-maroon) !important;
    margin: 0 0 14px !important;
    padding: 0 0 0 26px !important;
    background: transparent !important;
    border: 0 !important;
    position: relative;
  }
  /* dp8h97bx: no eyebrow (multi-topic container) */
  main.tti-course [class*="dp8h97bx"]::before{ display: none !important; content: none !important }
  /* Eyebrow leading brass bar */
  main.tti-course [class*="dp8h97bx"]::after{ display: none !important }
  main.tti-course [class*="dp8h97bx"] > *:first-child,
  main.tti-course [class*="dp436lui"] > *:first-child,
  main.tti-course [class*="dptk43sj"] > *:first-child,
  main.tti-course [class*="dpwcywdl"] > *:first-child,
  main.tti-course [class*="dp0lc8fb"] > *:first-child{ margin-top: 0 !important }

  /* =====================================================================
   * DESCRIPTION + NESTED STATS CARD
   *
   * Droip stats-card DOM per column:
   *   <div dphry4bp>
   *     <div dp16imxb>(icon 20x20)</div>
   *     <span>Level</span>        ← label (often duplicate of inner label)
   *     <span>All Levels</span>   ← value
   *     <span>Level</span>        ← duplicate
   *   </div>
   * We hide icon + duplicate labels, keep value prominent.
   * =================================================================== */
  main.tti-course [class*="dptbqvj2"] [class*="dp9v0niz"]:not(:has(.tti-course-final-cta)){
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    padding: 22px 24px 24px !important;
    background: #fff !important;
    border: 1px solid var(--tti-cream-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: var(--tti-card-shadow) !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 18px rgba(14,10,8,0.06);
  }
  main.tti-course [class*="dptbqvj2"] [class*="dphry4bp"]{
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Each stat column */
  main.tti-course [class*="dptbqvj2"] [class*="dp9v0niz"]:not(:has(.tti-course-final-cta)) > [class*="dphry4bp"]{
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    min-width: 0;
    padding: 0 10px !important;
    border: 0 !important;
    border-right: 1px solid var(--tti-cream-line) !important;
    background: transparent !important;
    position: relative;
  }
  main.tti-course [class*="dptbqvj2"] [class*="dp9v0niz"]:not(:has(.tti-course-final-cta)) > [class*="dphry4bp"]:last-child{
    border-right: 0 !important;
  }
  /* Per-column structure (confirmed via DOM inspection):
     - dp16imxb (child 1): label ("Level" / "Time to Complete" / …)
     - dprk1nio (child 2): value ("All Levels" / "30 hours 0 minute" / …)
     Show label as small caps on TOP, value as large maroon BELOW. */
  /* Icon container (dp16imxb): we keep it as a plain inline icon, color=maroon.
     The hidden <p> child inside is already display:none. */
  main.tti-course [class*="dptbqvj2"] [class*="dphry4bp"] [class*="dp16imxb"]{
    display: flex !important;
    order: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 8px !important;
    background: rgba(122,0,18,0.08) !important;
    border-radius: 10px !important;
    color: var(--tti-maroon) !important;
  }
  main.tti-course [class*="dptbqvj2"] [class*="dphry4bp"] [class*="dp16imxb"] svg{
    width: 20px !important;
    height: 20px !important;
    color: var(--tti-maroon) !important;
    overflow: visible !important;
  }
  /* Line-icon treatment: hollow stroke, thin weight — prevents the fat look
     you get when both fill and stroke are set to the same color. */
  main.tti-course [class*="dptbqvj2"] [class*="dphry4bp"] [class*="dp16imxb"] svg *{
    fill: none !important;
    stroke: var(--tti-maroon) !important;
    stroke-width: 1.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    color: var(--tti-maroon) !important;
  }
  /* Hide any text label inside dp16imxb (already display:none in DOM; belt and braces) */
  main.tti-course [class*="dptbqvj2"] [class*="dphry4bp"] [class*="dp16imxb"] > p,
  main.tti-course [class*="dptbqvj2"] [class*="dphry4bp"] [class*="dp16imxb"] > span{
    display: none !important;
  }
  /* Value element — BLACK ink, 17px, 800 weight */
  main.tti-course [class*="dptbqvj2"] [class*="dphry4bp"] [class*="dprk1nio"]{
    display: block !important;
    order: 2 !important;
    color: var(--tti-ink) !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    white-space: normal !important;
    text-align: center !important;
  }
  main.tti-course [class*="dptbqvj2"] [class*="dphry4bp"] [class*="dprk1nio"] *{
    color: var(--tti-ink) !important;
    background: transparent !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }
  /* Fix #3: col-1 has <span>All Levels</span> + <p>Level</p> — hide the duplicate
     second child so only the value line shows. nth-child(2) is a no-op in other
     columns where there's only a single child. */
  main.tti-course [class*="dptbqvj2"] [class*="dphry4bp"] [class*="dprk1nio"] > *:nth-child(2){
    display: none !important;
  }
  /* Make the label under the value readable: small caps label, muted */
  main.tti-course [class*="dptbqvj2"] [class*="dphry4bp"]::after{
    content: attr(data-label);
    display: none;
  }
  /* Trim "0 Minute" from the "30 hours 0 minute" value: use a span filter.
     Since it's a single text node we can't split it reliably in CSS,
     but we can apply a tighter font + smaller max-width to make it read
     as two lines with the "0 minute" part appearing as a secondary line. */
  main.tti-course [class*="dptbqvj2"] [class*="dphry4bp"]:nth-child(2) [class*="dprk1nio"]{
    font-size: 15px !important;
    line-height: 1.25 !important;
  }
  /* Hide duplicate last-column (5th dphry4bp) or rating-text orphan */
  main.tti-course [class*="dptbqvj2"] [class*="dphry4bp"]:nth-child(5),
  main.tti-course [class*="dptbqvj2"] [class*="dphry4bp"]:last-child:has([class*="rating-text"]){
    display: none !important;
  }

  /* =====================================================================
   * KEY OUTCOMES — 2-col grid, no lavender, clean rows
   * =================================================================== */
  /* v29: pull outcomes up — h2.tti-h-learn was 112px above first card
     (dpad2ibs padding-top 32 + 68px from parent flex layout + 12 grid mt).
     Cut padding/margin chain so cards sit ~16-24px below h2. */
  main.tti-course h2.tti-h-learn ~ [class*="dpad2ibs"]{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: -50px !important;
  }
  /* Outer wrapper (dp2yrjh1) is a single-column block that contains
     dp6tfcba which is the actual 2-col grid of outcome cards. */
  main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) [class*="dp2yrjh1"]{
    background: transparent !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    border: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) ul,
  main.tti-course [class*="dp8h97bx"]:not(:has(> h2.tti-h-instructor)) [class*="dp6tfcba"]{
    background: transparent !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 6px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    border: 0 !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Tighten the h2-to-grid gap specifically for the Key Outcomes card */
  main.tti-course h2.tti-h-learn{
    margin-bottom: 4px !important;
  }
  main.tti-course h2.tti-h-learn + *,
  main.tti-course h2.tti-h-learn ~ ul,
  main.tti-course h2.tti-h-learn ~ [class*="dp2yrjh1"],
  main.tti-course h2.tti-h-learn ~ [class*="dp6tfcba"]{
    margin-top: 8px !important;
  }
  /* Each card: cream/beige surface, auto-height to content, left-aligned,
     no forced uniform row height so short text stays compact. */
  main.tti-course [class*="dp8h97bx"] li,
  main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"]{
    padding: 10px 14px 10px 36px !important;
    background: var(--tti-cream) !important;
    border: 1px solid var(--tti-cream-line) !important;
    border-left: 3px solid var(--tti-maroon) !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    position: relative;
    margin: 0 !important;
    color: var(--tti-ink-2) !important;
    transition: transform 180ms var(--tti-ease),
                border-left-color 180ms var(--tti-ease),
                box-shadow 180ms var(--tti-ease);
    min-height: 44px !important;
    display: flex !important;
    align-items: flex-start !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(14,10,8,0.03);
  }
  /* Text wrapper inside the card: let it fill naturally without line-clamp
     so the card sizes to content tightly. */
  main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"] [class*="dpr80ali"],
  main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"] > *,
  main.tti-course [class*="dp8h97bx"] li > *{
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  main.tti-course [class*="dp8h97bx"] li:hover,
  main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"]:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(14,10,8,0.08);
    background: #fff !important;
  }
  /* Maroon dot bullet at top-left */
  main.tti-course [class*="dp8h97bx"] li::before,
  main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"]::before{
    content: "";
    position: absolute;
    left: 12px; top: 14px;
    width: 14px; height: 14px;
    background: var(--tti-maroon);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(122,0,18,0.1);
    z-index: 1;
  }
  main.tti-course [class*="dp8h97bx"] li::after,
  main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"]::after{
    content: "✓";
    position: absolute;
    left: 14.5px; top: 14px;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 14px;
    width: 9px;
    text-align: center;
    z-index: 2;
  }
  /* Hide the raw Droip check icons inside outcome rows (at any depth —
     Droip nests the svg inside dpr80ali, not as direct child of dpft5oys) */
  main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"] svg,
  main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"] img,
  main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"] [class*="dpeo7kpf"],
  main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"] [class*="dpowkss3"],
  main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"] [class*="dpybtudm"]{
    display: none !important;
  }
  /* The inner text wrapper dpr80ali — flatten to inline block, no padding */
  main.tti-course [class*="dp8h97bx"] [class*="dpft5oys"] [class*="dpr80ali"]{
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    width: 100% !important;
  }
  /* Force outcomes text children to white-card style */
  main.tti-course [class*="dpft5oys"] *{
    background: transparent !important;
    color: var(--tti-ink-2) !important;
  }
  main.tti-course [class*="dpft5oys"] span{
    display: inline !important;
  }

  /* =====================================================================
   * SYLLABUS — dp436lui card + MODULE ROWS
   *
   * DOM (per memory):
   *   <div dp794i0s droip-dropdown>   ← outer accordion (THE CARD)
   *     <div dpwy7tt7>                 ← inner title row (TRANSPARENT)
   *       <h2>Module N: …</h2>
   *       <span dpgq8fyv/>              ← chevron
   *     </div>
   *   </div>
   * =================================================================== */
  /* Counter lives at main level — modules are now ALL inside dp436lui
     after PHP consolidation (2026-04-24), but we keep the counter scope
     at main so it spans every dp794i0s regardless of nesting depth.
     Neutralize any scoped reset on dp436lui to prevent scope break. */
  main.tti-course{ counter-reset: mod; }
  main.tti-course [class*="dp436lui"]{ counter-reset: none !important; }
  main.tti-course [class*="dp436lui"]{
    padding: 28px 30px 24px !important;
  }
  /* Tight module rhythm — mirror mobile v25 (gap collapse via flex column,
     no compounding from dpbojbtd wrapper margins). */
  main.tti-course [class*="dp436lui"]:has(h2.tti-h-syllabus){
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  main.tti-course [class*="dp436lui"]:has(h2.tti-h-syllabus) [class*="dpbojbtd"]{
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  /* Module card = dp794i0s (outer accordion wrapper).
     Specificity: dp8h97bx *:not(...) at (0,2,2) was beating bare dp794i0s (0,2,1)
     and forcing transparent. Use dp8h97bx + dp794i0s descendant chain (0,3,1)
     to win, plus a no-dp8h97bx fallback for safety. */
  main.tti-course [class*="dp8h97bx"] [class*="dp794i0s"],
  main.tti-course [class*="dp794i0s"]{
    counter-increment: mod;
    background: #fff !important;
    border: 1px solid var(--tti-cream-line) !important;
    border-radius: 10px !important;
    padding: 16px 22px 16px 62px !important;
    margin: 0 0 4px !important;
    position: relative;
    box-shadow: 0 1px 3px rgba(14,10,8,0.04);
    transition: box-shadow 220ms var(--tti-ease),
                transform 220ms var(--tti-ease),
                border-color 220ms var(--tti-ease);
    display: block !important;
    overflow: hidden;
    min-height: 64px;
  }
  /* Left number rail */
  main.tti-course [class*="dp794i0s"]::before{
    content: counter(mod, decimal-leading-zero);
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 46px;
    background: var(--tti-cream);
    color: var(--tti-maroon);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--tti-cream-line);
    transition: background 220ms var(--tti-ease),
                color 220ms var(--tti-ease);
    font-variant-numeric: tabular-nums;
  }
  main.tti-course [class*="dp794i0s"]:hover{
    border-color: rgba(122,0,18,0.4);
    box-shadow: 0 6px 18px rgba(14,10,8,0.09);
    transform: translateX(1px);
  }
  main.tti-course [class*="dp794i0s"]:hover::before{
    background: var(--tti-maroon);
    color: var(--tti-brass);
  }
  /* Inner title row: transparent, no card, no counter */
  main.tti-course [class*="dp794i0s"] [class*="dpwy7tt7"]{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  main.tti-course [class*="dp794i0s"] [class*="dpwy7tt7"]::before,
  main.tti-course [class*="dp794i0s"] [class*="dpwy7tt7"]::after{
    display: none !important; content: none !important;
  }
  /* Module title */
  main.tti-course [class*="dp794i0s"] h2,
  main.tti-course [class*="dpwy7tt7"] h2{
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--tti-ink) !important;
    position: static !important;
    letter-spacing: 0;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  main.tti-course [class*="dp794i0s"] h2::after,
  main.tti-course [class*="dp794i0s"] h2::before,
  main.tti-course [class*="dpwy7tt7"] h2::after,
  main.tti-course [class*="dpwy7tt7"] h2::before{
    display: none !important; content: none !important;
  }
  /* Chevron — TOP-level only, inside dpwy7tt7 title row, NOT in dp1icnsr meta */
  main.tti-course [class*="dp794i0s"] > [class*="dpwy7tt7"] > [class*="dpgq8fyv"],
  main.tti-course [class*="dp794i0s"] [class*="dpwy7tt7"] > [class*="dpgq8fyv"]{
    width: 18px !important;
    height: 18px !important;
    color: var(--tti-muted) !important;
    flex-shrink: 0;
    transition: transform 220ms var(--tti-ease), color 220ms var(--tti-ease);
  }
  main.tti-course [class*="dp794i0s"]:hover > [class*="dpwy7tt7"] > [class*="dpgq8fyv"],
  main.tti-course [class*="dp794i0s"]:hover [class*="dpwy7tt7"] > [class*="dpgq8fyv"]{
    color: var(--tti-maroon);
    transform: translateX(3px);
  }
  /* Meta row ("1 Lesson · 0 Quiz") — hide the 4x4 decorative dot SVGs
     (they share class dpgq8fyv with the chevron) and style clean "· " separators */
  main.tti-course [class*="dp794i0s"] [class*="dp1icnsr"]{
    background: transparent !important;
    color: var(--tti-muted-2) !important;
    font-size: 12px !important;
    letter-spacing: 0.03em;
    margin-top: 4px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
  }
  main.tti-course [class*="dp794i0s"] [class*="dp1icnsr"] [class*="dpgq8fyv"],
  main.tti-course [class*="dp794i0s"] [class*="dp1icnsr"] svg,
  main.tti-course [class*="dp794i0s"] [class*="dp1icnsr"] [class*="dp3i4z9o"] > span:empty,
  main.tti-course [class*="dp794i0s"] [class*="dp3i4z9o"] svg{
    display: none !important;
  }
  main.tti-course [class*="dp794i0s"] [class*="dp1icnsr"] [class*="dp3i4z9o"]{
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: var(--tti-muted) !important;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  /* Add a subtle · separator between lesson/quiz badges */
  main.tti-course [class*="dp794i0s"] [class*="dp1icnsr"] [class*="dp3i4z9o"] + [class*="dp3i4z9o"]::before{
    content: "·";
    color: var(--tti-brass);
    margin-right: 6px;
    font-weight: 700;
  }

  /* Fix #5 v15: Restore chevron + expansion UX. Droip's accordion JS toggles
     dp794i0s.droip-dropdown-open — we keep chevron visible + rotating, and
     show the dp4unl3r wrapper on open. Hide ONLY the raw JSON content
     (textarea + dpesa6lh collection internals) and render a clean
     "Preview available after enrollment" placeholder instead. */
  main.tti-course [class*="dp794i0s"] textarea,
  main.tti-course [class*="dp794i0s"] [class*="dpesa6lh"],
  main.tti-course [class*="dp794i0s"] [droip_collection_random_id],
  main.tti-course [class*="dp794i0s"] [class*="dpfdplh4"]{
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
  /* The expansion wrapper — open state only, holds the real lesson list.
     Droip ships this with bg rgb(237,240,255) (lavender); force transparent. */
  main.tti-course [class*="dp794i0s"] [class*="dp4unl3r"]{
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 12px 0 2px !important;
    border: 0 !important;
    color: var(--tti-ink-2) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    position: relative !important;
    display: block !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Module detail panel — injected by PHP from topic post_content */
  main.tti-course .tti-module-detail{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    background: var(--tti-cream) !important;
    border: 1px solid var(--tti-cream-line) !important;
    border-radius: 10px !important;
    margin: 6px 0 2px !important;
  }
  main.tti-course .tti-module-detail__desc{
    margin: 0 !important;
    color: var(--tti-ink-2) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    letter-spacing: 0.005em !important;
  }
  main.tti-course .tti-module-lessons__badge{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    padding: 3px 8px !important;
    background: rgba(122,0,18,0.08) !important;
    color: var(--tti-maroon) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }
  /* Real lesson list — injected by PHP from Tutor topics */
  main.tti-course .tti-module-lessons{
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    background: transparent !important;
    border: 1px solid var(--tti-cream-line) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  /* Override the outcomes-targeted `[class*="dp8h97bx"] li > *` rule at
     line ~738 — that rule forces width:100% on every li child, which
     squeezes the lesson title span to min-content (character-per-line
     rendering). Lesson list items need standard flex-row layout. */
  main.tti-course .tti-module-lessons li > *{
    width: auto !important;
    display: inline-flex !important;
  }
  main.tti-course .tti-module-lessons__title{
    background: transparent !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: inline !important;
    white-space: normal !important;
  }
  main.tti-course .tti-module-lessons li{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--tti-ink-2) !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    min-height: 0 !important;
    border-bottom: 1px solid rgba(232,225,214,0.6) !important;
    transition: background 160ms var(--tti-ease), padding-left 160ms var(--tti-ease) !important;
  }
  main.tti-course .tti-module-lessons li:last-child{
    border-bottom: 0 !important;
  }
  main.tti-course .tti-module-lessons li:hover{
    background: #fff !important;
    padding-left: 20px !important;
  }
  main.tti-course .tti-module-lessons li::before,
  main.tti-course .tti-module-lessons li::after{
    content: none !important;
    display: none !important;
  }
  main.tti-course .tti-module-lessons__icon{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    background: var(--tti-maroon) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 50% !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
  }
  main.tti-course .tti-module-lessons__title{
    flex: 1 1 auto !important;
    color: var(--tti-ink-2) !important;
    font-weight: 500 !important;
    word-break: break-word !important;
  }
  /* Hide the dropdown backdrop which was sizing to 10000+ px */
  main.tti-course [class*="dp794i0s"] .droip-dropdown-backdrop{
    display: none !important;
  }
  /* Keep chevron visible — rotate when open via Droip's class */
  main.tti-course [class*="dp794i0s"] > [class*="dpwy7tt7"] > [class*="dpgq8fyv"],
  main.tti-course [class*="dp794i0s"] [class*="dpwy7tt7"] > [class*="dpgq8fyv"]{
    display: inline-flex !important;
  }
  main.tti-course [class*="dp794i0s"].droip-dropdown-open > [class*="dpwy7tt7"] > [class*="dpgq8fyv"],
  main.tti-course [class*="dp794i0s"].droip-dropdown-open [class*="dpwy7tt7"] > [class*="dpgq8fyv"]{
    transform: rotate(180deg) !important;
    color: var(--tti-maroon) !important;
  }
  /* Closed state — hide the expansion wrapper */
  main.tti-course [class*="dp794i0s"]:not(.droip-dropdown-open) [class*="dp4unl3r"]{
    display: none !important;
  }
  main.tti-course [class*="dp794i0s"]{
    cursor: pointer !important;
  }

  /* =====================================================================
   * CERTIFICATE — dptk43sj
   * Layout: circular maroon icon (left) + title stack (right).
   * Droip renders a stretched decorative SVG (10×116) that we resize.
   * PARENT CHAIN fix: dp436lui > dpm1ko05 (flex-row 2-col) > dpnjdwkl > dptk43sj.
   * Force single column at tablet so cert spans full width.
   * =================================================================== */
  /* Specificity over dp8h97bx *:not(...) lavender wildcard (0,2,2). Beat
     it with a (0,3,1) descendant chain so the cert card honors its own
     bg/border/padding/eyebrow rules. */
  main.tti-course [class*="dp8h97bx"] [class*="dptk43sj"]{
    background: #fff !important;
    border: 1px solid var(--tti-cream-line) !important;
    border-radius: var(--tti-radius) !important;
    box-shadow: var(--tti-card-shadow);
    padding: 28px 30px 26px !important;
    color: var(--tti-ink) !important;
    position: relative;
    overflow: hidden;
  }
  main.tti-course [class*="dp8h97bx"] [class*="dptk43sj"]::before{
    content: "Certification" !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--tti-maroon) !important;
    margin: 0 0 14px !important;
    padding: 0 0 0 26px !important;
    background: transparent !important;
  }
  main.tti-course [class*="dpm1ko05"]{
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 18px !important;
  }
  main.tti-course [class*="dpm1ko05"] > *,
  main.tti-course [class*="dpnjdwkl"],
  main.tti-course [class*="dpnjdwkl"] > *{
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  main.tti-course [class*="dptk43sj"]{
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 30px 26px !important;
    text-align: left !important;
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "eyebrow eyebrow"
      "icon title"
      "icon support";
    align-items: center !important;
    column-gap: 20px !important;
    row-gap: 4px !important;
    overflow: visible !important;
    min-height: 0 !important;
    height: auto !important;
    background: #fff !important;
    border: 1px solid var(--tti-cream-line) !important;
    border-radius: var(--tti-radius) !important;
    box-shadow: var(--tti-card-shadow) !important;
    position: relative !important;
  }
  /* Eyebrow in grid flow as row 1 spanning full width */
  main.tti-course [class*="dptk43sj"]::before{
    grid-area: eyebrow !important;
    position: static !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    pointer-events: none;
  }
  /* Supporting copy — line 2 of the title column */
  main.tti-course [class*="dptk43sj"]::after{
    content: "Downloadable PDF · Digital credential · Shareable to LinkedIn";
    grid-area: support;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--tti-muted);
    letter-spacing: 0.01em;
    pointer-events: none;
    align-self: start;
    margin: 2px 0 0;
  }
  /* All direct children: flatten to normal flow */
  main.tti-course [class*="dptk43sj"] > *{
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Cert badge wrapper takes the icon grid cell.
     v29: badge constrained to 80×80 to match the grid track; wings clamped
     to fit so they don't overflow into the title column. */
  main.tti-course [class*="dptk43sj"] > .tti-cert-badge{
    grid-area: icon !important;
    justify-self: center !important;
    align-self: center !important;
    position: relative !important;
    display: block !important;
    width: 80px !important;
    height: 80px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    line-height: 0;
  }
  /* Wings sit IN FRONT of the maroon medallion (per user — laurel halo
     wraps the medallion). z-index above the medallion's z-index:2. */
  main.tti-course [class*="dptk43sj"] .tti-cert-wings{
    position: absolute !important;
    inset: 0 !important;
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    z-index: 3 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: none;
    line-height: 0;
  }
  main.tti-course [class*="dptk43sj"] .tti-cert-wings > svg{
    all: revert !important;
    display: block !important;
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #c9a45a !important;
    filter: drop-shadow(0 3px 5px rgba(100,65,10,0.18));
  }
  main.tti-course [class*="dptk43sj"] .tti-cert-wings > svg path{
    fill: #c9a45a !important;
    stroke: none !important;
  }
  /* Medallion: maroon disc with white glyph, centered over wings */
  main.tti-course [class*="dptk43sj"] .tti-cert-badge > svg[class*="dpmxfl1r"]{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 26px !important;
    height: 26px !important;
    padding: 14px !important;
    background: var(--tti-maroon) !important;
    color: #fff !important;
    border-radius: 50% !important;
    box-sizing: content-box !important;
    box-shadow: 0 6px 14px rgba(122,0,18,0.22) !important;
    z-index: 2 !important;
    display: block !important;
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
  }
  main.tti-course [class*="dptk43sj"] .tti-cert-badge > svg[class*="dpmxfl1r"] *{
    fill: none !important;
    stroke: #fff !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    color: #fff !important;
  }
  /* Title: aligned bottom so it sits next to support copy, ink, bigger */
  main.tti-course [class*="dptk43sj"] h2{
    grid-area: title;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: var(--tti-ink) !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    align-self: end !important;
  }
  /* Strip underline/pseudos on cert h2 */
  main.tti-course [class*="dptk43sj"] h2::after,
  main.tti-course [class*="dptk43sj"] h2::before{
    display: none !important;
    content: none !important;
  }
  /* Any stray <img> stays constrained but doesn't dominate */
  main.tti-course [class*="dptk43sj"] img{
    max-width: 100% !important;
    height: auto !important;
    border: 1px solid var(--tti-cream-line);
    border-radius: 10px;
    padding: 10px;
    background: var(--tti-cream);
    display: block;
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(14,10,8,0.06);
  }

  /* =====================================================================
   * INSTRUCTOR — 2-col avatar + bio, NO circular bio blobs
   * =================================================================== */
  main.tti-course .tti-instructor-name{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 2px;
    padding-left: 170px;
    min-height: 88px;
    justify-content: center;
    position: relative;
    z-index: 2;
  }
  main.tti-course .tti-instructor-name__name{
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--tti-ink);
    line-height: 1.2;
  }
  main.tti-course .tti-instructor-name__chips{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  main.tti-course .tti-instructor-name__chip{
    background: var(--tti-cream);
    color: var(--tti-maroon);
    border: 1px solid rgba(201,169,97,0.4);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  main.tti-course .tti-instructor-name__role{
    color: var(--tti-muted);
    font-size: 13.5px;
    margin: 0;
    letter-spacing: 0.02em;
  }

  /* Instructor block (after h2.tti-h-instructor)
     DOM: dpad2ibs > dpp0wwpi > dpxycwag > dpbuia8v > dp97md4s (contains
     BOTH <img> and the bio text nodes). Strategy: flatten EVERY Droip
     wrapper (including dp97md4s itself) to a transparent block pass-
     through so the text flows normally, then hoist the <img> tag
     to absolute position at left:0 as the round avatar. */
  /* Negative margin pulls the bio block up so the avatar (absolutely
     positioned top:0 left:0 of this block) sits alongside the name/chips
     above, forming a single visual card. Bio text is shifted down by
     top padding so it starts below the avatar region. */
  /* Instructor card wrapper — white card on maroon wallpaper; fixes contrast */
  main.tti-course .tti-instructor-card{
    background: #fff !important;
    border: 1px solid var(--tti-cream-line) !important;
    border-radius: var(--tti-radius) !important;
    box-shadow: var(--tti-card-shadow) !important;
    padding: 30px 30px 28px 180px !important;
    margin: 0 !important;
    position: relative !important;
    color: var(--tti-ink) !important;
    min-height: 200px;
  }
  /* Eyebrow */
  main.tti-course .tti-instructor-card::before{
    content: "Your Instructor" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--tti-maroon) !important;
    margin: 0 0 10px !important;
  }
  /* Hide the generic dp5zr5at underline-accent styling on instructor h2 */
  main.tti-course .tti-instructor-card h2.tti-h-instructor{
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: var(--tti-ink) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }
  main.tti-course .tti-instructor-card h2.tti-h-instructor::before,
  main.tti-course .tti-instructor-card h2.tti-h-instructor::after{
    display: none !important;
    content: none !important;
  }
  /* Name / chips / role block */
  main.tti-course .tti-instructor-card .tti-instructor-name{
    margin: 4px 0 14px !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
  }
  main.tti-course .tti-instructor-card .tti-instructor-name__name{
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--tti-ink) !important;
  }
  main.tti-course .tti-instructor-card .tti-instructor-name__chips{
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  main.tti-course .tti-instructor-card .tti-instructor-name__chip{
    background: var(--tti-cream) !important;
    color: var(--tti-maroon) !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(122,0,18,0.2) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }
  main.tti-course .tti-instructor-card .tti-instructor-name__role{
    flex-basis: 100% !important;
    color: var(--tti-muted) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    margin: 4px 0 0 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
  }
  /* Bio area: remove the old negative-margin overlay hack; normal flow now */
  main.tti-course .tti-instructor-card [class*="dpad2ibs"]{
    display: block !important;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    color: var(--tti-ink-2) !important;
  }
  /* Bio paragraphs readable, dark ink */
  main.tti-course .tti-instructor-card [class*="dpad2ibs"] p{
    color: var(--tti-ink-2) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin: 0 0 12px !important;
    max-width: 62ch !important;
  }
  /* Avatar: absolute-positioned at left of the card */
  main.tti-course .tti-instructor-card [class*="dp97md4s"] > img,
  main.tti-course .tti-instructor-card img[class*="dpv8oqt3"]{
    position: absolute !important;
    left: 30px !important;
    top: 30px !important;
    width: 130px !important;
    height: 130px !important;
    border-radius: 50% !important;
    border: 4px solid #fff !important;
    outline: 1px solid var(--tti-brass) !important;
    outline-offset: 3px !important;
    object-fit: cover !important;
    object-position: center top !important;
    box-shadow: 0 6px 18px rgba(14,10,8,0.12) !important;
    background: var(--tti-cream) !important;
    z-index: 1 !important;
  }
  /* Flatten EVERY wrapper including dp97md4s to normal block flow */
  main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] [class*="dpp0wwpi"],
  main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] [class*="dpxycwag"],
  main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] [class*="dpbuia8v"],
  main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] [class*="dppn95td"],
  main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] [class*="dptf4zew"],
  main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] [class*="dp97md4s"]{
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    position: static !important;
    outline: 0 !important;
    flex: initial !important;
    color: var(--tti-ink-2) !important;
  }
  /* Bio text styling */
  main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] [class*="dpp0wwpi"]{
    font-size: 15px !important;
    line-height: 1.72 !important;
    color: var(--tti-ink-2) !important;
  }
  /* Bio clamp + mask-gradient fade — mobile v22 pattern adapted for tablet
     (wider columns, more readable lines). 12 lines × 1.72 line-height ×
     15px = ~310px max. Per memory v25, bio text-host is dp97md4s
     :not(:first-child) (second sibling — first is avatar wrapper). */
  main.tti-course .tti-instructor-card [class*="dp97md4s"]:not(:first-child),
  main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] [class*="dp97md4s"]:not(:first-child){
    display: block !important;
    max-height: 330px !important;
    overflow: hidden !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 270px, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0, #000 270px, transparent 100%) !important;
  }
  main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] p{
    margin: 0 0 10px !important;
    color: var(--tti-ink-2) !important;
    font-size: 15px !important;
    line-height: 1.72 !important;
    max-width: 60ch;
  }
  /* Hoist the actual <img> element to absolute avatar position.
     v29: inset 28px from card top-left so the avatar sits cleanly inside
     the white rounded card (was at 0,0 bleeding past the rounded corner). */
  main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] [class*="dp97md4s"] > img,
  main.tti-course h2.tti-h-instructor ~ [class*="dpad2ibs"] img[class*="dpv8oqt3"]{
    position: absolute !important;
    left: 28px !important;
    top: 28px !important;
    width: 140px !important;
    height: 140px !important;
    border-radius: 50% !important;
    border: 4px solid #fff !important;
    outline: 1px solid var(--tti-brass) !important;
    outline-offset: 3px !important;
    object-fit: cover !important;
    object-position: center top !important;
    box-shadow: 0 8px 22px rgba(14,10,8,0.14) !important;
    background: var(--tti-cream) !important;
    z-index: 1 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  /* =====================================================================
   * REVIEWS — editorial testimonial layout
   * =================================================================== */
  main.tti-course [class*="dpwcywdl"]{
    padding: 26px 28px 26px !important;
  }
  main.tti-course [class*="dpwcywdl"] > *{
    width: 100% !important;
    max-width: 100% !important;
  }
  main.tti-course [class*="dpwcywdl"] [class*="dp9oioq3"],
  main.tti-course [class*="dpwcywdl"] [class*="dpc3m14p"]{
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  /* Fix #7: [5.0] [★★★★★] [(1 Review)] all on one visual row.
     DOM is: dp4sd1eo > { span.dp4dah7m "5.0", div.dpfi0pda { "(1 Review)" + div.dp8bzpxx > span.dpf3si3h > svg } }
     Use flex-row on dp4sd1eo; inside dpfi0pda use row-reverse so the stars
     (element child) visually precede the "(1 Review)" text node. */
  main.tti-course [class*="dpwcywdl"] [class*="dp7th1rv"],
  main.tti-course [class*="dpwcywdl"] [class*="dp4sd1eo"]{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 8px 0 0 !important;
    background: transparent !important;
    width: 100% !important;
  }
  main.tti-course [class*="dpwcywdl"] [class*="dp4dah7m"],
  main.tti-course [class*="dpwcywdl"] [class*="dphf1qxd"]{
    font-size: 42px !important;
    font-weight: 800 !important;
    color: var(--tti-ink) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    flex: 0 0 auto !important;
    height: auto !important;
    width: auto !important;
  }
  main.tti-course [class*="dpwcywdl"] [class*="dpfi0pda"]{
    display: flex !important;
    flex-direction: row-reverse !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 14px !important;
    color: var(--tti-muted) !important;
    font-size: 13.5px !important;
    letter-spacing: 0.02em !important;
    height: auto !important;
    width: auto !important;
    flex: 1 1 auto !important;
    white-space: nowrap !important;
  }
  main.tti-course [class*="dpwcywdl"] [class*="dp8bzpxx"]{
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2px !important;
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
  main.tti-course [class*="dpwcywdl"] [class*="dpf3si3h"],
  main.tti-course [class*="dpwcywdl"] [class*="rating-text"]{
    color: var(--tti-brass) !important;
    font-size: 22px !important;
    letter-spacing: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
  }
  main.tti-course [class*="dpwcywdl"] [class*="dpf3si3h"] svg,
  main.tti-course [class*="dpwcywdl"] [class*="dpf3si3h"] svg *,
  main.tti-course [class*="dpwcywdl"] [class*="rating-text"] svg,
  main.tti-course [class*="dpwcywdl"] [class*="rating-text"] svg *,
  main.tti-course [class*="dpwcywdl"] [class*="dp4sd1eo"] svg,
  main.tti-course [class*="dpwcywdl"] [class*="dp4sd1eo"] svg *,
  main.tti-course [class*="dpwcywdl"] [class*="dpfi0pda"] svg,
  main.tti-course [class*="dpwcywdl"] [class*="dpfi0pda"] svg *{
    color: #f0b400 !important;
    fill: #f0b400 !important;
    stroke: #f0b400 !important;
  }
  /* Reviews h2 maroon underline — explicit (was inheriting generic h2::after
     but probe at v28 showed it not rendering at tablet — make it explicit
     with brass extension to match the section h2 pattern). */
  main.tti-course [class*="dpwcywdl"] h2.tti-h-reviews{
    position: relative !important;
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
  }
  main.tti-course [class*="dpwcywdl"] h2.tti-h-reviews::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 44px !important;
    height: 3px !important;
    background: var(--tti-maroon) !important;
    display: block !important;
  }
  main.tti-course [class*="dpwcywdl"] h2.tti-h-reviews::before{
    content: "" !important;
    position: absolute !important;
    left: 44px !important;
    bottom: 1px !important;
    width: 22px !important;
    height: 1px !important;
    background: var(--tti-brass) !important;
    display: block !important;
  }
  /* Kill any dead-space empty children in reviews */
  main.tti-course [class*="dpwcywdl"] > *:empty,
  main.tti-course [class*="dpwcywdl"] [class*="dpad2ibs"]:empty{
    display: none !important;
  }

  /* =====================================================================
   * SIMILAR COURSES — 2-col card grid
   * =================================================================== */
  main.tti-course [class*="dp0lc8fb"] [class*="dpu7rh63"]{
    display: block !important;
    margin-top: 16px !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }
  main.tti-course [class*="dp0lc8fb"] [class*="dpixfqu2"]{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: 0 !important;
    gap: 18px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }
  /* Hide non-card grid children (Droip ships hidden style/script/textarea
     siblings inside dpixfqu2 — at 1023 some of them were eating a 3rd grid
     column with width 429px, collapsing real cards to 138px). */
  main.tti-course [class*="dp0lc8fb"] [class*="dpixfqu2"] > style,
  main.tti-course [class*="dp0lc8fb"] [class*="dpixfqu2"] > script,
  main.tti-course [class*="dp0lc8fb"] [class*="dpixfqu2"] > textarea,
  main.tti-course [class*="dp0lc8fb"] [class*="dpixfqu2"] > [class*="dpu7rh63"]{
    display: none !important;
  }
  /* Add-to-cart wrapper visibility — Droip hides the chip's parent
     wrapper at certain breakpoints. Force-show. */
  main.tti-course [class*="dp0lc8fb"] [class*="dpfenovj"] > *,
  main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"] [class*="dpp1ouz9"],
  main.tti-course [class*="dp0lc8fb"] [class*="dpp1ouz9"]{
    visibility: visible !important;
  }
  /* v28: section bg cream (home parity, distinct from white cards above);
     card border neutral cream-line (kill Droip blue rgb(170,182,238)). */
  main.tti-course [class*="dp8h97bx"] ~ [class*="dp0lc8fb"],
  main.tti-course > [class*="dp0lc8fb"],
  main.tti-course [class*="dp0lc8fb"]{
    background: var(--tti-cream) !important;
    border: 1px solid var(--tti-cream-line) !important;
  }
  main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"],
  main.tti-course [class*="dp0lc8fb"] [class*="dpfenovj"],
  main.tti-course [class*="dp0lc8fb"] [class*="dp2fgknj"]{
    border-color: var(--tti-cream-line) !important;
  }
  /* Section h2 underline (explicit — generic h2::after not winning here) */
  main.tti-course [class*="dp0lc8fb"] > h2,
  main.tti-course [class*="dp0lc8fb"] > [class*="droip-inline-element"] > h2{
    position: relative !important;
    padding-bottom: 14px !important;
    margin-bottom: 18px !important;
  }
  main.tti-course [class*="dp0lc8fb"] > h2::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important; bottom: 0 !important;
    width: 44px !important; height: 3px !important;
    background: var(--tti-maroon) !important;
    display: block !important;
  }
  main.tti-course [class*="dp0lc8fb"] > h2::before{
    content: "" !important;
    position: absolute !important;
    left: 44px !important; bottom: 1px !important;
    width: 22px !important; height: 1px !important;
    background: var(--tti-brass) !important;
    display: block !important;
  }
  /* Star rows (rating-text-* svgs) — gold, small, inline */
  main.tti-course [class*="dp0lc8fb"] [class*="rating-text"]{
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 4px 0 !important;
  }
  main.tti-course [class*="dp0lc8fb"] [class*="rating-text"] svg,
  main.tti-course [class*="dp0lc8fb"] [class*="rating-text"] svg *{
    width: 14px !important;
    height: 14px !important;
    color: #f0b400 !important;
    fill: #f0b400 !important;
    stroke: #f0b400 !important;
  }
  /* Author line muted ("by Jose Zepeda...") */
  main.tti-course [class*="dp0lc8fb"] [class*="dp54a86x"],
  main.tti-course [class*="dp0lc8fb"] [class*="dphdbeec"]{
    display: block !important;
    font-size: 12px !important;
    color: var(--tti-muted) !important;
    margin: 2px 0 8px !important;
    font-weight: 500 !important;
  }
  /* Add to cart pink-tinted chip (dpp1ouz9) */
  main.tti-course [class*="dp0lc8fb"] [class*="dpp1ouz9"]{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(122,0,18,0.08) !important;
    color: var(--tti-maroon) !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(122,0,18,0.2) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: background 220ms var(--tti-ease), color 220ms var(--tti-ease);
  }
  main.tti-course [class*="dp0lc8fb"] [class*="dpp1ouz9"]:hover{
    background: var(--tti-maroon) !important;
    color: #fff !important;
  }
  main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"]{
    display: flex !important;
    flex-direction: column;
    background: #fff !important;
    border: 1px solid var(--tti-cream-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--tti-card-shadow);
    overflow: hidden;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    transition: transform 280ms var(--tti-ease),
                box-shadow 280ms var(--tti-ease),
                border-color 280ms var(--tti-ease);
    position: relative;
  }
  main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"]:hover{
    transform: translateY(-3px);
    box-shadow: var(--tti-card-shadow-hi);
    border-color: rgba(201,169,97,0.5);
  }
  main.tti-course [class*="dp0lc8fb"] img[class*="dpv8oqt2"]{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: var(--tti-cream);
    transition: transform 480ms var(--tti-ease);
  }
  main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"]:hover img[class*="dpv8oqt2"]{
    transform: scale(1.04);
  }
  main.tti-course [class*="dp0lc8fb"] [class*="dpfenovj"]{
    padding: 16px 18px !important;
    min-height: 0 !important;
    gap: 6px;
    background: transparent !important;
    display: flex !important;
    flex-direction: column;
  }
  main.tti-course [class*="dp0lc8fb"] [class*="dp2fgknj"]{
    padding: 14px 16px 16px !important;
    min-height: 0 !important;
    text-decoration: none !important;
    background: transparent !important;
  }
  /* Similar-CARD h2 titles (inside each card) — small, no underline.
     Scope to dpkrudh6/dp2fgknj card wrappers so the SECTION h2
     "Similar Courses" keeps its section-level styling + underline. */
  main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"] h2,
  main.tti-course [class*="dp0lc8fb"] [class*="dp2fgknj"] h2,
  main.tti-course [class*="dp0lc8fb"] [class*="dpfenovj"] h2{
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: var(--tti-ink) !important;
    letter-spacing: -0.005em;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: calc(15px * 1.35 * 2) !important;
  }
  main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"] h2::after,
  main.tti-course [class*="dp0lc8fb"] [class*="dpkrudh6"] h2::before,
  main.tti-course [class*="dp0lc8fb"] [class*="dp2fgknj"] h2::after,
  main.tti-course [class*="dp0lc8fb"] [class*="dp2fgknj"] h2::before,
  main.tti-course [class*="dp0lc8fb"] [class*="dpfenovj"] h2::after,
  main.tti-course [class*="dp0lc8fb"] [class*="dpfenovj"] h2::before{
    display: none !important; content: none !important;
  }
  main.tti-course [class*="dp0lc8fb"] [class*="price"],
  main.tti-course [class*="dp0lc8fb"] [class*="amount"]{
    color: var(--tti-maroon) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    background: transparent !important;
    padding: 0 !important;
  }

  /* =====================================================================
   * FINAL CTA BAND — break out of trapped ancestor chain
   * =================================================================== */
  /* Force CTA ancestor chain to break out of any grid/flex column trap */
  main.tti-course [class*="dpuqrw05"]:has(.tti-course-final-cta),
  main.tti-course [class*="dphry4bp"]:has(.tti-course-final-cta),
  main.tti-course [class*="dp9v0niz"]:has(.tti-course-final-cta),
  main.tti-course [class*="dplqy9ef"]:has(.tti-course-final-cta),
  main.tti-course [class*="dp1rg588"]:has(.tti-course-final-cta){
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    flex: 1 1 100% !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    position: static !important;
    float: none !important;
    overflow: visible !important;
  }
  main.tti-course [class*="dp1rg588"]:has(.tti-course-final-cta) > *:not(:has(.tti-course-final-cta)):not(.tti-course-final-cta),
  main.tti-course [class*="dplqy9ef"]:has(.tti-course-final-cta) > *:not(:has(.tti-course-final-cta)):not(.tti-course-final-cta),
  main.tti-course [class*="dp9v0niz"]:has(.tti-course-final-cta) > *:not(:has(.tti-course-final-cta)):not(.tti-course-final-cta),
  main.tti-course [class*="dphry4bp"]:has(.tti-course-final-cta) > *:not(:has(.tti-course-final-cta)):not(.tti-course-final-cta),
  main.tti-course [class*="dpuqrw05"]:has(.tti-course-final-cta) > *:not(:has(.tti-course-final-cta)):not(.tti-course-final-cta){
    display: none !important;
  }

  main.tti-course .tti-course-final-cta{
    position: relative;
    background:
      radial-gradient(at 100% 0%, rgba(201,169,97,0.18) 0%, transparent 55%),
      linear-gradient(135deg, var(--tti-maroon) 0%, var(--tti-maroon-deep) 100%) !important;
    color: #fff !important;
    padding: 48px 40px !important;
    border-radius: 16px !important;
    text-align: center;
    margin-top: 0 !important;
    display: block !important;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0,0,0,0.26);
    width: 100% !important;
    max-width: 100% !important;
  }
  main.tti-course .tti-course-final-cta::before{
    content: "";
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 3px;
    background: var(--tti-brass);
    border-radius: 0 2px 2px 0;
  }
  main.tti-course .tti-course-final-cta__eyebrow{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tti-brass);
    margin: 0 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  main.tti-course .tti-course-final-cta__eyebrow::before{
    content: "";
    display: inline-block;
    width: 22px; height: 1px;
    background: var(--tti-brass);
  }
  main.tti-course .tti-course-final-cta__title{
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    color: #fff !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    letter-spacing: -0.02em;
  }
  main.tti-course .tti-course-final-cta__title::after,
  main.tti-course .tti-course-final-cta__title::before{
    display: none !important;
  }
  main.tti-course .tti-course-final-cta__lede{
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255,255,255,0.84);
    margin: 0 auto 22px;
    max-width: 52ch;
  }
  main.tti-course .tti-course-final-cta__buttons{
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }
  main.tti-course .tti-course-final-cta__primary{
    background: var(--tti-brass) !important;
    color: var(--tti-maroon-deep) !important;
    padding: 13px 24px !important;
    border-radius: 9px !important;
    font-weight: 800 !important;
    font-size: 14.5px !important;
    letter-spacing: 0.03em;
    text-decoration: none !important;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    transition: transform 180ms var(--tti-ease),
                box-shadow 180ms var(--tti-ease);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  }
  main.tti-course .tti-course-final-cta__primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.28);
  }
  main.tti-course .tti-course-final-cta__secondary{
    background: transparent !important;
    color: #fff !important;
    padding: 13px 24px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    text-decoration: none !important;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    transition: background 180ms var(--tti-ease),
                border-color 180ms var(--tti-ease);
  }
  main.tti-course .tti-course-final-cta__secondary:hover{
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(201,169,97,0.7) !important;
  }

  /* =====================================================================
   * HIDE REDUNDANT / ORPHAN ELEMENTS
   * =================================================================== */
  body > [class*="rating-text-"],
  body > div[class*="rating-text"]{ display: none !important }
  main.tti-course [class*="dpjppmhx"],
  main.tti-course [class*="dp3ywrmr"],
  main.tti-course [class*="dpdawsr5"],
  main.tti-course [class*="dpxzxlyj"],
  main.tti-course [class*="dp8zj229"]{ display: none !important }
  main.tti-course [class*="-meta-16"]:not([class*="meta-16-r-"]){ display: none !important }
  main.tti-course [class*="dp8h97bx"] > [class*="dp436lui"]:not(:has(h2.tti-h-syllabus)):not(:has([class*="dpwy7tt7"])){ display: none !important }
  main.tti-course [class*="dpft5oys"] img:first-child{ display: none !important }
  main.tti-course [class*="dp8h97bx"] > h2:not(.tti-h-learn):not(.tti-h-syllabus):not(.tti-h-certificate):not(.tti-h-instructor):not(.tti-h-reviews):not(.tti-h-similar){ display: none !important }
  main.tti-course [class*="dp8h97bx"] > h3{ display: none !important }
  main.tti-course [class*="dptbqvj2"] [class*="dplqy9ef"]:not(:has(.tti-course-final-cta)){ display: none !important }
  /* v28: home-parity for related cards — UNHIDE stars + author + price-area
     wrappers (was hiding for v11 minimalism). Keep dphf1qxd hidden (duplicate
     numerical "5.0" — the stars row alone is enough). */
  main.tti-course [class*="dp0lc8fb"] [class*="dphf1qxd"]{ display: none !important }
  /* Hide raw Droip template-data textarea (specificity: must beat block rule) */
  main.tti-course textarea,
  main.tti-course [class*="dp0lc8fb"] textarea,
  main.tti-course textarea[class*="dpu7rh63"],
  main.tti-course [class*="dp0lc8fb"] textarea[class*="dpu7rh63"],
  main.tti-course textarea[class*="dpixfqu2"]{ display: none !important }
  main.tti-course [class*="dpwcywdl"] [class*="dpu4dil7"],
  main.tti-course [class*="dpwcywdl"] [class*="droip-collection-item"],
  main.tti-course [class*="dpwcywdl"] [class*="dp9oioq3"] > *:not([class*="dpc3m14p"]){ display: none !important }
  main.tti-course [class*="dpm1ko05"] img ~ svg{ display: none !important }

  /* =====================================================================
   * FOCUS + MOTION
   * =================================================================== */
  main.tti-course a:focus-visible,
  main.tti-course button:focus-visible,
  main.tti-course input:focus-visible{
    outline: 3px solid var(--tti-brass) !important;
    outline-offset: 3px !important;
    border-radius: 4px;
  }
  main.tti-course a,
  main.tti-course button,
  main.tti-course [role="button"]{ min-height: 44px }

  @media (prefers-reduced-motion: reduce){
    main.tti-course *,
    main.tti-course *::before,
    main.tti-course *::after{
      animation: none !important;
      transition: none !important;
    }
  }

  /* =========================================================================
     v30 (2026-04-25) — Polish: Reviews + Related Training (tablet 600-1023)
  ========================================================================= */

  /* Outer wrappers stack vertically (h2-row + histogram) */
  main.tti-course [class*="dpwcywdl"] [class*="dp9oioq3"],
  main.tti-course [class*="dpwcywdl"] [class*="dpc3m14p"]{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
  }
  /* The h2-row itself: h2 left, rating pill right, wrap if too narrow */
  main.tti-course [class*="dpwcywdl"] [class*="dp7th1rv"]{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    column-gap: 20px !important;
    row-gap: 14px !important;
    width: 100% !important;
  }
  main.tti-course [class*="dpwcywdl"] [class*="dp7th1rv"] > h2.tti-h-reviews,
  main.tti-course [class*="dpwcywdl"] h2.tti-h-reviews{
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  main.tti-course [class*="dpwcywdl"] [class*="dp7th1rv"] > [class*="dp4sd1eo"]{
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  main.tti-course [class*="dpwcywdl"] h2.tti-h-reviews{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 4px !important;
    white-space: normal !important;
  }
  main.tti-course [class*="dpwcywdl"] [class*="dpc3m14p"]{
    width: 100% !important;
    max-width: 100% !important;
  }
  main.tti-course [class*="dpwcywdl"] [class*="dp4sd1eo"]{
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 14px 22px !important;
    background: var(--tti-cream, #faf6ee) !important;
    border: 1px solid #efe7d6 !important;
    border-radius: 14px !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  main.tti-course [class*="dpwcywdl"] [class*="dp4dah7m"]{
    font: 800 32px/1 var(--tti-serif, Georgia, serif) !important;
    color: var(--tti-maroon, #7a0012) !important;
    padding: 0 16px 0 0 !important;
    margin: 0 !important;
    border-right: 1px solid rgba(122,0,18,0.18) !important;
    height: auto !important;
  }
  main.tti-course [class*="dpwcywdl"] [class*="dpfi0pda"]{
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--tti-muted, #5a5a63) !important;
    font: 600 11px/1 var(--tti-sans, system-ui, sans-serif) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    height: auto !important;
    width: auto !important;
  }

  main.tti-course [class*="dp0lc8fb"] [class*="dpj03hg2"]{
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 16px !important;
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  main.tti-course [class*="dp0lc8fb"] [class*="dpj03hg2"] > div:has(> a[class*="dp2fgknj"]){
    order: 0 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 44px !important;
  }
  main.tti-course [class*="dp0lc8fb"] [class*="dpj03hg2"] > [class*="dpc4dq03"]{
    order: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 22px !important;
    flex-wrap: wrap !important;
  }
  main.tti-course [class*="dp0lc8fb"] [class*="dpj03hg2"] > [class*="dpaykrfk"]{
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: auto 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid #efe7d6 !important;
    width: 100% !important;
  }

  main.tti-course [class*="dp0lc8fb"] [class*="dpj03hg2"] a[class*="dp2fgknj"]{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--tti-ink, #0f0f10) !important;
    font: 700 15px/1.35 var(--tti-sans, system-ui, sans-serif) !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    letter-spacing: -0.005em !important;
  }
  main.tti-course [class*="dp0lc8fb"] [class*="dpj03hg2"] a[class*="dp2fgknj"]:hover{
    color: var(--tti-maroon, #7a0012) !important;
  }

  main.tti-course [class*="dp0lc8fb"] [class*="dpc4dq03"] [class*="dpuqrw01"]{
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    height: auto !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #f0b400 !important;
    fill: #f0b400 !important;
    font: 700 12px/1 var(--tti-sans, system-ui, sans-serif) !important;
  }
  /* Star sizing — color comes from per-class rules below (filled vs empty) */
  main.tti-course [class*="dp0lc8fb"] [class*="dpc4dq03"] [class*="dpuqrw01"] svg{
    width: 12px !important;
    height: 12px !important;
  }
  /* Filled star (dp90iezg) — gold #FAA625 (Droip's chosen brand gold) */
  main.tti-course [class*="dp0lc8fb"] svg[class*="dp90iezg"],
  main.tti-course [class*="dp0lc8fb"] svg[class*="dp90iezg"] path{
    fill: #FAA625 !important;
    color: #FAA625 !important;
    stroke: none !important;
  }
  /* Empty star (dp7omjyn) — neutral grey #D8D5D5 */
  main.tti-course [class*="dp0lc8fb"] svg[class*="dp7omjyn"],
  main.tti-course [class*="dp0lc8fb"] svg[class*="dp7omjyn"] path{
    fill: #D8D5D5 !important;
    color: #D8D5D5 !important;
    stroke: none !important;
  }
  /* Hide the leading numeric rating "0" / "5.0" text — stars carry the meaning */
  main.tti-course [class*="dp0lc8fb"] [class*="dpuqrw01"] > [class*="dpmtsiz0"]{
    display: none !important;
  }

  /* Author cell: block container with inline-flowing children for natural
     "by Jose Zepeda…" spacing. Cannot use display:flex here because flex
     blockifies its children, defeating display:inline. */
  main.tti-course [class*="dp0lc8fb"] [class*="dpc4dq03"] [class*="dp54a86x"]{
    display: block !important;
    color: var(--tti-muted, #5a5a63) !important;
    font: 500 11.5px/1.4 var(--tti-sans, system-ui, sans-serif) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    word-break: break-word !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  main.tti-course [class*="dp0lc8fb"] [class*="dp54a86x"] > p,
  main.tti-course [class*="dp0lc8fb"] [class*="dp54a86x"] > *{
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    background: transparent !important;
    line-height: 1.4 !important;
  }
  /* Render a literal space between "by" and the name */
  main.tti-course [class*="dp0lc8fb"] [class*="dp54a86x"] > [class*="dpsg9jw3"]::after{
    content: " " !important;
    white-space: pre !important;
  }

  main.tti-course [class*="dp0lc8fb"] [class*="dpaykrfk"] [class*="amount"],
  main.tti-course [class*="dp0lc8fb"] [class*="dpaykrfk"] [class*="price"],
  main.tti-course [class*="dp0lc8fb"] [class*="dpaykrfk"] > div:first-child{
    color: var(--tti-maroon, #7a0012) !important;
    font: 800 17px/1 var(--tti-serif, Georgia, serif) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  main.tti-course [class*="dp0lc8fb"] [class*="dp8e6yri"]{
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  main.tti-course [class*="dp0lc8fb"] button[class*="dpp1ouz9"]{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    background: rgba(122,0,18,0.08) !important;
    color: var(--tti-maroon, #7a0012) !important;
    border: 1px solid rgba(122,0,18,0.22) !important;
    border-radius: 999px !important;
    font: 700 11px/1 var(--tti-sans, system-ui, sans-serif) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 30px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 130px !important;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease !important;
  }
  main.tti-course [class*="dp0lc8fb"] button[class*="dpp1ouz9"]:hover{
    background: var(--tti-maroon, #7a0012) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
  }
  main.tti-course [class*="dp0lc8fb"] button[class*="dpp1ouz9"] *{
    color: inherit !important;
    background: transparent !important;
    fill: currentColor !important;
  }
}