/* ==========================================================================
   Ontario paralegal hub — floating section nav + CPD year planner
   --------------------------------------------------------------------------
   THIS FILE IS NOT PREFIX SCOPED. Every selector below literally contains one
   of this page's own ids, and build_paralegal.py::assert_anchored() fails the
   build if one does not — brace balanced, inside @media too.

   Why, rather than the scoper the other builders use (§18b.3): `lpen-assets/`
   is enqueued site wide, this stylesheet reaches into WooCommerce's own markup
   for the add to cart button, and a scoper is a transformation you have to
   trust. An id anchor is a fact you can grep. §18k made the same call for
   /my-account/ and it is the better pattern.

   The ids, all of them section containers on page:
     #lpen-pl-hero  #lpen-pl-nav   #lpen-pl-rules  #lpen-pl-plan
     #lpen-pl-pass  #lpen-pl-memb  #lpen-pl-fac    #lpen-pl-how
     #lpen-pl-read  #lpen-pl-faqs  #lpen-pl-cta
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
#lpen-pl-nav,
#lpen-pl-plan {
  --pl-navy-900: #012032;
  --pl-navy-800: #022e48;
  --pl-navy-700: #0b4465;
  --pl-navy-100: #c9dde8;
  --pl-navy-50: #e5eef3;
  --pl-navy-25: #f3f7f9;
  --pl-action: #0f5c96;
  --pl-gold: #e8b64a;
  --pl-gold-bg: #fdf3e0;
  --pl-gold-bd: #e8c87a;
  --pl-gold-tx: #8a5a08;
  --pl-live-bg: #eaf5ee;
  --pl-live-bd: #b5d8c1;
  --pl-live-tx: #125e26;
  --pl-surface: #f6f8fa;
  --pl-border: #cfd6dd;
  --pl-text: #111820;
  --pl-secondary: #4a5666;
  --pl-subtle: #6b7684;
  --pl-white: #fff;
  --pl-font: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --pl-shadow: 0 1px 2px rgba(1, 32, 50, .06), 0 8px 24px rgba(1, 32, 50, .09);
  --pl-focus: 0 0 0 2px #fff, 0 0 0 4px var(--pl-action);
}

/* Shared icon mechanic. Tabler as a CSS mask, because the html widget
   sanitiser strips <svg> (§18b.1). `currentColor` keeps §18a's colour
   inheritance rule intact and no icon font has to load. */
#lpen-pl-nav .lpen-i,
#lpen-pl-plan .lpen-i {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: -.125em;
}

/* ==========================================================================
   2. The floating nav — shell
   --------------------------------------------------------------------------
   One element that spans the whole document, unlike the live page's Elementor
   sticky container, which can only stick inside its own row and therefore
   unsticks a fifth of the way down.

   Two layouts from one markup:
     >= 1620px   a vertical rail in the left margin
     <  1620px   a horizontal bar docked under the header

   The threshold is arithmetic, not taste. See section 4.

   PROGRESSIVE ENHANCEMENT. Until the script adds `is-ready`, this is a plain
   in flow row of anchor links. JS off gives a visitor eight working links and
   no dead chrome, the same contract as the footer's collapsible columns.
   ========================================================================== */
#lpen-pl-nav .lpen-pn {
  --pn-top: 12px;
  font-family: var(--pl-font);
  position: relative;
  z-index: 40;
}

#lpen-pl-nav .lpen-pn__spacer { display: none; }
#lpen-pl-nav .lpen-pn.is-ready .lpen-pn__spacer { display: block; }

#lpen-pl-nav .lpen-pn__bar {
  background: var(--pl-white);
  border: 1px solid var(--pl-border);
  border-radius: 12px;
  box-shadow: var(--pl-shadow);
  overflow: hidden;
}

/* Detached: fixed, spanning the viewport, under whatever is sticky above. */
#lpen-pl-nav .lpen-pn.is-detached .lpen-pn__bar {
  position: fixed;
  top: var(--pn-top);
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100vw - 32px));
  z-index: 60;
}

#lpen-pl-nav .lpen-pn__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 14px;
  min-width: 0;
}

/* ---------------------------------------------------------------- progress
   A hairline showing how far through the content the reader is. Sits on the
   bar's top edge horizontally, and runs down the rail's left edge. */
#lpen-pl-nav .lpen-pn__progress {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--pl-navy-50);
}

#lpen-pl-nav .lpen-pn__progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--pl-action);
  transition: width .12s linear;
}

