/* ============================================================
   jerad.courses — theme styles (Phase 1: chrome + marketing pages)
   Consumes tokens.css. Monochrome + airfield-teal accent; progress
   green (--go) is reserved for LMS state only.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans, 'Archivo', system-ui, sans-serif); color: var(--ink);
  background: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-sans, 'Archivo'); }
.jhc-icon { display: inline-block; vertical-align: middle; flex: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; } }

/* ---- Layout ---- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; width: 100%; }
.eb { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--n600); margin: 0; }
.st { font-family: 'Archivo'; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; }
.h1 { font-family: 'Archivo'; font-weight: 900; text-transform: uppercase; letter-spacing: -.015em; line-height: 1; }
.surface-muted { background: var(--n50); }
.surface-ink { background: var(--ink); color: #fff; }

/* ---- Buttons ---- */
.jhbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: #fff;
  font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 15px 24px;
  border: 1px solid var(--ink); text-decoration: none; cursor: pointer; transition: background .16s, color .16s, border-color .16s; }
.jhbtn:hover { color: #fff; background: #26261f; }
.jhbtn.inv { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.jhbtn.inv:hover { background: #fff; color: var(--ink); }
.jhbtn.gho { background: transparent; color: var(--ink); border-color: var(--n300); }
.jhbtn.gho:hover { background: var(--n50); color: var(--ink); }
.jhbtn.white { background: #fff; color: var(--ink); border-color: #fff; }
.jhbtn.white:hover { background: var(--n100); border-color: var(--n100); }
.jhbtn.sm { padding: 11px 18px; font-size: 11px; }
.jhbtn.full { width: 100%; }

/* ---- Placeholders (media not yet supplied) ---- */
.ph { background: repeating-linear-gradient(135deg,#ececea,#ececea 14px,#e4e4e1 14px,#e4e4e1 28px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--n500);
  text-align: center; position: relative; }
.ph .jhc-icon { width: 26px; height: 26px; opacity: .5; }

/* ---- Header / nav ---- */
.site-header { border-bottom: 1px solid var(--n200); position: sticky; top: 0; background: #fff; z-index: 30; }
.site-header__inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.jhc-lockup { display: inline-flex; align-items: baseline; font-family: 'Archivo'; text-transform: uppercase; letter-spacing: .24em; font-size: 18px; text-decoration: none; }
.jhc-lockup__prefix { font-weight: 800; color: var(--ink); }
.jhc-lockup__rest { font-weight: 500; color: var(--n400); }
.site-nav { display: flex; gap: 30px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.site-nav a { text-decoration: none; color: var(--n500); transition: color .15s; }
.site-nav a:hover, .site-nav .current-menu-item > a, .site-nav a.on { color: var(--ink); }
.site-nav ul { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-cart { color: var(--n500); position: relative; display: inline-flex; }
.header-cart__count { position: absolute; top: -7px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--accent);
  color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; display: grid; place-items: center; line-height: 1; }
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 6px; }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--n200); padding: 56px 0 40px; }
.site-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.site-footer__brand { font-family: 'Archivo'; text-transform: uppercase; letter-spacing: .2em; font-size: 16px; margin-bottom: 16px; }
.site-footer__blurb { font-size: 14px; color: var(--n500); max-width: 280px; margin: 0; }
.site-footer__col .eb { margin-bottom: 18px; }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.site-footer__links a, .foot a { text-decoration: none; color: var(--n600); font-size: 14px; }
.site-footer__links a:hover, .foot a:hover { color: var(--accent); }
.site-footer__social { display: flex; gap: 10px; margin-bottom: 18px; }
.site-footer__social a { width: 36px; height: 36px; background: var(--ink); border-radius: 4px; display: grid; place-items: center; color: #fff; }
.site-footer__base { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--n200); font-size: 12px; color: var(--n500); text-align: center; }

/* ---- Cards (course + review) ---- */
.card { border: 1px solid var(--n200); background: #fff; box-shadow: 0 1px 3px rgba(11,11,10,.06); overflow: hidden;
  display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s; text-decoration: none; color: inherit; }
.card:hover { box-shadow: 0 8px 22px rgba(11,11,10,.10); transform: translateY(-2px); color: inherit; }
.card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.card__cat { color: var(--accent); margin-bottom: 10px; }
.card__title { font-family: 'Archivo'; font-weight: 800; font-size: 19px; text-transform: uppercase; line-height: 1.14; margin: 0 0 10px; }
.card__desc { font-size: 14px; color: var(--n600); margin: 0 0 18px; flex: 1; }
.card__meta { display: flex; gap: 16px; font-size: 12px; color: var(--n500); font-weight: 600; margin-bottom: 16px; }
.card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.card__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--n200); }
.card__price { font-family: 'Archivo'; font-weight: 900; font-size: 22px; }
.badge { position: absolute; top: 12px; left: 12px; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--ink); }
.badge.b-accent { background: var(--accent); }
.badge.b-free { background: var(--go); }
.bar { height: 5px; background: var(--n200); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--go); }

/* Category tile */
.cat { border: 1px solid var(--n200); padding: 22px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; transition: background .16s, border-color .16s; }
.cat:hover { background: var(--n50); border-color: var(--n300); color: inherit; }

