/* Offline class detail — the 'new' arm of the classdet experiment.
 *
 * A SKIN, not a rebuild. class.php is 1,013 lines driving the whole offline
 * lifecycle (enrol → pay → attend → submit → grade → certificate → review) and
 * most of that markup NEVER renders for a logged-out visitor, so it cannot be
 * verified by looking at the page. Restructuring markup I can't observe, on a
 * page that issues certificates and takes payments, is not a trade worth making
 * for a visual test. Every rule below is additive styling over markup that stays
 * exactly where it was, so the JS contract (.oc-modal / ocOpenModal,
 * [data-oc-paginate], .oc-ajax, #ocStickyCta ↔ .oc-hero-actions) is untouched.
 *
 * Scoped under .oc-landing.fs-skin, which class.php sets only when
 * $abVariant === 'new'. offline-classes.css is 57KB, loaded globally by
 * head.php for BOTH arms, and written with single-class selectors — every rule
 * here is (0,3,0) or better so it wins on specificity rather than on load order.
 *
 * Colours are stated outright: design-system.css styles bare p/h1..h6/a, and
 * :where() carries zero specificity but still supplies undeclared properties.
 */

.oc-landing.fs-skin{
  --c-ink:#0a0a0a; --c-paper:#fff; --c-dim:#5c626b; --c-lab:#6b7280;
  --c-hair:#e6e6e6; --c-blue:#1a3aff; --c-green:#0f7a4a; --c-amber:#a15c00;
  --c-red:#b42318; --c-tint:#f6f7ff;
  background:var(--c-paper); color:var(--c-ink);
}
.oc-landing.fs-skin *{box-sizing:border-box}
.oc-landing.fs-skin .oc-shell{width:min(1180px,calc(100% - 40px));margin:0 auto}

/* ── shared primitives ──────────────────────────────────────────────────── */
.oc-landing.fs-skin .oc-kicker{display:inline-block;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:800;color:var(--c-lab);margin-bottom:10px}
.oc-landing.fs-skin h2{font-size:clamp(20px,2.6vw,30px);line-height:1.16;letter-spacing:-.03em;
  font-weight:800;color:var(--c-ink);margin:0 0 10px}
.oc-landing.fs-skin h3{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--c-ink)}
.oc-landing.fs-skin .oc-muted{color:var(--c-dim);font-size:14px;line-height:1.6}
.oc-landing.fs-skin .oc-section-gap{margin-top:18px}

/* Panels are the page's unit. Square, hairlined, no shadow — the old arm's
   14px radius and card shadows are what this test is actually varying. */
.oc-landing.fs-skin .oc-panel{background:var(--c-paper);border:2px solid var(--c-ink);
  border-radius:0;box-shadow:none;padding:clamp(20px,3vw,30px)}
.oc-landing.fs-skin .oc-panel-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:18px;border-bottom:2px solid var(--c-ink)}
.oc-landing.fs-skin .oc-panel-head h2{margin:0}
.oc-landing.fs-skin .oc-panel-head > span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:800;color:var(--c-lab);white-space:nowrap}
.oc-landing.fs-skin .oc-section-title{margin-bottom:18px}
.oc-landing.fs-skin .oc-section-title h2{margin:0}

.oc-landing.fs-skin .oc-band{margin-top:clamp(28px,4vw,48px)}
.oc-landing.fs-skin .oc-band-tint{background:var(--c-tint);border:2px solid var(--c-ink);
  padding:clamp(22px,3vw,34px)}
.oc-landing.fs-skin .oc-public-grid{display:grid;grid-template-columns:1fr;gap:18px;
  margin-top:clamp(28px,4vw,48px)}
@media (min-width:900px){
  .oc-landing.fs-skin .oc-public-grid{grid-template-columns:1.6fr 1fr;align-items:start}
}

/* ── buttons ────────────────────────────────────────────────────────────── */
.oc-landing.fs-skin .btn{border-radius:0;font-weight:800;letter-spacing:-.01em;
  border:2px solid var(--c-ink);box-shadow:none;text-decoration:none}