/* ------------------------------------------------------------------- links */
#lpen-pl-nav .lpen-pn__eyebrow { display: none; }

#lpen-pl-nav .lpen-pn__scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#lpen-pl-nav .lpen-pn__scroll::-webkit-scrollbar { display: none; }

#lpen-pl-nav .lpen-pn__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#lpen-pl-nav .lpen-pn__list > li { margin: 0; }

#lpen-pl-nav .lpen-pn__link {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14.5px;
  line-height: 20px;
  font-weight: 600;
  color: var(--pl-secondary);
  text-decoration: none;
  box-shadow: none;
  transition: background-color .15s, color .15s;
}

#lpen-pl-nav .lpen-pn__link:hover,
#lpen-pl-nav .lpen-pn__link:focus-visible {
  background: var(--pl-navy-25);
  color: var(--pl-navy-800);
  text-decoration: none;
}

#lpen-pl-nav .lpen-pn__link:focus-visible { box-shadow: var(--pl-focus) !important; }

#lpen-pl-nav .lpen-pn__link[aria-current="true"] {
  background: var(--pl-navy-800);
  color: var(--pl-white);
}

#lpen-pl-nav .lpen-pn__link.is-past { color: var(--pl-subtle); }

/* The dot doubles as the within section progress meter: it fills clockwise as
   the reader moves through the section it points at. That is the one thing
   this nav does that the HR version does not, and it is why a reader can tell
   "nearly through the course list" from "just arrived at it". */
#lpen-pl-nav .lpen-pn__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--pl-navy-100);
  transition: background-color .15s;
}

#lpen-pl-nav .lpen-pn__link.is-past .lpen-pn__dot { background: var(--pl-action); }

#lpen-pl-nav .lpen-pn__link[aria-current="true"] .lpen-pn__dot {
  background: conic-gradient(
    var(--pl-gold) calc(var(--pn-seg, 0) * 1turn), rgba(255, 255, 255, .34) 0);
}

#lpen-pl-nav .lpen-pn__num { display: none; }

/* --------------------------------------------------------------------- CTA */
#lpen-pl-nav .lpen-pn__cta {
  display: none;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--pl-action);
  color: var(--pl-white);
  font-size: 14.5px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
  white-space: nowrap;
}

#lpen-pl-nav .lpen-pn__cta:hover { background: var(--pl-navy-700); color: var(--pl-white); text-decoration: none; }
#lpen-pl-nav .lpen-pn__cta:focus-visible { box-shadow: var(--pl-focus) !important; }

@media (min-width: 900px) {
  #lpen-pl-nav .lpen-pn__cta { display: flex; }
}

/* ==========================================================================
   4. The rail, >= 1620px
   --------------------------------------------------------------------------
   ⚠️ The threshold is arithmetic and it has to be checked, not guessed. The
   content column is 1120px and centred, so the free margin at viewport width
   W is (W - 1120) / 2. A 200px rail with a 20px gutter needs 220px of it,
   which means W >= 1560 for the rail to touch the viewport edge and W >= 1620
   for it to sit clear of it.

   The first version of this file said 1560 with a 220px rail and a 16px
   gutter, which resolves to left: -16px: the rail hung off the left edge of
   the screen at exactly the width that was supposed to switch it on. Found by
   putting a screenshot next to the sum.
   ========================================================================== */
@media (min-width: 1620px) {
  #lpen-pl-nav .lpen-pn.is-ready.is-detached .lpen-pn__bar {
    left: calc(50% - 560px - 220px);
    transform: none;
    width: 200px;
    border-radius: 12px;
    /* A 1620 wide window can still be short, so the rail scrolls inside
       itself rather than running off the bottom of the screen. */
    max-height: calc(100vh - var(--pn-top) - 20px);
    overflow-y: auto;
  }

  #lpen-pl-nav .lpen-pn.is-detached .lpen-pn__inner {
    display: block;
    padding: 16px 14px;
  }

  #lpen-pl-nav .lpen-pn.is-detached .lpen-pn__progress {
    inset: 0 auto 0 0;
    width: 2px;
    height: auto;
  }

  #lpen-pl-nav .lpen-pn.is-detached .lpen-pn__progress i {
    width: 100%;
    height: 0;
    transition: height .12s linear;
  }

  #lpen-pl-nav .lpen-pn.is-detached .lpen-pn__eyebrow {
    display: block;
    margin: 0 0 10px 8px;
    font-size: 11.5px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pl-subtle);
  }

  #lpen-pl-nav .lpen-pn.is-detached .lpen-pn__scroll { overflow: visible; }

  #lpen-pl-nav .lpen-pn.is-detached .lpen-pn__list {
    display: block;
    max-height: none;
  }

  #lpen-pl-nav .lpen-pn.is-detached .lpen-pn__link {
    border-radius: 7px;
    padding: 6px 9px;
    font-size: 13.5px;
    line-height: 18px;
    white-space: normal;
    align-items: flex-start;
  }

  #lpen-pl-nav .lpen-pn.is-detached .lpen-pn__dot { margin-top: 5px; }

  #lpen-pl-nav .lpen-pn.is-detached .lpen-pn__num {
    display: inline;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pl-subtle);
    padding-top: 1px;
  }

  #lpen-pl-nav .lpen-pn.is-detached .lpen-pn__link[aria-current="true"] .lpen-pn__num {
    color: var(--pl-gold);
  }

  #lpen-pl-nav .lpen-pn.is-detached .lpen-pn__cta {
    display: flex;
    justify-content: center;
    margin-top: 14px;
  }
}