/* ---- Grids / sections ---- */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.cats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sec { padding: 80px 0; }
.review { border: 1px solid var(--n200); background: #fff; padding: 26px; display: flex; flex-direction: column; }
.review__stars { display: flex; gap: 3px; margin-bottom: 14px; }
.review__stars .jhc-icon { width: 15px; height: 15px; fill: var(--ink); color: var(--ink); }
.quote-serif { font-family: 'Newsreader', Georgia, serif; font-style: italic; line-height: 1.5; }

/* ---- Forms (contact) ---- */
.lab { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--n600); margin-bottom: 8px; }
.in, .sel, .ta { width: 100%; border: 1px solid var(--n300); background: #fff; padding: 13px 14px; font: inherit; font-size: 15px; color: var(--ink); border-radius: 0; }
.in:focus, .sel:focus, .ta:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-tint); }
.sel { appearance: none; -webkit-appearance: none; padding-right: 40px; }
.ck { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--n600); }
.notice-student { border: 1px solid var(--accent); background: var(--accent-tint); padding: 20px 22px; display: flex; gap: 13px; align-items: flex-start; }
.notice-student .jhc-icon { color: var(--accent); flex: none; margin-top: 3px; }
.notice-student p { margin: 0; font-size: 14.5px; color: #1a4653; }
.mth { display: flex; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--n200); }
.mth .jhc-icon { color: var(--accent); flex: none; margin-top: 2px; }