.oc-landing.fs-skin .btn-primary{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.oc-landing.fs-skin .btn-primary:hover{background:#252525;border-color:#252525;color:#fff}
.oc-landing.fs-skin .btn-outline,.oc-landing.fs-skin .btn-secondary{background:transparent;
  border-color:var(--c-ink);color:var(--c-ink)}
.oc-landing.fs-skin .btn-outline:hover,.oc-landing.fs-skin .btn-secondary:hover{
  background:var(--c-ink);color:#fff}
.oc-landing.fs-skin .btn-large,.oc-landing.fs-skin .btn-lg{padding:13px 22px;font-size:14.5px}
.oc-landing.fs-skin .btn-sm{padding:9px 15px;font-size:13px}

/* ── hero ───────────────────────────────────────────────────────────────── */
/* The photo is set as an inline background-image attribute, which no stylesheet
   can outrank without !important. The other new arms open on a solid colour
   block, and a photo behind white display type was also the least legible
   surface on the old page — so it goes. */
.oc-landing.fs-skin .oc-hero-landing{background-image:none!important;
  background:var(--c-blue);color:#fff;border:0;padding:clamp(40px,6vw,74px) 0}
.oc-landing.fs-skin .oc-hero-landing::before,
.oc-landing.fs-skin .oc-hero-landing::after{display:none}
.oc-landing.fs-skin .oc-hero-grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:start}
@media (min-width:900px){
  .oc-landing.fs-skin .oc-hero-grid{grid-template-columns:1.55fr .9fr;gap:44px}
}
.oc-landing.fs-skin .oc-hero-grid .oc-kicker{color:rgba(255,255,255,.82)}
.oc-landing.fs-skin .oc-hero-grid h1{font-size:clamp(30px,5.2vw,58px);line-height:1.04;
  letter-spacing:-.04em;font-weight:800;color:#fff;margin:0 0 16px;text-wrap:balance}
.oc-landing.fs-skin .oc-hero-grid > div > p{font-size:clamp(15px,1.7vw,18px);line-height:1.6;
  color:rgba(255,255,255,.92);margin:0 0 20px;max-width:56ch}
.oc-landing.fs-skin .oc-hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.oc-landing.fs-skin .oc-hero-meta span{display:inline-flex;align-items:center;gap:7px;border-radius:0;
  font-size:12.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.34);padding:7px 12px}
.oc-landing.fs-skin .oc-hero-meta i{opacity:.9}
.oc-landing.fs-skin .oc-hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.oc-landing.fs-skin .oc-hero-actions form{margin:0}
/* On blue, the black button disappears — invert the pair. */
.oc-landing.fs-skin .oc-hero-actions .btn-primary{background:#fff;border-color:#fff;color:var(--c-blue)}
.oc-landing.fs-skin .oc-hero-actions .btn-primary:hover{background:#f0f2ff;border-color:#f0f2ff;
  color:var(--c-blue)}
.oc-landing.fs-skin .oc-hero-actions .btn-outline{border-color:#fff;color:#fff;background:transparent}
.oc-landing.fs-skin .oc-hero-actions .btn-outline:hover{background:#fff;color:var(--c-blue)}

.oc-landing.fs-skin .oc-hero-panel{background:#fff;border:2px solid var(--c-ink);border-radius:0;
  box-shadow:none;padding:0;overflow:hidden}
.oc-landing.fs-skin .oc-stat-row{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:13px 18px;border-bottom:1px solid var(--c-hair);background:#fff}
.oc-landing.fs-skin .oc-stat-row:last-child{border-bottom:0}
.oc-landing.fs-skin .oc-stat-row span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--c-lab)}
.oc-landing.fs-skin .oc-stat-row strong{font-size:15px;font-weight:800;color:var(--c-ink);
  text-align:right;font-variant-numeric:tabular-nums}
.oc-landing.fs-skin .oc-stat-feature{background:var(--c-ink)}
.oc-landing.fs-skin .oc-stat-feature span{color:rgba(255,255,255,.72)}
.oc-landing.fs-skin .oc-stat-feature strong{color:#fff}

.oc-landing.fs-skin .oc-enrollment-badge{display:inline-flex;align-items:center;gap:7px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;padding:9px 14px;
  border-radius:0;background:#fff;color:var(--c-ink);border:2px solid #fff}
.oc-landing.fs-skin .oc-enrollment-badge.closed{background:transparent;color:#fff;
  border-color:rgba(255,255,255,.5)}
.oc-landing.fs-skin .oc-alert{border-radius:0;border:2px solid #fff;background:rgba(255,255,255,.14);
  color:#fff;padding:12px 16px;margin-top:16px;font-size:14px;font-weight:700}

/* ── preview bar (mentor viewing an unpublished class) ──────────────────── */
.oc-landing.fs-skin .oc-preview-bar{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;background:var(--c-ink);color:#fff;border-radius:0;
  padding:11px clamp(20px,5vw,40px);font-size:13px;font-weight:700}
.oc-landing.fs-skin .oc-preview-bar a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  font-weight:800}

/* ── student zone ───────────────────────────────────────────────────────── */
.oc-landing.fs-skin .oc-student-next{display:grid;grid-template-columns:1fr;gap:18px;
  margin-top:clamp(28px,4vw,44px);border:2px solid var(--c-ink);
  border-left-width:10px;border-left-color:var(--c-blue);padding:clamp(20px,3vw,28px)}
@media (min-width:900px){
  .oc-landing.fs-skin .oc-student-next{grid-template-columns:1.3fr 1fr;align-items:center}
}
.oc-landing.fs-skin .oc-student-next h2{margin:0 0 6px}
.oc-landing.fs-skin .oc-student-next > div > p{color:var(--c-dim);font-size:14px;line-height:1.6;margin:0}
.oc-landing.fs-skin .oc-next-actions{display:flex;flex-wrap:wrap;gap:9px}
.oc-landing.fs-skin .oc-next-actions a{display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:800;text-decoration:none;color:var(--c-ink);
  border:2px solid var(--c-ink);padding:9px 14px;background:#fff}
.oc-landing.fs-skin .oc-next-actions a:hover{background:var(--c-ink);color:#fff;text-decoration:none}
.oc-landing.fs-skin .oc-next-cert{background:var(--c-blue)!important;border-color:var(--c-blue)!important;
  color:#fff!important}
.oc-landing.fs-skin .oc-leave-form{margin:14px 0 0}
.oc-landing.fs-skin .oc-leave-btn{background:transparent;border:2px solid var(--c-red);
  color:var(--c-red);border-radius:0;font-weight:800;font-size:12.5px;padding:8px 13px;cursor:pointer}
.oc-landing.fs-skin .oc-leave-btn:hover{background:var(--c-red);color:#fff}

/* Meeting card — the inline style= on this element is dropped in the new arm
   (see class.php), so these rules are the only thing painting it. Paid students
   only; verified structurally, not visually. */
.oc-landing.fs-skin .oc-meeting-card{display:flex;align-items:center;gap:14px;
  background:var(--c-tint);border:2px solid var(--c-ink);border-radius:0;padding:16px 18px;
  text-decoration:none;color:var(--c-ink);margin-top:18px}
.oc-landing.fs-skin .oc-meeting-card:hover{background:#eef0ff;text-decoration:none}
.oc-landing.fs-skin .oc-mc-ic{width:46px;height:46px;border-radius:0;background:var(--c-blue);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.oc-landing.fs-skin .oc-mc-body{flex:1;min-width:0}
.oc-landing.fs-skin .oc-mc-body strong{display:block;font-size:15px;font-weight:800;color:var(--c-ink)}
.oc-landing.fs-skin .oc-mc-body span{font-size:13px;color:var(--c-dim);word-break:break-all}
.oc-landing.fs-skin .oc-mc-go{background:var(--c-ink);color:#fff;font-size:13px;font-weight:800;
  padding:9px 16px;border-radius:0;white-space:nowrap;flex-shrink:0}

/* oc-meet-* belong to the SCHEDULE rows, not the meeting card — an inline
   "join online" link, its note, and the badge a logged-out visitor sees
   instead of the link. (I had these three attached to the meeting card at
   first; they are small inline items inside .oc-schedule-body.) */
.oc-landing.fs-skin .oc-meet-link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-size:12.5px;font-weight:800;color:var(--c-blue);text-decoration:none;
  border-bottom:2px solid var(--c-blue);padding-bottom:1px}
.oc-landing.fs-skin .oc-meet-link:hover{color:var(--c-ink);border-bottom-color:var(--c-ink);
  text-decoration:none}
.oc-landing.fs-skin .oc-meet-note{display:inline-block;margin:8px 0 0 9px;font-size:12px;
  line-height:1.5;color:var(--c-dim)}
.oc-landing.fs-skin .oc-meet-badge{display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;padding:4px 9px;
  border:1px solid var(--c-hair);border-radius:0;background:#fff;color:var(--c-dim)}

.oc-landing.fs-skin .oc-cert-callout{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--c-blue);color:#fff;border:2px solid var(--c-blue);border-radius:0;
  padding:18px 22px;text-decoration:none;margin-top:18px}
.oc-landing.fs-skin .oc-cert-callout:hover{background:#1230e0;text-decoration:none;color:#fff}
.oc-landing.fs-skin .oc-cert-callout-icon{width:48px;height:48px;border-radius:0;
  background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;color:#fff}
.oc-landing.fs-skin .oc-cert-callout > span:nth-child(2){flex:1;min-width:200px}
.oc-landing.fs-skin .oc-cert-callout strong{display:block;font-size:16px;font-weight:800;color:#fff}
.oc-landing.fs-skin .oc-cert-callout strong + span{font-size:13.5px;color:rgba(255,255,255,.88)}
.oc-landing.fs-skin .oc-cert-callout-cta{font-size:13px;font-weight:800;color:#fff;
  border:2px solid #fff;padding:9px 15px;white-space:nowrap}

/* ── story / outcomes / mentor ──────────────────────────────────────────── */
.oc-landing.fs-skin .oc-rich-text{font-size:15.5px;line-height:1.7;color:#1a1d21}
.oc-landing.fs-skin .oc-rich-text p{color:#1a1d21;font-size:15.5px;line-height:1.7}
.oc-landing.fs-skin .oc-outcome-grid{display:grid;grid-template-columns:1fr;gap:0;margin-top:20px;
  border:2px solid var(--c-ink)}
@media (min-width:700px){
  .oc-landing.fs-skin .oc-outcome-grid{grid-template-columns:repeat(3,1fr)}
}
.oc-landing.fs-skin .oc-outcome-grid > *{padding:16px 18px;border-bottom:1px solid var(--c-hair);
  font-size:14px;line-height:1.55;color:#1a1d21}
.oc-landing.fs-skin .oc-outcome-grid > *:last-child{border-bottom:0}
@media (min-width:700px){
  .oc-landing.fs-skin .oc-outcome-grid > *{border-bottom:0;border-right:1px solid var(--c-hair)}
  .oc-landing.fs-skin .oc-outcome-grid > *:last-child{border-right:0}
}
.oc-landing.fs-skin .oc-mentor-card{background:#fff}
.oc-landing.fs-skin .oc-mentor-head{display:flex;align-items:center;gap:14px;
  padding-bottom:14px;border-bottom:2px solid var(--c-ink);margin-bottom:14px}
.oc-landing.fs-skin .oc-mentor-head img{width:56px;height:56px;border-radius:0;box-shadow:none;object-fit:cover;
  flex:0 0 auto;border:2px solid var(--c-ink)}
.oc-landing.fs-skin .oc-mentor-head strong{font-size:15.5px;font-weight:800;color:var(--c-ink)}
.oc-landing.fs-skin .oc-mentor-card p{font-size:14px;line-height:1.6;color:var(--c-dim)}
.oc-landing.fs-skin .oc-mentor-card a{color:var(--c-blue);font-weight:700}

.oc-landing.fs-skin .oc-fit-list{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.oc-landing.fs-skin .oc-fit-list > div{display:flex;gap:10px;align-items:flex-start;
  font-size:14.5px;line-height:1.55;color:#1a1d21}
.oc-landing.fs-skin .oc-fit-list i{color:var(--c-green);margin-top:3px;flex:0 0 auto}
.oc-landing.fs-skin .oc-meta-list{display:flex;flex-direction:column;gap:0;
  border:2px solid var(--c-ink);margin-top:14px}
.oc-landing.fs-skin .oc-meta-list > *{padding:12px 16px;border-bottom:1px solid var(--c-hair);
  font-size:14px;color:#1a1d21}
.oc-landing.fs-skin .oc-meta-list > *:last-child{border-bottom:0}
.oc-landing.fs-skin .oc-location-panel{background:#fff}
.oc-landing.fs-skin .oc-map-preview,.oc-landing.fs-skin .oc-map-tile{border-radius:0;
  border:2px solid var(--c-ink);overflow:hidden;margin-top:14px}
.oc-landing.fs-skin .oc-map-placeholder{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;padding:34px 20px;background:var(--c-tint);
  border:2px dashed var(--c-hair);border-radius:0;color:var(--c-dim);font-size:13.5px;
  text-align:center;margin-top:14px}
.oc-landing.fs-skin .oc-map-placeholder i{font-size:26px;color:var(--c-lab)}
.oc-landing.fs-skin .oc-map-pin{color:var(--c-blue)}

/* ── schedule ───────────────────────────────────────────────────────────── */
.oc-landing.fs-skin .oc-schedule-panel{background:#fff}
.oc-landing.fs-skin .oc-schedule{display:flex;flex-direction:column;gap:0;border:2px solid var(--c-ink)}
.oc-landing.fs-skin .oc-schedule-day{display:flex;gap:0;align-items:stretch;
  border-bottom:1px solid var(--c-hair);background:#fff}
.oc-landing.fs-skin .oc-schedule-day:last-child{border-bottom:0}
.oc-landing.fs-skin .oc-schedule-daynum{flex:0 0 62px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;background:var(--c-tint);
  border-right:1px solid var(--c-hair);border-radius:0;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--c-lab);padding:12px 6px;text-align:center}
.oc-landing.fs-skin .oc-schedule-daynum b{font-size:19px;font-weight:800;color:var(--c-blue);
  letter-spacing:-.02em}
.oc-landing.fs-skin .oc-schedule-body{flex:1;min-width:0;padding:13px 16px}
.oc-landing.fs-skin .oc-schedule-body strong{display:block;font-size:14.5px;font-weight:800;
  color:var(--c-ink);letter-spacing:-.015em;line-height:1.35}
.oc-landing.fs-skin .oc-schedule-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px;
  font-size:12px;font-weight:700;color:var(--c-lab)}
.oc-landing.fs-skin .oc-schedule-lessons{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.oc-landing.fs-skin .oc-lesson-pill{display:inline-block;font-size:12px;font-weight:700;
  border:1px solid var(--c-hair);border-radius:0;padding:4px 9px;color:var(--c-dim);background:#fff}
.oc-landing.fs-skin .oc-schedule-note{font-size:13px;color:var(--c-dim);margin-top:12px}
.oc-landing.fs-skin .oc-method-panel{background:#fff}
/* Each row already ships its own <strong>N</strong>; offline-classes.css draws
   it as a 50% circle. Squaring the real element is correct — a CSS counter here
   rendered a second number next to the first. */
.oc-landing.fs-skin .oc-method-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.oc-landing.fs-skin .oc-method-list > *{display:flex;gap:11px;align-items:flex-start;
  font-size:14px;line-height:1.55;color:#1a1d21}
.oc-landing.fs-skin .oc-method-list strong{flex:0 0 auto;width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:0;
  background:var(--c-blue);color:#fff;font-size:11px;font-weight:800;margin-top:1px}

/* ── materials / documents ──────────────────────────────────────────────── */
.oc-landing.fs-skin .oc-dls a,.oc-landing.fs-skin .oc-dls .btn{border-radius:0}
.oc-landing.fs-skin .oc-list{display:flex;flex-direction:column;gap:0;border:2px solid var(--c-ink)}
.oc-landing.fs-skin .oc-list-row{display:block;padding:14px 16px;text-decoration:none;
  color:var(--c-ink);border-bottom:1px solid var(--c-hair);background:#fff}
.oc-landing.fs-skin .oc-list-row:last-child{border-bottom:0}
.oc-landing.fs-skin .oc-list-row:hover{background:var(--c-tint);text-decoration:none}
.oc-landing.fs-skin .oc-list-row strong{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:14.5px;font-weight:800;color:var(--c-ink);letter-spacing:-.015em}
.oc-landing.fs-skin .oc-list-row > span{display:block;margin-top:5px;font-size:12.5px;
  line-height:1.5;color:var(--c-dim)}
.oc-landing.fs-skin .oc-link-row i{color:var(--c-blue)}

/* ── badges ─────────────────────────────────────────────────────────────── */
.oc-landing.fs-skin .oc-badge{display:inline-flex;align-items:center;gap:6px;border-radius:0;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;padding:4px 9px;
  border:1px solid var(--c-hair);background:#fff;color:var(--c-dim)}
.oc-landing.fs-skin .oc-badge.success{background:var(--c-green);border-color:var(--c-green);color:#fff}
.oc-landing.fs-skin .oc-badge.info{background:var(--c-blue);border-color:var(--c-blue);color:#fff}
.oc-landing.fs-skin .oc-badge.muted{background:#fff;border-color:var(--c-hair);color:var(--c-lab)}

/* ── assignments & progress (enrolled students only) ────────────────────── */
.oc-landing.fs-skin .oc-assignment-panel{background:#fff}
.oc-landing.fs-skin .oc-progress-strip{display:grid;grid-template-columns:1fr;gap:0;
  border:2px solid var(--c-ink)}
@media (min-width:700px){
  .oc-landing.fs-skin .oc-progress-strip{grid-template-columns:repeat(3,1fr)}
}
.oc-landing.fs-skin .oc-progress-metric{padding:14px 18px;border-bottom:1px solid var(--c-hair);
  background:#fff}
.oc-landing.fs-skin .oc-progress-metric:last-child{border-bottom:0}
@media (min-width:700px){
  .oc-landing.fs-skin .oc-progress-metric{border-bottom:0;border-right:1px solid var(--c-hair)}
  .oc-landing.fs-skin .oc-progress-metric:last-child{border-right:0}
}
.oc-landing.fs-skin .oc-progress-metric span{display:block;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;font-weight:800;color:var(--c-lab)}
.oc-landing.fs-skin .oc-progress-metric strong{display:block;margin:5px 0 9px;font-size:26px;
  font-weight:800;letter-spacing:-.03em;color:var(--c-ink);font-variant-numeric:tabular-nums}
.oc-landing.fs-skin .oc-progress-bar{height:8px;background:var(--c-hair);border-radius:0;overflow:hidden}
.oc-landing.fs-skin .oc-progress-bar i{display:block;height:100%;background:var(--c-blue);border-radius:0}

.oc-landing.fs-skin .oc-assignment-cards{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.oc-landing.fs-skin .oc-assignment-card{border:2px solid var(--c-ink);border-radius:0;background:#fff;
  padding:16px 18px;box-shadow:none}
.oc-landing.fs-skin .oc-assignment-card.is-submitted{border-left-width:10px;
  border-left-color:var(--c-amber)}
.oc-landing.fs-skin .oc-assignment-card.is-graded{border-left-width:10px;
  border-left-color:var(--c-green)}
.oc-landing.fs-skin .oc-assignment-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.oc-landing.fs-skin .oc-assignment-top strong{display:block;font-size:15px;font-weight:800;
  color:var(--c-ink);letter-spacing:-.02em}
.oc-landing.fs-skin .oc-assignment-tag{display:block;margin-top:4px;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--c-lab)}
.oc-landing.fs-skin .oc-assignment-desc{font-size:14px;line-height:1.6;color:#1a1d21;margin:11px 0 0}
.oc-landing.fs-skin .oc-feedback{margin-top:12px;padding:12px 14px;background:var(--c-tint);
  border-left:4px solid var(--c-green);border-radius:0;font-size:13.5px;line-height:1.6;color:#1a1d21}
.oc-landing.fs-skin .oc-feedback strong{color:var(--c-green);font-weight:800}
.oc-landing.fs-skin .oc-submit-form{margin-top:13px;padding-top:13px;border-top:1px solid var(--c-hair)}
.oc-landing.fs-skin .oc-submit-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:9px}
.oc-landing.fs-skin .oc-submit-row input[type=url]{flex:1 1 240px;min-width:0}
.oc-landing.fs-skin .oc-submit-file{display:inline-block;margin-top:8px;font-size:12.5px;
  font-weight:700;color:var(--c-green)}

/* ── certificate block ──────────────────────────────────────────────────── */
.oc-landing.fs-skin .oc-cert-grid{grid-template-columns:1fr!important;gap:18px}
@media (min-width:900px){
  .oc-landing.fs-skin .oc-cert-grid{grid-template-columns:1fr 1fr!important;align-items:stretch!important}
}
.oc-landing.fs-skin .oc-cert-card{display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:10px;background:#fff}
.oc-landing.fs-skin .oc-cert-badge{display:flex;flex-direction:column;align-items:center;gap:11px;
  width:100%;max-width:360px;padding:24px 20px;border-radius:0;background:var(--c-tint);
  border:2px solid var(--c-ink)}
.oc-landing.fs-skin .oc-cert-badge-ring{width:64px;height:64px;border-radius:0;background:var(--c-blue);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:none}
.oc-landing.fs-skin .oc-cert-badge strong{font-size:15.5px;font-weight:800;color:var(--c-ink);
  line-height:1.35}
.oc-landing.fs-skin .oc-cert-badge span{font-size:12.5px;color:var(--c-blue);font-weight:800;
  display:inline-flex;align-items:center;gap:5px}
.oc-landing.fs-skin .oc-cert-card > p{color:var(--c-dim);line-height:1.6;margin:2px 0 0;max-width:420px;
  font-size:14px}
.oc-landing.fs-skin .oc-outcome-card{background:#fff}

/* ── Q&A threads ────────────────────────────────────────────────────────── */
.oc-landing.fs-skin .oc-qa-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.oc-landing.fs-skin .oc-thread-list{display:flex;flex-direction:column;gap:0;border:2px solid var(--c-ink)}
.oc-landing.fs-skin .oc-thread{padding:16px 18px;border-bottom:1px solid var(--c-hair);background:#fff}
.oc-landing.fs-skin .oc-thread:last-child{border-bottom:0}
/* The base stylesheet makes this a flex row, so display:block on the span was
   inert — the meta always sat to the right. Declared rather than inherited. */
.oc-landing.fs-skin .oc-thread-head{display:flex;align-items:baseline;
  justify-content:space-between;gap:12px;flex-wrap:wrap}
.oc-landing.fs-skin .oc-thread-head strong{font-size:15px;font-weight:800;
  color:var(--c-ink);letter-spacing:-.02em}
.oc-landing.fs-skin .oc-thread-head span{font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--c-lab)}
.oc-landing.fs-skin .oc-thread > p{font-size:14.5px;line-height:1.65;color:#1a1d21;margin:10px 0 0}
.oc-landing.fs-skin .oc-reply{margin-top:12px;padding:12px 14px;background:var(--c-tint);
  border-left:4px solid var(--c-blue);border-radius:0}
.oc-landing.fs-skin .oc-reply strong{font-size:13px;font-weight:800;color:var(--c-blue)}
.oc-landing.fs-skin .oc-reply p{font-size:14px;line-height:1.6;color:#1a1d21;margin:5px 0 0}
.oc-landing.fs-skin .oc-inline-reply{margin-top:12px;display:flex;flex-direction:column;gap:9px;
  align-items:flex-start}
.oc-landing.fs-skin .oc-inline-reply textarea{width:100%}

/* Pagination is injected by offline-classes.js after load, so these rules
   describe elements that do not exist in the served HTML. */
.oc-landing.fs-skin .oc-paginate{display:flex;gap:7px;justify-content:center;margin-top:16px;
  flex-wrap:wrap}
.oc-landing.fs-skin .oc-paginate button{border-radius:0;border:2px solid var(--c-ink);background:#fff;
  color:var(--c-ink);font-weight:800;font-size:13px;padding:7px 13px;cursor:pointer}
.oc-landing.fs-skin .oc-paginate button:hover{background:var(--c-ink);color:#fff}
.oc-landing.fs-skin .oc-paginate button.active,
.oc-landing.fs-skin .oc-paginate button[aria-current=true]{background:var(--c-ink);color:#fff}

/* ── reviews ────────────────────────────────────────────────────────────── */
.oc-landing.fs-skin .oc-public-reviews{background:#fff}
.oc-landing.fs-skin .oc-review-list{display:flex;flex-direction:column;gap:0;
  border:2px solid var(--c-ink)}
.oc-landing.fs-skin .oc-review{padding:15px 18px;border-bottom:1px solid var(--c-hair);background:#fff}
.oc-landing.fs-skin .oc-review:last-child{border-bottom:0}
.oc-landing.fs-skin .oc-review strong{display:block;font-size:14.5px;font-weight:800;color:var(--c-ink)}
.oc-landing.fs-skin .oc-review p{font-size:14px;line-height:1.65;color:#1a1d21;margin:6px 0 0}
.oc-landing.fs-skin .oc-cta-card{text-align:center;background:#fff}
.oc-landing.fs-skin .oc-cta-card-icon{width:56px;height:56px;border-radius:0;background:var(--c-blue);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:24px;
  margin-bottom:12px}

/* ── empty states ───────────────────────────────────────────────────────── */
.oc-landing.fs-skin .oc-empty-state{text-align:center;padding:34px 20px;background:var(--c-tint);
  border:2px dashed var(--c-hair);border-radius:0}
.oc-landing.fs-skin .oc-empty-icon{width:56px;height:56px;border-radius:0;background:var(--c-blue);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:24px;
  margin-bottom:12px}
.oc-landing.fs-skin .oc-empty-state h3{margin:0 0 6px;font-size:17px;font-weight:800;color:var(--c-ink)}
.oc-landing.fs-skin .oc-empty-state p{margin:0 auto 16px;color:var(--c-dim);max-width:440px;
  font-size:14px;line-height:1.55}
.oc-landing.fs-skin .oc-empty{color:var(--c-dim);font-size:14px}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.oc-landing.fs-skin .oc-faq-panel{background:#fff}
.oc-landing.fs-skin .oc-faq-list{display:flex;flex-direction:column;gap:0;border:2px solid var(--c-ink)}
.oc-landing.fs-skin .oc-faq-list details{border-bottom:1px solid var(--c-hair);background:#fff}
.oc-landing.fs-skin .oc-faq-list details:last-child{border-bottom:0}
.oc-landing.fs-skin .oc-faq-list summary{cursor:pointer;list-style:none;padding:14px 18px;
  font-size:14.5px;font-weight:800;color:var(--c-ink);letter-spacing:-.015em;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.oc-landing.fs-skin .oc-faq-list summary::-webkit-details-marker{display:none}
.oc-landing.fs-skin .oc-faq-list summary::after{content:"+";font-size:19px;font-weight:800;
  color:var(--c-blue);flex:0 0 auto;line-height:1}
.oc-landing.fs-skin .oc-faq-list details[open] summary::after{content:"–"}
.oc-landing.fs-skin .oc-faq-list summary:hover{background:var(--c-tint)}
.oc-landing.fs-skin .oc-faq-list p{padding:0 18px 15px;margin:0;font-size:14px;line-height:1.65;
  color:#1a1d21}

/* ── join row / payment ─────────────────────────────────────────────────── */
.oc-landing.fs-skin .oc-join-row{display:flex;gap:18px;align-items:stretch;flex-wrap:wrap;
  margin-top:clamp(28px,4vw,44px);margin-bottom:clamp(28px,4vw,44px)}
.oc-landing.fs-skin .oc-join-row > *{margin:0!important}
.oc-landing.fs-skin .oc-join-row > .oc-cta-band{flex:1.5 1 400px}
.oc-landing.fs-skin .oc-join-row > .oc-payment-public{flex:1 1 300px}
@media (max-width:820px){ .oc-landing.fs-skin .oc-join-row{flex-direction:column} }
.oc-landing.fs-skin .oc-cta-band{display:flex;flex-direction:column;justify-content:center;gap:14px;box-shadow:none;
  background:var(--c-ink);color:#fff;border:2px solid var(--c-ink);border-radius:0;
  padding:clamp(22px,3vw,32px)}
.oc-landing.fs-skin .oc-cta-band .oc-kicker{color:rgba(255,255,255,.7)}
.oc-landing.fs-skin .oc-cta-band h2{color:#fff;margin:0 0 8px}
.oc-landing.fs-skin .oc-cta-band p{color:rgba(255,255,255,.86);font-size:14.5px;line-height:1.6;margin:0}
.oc-landing.fs-skin .oc-cta-band form{margin:0}
.oc-landing.fs-skin .oc-cta-band .btn-primary{background:#fff;border-color:#fff;color:var(--c-ink)}
.oc-landing.fs-skin .oc-cta-band .btn-primary:hover{background:#eee;border-color:#eee;color:var(--c-ink)}
.oc-landing.fs-skin .oc-cta-band .btn-outline{border-color:#fff;color:#fff}
.oc-landing.fs-skin .oc-cta-band .btn-outline:hover{background:#fff;color:var(--c-ink)}
.oc-landing.fs-skin .oc-payment-public{display:flex;flex-direction:column;gap:12px;background:#fff}
.oc-landing.fs-skin .oc-payment-public img{width:100%;max-width:190px;height:auto;border-radius:0;
  border:2px solid var(--c-ink);align-self:flex-start}
.oc-landing.fs-skin .oc-payment-public p{font-size:14px;line-height:1.6;color:var(--c-dim)}

/* ── related courses ────────────────────────────────────────────────────── */
.oc-landing.fs-skin .oc-related{margin-bottom:clamp(30px,5vw,56px)}
.oc-landing.fs-skin .oc-related-grid{display:grid;grid-template-columns:1fr;gap:0;
  border:2px solid var(--c-ink)}
@media (min-width:760px){
  .oc-landing.fs-skin .oc-related-grid{grid-template-columns:repeat(3,1fr)}
}
.oc-landing.fs-skin .oc-course-mini{display:block;text-decoration:none;color:var(--c-ink);
  background:#fff;border-bottom:1px solid var(--c-hair);border-radius:0;box-shadow:none}
.oc-landing.fs-skin .oc-course-mini:last-child{border-bottom:0}
@media (min-width:760px){
  .oc-landing.fs-skin .oc-course-mini{border-bottom:0;border-right:1px solid var(--c-hair)}
  .oc-landing.fs-skin .oc-course-mini:last-child{border-right:0}
}
.oc-landing.fs-skin .oc-course-mini:hover{background:var(--c-tint);text-decoration:none}
.oc-landing.fs-skin .oc-course-mini img{width:100%;height:132px;object-fit:cover;border-radius:0;
  display:block;border-bottom:1px solid var(--c-hair)}
.oc-landing.fs-skin .oc-course-mini > div{padding:14px 16px}
.oc-landing.fs-skin .oc-course-mini > div > span{display:inline-block;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--c-blue);margin-bottom:6px}
.oc-landing.fs-skin .oc-course-mini strong{display:block;font-size:14.5px;font-weight:800;
  letter-spacing:-.02em;line-height:1.3;color:var(--c-ink)}
.oc-landing.fs-skin .oc-course-mini p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--c-dim)}

/* ── sticky CTA (toggled by the IntersectionObserver in class.php) ──────── */
.oc-landing.fs-skin ~ .oc-sticky-cta,
.oc-sticky-cta.fs-sticky{border-radius:0;border-top:2px solid #0a0a0a;background:#fff;
  box-shadow:0 -6px 24px rgba(0,0,0,.10)}
.oc-sticky-cta.fs-sticky .oc-sticky-info strong{font-size:14.5px;font-weight:800;color:#0a0a0a}
.oc-sticky-cta.fs-sticky .oc-sticky-info span{font-size:12.5px;color:#5c626b;font-weight:700}
.oc-sticky-cta.fs-sticky .btn-primary{border-radius:0;background:#0a0a0a;border:2px solid #0a0a0a;
  color:#fff;font-weight:800}
.oc-sticky-cta.fs-sticky .btn-primary:hover{background:#252525;border-color:#252525}

/* ── modals ─────────────────────────────────────────────────────────────── */
/* .open is added by offline-classes.js; the box must stay square and the
   enrol modal auto-opens on load for pending enrolments. */
.oc-landing.fs-skin .oc-modal,.oc-modal.fs-modal{border-radius:0}
.oc-landing.fs-skin .oc-modal-box,.oc-modal.fs-modal .oc-modal-box{border-radius:0;
  border:2px solid #0a0a0a;box-shadow:none;background:#fff}
.oc-landing.fs-skin .oc-modal-head,.oc-modal.fs-modal .oc-modal-head{border-bottom:2px solid #0a0a0a;
  padding:15px 20px}
.oc-landing.fs-skin .oc-modal-head h3,.oc-modal.fs-modal .oc-modal-head h3{font-size:16.5px;
  font-weight:800;letter-spacing:-.02em;color:#0a0a0a;margin:0}
.oc-landing.fs-skin .oc-modal-close,.oc-modal.fs-modal .oc-modal-close{border-radius:0;
  border:2px solid #0a0a0a;background:#fff;color:#0a0a0a;width:32px;height:32px;
  font-size:19px;line-height:1;cursor:pointer}
.oc-landing.fs-skin .oc-modal-close:hover,.oc-modal.fs-modal .oc-modal-close:hover{
  background:#0a0a0a;color:#fff}
.oc-landing.fs-skin .oc-modal-body,.oc-modal.fs-modal .oc-modal-body{padding:20px}
.oc-landing.fs-skin .oc-modal-actions,.oc-modal.fs-modal .oc-modal-actions{display:flex;gap:10px;
  flex-wrap:wrap;margin-top:16px}

/* #ocModal-enroll is a SIBLING of <main>, so .oc-landing.fs-skin never reaches
   into it and its buttons kept the old rounded blue treatment — including the
   payment submit. Restate the button skin for the .fs-modal scope. */
.oc-modal.fs-modal .btn{border-radius:0;font-weight:800;letter-spacing:-.01em;
  border:2px solid #0a0a0a;box-shadow:none;text-decoration:none}
.oc-modal.fs-modal .btn-primary{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.oc-modal.fs-modal .btn-primary:hover{background:#252525;border-color:#252525;color:#fff}
.oc-modal.fs-modal .btn-outline,.oc-modal.fs-modal .btn-secondary{background:transparent;
  border-color:#0a0a0a;color:#0a0a0a}
.oc-modal.fs-modal .btn-outline:hover,.oc-modal.fs-modal .btn-secondary:hover{
  background:#0a0a0a;color:#fff}
.oc-modal.fs-modal .btn-sm{padding:9px 15px;font-size:13px}
.oc-modal.fs-modal .btn-large,.oc-modal.fs-modal .btn-lg{padding:13px 22px;font-size:14.5px}

/* enrol-completion steps inside the modal */
.oc-landing.fs-skin .oc-enroll-lead,.oc-modal.fs-modal .oc-enroll-lead{font-size:14px;line-height:1.6;
  color:#5c626b;margin:0 0 16px}
.oc-landing.fs-skin .oc-enroll-step,.oc-modal.fs-modal .oc-enroll-step{display:flex;gap:13px;
  align-items:flex-start;padding:15px;border:2px solid #0a0a0a;border-radius:0;margin-bottom:12px;
  background:#fff}
.oc-landing.fs-skin .oc-enroll-step.done,.oc-modal.fs-modal .oc-enroll-step.done{
  border-left-width:10px;border-left-color:#0f7a4a;background:#f6f7ff}
.oc-landing.fs-skin .oc-enroll-ic,.oc-modal.fs-modal .oc-enroll-ic{width:38px;height:38px;
  border-radius:0;background:#1a3aff;color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:17px;flex:0 0 auto}
.oc-landing.fs-skin .oc-enroll-step.done .oc-enroll-ic,
.oc-modal.fs-modal .oc-enroll-step.done .oc-enroll-ic{background:#0f7a4a}
.oc-landing.fs-skin .oc-enroll-main,.oc-modal.fs-modal .oc-enroll-main{flex:1;min-width:0}
.oc-landing.fs-skin .oc-enroll-main strong,.oc-modal.fs-modal .oc-enroll-main strong{
  font-size:14.5px;font-weight:800;color:#0a0a0a}
.oc-landing.fs-skin .oc-enroll-main p,.oc-modal.fs-modal .oc-enroll-main p{font-size:13.5px;
  line-height:1.55;color:#5c626b;margin:5px 0 10px}
.oc-landing.fs-skin .oc-req,.oc-modal.fs-modal .oc-req{display:inline-block;margin-left:7px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  background:#b42318;color:#fff;padding:3px 7px;border-radius:0}
.oc-landing.fs-skin .oc-enroll-done,.oc-modal.fs-modal .oc-enroll-done{display:flex;align-items:center;
  gap:9px;padding:13px 15px;background:#0f7a4a;color:#fff;border-radius:0;font-size:14px;
  font-weight:800}
.oc-landing.fs-skin .oc-pay-qr,.oc-modal.fs-modal .oc-pay-qr{margin:0 0 10px}
.oc-landing.fs-skin .oc-pay-qr img,.oc-modal.fs-modal .oc-pay-qr img{width:100%;max-width:190px;
  height:auto;border:2px solid #0a0a0a;border-radius:0;display:block}
.oc-landing.fs-skin .oc-pay-note,.oc-modal.fs-modal .oc-pay-note{white-space:pre-wrap;font-size:13px;
  line-height:1.6;color:#5c626b;margin:0 0 10px}
.oc-landing.fs-skin .oc-pay-status,.oc-modal.fs-modal .oc-pay-status{display:inline-flex;
  align-items:center;gap:7px;font-size:13px;font-weight:800;color:#a15c00}
.oc-landing.fs-skin .oc-pay-form,.oc-modal.fs-modal .oc-pay-form{display:flex;flex-direction:column;
  gap:8px;align-items:flex-start}

/* ── forms ──────────────────────────────────────────────────────────────── */
.oc-landing.fs-skin .oc-fields{display:flex;flex-direction:column;gap:13px}
.oc-landing.fs-skin .oc-field,.oc-modal.fs-modal .oc-field{display:flex;flex-direction:column;gap:6px}
.oc-landing.fs-skin .oc-field > span,.oc-modal.fs-modal .oc-field > span,
.oc-landing.fs-skin .oc-field-label,.oc-modal.fs-modal .oc-field-label{font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:#6b7280}
.oc-landing.fs-skin input,.oc-landing.fs-skin textarea,.oc-landing.fs-skin select,
.oc-modal.fs-modal input,.oc-modal.fs-modal textarea,.oc-modal.fs-modal select{
  border-radius:0;border:2px solid #e6e6e6;font-family:inherit;font-size:14.5px;padding:10px 12px;
  color:#0a0a0a;background:#fff;width:100%}
.oc-landing.fs-skin input:focus,.oc-landing.fs-skin textarea:focus,.oc-landing.fs-skin select:focus,
.oc-modal.fs-modal input:focus,.oc-modal.fs-modal textarea:focus,.oc-modal.fs-modal select:focus{
  border-color:#0a0a0a;outline:none;box-shadow:none}
.oc-landing.fs-skin .oc-review-form{display:flex;flex-direction:column;gap:12px;align-items:flex-start}

/* Star picker — offline-classes.js toggles .on as the pointer moves. */
.oc-landing.fs-skin .oc-stars,.oc-modal.fs-modal .oc-stars{display:flex;gap:5px}
.oc-landing.fs-skin .oc-star,.oc-modal.fs-modal .oc-star{font-size:26px;line-height:1;cursor:pointer;
  color:#e6e6e6;background:none;border:0;padding:0}
.oc-landing.fs-skin .oc-star.on,.oc-modal.fs-modal .oc-star.on{color:#1a3aff}

/* ── goal sections added by the new arm ─────────────────────────────────── */
.oc-guest{border:2px solid #0a0a0a;border-left-width:10px;border-left-color:#1a3aff;
  padding:clamp(20px,3vw,30px);margin-top:clamp(28px,4vw,44px);background:#fff}
.oc-guest-k{display:inline-block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:#6b7280;margin-bottom:9px}
.oc-guest-t{font-size:clamp(19px,2.4vw,27px);font-weight:800;letter-spacing:-.03em;line-height:1.16;
  margin:0;color:#0a0a0a}
.oc-guest-p{font-size:14.5px;line-height:1.6;color:#5c626b;margin:9px 0 0;max-width:62ch}
.oc-guest-btn{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:800;
  text-decoration:none;padding:12px 20px;border:2px solid #0a0a0a;background:#0a0a0a;color:#fff;
  border-radius:0}
.oc-guest-btn:hover{background:#252525;border-color:#252525;color:#fff;text-decoration:none}

.oc-next2{margin-top:clamp(28px,4vw,44px)}
.oc-next2-h{font-size:clamp(19px,2.4vw,27px);font-weight:800;letter-spacing:-.03em;margin:0 0 14px;
  color:#0a0a0a}
.oc-next2-grid{display:grid;grid-template-columns:1fr;border:2px solid #0a0a0a}
@media (min-width:760px){ .oc-next2-grid{grid-template-columns:repeat(3,1fr)} }
.oc-next2-c{display:block;padding:18px 20px;text-decoration:none;color:#0a0a0a;
  border-bottom:1px solid #e6e6e6;background:#fff}
.oc-next2-c:last-child{border-bottom:0}
@media (min-width:760px){
  .oc-next2-c{border-right:1px solid #e6e6e6;border-bottom:0}
  .oc-next2-c:last-child{border-right:0}
}
.oc-next2-c:hover{background:#f6f7ff;text-decoration:none;color:#0a0a0a}
.oc-next2-c b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.015em}
.oc-next2-c span{display:block;margin-top:7px;font-size:13px;line-height:1.5;color:#5c626b}