/* Below 640px the CTA is hidden, so the bar is links only and stays one line
   on a phone. */
@media (max-width: 640px) {
  #lpen-pl-nav .lpen-pn__inner { padding: 6px 8px 6px 10px; gap: 8px; }
  #lpen-pl-nav .lpen-pn__link { padding: 7px 10px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #lpen-pl-nav .lpen-pn__progress i { transition: none; }
}

/* ==========================================================================
   5. The course list
   --------------------------------------------------------------------------
   Thirteen server rendered course cards, plus a search box and two facet axes
   the script adds. No selection state: the "add to plan" button and the tally
   it fed were dropped 2026-08-23 at the owner's request. The hours live on the
   cards instead, and the reader does their own arithmetic.
   ========================================================================== */
#lpen-pl-plan .lpen-pl { font-family: var(--pl-font); }

/* ------------------------------------------------------------------ toolbar */
#lpen-pl-plan .lpen-pl__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

#lpen-pl-plan .lpen-pl__search {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}

#lpen-pl-plan .lpen-pl__search .lpen-i {
  position: absolute;
  left: 12px;
  top: 50%;
  margin-top: -.5em;
  font-size: 18px;
  color: var(--pl-subtle);
  pointer-events: none;
}

/* The <input> is created by the script: a server rendered one is stripped
   (§18b.1). These rules therefore only ever match a scripted node. */
#lpen-pl-plan .lpen-pl__search input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--pl-border);
  border-radius: 8px;
  background: var(--pl-white);
  font-family: inherit;
  font-size: 15px;
  line-height: 22px;
  color: var(--pl-text);
}

#lpen-pl-plan .lpen-pl__search input:focus {
  outline: none;
  border-color: var(--pl-action);
  box-shadow: var(--pl-focus);
}

#lpen-pl-plan .lpen-pl__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* The two axes read as one undifferentiated wall of chips on a wide row, so
   the area group gets a rule between it and the years. It wraps to its own
   line below 900px, where the rule would be meaningless. */
@media (min-width: 900px) {
  #lpen-pl-plan .lpen-pl__chips--area {
    padding-left: 10px;
    border-left: 1px solid var(--pl-border);
  }
}

#lpen-pl-plan .lpen-pl__chip {
  padding: 7px 13px;
  border: 1px solid var(--pl-border);
  border-radius: 999px;
  background: var(--pl-white);
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--pl-secondary);
  cursor: pointer;
}

#lpen-pl-plan .lpen-pl__chip:hover { border-color: var(--pl-action); color: var(--pl-action); }
#lpen-pl-plan .lpen-pl__chip:focus-visible { box-shadow: var(--pl-focus); outline: none; }

#lpen-pl-plan .lpen-pl__chip[aria-pressed="true"] {
  background: var(--pl-navy-800);
  border-color: var(--pl-navy-800);
  color: var(--pl-white);
}

#lpen-pl-plan .lpen-pl__count {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 20px;
  color: var(--pl-subtle);
}

/* -------------------------------------------------------------------- grid */
#lpen-pl-plan .lpen-pl__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* `display: flex` on the li, not just `height: 100%` on the card. A grid item
   stretches, but a block child of one does not inherit that stretch, so the
   shortest card in a row ended a few pixels above its neighbours. */
#lpen-pl-plan .lpen-pl__grid > li { margin: 0; display: flex; }

#lpen-pl-plan .lpen-pl__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  padding: 18px;
  background: var(--pl-white);
  border: 1px solid var(--pl-border);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}