/* ---- Prose (About body) ---- */
.art p { font-size: 16.5px; color: #33332b; line-height: 1.75; margin: 0 0 18px; }

/* ---- FAQ ---- */
.faq { border-bottom: 1px solid var(--n200); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; font-weight: 700; font-size: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq .chev { color: var(--accent); transition: transform .18s; }
.faq[open] .chev { transform: rotate(90deg); }
.faq .ans { padding: 0 0 18px; color: var(--n600); font-size: 15px; line-height: 1.7; }

/* ---- Catalog controls (Phase 1 shell) ---- */
.cat-controls { display: flex; flex-direction: column; gap: 18px; margin-bottom: 30px; }
.cat-tabs { display: inline-flex; gap: 4px; border-bottom: 2px solid var(--n200); }
.cat-tab { background: none; border: 0; padding: 10px 4px; margin-right: 22px; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--n500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.cat-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.cat-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cat-search { flex: 1; min-width: 220px; position: relative; }
.cat-search .jhc-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--n500); }
.cat-search input { padding-left: 38px; }
.cat-view { display: inline-flex; border: 1px solid var(--n300); }
.cat-view button { background: #fff; border: 0; padding: 10px 12px; color: var(--n500); cursor: pointer; }
.cat-view button.on { background: var(--ink); color: #fff; }
.cat-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { border: 1px solid var(--n300); background: #fff; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--n600); cursor: pointer; border-radius: 999px; }
.pill:hover { border-color: var(--ink); color: var(--ink); }
.pill.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cat-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--n500); margin-bottom: 20px; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cat-grid.is-list { grid-template-columns: 1fr; }
.cat-empty { text-align: center; padding: 60px 0; color: var(--n500); }

/* ---- Responsive ---- */
@media (max-width: 1000px) { .cat-grid, .cat-grid.is-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .hero2, .grid3, .grid4, .cats-grid, .about2, .two, .site-footer__cols { grid-template-columns: 1fr !important; }
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .h1 { font-size: 38px !important; }
  /* Header must fit the viewport — shrink the wordmark, tighten gaps, keep buttons on one line. */
  .site-header__inner { gap: 12px; }
  .jhc-lockup { font-size: 15px; letter-spacing: .14em; white-space: nowrap; }
  .header-actions { gap: 12px; }
  .jhbtn, .jhbtn.sm { white-space: nowrap; }
  .site-nav.is-open { display: flex; position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--n200); box-shadow: 0 10px 24px rgba(0,0,0,.08); padding: 12px 24px 24px; z-index: 40; }
  .site-nav.is-open ul { flex-direction: column; gap: 0; }
  .site-nav.is-open li { border-bottom: 1px solid var(--n200); }
  .site-nav.is-open a { display: block; padding: 15px 0; font-size: 14px; }
}
@media (max-width: 640px) { .cat-grid, .cat-grid.is-list { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  /* Very small screens: show just the "COURSES" prefix so the header never overflows. */
  .jhc-lockup__rest { display: none; }
  .header-cart { display: none; }
}

/* ============================================================
   PHASE 2 — course card states, single course, product page
   ============================================================ */
.sec-pad { padding: 64px 0; }

/* Course card extras */
.jhc-course-card__media { position: relative; }
.jhc-course-card__prog { margin-bottom: 16px; }
.jhc-course-card__prog .bar { height: 5px; background: var(--n200); }
.jhc-course-card__prog .bar > span { background: var(--go); }
.jhc-course-card__prog-txt { font-size: 12px; color: var(--go); font-weight: 700; margin-top: 6px; }
.jhc-course-card.is-list { flex-direction: row; }
.jhc-course-card.is-list .jhc-course-card__media { width: 300px; flex: none; }
.jhc-course-card.is-list .jhc-course-card__media .ph, .jhc-course-card.is-list .jhc-course-card__media img { height: 100%; aspect-ratio: auto; }
@media (max-width: 640px) { .jhc-course-card.is-list { flex-direction: column; } .jhc-course-card.is-list .jhc-course-card__media { width: 100%; } }

/* Course hero (dark) */
.jhc-course-hero { padding: 72px 0; }
.jhc-course-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.jhc-course-hero__media { aspect-ratio: 16/10; border: 1px solid rgba(255,255,255,.12); overflow: hidden; }
.jhc-course-hero__media iframe, .jhc-course-hero__media video { width: 100%; height: 100%; display: block; }
.jhc-course-hero__eyebrow { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.jhc-course-hero__title { font-size: 40px; line-height: 1.04; margin: 0 0 16px; color: #fff; }
.jhc-course-hero__sub { color: rgba(255,255,255,.82); font-size: 16px; margin: 0 0 24px; max-width: 460px; }
.jhc-course-hero__specs { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; }
.spec { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255,255,255,.9); }
.spec .jhc-icon { color: rgba(255,255,255,.65); }
.jhc-chip { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; color: #fff; }
.jhc-chip--go { background: var(--go); }
.jhc-chip--accent { background: var(--accent); }
.jhc-course-hero__progress { border: 1px solid rgba(255,255,255,.18); padding: 20px; margin-bottom: 20px; }
.jhc-course-hero__progress-top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.jhc-course-hero__progress .bar { height: 6px; background: rgba(255,255,255,.22); }
.jhc-course-hero__progress .bar > span { background: #fff; }
.jhc-course-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Benefits */
.jhc-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 48px; }
.jhc-benefit { display: flex; gap: 14px; align-items: flex-start; }
.jhc-benefit .jhc-icon { color: var(--accent); margin-top: 3px; }
.jhc-benefit__title { font-family: 'Archivo'; font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.jhc-benefit__desc { font-size: 15px; color: var(--n600); margin: 0; }

/* Course body grid + curriculum */
.jhc-course-body { display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start; }
.art h3 { font-family: 'Archivo'; font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin: 28px 0 12px; }
.art h3:first-child { margin-top: 0; }
.art ul { margin: 0 0 20px; padding-left: 22px; }
.art li { font-size: 16px; color: #33332b; line-height: 1.7; margin: 0 0 8px; }
.jhc-curriculum { margin-top: 44px; scroll-margin-top: 90px; }
.jhc-curriculum__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.jhc-curriculum__meta { font-size: 13px; color: var(--n500); font-weight: 600; }
.jhc-lsec { border: 1px solid var(--n200); background: #fff; margin-bottom: 10px; }
.jhc-lsec summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--n50); }
.jhc-lsec summary::-webkit-details-marker { display: none; }
.jhc-lsec summary .chev { transition: transform .2s; flex: none; color: var(--n500); }
.jhc-lsec[open] summary .chev { transform: rotate(90deg); }
.jhc-sec__title { font-family: 'Archivo'; font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .02em; }
.jhc-sec__meta { font-size: 12px; color: var(--n500); font-weight: 600; }
.lrow { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--n100); font-size: 15px; text-decoration: none; color: var(--ink); }
.lrow:hover { background: var(--n50); color: var(--ink); }
.lrow.lk, .lrow.lk span { color: var(--n500); }
.lrow__time { font-size: 12px; color: var(--n500); font-variant-numeric: tabular-nums; }
.ic-done { color: var(--go); } .ic-open { color: var(--accent); } .ic-ink { color: var(--ink); } .ic-lock { color: var(--n400); }
.jhc-preview-chip { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 3px 8px; border-radius: 999px; }

/* Sidebar cards */
.jhc-course-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 18px; }
.jhc-pricecard { border: 1px solid var(--ink); background: var(--ink); color: #fff; padding: 26px; text-align: center; }
.jhc-pricecard__label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.jhc-pricecard__price { font-family: 'Archivo'; font-weight: 900; font-size: 44px; line-height: 1; margin: 6px 0 16px; }
.jhc-pricecard__list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); text-align: left; }
.inc { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--n600); }
.inc .jhc-icon { color: var(--accent); flex: none; }
.inc--dark { color: rgba(255,255,255,.85); } .inc--dark .jhc-icon { color: #fff; }
.jhc-progcard { border: 1px solid var(--n200); background: #fff; padding: 26px; }
.jhc-progcard__row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.jhc-ring { width: 56px; height: 56px; border-radius: 50%; background: conic-gradient(var(--go) 0 var(--pct), var(--n200) var(--pct) 100%); display: grid; place-items: center; flex: none; }
.jhc-ring > span { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.jhc-instructor { border: 1px solid var(--n200); background: #fff; padding: 26px; text-align: center; }
.jhc-instructor__photo { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto; overflow: hidden; }
.jhc-instructor__photo img { width: 100%; height: 100%; object-fit: cover; }
.jhc-instructor__name { font-family: 'Archivo'; font-weight: 900; font-size: 20px; margin-top: 14px; }
.jhc-instructor__role { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--n500); margin-top: 4px; }
.jhc-instructor__bio { font-size: 13px; color: var(--n600); margin: 12px 0 14px; }

/* Boxed FAQ (course + product) */
.faq--boxed { border: 1px solid var(--n200); background: #fff; margin-bottom: 10px; }
.faq--boxed summary { padding: 20px 22px; }
.faq--boxed .ans { padding: 0 22px 22px; }
.jhc-testi { border: 1px solid rgba(255,255,255,.14); padding: 26px; display: flex; flex-direction: column; }

/* ---- Product page ---- */
.jhc-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--n500); }
.jhc-product-strip { border-bottom: 1px solid var(--n200); }
.jhc-product-strip a { display: inline-flex; align-items: center; gap: 6px; padding: 14px 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--n500); text-decoration: none; }
.jhc-product-strip a .jhc-icon { transform: scaleX(-1); }
.buy2 { display: grid; grid-template-columns: 1fr 390px; gap: 56px; align-items: start; }
.jhc-rating { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; font-size: 14px; font-weight: 600; color: var(--n600); }
.jhc-rating__stars { display: inline-flex; gap: 3px; }
.jhc-rating__stars .jhc-icon { fill: var(--ink); color: var(--ink); }
.jhc-product-media { aspect-ratio: 16/9; border: 1px solid var(--n200); margin-bottom: 34px; overflow: hidden; }
.jhc-product-media img { width: 100%; height: 100%; object-fit: cover; }
.jhc-includes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-bottom: 38px; }
.jhc-instructor-strip { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--n200); padding: 22px; }
.jhc-instructor-strip__photo { width: 64px; height: 64px; border-radius: 50%; flex: none; overflow: hidden; }
.jhc-instructor-strip__photo img { width: 100%; height: 100%; object-fit: cover; }
.jhc-buybox-col { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.jhc-buybox { border: 1px solid var(--n200); background: #fff; box-shadow: 0 6px 26px rgba(11,11,10,.09); }
.jhc-buybox__top { padding: 26px 26px 22px; }
.jhc-buybox__price { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 6px; }
.jhc-buybox__now { font-family: 'Archivo'; font-weight: 900; font-size: 40px; line-height: 1; }
.jhc-buybox__now .amount { font-family: 'Archivo'; }
.jhc-buybox__was { font-size: 20px; color: var(--n400); text-decoration: line-through; margin-bottom: 6px; }
.jhc-buybox__terms { font-size: 13px; color: var(--n500); margin-bottom: 20px; }
.jhc-buybox__trust { padding: 20px 26px; border-top: 1px solid var(--n200); display: flex; flex-direction: column; gap: 13px; }
.tr { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--n600); }
.tr .jhc-icon { color: var(--accent); flex: none; }
.jhc-buybox__pay { padding: 18px 26px; border-top: 1px solid var(--n200); background: var(--n50); }
.jhc-pays { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.pay { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--n500); border: 1px solid var(--n300); border-radius: 3px; padding: 3px 6px; background: #fff; }
.jhc-buybox__secure { font-size: 11.5px; color: var(--n500); line-height: 1.5; }
.jhc-trustbar { display: flex; gap: 34px; justify-content: space-between; flex-wrap: wrap; }
.site-footer--legal { padding: 34px 0; }
.jhc-legalfoot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.jhc-legalfoot__copy { font-size: 12px; color: var(--n500); }
.jhc-legalfoot__links { display: flex; gap: 22px; font-size: 12px; }
.jhc-legalfoot__links a { color: var(--n500); text-decoration: none; }

@media (max-width: 900px) {
  .jhc-course-hero__grid, .jhc-benefits, .jhc-course-body, .buy2 { grid-template-columns: 1fr !important; }
  .jhc-course-side, .jhc-buybox-col { position: static !important; }
  .jhc-course-hero__title { font-size: 32px; }
  .jhc-includes { grid-template-columns: 1fr; }
}

/* ============================================================
   Course hero — collapse to one column when there's no media
   ============================================================ */
.jhc-course-hero__grid.is-solo { grid-template-columns: 1fr; }
.jhc-course-hero__grid.is-solo .jhc-course-hero__title { max-width: 780px; }
.jhc-course-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Lesson / topic / quiz — branded wrapper + LearnDash restyle
   ============================================================ */
.jhc-lesson-wrap { padding: 48px 0 88px; }
.jhc-lesson-inner { max-width: 820px; }
.jhc-lesson__top { margin-bottom: 16px; }
.jhc-lesson__crumb { display: inline-flex; align-items: center; gap: 8px; font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--n600); }
.jhc-lesson__crumb:hover { color: var(--ink); }
.jhc-lesson__crumb svg { flex: 0 0 auto; }
.jhc-lesson__title { font-size: 38px; line-height: 1.05; margin: 0 0 28px; }
.jhc-lesson.art { font-size: 17px; }
.jhc-lesson.art > *:first-child { margin-top: 0; }

/* Hide LearnDash's own blue breadcrumb — the back-link above replaces it. */
.jhc-lesson .ld-breadcrumbs,
.jhc-lesson .ld-lesson-topic-breadcrumbs { display: none; }

/* Video / responsive-embed frames LearnDash injects. */
.jhc-lesson .wp-video,
.jhc-lesson .fluid-width-video-wrapper,
.jhc-lesson iframe { max-width: 100%; }
.jhc-lesson .ld-video { margin: 0 0 26px; }

/* --- LearnDash focus-off action controls → design-system buttons --- */
.jhc-lesson .ld-content-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; border-top: 1px solid var(--n200); margin-top: 34px; padding-top: 28px; }
.jhc-lesson .ld-content-action { margin: 0; }

.jhc-lesson .ld-button,
.jhc-lesson a.ld-button,
.jhc-lesson .ld-content-action a,
.jhc-lesson input.learndash_mark_complete_button,
.jhc-lesson .learndash_mark_complete_button,
.jhc-lesson #learndash_mark_complete_button {
  background: var(--ink) !important;
  color: #fff !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'Archivo', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 14px 24px !important;
  line-height: 1 !important;
  transition: background .15s ease;
}
.jhc-lesson .ld-button:hover,
.jhc-lesson a.ld-button:hover,
.jhc-lesson .ld-content-action a:hover { background: #26261f !important; color: #fff !important; }

/* Mark Complete → progress green. */
.jhc-lesson input.learndash_mark_complete_button,
.jhc-lesson .learndash_mark_complete_button,
.jhc-lesson #learndash_mark_complete_button {
  background: var(--go) !important;
  border-color: var(--go) !important;
}
.jhc-lesson input.learndash_mark_complete_button:hover,
.jhc-lesson #learndash_mark_complete_button:hover { background: #276a49 !important; border-color: #276a49 !important; }

/* "Back to Course" text link LearnDash prints under the buttons. */
.jhc-lesson .ld-content-action .ld-primary-color,
.jhc-lesson a.ld-primary-color { color: var(--accent) !important; }

/* Status chips (In Progress / Complete). */
.jhc-lesson .ld-status { border-radius: 999px !important; font-family: 'Archivo', system-ui, sans-serif !important;
  font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
.jhc-lesson .ld-status-complete { background: var(--go-tint) !important; color: var(--go) !important; }
.jhc-lesson .ld-status-progress,
.jhc-lesson .ld-status-incomplete { background: var(--n100) !important; color: var(--n600) !important; }

/* Course-content accordion LearnDash may render inside the lesson. */
.jhc-lesson .ld-item-list-item { border-color: var(--n200) !important; }

@media (max-width: 640px) {
  .jhc-lesson__title { font-size: 28px; }
  .jhc-lesson .ld-content-actions { flex-direction: column; align-items: stretch; }
  .jhc-lesson .ld-button,
  .jhc-lesson .ld-content-action a,
  .jhc-lesson input.learndash_mark_complete_button { width: 100%; text-align: center; }
}

/* ============================================================
   Enroll control — LearnDash / WooCommerce native buttons
   restyled to the design system (white on the dark hero + card)
   ============================================================ */
.jhc-enroll { display: inline-block; }
.jhc-enroll form { margin: 0; display: inline; }
.jhc-enroll--card { display: block; }

.jhc-enroll .jhbtn,
.jhc-enroll .btn-join,
.jhc-enroll .learndash_checkout_button,
.jhc-enroll .ld-button,
.jhc-enroll button,
.jhc-enroll input[type="submit"],
.jhc-enroll a.button,
.jhc-enroll a.add_to_cart_button,
.jhc-enroll a.single_add_to_cart_button,
.jhc-enroll .wc-forward {
  background: #fff !important;
  color: var(--ink) !important;
  border: 1px solid #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'Archivo', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  padding: 15px 26px !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.jhc-enroll .jhbtn:hover,
.jhc-enroll .btn-join:hover,
.jhc-enroll .ld-button:hover,
.jhc-enroll button:hover,
.jhc-enroll input[type="submit"]:hover,
.jhc-enroll a.button:hover,
.jhc-enroll a.add_to_cart_button:hover { background: var(--n100) !important; color: var(--ink) !important; }

/* Price card: fill the width. */
.jhc-enroll--card,
.jhc-enroll--card form,
.jhc-enroll--card .jhbtn,
.jhc-enroll--card .btn-join,
.jhc-enroll--card button,
.jhc-enroll--card input[type="submit"],
.jhc-enroll--card a.button,
.jhc-enroll--card a.add_to_cart_button { width: 100% !important; }

/* Any explanatory price line LearnDash prints alongside the button. */
.jhc-enroll .ld-text,
.jhc-enroll .learndash-price { color: rgba(255,255,255,.7) !important; font-size: 12px; }

/* ============================================================
   Header dropdown submenus (depth 2)
   ============================================================ */
.site-nav .menu-item-has-children { position: relative; }
.site-nav .menu-item-has-children > a { display: inline-flex; align-items: center; }
.site-nav .menu-item-has-children > a::after {
  content: ''; width: 6px; height: 6px; margin-left: 7px; position: relative; top: -2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: .45;
}
.site-nav .sub-menu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 214px;
  background: #fff; border: 1px solid var(--n200); box-shadow: 0 14px 40px rgba(0,0,0,.10);
  padding: 8px 0; margin: 0; flex-direction: column; gap: 0; z-index: 70;
}
.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu { display: flex; }
.site-nav .sub-menu li { border: 0; margin: 0; }
.site-nav .sub-menu a { display: block; padding: 10px 20px; font-size: 11px; letter-spacing: .1em;
  white-space: nowrap; color: var(--n500); }
.site-nav .sub-menu a:hover { color: var(--ink); background: var(--n50); }

/* ============================================================
   Lesson — stronger LearnDash restyle (beats LD front CSS by
   specificity + load order; wide net covers ld30 + classic nav)
   ============================================================ */
.jhc-lesson.art .ld-breadcrumbs,
.jhc-lesson.art .ld-lesson-topic-breadcrumbs,
.jhc-lesson.art .ld-lesson-breadcrumb { display: none !important; }

.jhc-lesson.art .ld-button,
.jhc-lesson.art a.ld-button,
.jhc-lesson.art .ld-content-action a,
.jhc-lesson.art .learndash_next_prev_link a,
.jhc-lesson.art a.prev-link,
.jhc-lesson.art a.next-link,
.jhc-lesson.art input.learndash_mark_complete_button,
.jhc-lesson.art .learndash_mark_complete_button input,
.jhc-lesson.art #learndash_mark_complete_button {
  background: var(--ink) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: 'Archivo', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 14px 24px !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
}
.jhc-lesson.art .ld-button:hover,
.jhc-lesson.art .ld-content-action a:hover,
.jhc-lesson.art a.prev-link:hover,
.jhc-lesson.art a.next-link:hover { background: #26261f !important; color: #fff !important; }

/* Mark Complete → progress green. */
.jhc-lesson.art input.learndash_mark_complete_button,
.jhc-lesson.art .learndash_mark_complete_button input,
.jhc-lesson.art #learndash_mark_complete_button {
  background: var(--go) !important; border-color: var(--go) !important;
}
.jhc-lesson.art input.learndash_mark_complete_button:hover,
.jhc-lesson.art #learndash_mark_complete_button:hover { background: #276a49 !important; border-color: #276a49 !important; }