#lpen-pl-plan .lpen-pl__card:hover { box-shadow: var(--pl-shadow); }

#lpen-pl-plan .lpen-pl__card[hidden] { display: none; }

#lpen-pl-plan .lpen-pl__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  line-height: 18px;
}

#lpen-pl-plan .lpen-pl__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--pl-border);
  background: var(--pl-surface);
  color: var(--pl-secondary);
  font-weight: 600;
  white-space: nowrap;
}

#lpen-pl-plan .lpen-pl__tag--live {
  background: var(--pl-live-bg);
  border-color: var(--pl-live-bd);
  color: var(--pl-live-tx);
}

#lpen-pl-plan .lpen-pl__tag--pass {
  background: var(--pl-navy-50);
  border-color: var(--pl-navy-100);
  color: var(--pl-navy-700);
}

/* Stretched link on the title. NOT a wrapper anchor: `tabindex` is stripped
   (§18b.1), so the usual aria-hidden + tabindex="-1" wrapper arrives as a
   focusable element inside an aria-hidden subtree. Nothing between the card
   and the ::after may be positioned. */
#lpen-pl-plan .lpen-pl__title {
  margin: 0;
  font-size: 17.5px;
  line-height: 25px;
  font-weight: 700;
  color: var(--pl-navy-800);
}

#lpen-pl-plan .lpen-pl__title a {
  color: inherit;
  text-decoration: none;
  box-shadow: none;
}

#lpen-pl-plan .lpen-pl__title a::after { content: ""; position: absolute; inset: 0; }
#lpen-pl-plan .lpen-pl__title a:hover { color: var(--pl-action); text-decoration: underline; }
#lpen-pl-plan .lpen-pl__title a:focus-visible { box-shadow: var(--pl-focus) !important; border-radius: 3px; }

#lpen-pl-plan .lpen-pl__take {
  margin: 0;
  font-size: 14.5px;
  line-height: 22px;
  color: var(--pl-secondary);
}

#lpen-pl-plan .lpen-pl__by {
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--pl-subtle);
}

/* ------------------------------------------------------------- hours block
   The point of the card. Three figures, always all three, always in the same
   order and the same place, so a paralegal can scan a column of cards for the
   one that carries the hour they are short of. A zero is information, not
   noise: it is how you rule a course out at a glance. */
#lpen-pl-plan .lpen-pl__hours {
  margin: 2px 0 0;
  padding: 12px 14px 13px;
  border: 1px solid var(--pl-navy-100);
  border-radius: 8px;
  background: var(--pl-navy-25);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 10px;
}

#lpen-pl-plan .lpen-pl__hourshead {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pl-subtle);
}

#lpen-pl-plan .lpen-pl__hourshead .lpen-i { font-size: 14px; color: var(--pl-action); }

#lpen-pl-plan .lpen-pl__cell { min-width: 0; }

#lpen-pl-plan .lpen-pl__cell b {
  display: block;
  font-size: 22px;
  line-height: 27px;
  font-weight: 700;
  color: var(--pl-navy-800);
  font-variant-numeric: tabular-nums;
}

#lpen-pl-plan .lpen-pl__cell span {
  display: block;
  font-size: 11.5px;
  line-height: 15px;
  color: var(--pl-secondary);
}

#lpen-pl-plan .lpen-pl__cell--prof b { color: var(--pl-gold-tx); }
#lpen-pl-plan .lpen-pl__cell--edi b { color: var(--pl-live-tx); }

/* A zero stays legible but stops competing with the figures that matter. */
#lpen-pl-plan .lpen-pl__cell.is-zero b { color: var(--pl-subtle); font-weight: 600; }
#lpen-pl-plan .lpen-pl__cell.is-zero span { color: var(--pl-subtle); }

#lpen-pl-plan .lpen-pl__until {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--pl-subtle);
}

#lpen-pl-plan .lpen-pl__until .lpen-i { font-size: 15px; margin-top: 1px; }

#lpen-pl-plan .lpen-pl__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}

#lpen-pl-plan .lpen-pl__price {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: var(--pl-navy-800);
  font-variant-numeric: tabular-nums;
}

/* Not a link. The card's only link is the stretched one on the title, so a
   second anchor to the same course would be a second tab stop with the same
   destination. This is the affordance, hidden from assistive tech. */
#lpen-pl-plan .lpen-pl__go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--pl-action);
  white-space: nowrap;
}

#lpen-pl-plan .lpen-pl__card:hover .lpen-pl__go { text-decoration: underline; }