/* "Back to Course" text link LearnDash prints under the buttons. */
.jhc-lesson.art a.ld-primary-color,
.jhc-lesson.art .ld-content-action .ld-primary-color {
  background: transparent !important; color: var(--accent) !important; border: 0 !important;
  padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important;
}

/* ============================================================
   Mobile — nav submenus expand inline when the drawer is open
   ============================================================ */
@media (max-width: 900px) {
  .site-nav.is-open .menu-item-has-children { position: static; }
  .site-nav.is-open .menu-item-has-children > a::after { display: none; }
  .site-nav.is-open .sub-menu {
    display: flex !important; position: static; min-width: 0; border: 0; box-shadow: none;
    padding: 0 0 8px 16px; margin: 0;
  }
  .site-nav.is-open .sub-menu li { border-bottom: 0; }
  .site-nav.is-open .sub-menu a { padding: 11px 0; font-size: 13px; color: var(--n600); }
}

/* ============================================================
   Lesson controls — robust restyle scoped to the LearnDash step
   pages via body class (single-sfwd-lessons/topic/quiz). Covers
   both markups: class on the <a> (a.prev-link) and on a wrapper
   (.prev-link > a). Won't touch the course page's enroll buttons.
   ============================================================ */
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) a.prev-link,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .prev-link > a,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) a.next-link,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .next-link > a,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash_next_prev_link a,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-button,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) a.ld-button,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-content-action > a {
  background: var(--ink) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: 'Archivo', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  padding: 14px 22px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) a.prev-link:hover,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .prev-link > a:hover,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) a.next-link:hover,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .next-link > a:hover,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-button:hover { background: #26261f !important; color: #fff !important; }

/* Mark Complete → progress green. */
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) input.learndash_mark_complete_button,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash_mark_complete_button input,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #learndash_mark_complete_button,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash_mark_complete_button {
  background: var(--go) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--go) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'Archivo', system-ui, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
}
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) input.learndash_mark_complete_button:hover,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) #learndash_mark_complete_button:hover { background: #276a49 !important; border-color: #276a49 !important; }