#lpen-pl-plan .lpen-pl__empty {
  margin: 0;
  padding: 28px 18px;
  border: 1px dashed var(--pl-border);
  border-radius: 10px;
  text-align: center;
  color: var(--pl-subtle);
  font-size: 15px;
}

#lpen-pl-plan .lpen-pl__empty[hidden] { display: none; }

#lpen-pl-plan .lpen-pl__legal {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 19px;
  color: var(--pl-subtle);
}

/* Before the script runs there is no search box and no chips, so the toolbar
   would render as an empty gap. Hidden until `is-ready`; the cards below are
   server rendered and readable either way. */
#lpen-pl-plan .lpen-pl__tools,
#lpen-pl-plan .lpen-pl__count { display: none; }
#lpen-pl-plan .lpen-pl.is-ready .lpen-pl__tools { display: flex; }
#lpen-pl-plan .lpen-pl.is-ready .lpen-pl__count { display: block; }

/* ==========================================================================
   6. Page chrome — native widgets outside the two html widgets
   --------------------------------------------------------------------------
   Small, and every rule anchored on a section id. See §18i: a clean element
   tree is not a clean page, because plugins inject markup the tree never sees.
   ========================================================================== */

/* WooCommerce renders `fas fa-shopping-cart` inside its own add to cart
   button. It comes from the plugin, not from `_elementor_data`, so no build
   guard in this repo can see it and the site wide `fa-` sweep will not
   attribute it. Zero the glyph and redraw it as the Tabler mask.

   ⚠️ The size is in PIXELS, not `1em`. §18i and §18j both write this rule as
   `font-size: 0` plus `width: 1em`, and 1em of zero is zero: the glyph is
   suppressed and the replacement never appears. Verified on the rendered page
   here, so the same fix is presumably owed on /academy/, /passes/ and the HR
   hub. Both section ids must be listed, too: a rule naming only one of them
   leaves the other button showing the real Font Awesome glyph. */
#lpen-pl-pass .elementor-button [class*="fa-"],
#lpen-pl-memb .elementor-button [class*="fa-"] {
  font-size: 0 !important;
  width: 18px;
  height: 18px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: var(--lpen-cart-mask);
  mask-image: var(--lpen-cart-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: -.14em;
}

/* The add to cart button is not an Elementor button, so it misses the
   `typography_text_decoration: none` fix and the theme underlines it. */
#lpen-pl-pass .elementor-button,
#lpen-pl-memb .elementor-button { text-decoration: none; }

/* Headshots run 200x300 to 300x300 and two of the six are portraits a centred
   square crops at the chin. Elementor's image widget has no aspect ratio
   control, so this is CSS. Widgets honour `_css_classes`, containers do not
   (§18b.2), which is how the rule reaches them. */
#lpen-pl-fac .lpen-face img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  object-position: var(--lpen-face, 50% 18%);
  border-radius: 10px;
}

@media (max-width: 480px) {
  #lpen-pl-fac .lpen-face img { width: 76px; height: 76px; }
}

/* `accordion_item_title_position_horizontal: space-between` is set on the
   widget and Elementor 4.2 does not emit it: the rendered <summary> computes
   `justify-content: normal`, so the plus sign sits jammed against the question
   instead of at the right edge. Read off the rendered page, not the JSON. */
#lpen-pl-faqs .e-n-accordion-item-title { justify-content: space-between; }

/* A linked icon box wraps its title in an <a>, and the theme underlines every
   <a>. §18i's fix was only ever applied to the button helper;
   `title_typography_text_decoration` is a separate control and no builder in
   this repo sets it, so the reading cards need this. */
#lpen-pl-read .elementor-icon-box-title a { text-decoration: none; }
#lpen-pl-read .elementor-icon-box-title a:hover { text-decoration: underline; }