/* Hide LearnDash's blue breadcrumb (the branded back-link replaces it). */
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-breadcrumbs,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .ld-lesson-topic-breadcrumbs { display: none !important; }

/* ============================================================
   Recolor LearnDash's own UI to the brand.
   LearnDash 3.0 paints its buttons/links/status from the
   "Accent Color" + "Progress Color" settings, exposed as CSS
   custom properties on .learndash-wrapper. Overriding the
   variables recolors everything at once — far more robust than
   targeting individual button classes. (Set the same values in
   LearnDash → Settings → Design if you prefer the native path.)
   ============================================================ */
.learndash-wrapper,
body:is(.single-sfwd-lessons, .single-sfwd-topic, .single-sfwd-quiz) .learndash-wrapper {
  --ld-primary-color: #215a6b !important;
  --ld-primary-color-hover: #17444f !important;
  --ld-primary-color-active: #17444f !important;
  --ld-secondary-color: #2f7d55 !important;
  --ld-tertiary-color: #2f7d55 !important;
  --color-ld-primary: #215a6b !important;
  --color-ld-primary-hover: #17444f !important;
  --color-ld-secondary: #2f7d55 !important;
  --ld-color-primary: #215a6b !important;
  --ld-color-secondary: #2f7d55 !important;
  --ld-progress-color: #2f7d55 !important;
}

/* ============================================================
   LESSON PLAYER (LessonPage.dc) — immersive step template
   ============================================================ */