/* ============ GENERATED: DO NOT EDIT ============ */
/* Tabler 3.46.0 — 9 glyphs, generated by build_paralegal.py */
#lpen-pl-pass,
#lpen-pl-memb{--lpen-cart-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m3.7 2-.6.5v1q.2.4.6.4l.7.1H5v12.1l-.3.2Q3.5 17 3 18.2q-.1.8 0 1.6a3 3 0 0 0 2 2q1 .3 1.7 0a3 3 0 0 0 2-2c.2-.4.2-1.3 0-1.7l2.7-.1H14v1.8a3 3 0 0 0 2 2q.3.3.9.2l.8-.1a3 3 0 0 0 2-2q.3-1 0-1.7a3 3 0 0 0-2-2l-.3-.2H7v-2h12.3l.6-.5.6-3.8L21 6a1 1 0 0 0-.8-.9L7.1 4 7 3.5l-.1-.9-.6-.4zm9.2 4.4 6 .4-.8 5v.1H7V6zM6.2 18.1q.7.1.7.9 0 .5-.5.9h-1a1 1 0 0 1-.2-1.6 1 1 0 0 1 1-.2m11 0q.6.1.7.9 0 .5-.5.9h-1a1 1 0 0 1-.2-1.6 1 1 0 0 1 1-.2'/></svg>")}
#lpen-pl-nav .lpen-i--calendar-event,
#lpen-pl-plan .lpen-i--calendar-event{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m7.7 2-.6.5v.8L7 4h-.8l-1 .1a3 3 0 0 0-2 2l-.2.4v13l.1.3a3 3 0 0 0 2 2l.4.2h13l.3-.1a3 3 0 0 0 2-2l.2-.4v-13l-.1-.3a3 3 0 0 0-2-2q-.3-.2-1.1-.2H17v-.7l-.1-.8a1 1 0 0 0-1.8 0v.9L15 4H9v-.6l-.1-.9a1 1 0 0 0-1.2-.4M7 6.7l.1.8a1 1 0 0 0 1.8 0v-.8L9 6h6v.7l.1.8a1 1 0 0 0 1.8 0v-.8L17 6h.6q.8 0 1.1.3c.3.3.3.4.3 2.1V10H5V8.4c0-1.8 0-1.8.3-2.1Q5.6 6 6.4 6H7zm12 8.9c0 3.8 0 3.7-.2 4l-.3.3h-13l-.3-.3c-.2-.3-.2-.1-.2-4V12h14zM7.7 14l-.6.4v3q.2.4.6.4h2.6q.4 0 .6-.4v-3l-.6-.4z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m7.7 2-.6.5v.8L7 4h-.8l-1 .1a3 3 0 0 0-2 2l-.2.4v13l.1.3a3 3 0 0 0 2 2l.4.2h13l.3-.1a3 3 0 0 0 2-2l.2-.4v-13l-.1-.3a3 3 0 0 0-2-2q-.3-.2-1.1-.2H17v-.7l-.1-.8a1 1 0 0 0-1.8 0v.9L15 4H9v-.6l-.1-.9a1 1 0 0 0-1.2-.4M7 6.7l.1.8a1 1 0 0 0 1.8 0v-.8L9 6h6v.7l.1.8a1 1 0 0 0 1.8 0v-.8L17 6h.6q.8 0 1.1.3c.3.3.3.4.3 2.1V10H5V8.4c0-1.8 0-1.8.3-2.1Q5.6 6 6.4 6H7zm12 8.9c0 3.8 0 3.7-.2 4l-.3.3h-13l-.3-.3c-.2-.3-.2-.1-.2-4V12h14zM7.7 14l-.6.4v3q.2.4.6.4h2.6q.4 0 .6-.4v-3l-.6-.4z'/></svg>")}
#lpen-pl-nav .lpen-i--chevron-right,
#lpen-pl-plan .lpen-i--chevron-right{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m8.7 5-.6.5v.9l2.8 2.9 2.7 2.7-2.7 2.7L8 18l.1.5.6.5.7-.1c.2 0 6.3-6.2 6.5-6.4v-1a105 105 0 0 0-6.6-6.4z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m8.7 5-.6.5v.9l2.8 2.9 2.7 2.7-2.7 2.7L8 18l.1.5.6.5.7-.1c.2 0 6.3-6.2 6.5-6.4v-1a105 105 0 0 0-6.6-6.4z'/></svg>")}
#lpen-pl-nav .lpen-i--clock,
#lpen-pl-plan .lpen-i--clock{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M11 2a10 10 0 0 0-6 3q-3 3-3 7.3a10 10 0 0 0 3.8 7.5 10 10 0 0 0 7.6 2.1 10 10 0 0 0 5.7-2.8 10 10 0 0 0-.9-15 10 10 0 0 0-7.1-2m1.6 2a8 8 0 1 1-1.4 16 8 8 0 0 1 1.4-16m-1 2-.6.4v5.9l1.6 1.8 1.8 1.7h1l.5-.6-.1-.7-1.5-1.6-1.4-1.4V6.7l-.1-.2a1 1 0 0 0-1.2-.4'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M11 2a10 10 0 0 0-6 3q-3 3-3 7.3a10 10 0 0 0 3.8 7.5 10 10 0 0 0 7.6 2.1 10 10 0 0 0 5.7-2.8 10 10 0 0 0-.9-15 10 10 0 0 0-7.1-2m1.6 2a8 8 0 1 1-1.4 16 8 8 0 0 1 1.4-16m-1 2-.6.4v5.9l1.6 1.8 1.8 1.7h1l.5-.6-.1-.7-1.5-1.6-1.4-1.4V6.7l-.1-.2a1 1 0 0 0-1.2-.4'/></svg>")}
#lpen-pl-nav .lpen-i--device-laptop,
#lpen-pl-plan .lpen-i--device-laptop{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M5.5 5A2 2 0 0 0 4 6.6V11c0 4.6 0 4.5.2 5l.9.8c.4.2 0 .2 6.9.2 6.8 0 6.5 0 7-.2l.8-.9c.2-.4.2-.3.2-4.9s0-4.5-.2-5q-.3-.4-.8-.7c-.5-.3 0-.3-7-.3zM18 11v4H6V7h12zM2.7 18l-.6.5v1q.2.4.6.4c.2.1 18.4.1 18.6 0q.4 0 .6-.4v-1l-.6-.4z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M5.5 5A2 2 0 0 0 4 6.6V11c0 4.6 0 4.5.2 5l.9.8c.4.2 0 .2 6.9.2 6.8 0 6.5 0 7-.2l.8-.9c.2-.4.2-.3.2-4.9s0-4.5-.2-5q-.3-.4-.8-.7c-.5-.3 0-.3-7-.3zM18 11v4H6V7h12zM2.7 18l-.6.5v1q.2.4.6.4c.2.1 18.4.1 18.6 0q.4 0 .6-.4v-1l-.6-.4z'/></svg>")}
#lpen-pl-nav .lpen-i--player-play,
#lpen-pl-plan .lpen-i--player-play{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m6.7 3-.6.5v16.8c0 .5.7.8 1.2.7l13.4-8.3a1 1 0 0 0 0-1.3L7.3 3zM13 8.9l5 3-10 6.2V5.9z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m6.7 3-.6.5v16.8c0 .5.7.8 1.2.7l13.4-8.3a1 1 0 0 0 0-1.3L7.3 3zM13 8.9l5 3-10 6.2V5.9z'/></svg>")}
#lpen-pl-nav .lpen-i--scale,
#lpen-pl-plan .lpen-i--scale{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m11.7 2-.6.5v1l-.1.7-5.7 1.1-1.7 3.3L2 11.7v.3a4 4 0 0 0 2.5 3.7A4 4 0 0 0 10 12v-.3L8.7 9.2 7.5 6.8l3.4-.6.1 6.4V19H9c-2.3 0-2.3 0-2.6.2l-.3.3v1q.2.4.6.4h10.6q.4 0 .6-.4v-1l-.3-.3c-.3-.2-.3-.2-2.5-.2H13V6.2l3.5.6-1.2 2.4-1.3 2.5v.3a4 4 0 0 0 2.5 3.7A4 4 0 0 0 22 12v-.3l-1.6-3.1-1.7-3.3c-.2-.2-.3-.2-3-.7L13 4.2v-.8l-.1-.9a1 1 0 0 0-1.2-.4M7 10.2l1 2v.3l-.6.9q-.6.6-1.4.6a2 2 0 0 1-1.3-.5l-.6-1-.1-.3 1-2 1-2zm12 0 1 2v.3l-.6.9q-.6.6-1.4.6a2 2 0 0 1-1.3-.5l-.6-1-.1-.3 1-2 1-2z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m11.7 2-.6.5v1l-.1.7-5.7 1.1-1.7 3.3L2 11.7v.3a4 4 0 0 0 2.5 3.7A4 4 0 0 0 10 12v-.3L8.7 9.2 7.5 6.8l3.4-.6.1 6.4V19H9c-2.3 0-2.3 0-2.6.2l-.3.3v1q.2.4.6.4h10.6q.4 0 .6-.4v-1l-.3-.3c-.3-.2-.3-.2-2.5-.2H13V6.2l3.5.6-1.2 2.4-1.3 2.5v.3a4 4 0 0 0 2.5 3.7A4 4 0 0 0 22 12v-.3l-1.6-3.1-1.7-3.3c-.2-.2-.3-.2-3-.7L13 4.2v-.8l-.1-.9a1 1 0 0 0-1.2-.4M7 10.2l1 2v.3l-.6.9q-.6.6-1.4.6a2 2 0 0 1-1.3-.5l-.6-1-.1-.3 1-2 1-2zm12 0 1 2v.3l-.6.9q-.6.6-1.4.6a2 2 0 0 1-1.3-.5l-.6-1-.1-.3 1-2 1-2z'/></svg>")}
#lpen-pl-nav .lpen-i--search,
#lpen-pl-plan .lpen-i--search{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M9.2 2a8 8 0 0 0-6.4 4.5 8 8 0 0 0 11.7 10.1l.4-.3 2.7 2.7 3 2.9q.7.3 1.3-.4v-1L19 17.6 16.3 15l.3-.4A8 8 0 0 0 9.2 2m1.4 2a6 6 0 1 1-1.2 12 6 6 0 0 1 1.2-12'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M9.2 2a8 8 0 0 0-6.4 4.5 8 8 0 0 0 11.7 10.1l.4-.3 2.7 2.7 3 2.9q.7.3 1.3-.4v-1L19 17.6 16.3 15l.3-.4A8 8 0 0 0 9.2 2m1.4 2a6 6 0 1 1-1.2 12 6 6 0 0 1 1.2-12'/></svg>")}
#lpen-pl-nav .lpen-i--ticket,
#lpen-pl-plan .lpen-i--ticket{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M4.5 4a3 3 0 0 0-2.4 2.2v4.3l.7.5q.5 0 .8.2.6.6.2 1.4-.2.3-.8.4h-.4l-.5.5v4.3a3 3 0 0 0 2 2l.4.2h15l.3-.1 1-.6a3 3 0 0 0 1-1.5c.2-.3.2-.3.2-2.2v-1.9l-.1-.2q-.3-.4-1-.5-1-.1-.9-1.2 0-.7 1.2-.8.4 0 .7-.5V6.2a3 3 0 0 0-2-2l-.4-.2zM14 6.7l.1.8a1 1 0 0 0 1.8 0v-.8L16 6h1.6c1.8 0 1.8 0 2.1.3s.3.4.3 1.7v1.1l-.3.2q-1.2.6-1.6 1.9c-.1.4-.1 1.2 0 1.6q.4 1.3 1.6 1.9l.3.2v1c0 1.3 0 1.5-.2 1.7l-.3.3h-1.8L16 18v-.6l-.1-.9a1 1 0 0 0-1.8 0v.9l-.1.6H4.7l-.2-.1-.3-.3C4 17.3 4 17.2 4 16v-1.1l.3-.2Q5.5 14 6 12.8c.1-.4.1-1.2 0-1.6Q5.5 10 4.3 9.3L4 9.1v-1c0-1.4 0-1.5.3-1.8s0-.3 5.1-.3H14zm.7 3.4-.6.4v3a1 1 0 0 0 1.8 0v-3a1 1 0 0 0-1.2-.4'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M4.5 4a3 3 0 0 0-2.4 2.2v4.3l.7.5q.5 0 .8.2.6.6.2 1.4-.2.3-.8.4h-.4l-.5.5v4.3a3 3 0 0 0 2 2l.4.2h15l.3-.1 1-.6a3 3 0 0 0 1-1.5c.2-.3.2-.3.2-2.2v-1.9l-.1-.2q-.3-.4-1-.5-1-.1-.9-1.2 0-.7 1.2-.8.4 0 .7-.5V6.2a3 3 0 0 0-2-2l-.4-.2zM14 6.7l.1.8a1 1 0 0 0 1.8 0v-.8L16 6h1.6c1.8 0 1.8 0 2.1.3s.3.4.3 1.7v1.1l-.3.2q-1.2.6-1.6 1.9c-.1.4-.1 1.2 0 1.6q.4 1.3 1.6 1.9l.3.2v1c0 1.3 0 1.5-.2 1.7l-.3.3h-1.8L16 18v-.6l-.1-.9a1 1 0 0 0-1.8 0v.9l-.1.6H4.7l-.2-.1-.3-.3C4 17.3 4 17.2 4 16v-1.1l.3-.2Q5.5 14 6 12.8c.1-.4.1-1.2 0-1.6Q5.5 10 4.3 9.3L4 9.1v-1c0-1.4 0-1.5.3-1.8s0-.3 5.1-.3H14zm.7 3.4-.6.4v3a1 1 0 0 0 1.8 0v-3a1 1 0 0 0-1.2-.4'/></svg>")}

/* Headshot focal points, generated from FACULTY */
#lpen-pl-fac .lpen-face--john-paul-rodrigues img{object-position:50% 25%}
#lpen-pl-fac .lpen-face--caryma-sad img{object-position:50% 20%}