.jhbtn.go { background: var(--go); border-color: var(--go); color: #fff; }
.jhbtn.go:hover { background: #276845; color: #fff; }
.jhbtn.done { background: #fff; color: var(--go); border-color: var(--go); }
.jhbtn.done:hover { background: #f2f8f4; color: var(--go); }

.jhc-lesson-body { background: #fff; }
.jhc-lp .eb { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--n500); }
.jhc-lp .bar { height: 4px; background: var(--n200); overflow: hidden; border-radius: 99px; }
.jhc-lp .bar > span { display: block; height: 100%; background: var(--go); }

/* Course bar */
.jhc-lp-bar { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--n200); height: 57px; display: flex; align-items: center; }
.jhc-lp-bar__inner { width: 100%; padding: 0 18px; display: flex; align-items: center; gap: 16px; }
.jhc-lp-ico { width: 38px; height: 38px; border: 1px solid var(--n300); background: #fff; display: grid; place-items: center; color: var(--n600); cursor: pointer; text-decoration: none; flex: none; }
.jhc-lp-ico:hover { background: var(--n50); color: var(--ink); }
.jhc-lp-ico.is-off { opacity: .4; pointer-events: none; }
.jhc-lp-back { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--n500); flex: none; }
.jhc-lp-back:hover { color: var(--ink); }
.jhc-lp-bar__prog { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
.jhc-lp-bar__course { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jhc-lp-bar__pct { font-size: 12px; font-weight: 700; color: var(--go); flex: none; }
.jhc-lp-bar__count { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--n500); flex: none; }
.jhc-lp-ava { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--n100); color: var(--n600); }

/* Body + rail */
.jhc-lp-body { display: flex; align-items: flex-start; }
.jhc-lp-rail { width: 322px; flex: none; border-right: 1px solid var(--n200); background: var(--n50); position: sticky; top: 57px; height: calc(100vh - 57px); overflow-y: auto; }
.jhc-lp-rail__head { padding: 20px 18px 16px; border-bottom: 1px solid var(--n200); background: #fff; }
.jhc-lp-rail__title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; text-transform: uppercase; line-height: 1.2; margin-bottom: 14px; }
.jhc-lp-ring { width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(var(--go) 0 var(--pct), var(--n200) var(--pct) 100%); display: grid; place-items: center; flex: none; }
.jhc-lp-ring > span { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.jhc-lp-sechead { padding: 16px 18px 8px; display: flex; flex-direction: column; gap: 2px; }
.jhc-lp-sechead__title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 13.5px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.25; }
.jhc-lp-sechead__meta { font-size: 11px; color: var(--n500); font-weight: 600; }
.jhc-lp-lrow { display: flex; align-items: center; gap: 11px; padding: 11px 18px; font-size: 14px; text-decoration: none; color: var(--ink); border-left: 3px solid transparent; }
.jhc-lp-lrow:hover { background: var(--n100); color: var(--ink); }
.jhc-lp-lrow.cur { background: #fff; border-left-color: var(--accent); box-shadow: inset 0 0 0 1px var(--n200); }
.jhc-lp-lrow.cur .t { font-weight: 700; }
.jhc-lp-lrow.lk { color: var(--n500); }
.jhc-lp-lrow__ic { flex: none; display: inline-flex; }
.jhc-lp-lrow__ic.ic-done { color: var(--go); }
.jhc-lp-lrow__ic.ic-cur { color: var(--accent); }
.jhc-lp-lrow__ic.ic-idle { color: var(--n400); }
.jhc-lp-lrow__t { font-size: 11px; color: var(--n500); font-variant-numeric: tabular-nums; flex: none; }

/* Main */
.jhc-lp-main { flex: 1; min-width: 0; padding: 0 0 64px; }
.jhc-lp-video-wrap { background: var(--ink); }
.jhc-lp-video { max-width: 960px; margin: 0 auto; position: relative; aspect-ratio: 16/9; background: #141412; }
.jhc-lp-video > iframe, .jhc-lp-video iframe, .jhc-lp-video video, .jhc-lp-video .ph { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jhc-lp-vico { color: rgba(255,255,255,.75); }
.jhc-lp-col { max-width: 960px; margin: 0 auto; padding: 0 26px; }
.jhc-lp-chapters { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--n200); }
.jhc-lp .chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--n200); background: #fff; padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--n600); cursor: pointer; text-decoration: none; }
.jhc-lp .chip:hover { border-color: var(--accent); color: var(--accent); }
.jhc-lp-title { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 34px; letter-spacing: -.01em; line-height: 1.08; margin: 0 0 14px; text-transform: uppercase; }
.jhc-lp-meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--n500); font-weight: 600; margin-bottom: 24px; }
.jhc-lp-meta span { display: inline-flex; align-items: center; gap: 6px; }
.jhc-lp-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--n200); border-bottom: 1px solid var(--n200); margin-bottom: 8px; }
.jhc-lp-autoplay { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--n500); cursor: pointer; }
.jhc-lp-autoplay input { width: 16px; height: 16px; accent-color: var(--accent); }
.jhc-lp-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--n200); margin: 22px 0 28px; overflow-x: auto; }
.jhc-lp .tab { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--n500); padding: 0 2px 12px; border: none; border-bottom: 2px solid transparent; background: none; cursor: pointer; font-family: inherit; white-space: nowrap; }
.jhc-lp .tab:hover { color: var(--ink); }
.jhc-lp .tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.jhc-lp-panel.art { max-width: 720px; }
.jhc-lp .res { display: flex; align-items: center; gap: 14px; border: 1px solid var(--n200); padding: 16px 18px; text-decoration: none; color: inherit; background: #fff; }
.jhc-lp .res:hover { background: var(--n50); border-color: var(--n300); }
.jhc-lp .res__i { color: var(--accent); flex: none; }
.jhc-lp .res__a { color: var(--n500); flex: none; }
.jhc-lp .tx { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--n100); }
.jhc-lp .tx time { font-size: 12px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.jhc-lp .tx p { margin: 0; font-size: 15px; color: #33332b; line-height: 1.65; }
.jhc-lp .na { border: 1px solid var(--n300); background: #fff; width: 100%; padding: 14px; font-family: inherit; font-size: 15px; line-height: 1.6; color: var(--ink); resize: vertical; }
.jhc-lp .na:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(33,90,107,.18); }
.jhc-lp-saved { font-size: 12px; color: var(--go); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.jhc-lp-upnext { display: flex; align-items: center; gap: 20px; border: 1px solid var(--n200); background: #fff; padding: 22px; text-decoration: none; color: inherit; margin: 44px 0 0; transition: box-shadow .18s; }
.jhc-lp-upnext:hover { box-shadow: 0 10px 30px rgba(0,0,0,.07); color: inherit; }
.jhc-lp-upnext__title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 19px; text-transform: uppercase; line-height: 1.15; }
.jhc-lp-q { color: var(--accent); }

/* LearnDash Mark Complete form → design-system green button */
.jhc-lp-mc form { margin: 0; display: inline; }
.jhc-lp-mc input[type="submit"], .jhc-lp-mc button, .jhc-lp-mc .ld-button, .jhc-lp-mc .learndash_mark_complete_button {
  background: var(--go) !important; background-image: none !important; color: #fff !important;
  border: 1px solid var(--go) !important; border-radius: 0 !important; box-shadow: none !important;
  font-family: 'Archivo', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 12px !important;
  letter-spacing: .1em !important; text-transform: uppercase !important; padding: 14px 22px !important;
  line-height: 1.15 !important; cursor: pointer; }
.jhc-lp-mc input[type="submit"]:hover, .jhc-lp-mc button:hover { background: #276845 !important; border-color: #276845 !important; }

/* Mobile bar + drawer */
.jhc-lp-scrim { display: none; }
.jhc-lp-mobilebar { display: none; }
.jhc-lp-mbar { display: none; }
@media (max-width: 1000px) {
  .jhc-lp-desk { display: none !important; }
  .jhc-lp-mbar { display: grid !important; }
  .jhc-lp-rail { position: fixed; top: 0; left: 0; height: 100vh; z-index: 60; width: min(340px, 86vw); transform: translateX(-102%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.2); }
  .jhc-lp-rail.open { transform: translateX(0); }
  .jhc-lp-rail__head .jhc-lp-mbar { margin-bottom: 14px; }
  .jhc-lp-scrim.open { display: block; position: fixed; inset: 0; background: rgba(11,11,10,.45); z-index: 55; }
  .jhc-lp-mobilebar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--n200); padding: 10px 14px; gap: 10px; align-items: center; z-index: 45; box-shadow: 0 -4px 18px rgba(11,11,10,.07); }
  .jhc-lp-main { padding-bottom: 96px; }
  .jhc-lp-title { font-size: 26px; }
  .jhc-lp-col { padding: 0 18px; }
}

/* ============================================================
   My Account — brand the WooCommerce account area
   ============================================================ */
.jhc-account { font-size: 15px; }
.jhc-account a { color: var(--accent); }
.jhc-account a:hover { color: var(--accent-hover); }
/* 2-column sidebar layout — only when the account nav is present (My Account, not cart/checkout). */
.jhc-myaccount .woocommerce { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 40px; align-items: start; }
.jhc-myaccount .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
.jhc-myaccount .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; }
.jhc-myaccount .jhc-mc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.jhc-account .woocommerce-MyAccount-navigation { width: auto; float: none; }
.jhc-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--n200); }
.jhc-account .woocommerce-MyAccount-navigation li { margin: 0; border-bottom: 1px solid var(--n200); }
.jhc-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.jhc-account .woocommerce-MyAccount-navigation li a { display: block; padding: 13px 16px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--n600); text-decoration: none; }
.jhc-account .woocommerce-MyAccount-navigation li a:hover { background: var(--n50); color: var(--ink); }
.jhc-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--ink); color: #fff; }
.jhc-account .woocommerce-MyAccount-content { width: auto; float: none; min-width: 0; }
.jhc-account .jhc-mc-grid { margin: 0; }
.jhc-account .jhc-mc-empty { border: 1px solid var(--n200); padding: 34px; text-align: center; }
.jhc-account .jhc-mc-empty p { margin: 0 0 18px; color: var(--n600); }
.jhc-account table.woocommerce-orders-table, .jhc-account table.shop_table, .jhc-account table.account-orders-table { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.jhc-account table th, .jhc-account table td { border: 1px solid var(--n200); padding: 12px 14px; text-align: left; font-size: 14px; }
.jhc-account table th { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: var(--n50); }
.jhc-account .button, .jhc-account button, .jhc-account input[type="submit"], .jhc-account a.button, .jhc-account .checkout-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 0; padding: 13px 20px; font-family: 'Archivo', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; cursor: pointer; text-decoration: none; }
.jhc-account .button:hover, .jhc-account button:hover, .jhc-account input[type="submit"]:hover, .jhc-account a.button:hover { background: #26261f; color: #fff; }
.jhc-account input[type="text"], .jhc-account input[type="email"], .jhc-account input[type="password"], .jhc-account input[type="tel"], .jhc-account input[type="number"], .jhc-account select, .jhc-account textarea { width: 100%; border: 1px solid var(--n300); border-radius: 0; padding: 12px 14px; font-family: inherit; font-size: 15px; }
.jhc-account input:focus, .jhc-account select:focus, .jhc-account textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(33,90,107,.18); }
.jhc-account label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.jhc-account .woocommerce-form-row, .jhc-account p { margin-bottom: 16px; }
/* Checkout billing/additional as two columns on desktop */
@media (min-width: 783px) {
  .jhc-account #customer_details.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  .jhc-account #customer_details .col-1, .jhc-account #customer_details .col-2 { float: none; width: auto; }
}
@media (max-width: 782px) {
  .jhc-myaccount .woocommerce { grid-template-columns: 1fr; gap: 20px; }
  .jhc-myaccount .woocommerce-MyAccount-navigation, .jhc-myaccount .woocommerce-MyAccount-content { grid-column: 1; }
  .jhc-myaccount .woocommerce-MyAccount-navigation { grid-row: auto; }
  .jhc-myaccount .woocommerce-MyAccount-content { grid-row: auto; }
  .jhc-myaccount .jhc-mc-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Form plugins (Fluent Forms / Gravity Forms) → design system
   .jhc-form  = light contact form   ·   .jhc-nl-form = dark newsletter band
   ============================================================ */
.jhc-form label,
.jhc-form .ff-el-input--label label,
.jhc-form .gfield_label { font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.jhc-form input[type="text"],
.jhc-form input[type="email"],
.jhc-form input[type="tel"],
.jhc-form input[type="url"],
.jhc-form input[type="number"],
.jhc-form textarea,
.jhc-form select,
.jhc-form .ff-el-form-control,
.jhc-form .gform_wrapper input,
.jhc-form .gform_wrapper textarea,
.jhc-form .gform_wrapper select {
  width: 100%; border: 1px solid var(--n300) !important; border-radius: 0 !important; background: #fff !important;
  padding: 14px 16px !important; font-family: inherit !important; font-size: 15px !important; color: var(--ink) !important; box-shadow: none !important; }
.jhc-form .ff-el-form-control:focus,
.jhc-form input:focus, .jhc-form textarea:focus, .jhc-form select:focus,
.jhc-form .gform_wrapper input:focus, .jhc-form .gform_wrapper textarea:focus {
  outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(33,90,107,.18) !important; }
.jhc-form textarea, .jhc-form .ff-el-form-control textarea { min-height: 130px; resize: vertical; }
.jhc-form .ff-btn-submit,
.jhc-form button[type="submit"],
.jhc-form .gform_wrapper .gform_button,
.jhc-form .gform_footer input[type="submit"] {
  display: inline-flex; align-items: center; gap: 8px; background: var(--ink) !important; color: #fff !important;
  border: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important;
  font-family: 'Archivo', sans-serif !important; font-weight: 700 !important; font-size: 12px !important;
  letter-spacing: .12em !important; text-transform: uppercase !important; padding: 15px 26px !important;
  width: auto !important; cursor: pointer; transition: background .15s; }
.jhc-form .ff-btn-submit:hover,
.jhc-form button[type="submit"]:hover,
.jhc-form .gform_wrapper .gform_button:hover { background: #26261f !important; color: #fff !important; }
.jhc-form .ff-el-group { margin-bottom: 18px; }
.jhc-form .ff-el-is-error .ff-el-form-control { border-color: #c0392b !important; }

/* Dark newsletter band */
.jhc-nl-form input[type="text"],
.jhc-nl-form input[type="email"],
.jhc-nl-form .ff-el-form-control {
  border: 1px solid #fff !important; border-radius: 0 !important; background: #fff !important;
  padding: 14px 16px !important; font-size: 15px !important; color: var(--ink) !important; }
.jhc-nl-form .ff-btn-submit,
.jhc-nl-form button[type="submit"],
.jhc-nl-form .gform_wrapper .gform_button {
  background: #fff !important; color: var(--ink) !important; border: 1px solid #fff !important; border-radius: 0 !important;
  box-shadow: none !important; font-family: 'Archivo', sans-serif !important; font-weight: 700 !important;
  font-size: 12px !important; letter-spacing: .12em !important; text-transform: uppercase !important;
  padding: 15px 24px !important; cursor: pointer; }
.jhc-nl-form .ff-btn-submit:hover, .jhc-nl-form button[type="submit"]:hover { background: var(--n100) !important; }
.jhc-nl-form label, .jhc-nl-form .ff-el-input--label { display: none; } /* inline email field — labels are visual noise here */
.jhc-nl-form .ff-el-group { margin-bottom: 0; }