/* ==========================================================
   Humanproblem.ai — Free Course
   "Premium Technical Field Manual" design system.
   Dark-first, cyan-accented, editorial — the same system as the
   Hofler guide PDF covers, brought to the web. Deliberately not a
   soft SaaS/course-portal look: no pastel cards, no emoji, no
   rounded-everything. Terminal and blueprint metaphors throughout.
   ========================================================== */

:root {
  --bg-0: #0a1a31;
  --bg-1: #0c2040;
  --bg-2: #0e2549;
  --panel-edge: rgba(120,180,235,.14);
  --cyan: #16c6e6;
  --cyan-2: #00bcd4;
  --cyan-deep: #0a99b8;
  --ink: #ffffff;
  --ink-mute: #92a8c8;
  --ink-dim: #6981a4;
  --line: rgba(255,255,255,.10);
  --bracket: #2c5f93;
  --green: #34d399;
  --amber: #ffb454;
  --red: #ff6b6b;
  --gold: #ffd24a;
  --maxw: 860px;
  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display-hd: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--cyan); text-decoration: none; }
.mono { font-family: var(--mono); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; }
code { font-family: var(--mono); background: rgba(255,255,255,.06); padding: 2px 6px; border-radius: 3px; font-size: .92em; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ───────── corner-bracket frame (reused everywhere for the "equipment,
   not a card" feel — same technique as the guide covers) ───────── */
.framed { position: relative; }
.framed::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  --b: var(--cyan); --len: 16px; --w: 1.5px;
  opacity: .55;
  background:
    linear-gradient(var(--b),var(--b)) left 0 top 0 / var(--len) var(--w) no-repeat,
    linear-gradient(var(--b),var(--b)) left 0 top 0 / var(--w) var(--len) no-repeat,
    linear-gradient(var(--b),var(--b)) right 0 top 0 / var(--len) var(--w) no-repeat,
    linear-gradient(var(--b),var(--b)) right 0 top 0 / var(--w) var(--len) no-repeat,
    linear-gradient(var(--b),var(--b)) left 0 bottom 0 / var(--len) var(--w) no-repeat,
    linear-gradient(var(--b),var(--b)) left 0 bottom 0 / var(--w) var(--len) no-repeat,
    linear-gradient(var(--b),var(--b)) right 0 bottom 0 / var(--len) var(--w) no-repeat,
    linear-gradient(var(--b),var(--b)) right 0 bottom 0 / var(--w) var(--len) no-repeat;
}

/* ───────── scroll reveal, restrained ───────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.revealed { opacity: 1; transform: translateY(0); }

/* ───────── nav ───────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10,26,49,.9);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 62px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700; color: #fff; font-size: 13px; letter-spacing: 0.02em; }
.logo .mk {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1.5px solid var(--cyan); color: var(--cyan);
  font-weight: 700; font-size: 13px; border-radius: 4px;
}
.nav-progress {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-dim);
  text-transform: uppercase; position: relative; padding-bottom: 2px;
}
.nav-right { display: flex; align-items: center; gap: 22px; }
/* quiet persistent utility link back to the storefront -- not a conversion
   push, so it's muted and disappears on narrow phones (the same link
   still lives in the footer there, just requires a scroll) */
.guides-link {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-dim); position: relative; padding-bottom: 3px; white-space: nowrap;
}
.guides-link:hover { color: var(--cyan); }
@media (max-width: 640px) { .guides-link { display: none; } }
/* nav-links get the cyan underline sweep on hover -- restrained motion */
.nav-links a, .guides-link { position: relative; padding-bottom: 3px; }
.nav-links a::after, .guides-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--cyan); transition: right .2s ease;
}
.nav-links a:hover::after, .guides-link:hover::after { right: 0; }
.nav-links a:hover::after { right: 0; }

/* ───────── page-corner metadata, guide-cover style ───────── */
.page-meta {
  position: absolute; top: 0; right: 0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--ink-dim); text-transform: uppercase; text-align: right;
  line-height: 1.6; display: none;
}
.page-meta b { color: var(--cyan); }
@media (min-width: 900px) { .page-meta { display: block; } }

/* ───────── hero / module header ───────── */
.hero { padding: 72px 0 8px; position: relative; overflow: hidden; }
.hero .ghost-num {
  position: absolute; top: -18px; right: 0; z-index: 0;
  font-family: var(--display-hd); font-weight: 700; font-size: clamp(140px, 22vw, 260px);
  color: var(--cyan); opacity: .07; line-height: 1; letter-spacing: -0.04em;
  pointer-events: none; user-select: none;
}
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--cyan); display: flex; align-items: center; gap: 10px;
  position: relative; z-index: 1;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.eyebrow .rule { flex: 1; max-width: 60px; height: 1px; background: rgba(22,198,230,.4); }
h1 {
  font-family: var(--display-hd); font-weight: 700;
  font-size: clamp(32px, 5vw, 50px); line-height: 1.05;
  letter-spacing: -0.02em; margin: 18px 0 18px; color: #fff;
  text-wrap: balance; position: relative; z-index: 1;
}
h1 em { font-style: normal; color: var(--cyan); }
/* "Free." rides in the headline but is deliberately NOT part of the
   credential's name, which stays exactly "AI-Augmented QA Certification:
   Foundations" on the certificate and in the spec tables. Green marks it
   as a price, matching the $0 stat and the PASS badge rather than the
   cyan used for the credential itself. */
h1 .h1-free { color: var(--green); }
.lede { color: var(--ink-mute); font-size: 18px; line-height: 1.6; max-width: 620px; margin: 0 0 8px; position: relative; z-index: 1; }
.hook-claim {
  font-family: var(--display-hd); font-weight: 700; font-size: clamp(20px, 2.6vw, 26px);
  color: #fff; line-height: 1.3; max-width: 680px; margin: 4px 0 14px;
}
.hook-claim .cy { color: var(--cyan); }

/* ───────── what-you'll-learn bullets (landing) ───────── */
.learn-list { list-style: none; margin: 28px 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.learn-list li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 16px; line-height: 1.55; color: #dce6f4;
}
.learn-list .num {
  flex: none; width: 30px; height: 30px; border: 1px solid rgba(22,198,230,.4);
  color: var(--cyan); font-family: var(--mono); font-weight: 700; font-size: 12px;
  display: grid; place-items: center; margin-top: 1px; border-radius: 3px;
}

/* ───────── hero split: learn-list + certificate preview ─────────
   Everything above (eyebrow/h1/hook-claim/lede) stays full-width and
   untouched -- only the list gets a companion visual here, so nothing
   about the existing hero copy has to re-fit a narrower column. */
.hero-split { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 44px; align-items: start; }
.hero-split .learn-list { margin-top: 0; }
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } }

/* ───────── hero certification band ─────────
   The certification proof (stats/badge/pass-line + cert-preview) lives
   directly under the hero CTAs now, not in its own scroll-to section.
   .hero-cert is just the top-rule band wrapper; .hero-split (above) does
   the actual two-column layout and is safe to reuse here since nothing
   else in course/ applies that class. */
.hero-cert {
  margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line);
  position: relative; z-index: 1;
}
.hero-cert p { color: #cdd9ec; font-size: 15px; line-height: 1.65; margin: 14px 0 0; }
/* stats read 2x2 here instead of the shared .stat-row's 4-across default --
   scoped to this instance only so module-page stat rows are untouched */
.hero-split .stat-row { grid-template-columns: 1fr 1fr; }

.cert-preview {
  position: relative; aspect-ratio: 1.35; border-radius: 8px;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255,210,74,.10), transparent 60%),
    linear-gradient(155deg, #123058 0%, #0d2245 55%, #0a1a31 100%);
  border: 1px solid rgba(255,210,74,.28);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.03);
  padding: 22px 24px; display: flex; flex-direction: column;
}
.cert-preview::before {
  content: ""; position: absolute; inset: 9px; border: 1px solid rgba(255,210,74,.22); border-radius: 5px; pointer-events: none;
}
.cp-top { display: flex; align-items: center; justify-content: space-between; }
.cp-mark { width: 26px; height: 26px; border: 1.5px solid var(--gold, #ffd24a); color: var(--gold, #ffd24a); border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 700; }
.cp-tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold, #ffd24a); }
.cp-label { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); font-family: var(--mono); margin-top: 18px; }
.cp-name { font-family: var(--display-hd); font-size: 23px; font-weight: 700; margin-top: 5px; letter-spacing: -.01em; color: #fff; }
.cp-course { font-size: 12px; color: var(--ink-mute); margin-top: 8px; line-height: 1.5; }
.cp-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; font-family: var(--mono); font-size: 9px; color: var(--ink-dim); letter-spacing: .06em; text-transform: uppercase; }
.cp-foot b { color: var(--gold, #ffd24a); display: block; font-family: var(--display-hd); font-size: 12px; text-transform: none; letter-spacing: 0; margin-top: 3px; }
.cp-glow { position: absolute; inset: -1px; border-radius: 8px; pointer-events: none; animation: certPulse 3.2s ease-in-out infinite; }
@keyframes certPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,210,74,0); }
  50% { box-shadow: 0 0 32px 2px rgba(255,210,74,.14); }
}
@media (prefers-reduced-motion: reduce) { .cp-glow { animation: none; } }

/* ───────── credibility band ─────────
   Four large marks under the hero CTAs. Each carries a proof line rather
   than a bare label, so the icon is the hook and the sentence is the
   evidence. Icons are original SVG art in this palette, never a vendor
   logo file, and the closing line keeps a named tool from reading as an
   endorsement. Everything named here is real: ISTQB tags sit on every
   exam question, the WCAG audit is this site's own, Claude runs through
   Module 8, and the automation modules build in Playwright and Cypress. */
.cred-band {
  margin: 30px 0 0; padding: 28px 26px;
  border: 1px solid rgba(22,198,230,.28); border-radius: 10px;
  background: linear-gradient(160deg, rgba(22,198,230,.06), transparent 62%);
  position: relative; z-index: 1;
}
.cb-kick {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin: 0 0 24px;
}
.cred-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 26px 30px; }
.cred-item { display: flex; align-items: center; gap: 16px; }
.cred-item svg { width: 64px; height: 64px; flex: none; }
.cred-text { display: flex; flex-direction: column; min-width: 0; }
.cred-name { font-family: var(--display-hd); font-weight: 700; font-size: 23px; color: #fff; line-height: 1.1; letter-spacing: -.01em; }
.cred-sub { font-size: 12px; color: var(--ink-mute); line-height: 1.45; margin-top: 5px; }
.cred-foot {
  margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-mute); line-height: 1.6;
}
.cred-foot b { color: var(--green); font-weight: 700; }
@media (max-width: 760px) {
  .cred-band { padding: 22px 20px; }
  .cred-item svg { width: 54px; height: 54px; }
  .cred-name { font-size: 20px; }
}
@media (max-width: 900px) { .cert-preview { max-width: 340px; margin: 24px auto 0; } }

/* ───────── landing page, field-manual rebuild ─────────
   Everything below reuses the existing token system -- no new colors,
   fonts, or spacing scales. New classes only where no existing
   component fits (module cards, ghost CTA, section kickers). */
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 26px 0 14px; position: relative; z-index: 1; }
a.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink-mute); border: 1px solid var(--line);
  font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 14px 22px; border-radius: 4px;
  transition: color .15s ease, border-color .15s ease;
}
a.btn-ghost:hover { color: #fff; border-color: var(--ink-mute); }
.section-kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan); margin: 0; display: flex; align-items: center; gap: 8px;
}
.module-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; }
.module-card {
  display: block; padding: 18px 20px;
  border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  background: rgba(255,255,255,.015);
  transition: border-color .15s ease, background .15s ease;
}
.module-card:hover { border-color: rgba(22,198,230,.5); border-left-color: var(--cyan); background: rgba(22,198,230,.05); }
.module-card .mc-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.module-card h3 { font-family: var(--display-hd); font-weight: 700; font-size: 17px; color: #fff; margin: 8px 0 6px; line-height: 1.3; }
.module-card p { font-size: 13.5px; line-height: 1.55; color: var(--ink-mute); margin: 0; }
.badge-pass {
  display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.12em; padding: 5px 10px; border-radius: 3px;
  background: rgba(52,211,153,.14); color: var(--green); border: 1px solid rgba(52,211,153,.4);
}
.badge-line { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; flex-wrap: wrap; }
#curriculum, #enroll { scroll-margin-top: 80px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}
@media (max-width: 760px) {
  .module-grid { grid-template-columns: 1fr; }
  .cta-row .btn-primary, .cta-row .btn-ghost { flex: 1 1 auto; }
}

/* ───────── nudge toward the email field ───────── */
.email-nudge { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 10px 0 -2px; text-align: center; }
.nudge-label { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.nudge-chev { color: var(--cyan); animation: nudgeBob 1.6s ease-in-out infinite; }
@keyframes nudgeBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .nudge-chev { animation: none; } }

/* ───────── email gate form ───────── */
.gate-form { margin: 32px 0 12px; padding: 24px; background: var(--bg-1); border: 1px solid var(--panel-edge); }
.gate-row { display: flex; gap: 12px; flex-wrap: wrap; }
.gate-row input[type="email"], .gate-row input[type="text"] {
  flex: 1 1 240px; background: var(--bg-0); border: 1px solid var(--line); color: #fff;
  padding: 14px 16px; border-radius: 4px; font-size: 15px; font-family: var(--display);
}
.gate-row input::placeholder { color: var(--ink-dim); }
.gate-row input:focus { outline: none; border-color: var(--cyan); }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--cyan); color: var(--bg-0); border: none; cursor: pointer;
  font-family: var(--mono); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 14px 22px; border-radius: 4px;
  transition: background .15s ease, transform .15s ease;
}
.btn-primary:hover { background: #fff; transform: translateY(-1px); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
/* .gate-form .gate-note needs the extra specificity: on the landing page the
   form sits inside a .lesson section, whose `.lesson p { margin: 0 0 14px }`
   would otherwise zero out this top margin and butt the note against the
   input row. */
.gate-form .gate-note { margin: 18px 0 0; font-size: 12.5px; color: var(--ink-dim); }
.gate-error { display: none; margin-top: 10px; font-size: 13px; color: var(--red); }
.sources-link { display: inline-block; margin-top: 16px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-mute); border-bottom: 1px dotted var(--ink-dim); }
.sources-link:hover { color: var(--cyan); border-color: var(--cyan); }

/* ───────── lesson body ───────── */
.lesson { padding: 12px 0 40px; }
.lesson h2 {
  font-family: var(--display-hd); font-weight: 700; font-size: clamp(22px, 3vw, 30px);
  color: #fff; margin: 48px 0 16px; letter-spacing: -0.01em; position: relative;
  padding-top: 18px;
}
.lesson h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 42px; height: 2px; background: var(--cyan);
}
.lesson h2:first-child { margin-top: 0; padding-top: 0; }
.lesson h2:first-child::before { display: none; }
.lesson h3 { font-family: var(--display-hd); font-weight: 600; font-size: 18px; color: var(--cyan); margin: 26px 0 10px; }
.lesson p { color: #cdd9ec; font-size: 16px; line-height: 1.65; margin: 0 0 14px; max-width: 680px; }
.lesson p strong { color: #fff; font-weight: 600; }
.lesson ul.plain, .lesson ol.plain { margin: 0 0 16px; padding-left: 20px; max-width: 680px; }
.lesson ul.plain li, .lesson ol.plain li { color: #cdd9ec; font-size: 15.5px; line-height: 1.6; margin-bottom: 8px; }
.lesson ul.plain li strong, .lesson ol.plain li strong { color: #fff; }
.hook { font-style: italic; color: #aebfd8; font-size: 17px; margin: 0 0 18px; max-width: 680px; }

/* ───────── terminal-styled prompt block ("Try It Yourself") ───────── */
.terminal {
  background: #0a1120; border: 1px solid var(--panel-edge); border-radius: 6px;
  margin: 22px 0; max-width: 680px; overflow: hidden;
  box-shadow: 0 20px 40px -28px rgba(0,0,0,.6);
}
.terminal-chrome {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: #0d1626; border-bottom: 1px solid var(--panel-edge);
}
.terminal-dots { display: flex; gap: 6px; }
.terminal-dots span { width: 9px; height: 9px; border-radius: 50%; background: #2c3f5c; }
.terminal-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim);
}
.terminal-copy {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-mute); background: transparent; border: 1px solid var(--line);
  border-radius: 3px; padding: 5px 10px; cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.terminal-copy:hover { color: var(--cyan); border-color: rgba(22,198,230,.5); }
.terminal-copy.copied { color: var(--green); border-color: rgba(52,211,153,.5); }
.terminal-body { padding: 16px 18px; font-family: var(--mono); font-size: 13px; line-height: 1.6; color: #dfe9f5; }
.terminal-body pre { margin: 0; white-space: pre-wrap; font: inherit; color: inherit; }
.terminal-body .caret::after {
  content: "▍"; color: var(--cyan); animation: caretBlink 1.1s step-end infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
.try-it-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan); margin: 0 0 8px; display: flex; align-items: center; gap: 8px;
}

/* gated terminal prompt — same fade-teaser idea as the guide preview pages
   (pdf-brand.css .fade-teaser / .lock-gate), adapted to the terminal's dark
   chrome. Only 2-3 real lines of the prompt are in the DOM -- the fade is
   a finishing touch, not the only thing hiding the rest. */
.gated-pre { max-height: 74px; overflow: hidden; position: relative; }
.gated-pre pre {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 96%);
}
.terminal-gate {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--panel-edge);
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-mute); line-height: 1.5;
}
.terminal-gate a { color: var(--cyan); font-weight: 700; }
.terminal-gate a:hover { color: #fff; }
.try-it-note { font-size: 13.5px; color: var(--ink-mute); margin: 8px 0 0; max-width: 680px; }

/* ───────── spec-sheet tables ───────── */
.spec-table { width: 100%; border-collapse: collapse; margin: 18px 0; max-width: 680px; }
.spec-table th {
  text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bg-0); background: var(--cyan);
  padding: 10px 12px;
}
.spec-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px; color: #cdd9ec; }
.spec-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.03); }
.spec-table td.mono { font-family: var(--mono); color: var(--cyan); font-size: 12.5px; }
.skill-table { width: 100%; border-collapse: collapse; margin: 16px 0; max-width: 680px; } /* legacy alias */
.skill-table th, .skill-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px; color: #cdd9ec; }
.skill-table th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }

/* ───────── contrast cards: PASS / FAIL ───────── */
.contrast-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; max-width: 680px; }
.contrast-card {
  border: 1px solid var(--line); border-top: 3px solid var(--red); padding: 18px 18px 20px;
  background: rgba(255,255,255,.02);
}
.contrast-card.pass { border-top-color: var(--green); }
.contrast-badge {
  display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.12em; padding: 4px 9px; border-radius: 3px; margin-bottom: 12px;
  background: rgba(255,107,107,.14); color: var(--red); border: 1px solid rgba(255,107,107,.4);
}
.contrast-card.pass .contrast-badge { background: rgba(52,211,153,.14); color: var(--green); border-color: rgba(52,211,153,.4); }
.contrast-card p, .contrast-card .cc-body { font-size: 14px; line-height: 1.55; color: #c4d2e8; margin: 0; }
.contrast-card .cc-body { font-family: var(--mono); font-size: 12.5px; }
@media (max-width: 620px) { .contrast-pair { grid-template-columns: 1fr; } }

/* ───────── numbered step cards ───────── */
.step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 22px 0; max-width: 680px; }
.step-card { border: 1px solid var(--line); padding: 20px; position: relative; background: rgba(255,255,255,.015); }
.step-card .step-num {
  font-family: var(--display-hd); font-weight: 700; font-size: 34px; color: var(--cyan);
  opacity: .85; line-height: 1; margin-bottom: 10px;
}
.step-card h4 { font-family: var(--display); font-weight: 700; font-size: 15.5px; color: #fff; margin: 0 0 6px; }
.step-card p { font-size: 13.5px; line-height: 1.5; color: var(--ink-mute); margin: 0; }

/* ───────── stat cards ───────── */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 22px 0; max-width: 680px; }
.stat-card { border: 1px solid var(--panel-edge); border-top: 2px solid var(--cyan); padding: 16px 16px 14px; text-align: left; }
.stat-card .stat-num { font-family: var(--display-hd); font-weight: 700; font-size: 30px; color: #fff; line-height: 1; }
.stat-card .stat-cap { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-dim); text-transform: uppercase; margin-top: 6px; line-height: 1.4; }

/* ───────── sandbox challenge box ───────── */
.sandbox {
  margin: 32px 0; padding: 26px 28px; border: 1px solid rgba(22,198,230,.35);
  background: linear-gradient(160deg, rgba(22,198,230,.06), transparent 60%);
  position: relative;
}
.sandbox-label {
  font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cyan); display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.sandbox-label .n { border: 1px solid var(--cyan); padding: 2px 8px; border-radius: 3px; }
.sandbox h4 { font-family: var(--display-hd); font-size: 19px; color: #fff; margin: 0 0 10px; }
.sandbox p { color: #c4d2e8; font-size: 15px; line-height: 1.6; margin: 0 0 12px; max-width: 600px; }
.sandbox .sandbox-proof {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-mute); margin-top: 14px;
  padding-top: 14px; border-top: 1px dashed var(--line);
}

/* ───────── what you learned ───────── */
.learned {
  margin: 32px 0; padding: 26px 28px; max-width: 680px;
  border: 1px solid var(--panel-edge); border-left: 3px solid var(--cyan);
  background: rgba(255,255,255,.015);
}
.learned .learned-label {
  font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 16px;
}
.learned p { color: #c4d2e8; font-size: 15px; line-height: 1.65; margin: 0 0 14px; }
.learned p:last-of-type { margin-bottom: 0; }
.learned .learned-list { margin: 0 0 14px; padding-left: 20px; }
.learned .learned-list li { color: #c4d2e8; font-size: 15px; line-height: 1.6; margin-bottom: 6px; }
.learned .learned-list li strong, .learned p strong { color: #fff; font-weight: 600; }
.learned .check-yourself { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line); }
.learned .check-yourself p { color: #fff; font-weight: 500; margin: 0; }
.learned .check-yourself .cy-label {
  font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cyan); margin-right: 8px;
}

/* ───────── recap + up next ───────── */
.recap-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 20px 0 28px; max-width: 680px; }
.recap-card { border: 1px solid var(--line); padding: 16px; }
.recap-card .rc-check { font-family: var(--mono); color: var(--green); font-weight: 700; margin-right: 6px; }
.recap-card p { font-size: 14px; color: #dce6f4; margin: 0; line-height: 1.5; }
.up-next {
  margin: 24px 0 8px; padding: 22px 24px; border: 1px solid var(--panel-edge); background: var(--bg-1);
  max-width: 680px;
}
.up-next .un-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-dim); text-transform: uppercase; margin-bottom: 8px; }
.up-next h4 { font-family: var(--display-hd); font-size: 18px; color: #fff; margin: 0 0 10px; }
.up-next ul { list-style: none; margin: 0; padding: 0; }
.up-next li { font-size: 14px; color: var(--ink-mute); padding: 5px 0 5px 16px; position: relative; }
.up-next li::before { content: "—"; position: absolute; left: 0; color: var(--cyan); }

/* ───────── callout component, 3 variants ───────── */
.callout-box {
  margin: 28px 0; padding: 22px 24px; max-width: 680px;
  border-left: 4px solid var(--cyan);
  background: linear-gradient(160deg, rgba(22,198,230,.08), rgba(22,198,230,.02));
}
.callout-box .cb-kicker { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.callout-box h4 { font-family: var(--display-hd); font-weight: 700; font-size: 19px; color: #fff; margin: 0 0 10px; }
.callout-box p { color: #c4d2e8; font-size: 15px; line-height: 1.6; margin: 0 0 14px; max-width: 560px; }
.callout-box .cb-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-weight: 700; font-size: 13px;
  letter-spacing: 0.03em; color: var(--cyan);
  border: 1px solid rgba(22,198,230,.5); border-radius: 4px; padding: 10px 16px;
  transition: background .15s ease, color .15s ease;
}
.callout-box .cb-cta:hover { background: var(--cyan); color: var(--bg-0); }

.callout-box.guide-3 { border-left-color: #3d8bff; background: linear-gradient(160deg, rgba(61,139,255,.08), rgba(61,139,255,.02)); }
.callout-box.guide-3 .cb-kicker, .callout-box.guide-3 .cb-cta { color: #6fa8ff; border-color: rgba(111,168,255,.5); }
.callout-box.guide-3 .cb-cta:hover { background: #6fa8ff; color: var(--bg-0); }

.callout-box.qasmith { border-left-color: var(--green); background: linear-gradient(160deg, rgba(52,211,153,.10), rgba(52,211,153,.02)); }
.callout-box.qasmith .cb-kicker, .callout-box.qasmith .cb-cta { color: var(--green); border-color: rgba(52,211,153,.5); }
.callout-box.qasmith .cb-cta:hover { background: var(--green); color: #06210f; }

/* the automation module's qasmith callout: primary conversion point,
   most visually prominent element on the site -- must stay that way
   through every redesign pass */
.callout-box.qasmith.primary {
  padding: 40px 44px; border-left-width: 6px;
  background: linear-gradient(160deg, rgba(52,211,153,.18), rgba(52,211,153,.04));
  box-shadow: 0 30px 60px -30px rgba(52,211,153,.4);
  max-width: 100%;
}
.callout-box.qasmith.primary .cb-kicker { font-size: 13px; }
.callout-box.qasmith.primary h4 { font-size: 30px; }
.callout-box.qasmith.primary p { font-size: 17px; max-width: 640px; }
.callout-box.qasmith.primary .cb-cta { font-size: 15px; padding: 14px 24px; background: var(--green); color: #06210f; }
.callout-box.qasmith.primary .cb-cta:hover { background: #fff; }

/* before/after panels inside the qasmith primary callout: stylized code
   representations until the real screenshots are captured -- swap each
   .ba-shot's inner content for an <img> when the assets exist */
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 20px; }
.ba-badge {
  display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 10.5px;
  letter-spacing: .1em; padding: 3px 8px; border-radius: 3px; margin-bottom: 8px;
  background: rgba(255,180,84,.15); color: var(--amber); border: 1px solid rgba(255,180,84,.45);
}
.ba-panel.after .ba-badge { background: rgba(52,211,153,.15); color: var(--green); border-color: rgba(52,211,153,.45); }
.ba-shot { background: #0a1120; border: 1px solid var(--panel-edge); border-radius: 6px; overflow: hidden; }
.ba-panel.after .ba-shot { border-color: rgba(52,211,153,.3); }
.ba-chrome { padding: 7px 12px; background: #0d1626; border-bottom: 1px solid var(--panel-edge); font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-dim); }
.ba-shot pre { margin: 0; padding: 12px 14px; font-family: var(--mono); font-size: 11.5px; line-height: 1.65; color: #dfe9f5; overflow-x: auto; }
.ba-shot pre .dir { color: var(--cyan); }
.ba-cap { padding: 8px 12px; border-top: 1px dashed var(--panel-edge); font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); line-height: 1.5; }
@media (max-width: 620px) { .ba-pair { grid-template-columns: 1fr; } }

/* ───────── module nav ───────── */
.module-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.module-nav .prev { color: var(--ink-mute); font-family: var(--mono); font-size: 13px; }
.module-nav .prev:hover { color: #fff; }
.module-nav .next {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cyan); color: var(--bg-0);
  font-family: var(--mono); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 14px 22px; border-radius: 4px;
  transition: background .15s ease, transform .15s ease;
}
.module-nav .next:hover { background: #fff; transform: translateY(-1px); }
.progress-dots { display: flex; gap: 6px; }
.progress-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.progress-dots span.done { background: var(--cyan); }
.progress-dots span.current { background: #fff; }

/* ───────── quiz ───────── */
.quiz { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.quiz-intro { text-align: center; max-width: 520px; margin: 0 auto 32px; }
.quiz-intro h2 { margin-top: 0; }
.quiz-progress { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.quiz-q { display: none; }
.quiz-q.active { display: block; }
.quiz-q h3 { color: #fff; font-size: 19px; font-weight: 600; margin: 0 0 18px; max-width: 640px; }
.quiz-options { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.quiz-option {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
  font-size: 15px; color: #dce6f4;
}
.quiz-option:hover { border-color: rgba(22,198,230,.5); }
.quiz-option input { accent-color: var(--cyan); }
.quiz-option.selected { border-color: var(--cyan); background: rgba(22,198,230,.08); }
.quiz-nav { display: flex; justify-content: space-between; gap: 12px; }
.btn-secondary {
  background: transparent; color: var(--ink-mute); border: 1px solid var(--line);
  font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: 0.03em;
  padding: 12px 18px; border-radius: 4px; cursor: pointer;
}
.btn-secondary:hover { color: #fff; border-color: var(--ink-mute); }
.btn-secondary:disabled { opacity: .4; cursor: not-allowed; }

/* results screen */
.quiz-results { display: none; }
.quiz-results.active { display: block; }
.result-score { text-align: center; padding: 32px 0; }
.result-score .big { font-family: var(--display-hd); font-weight: 700; font-size: 56px; color: #fff; }
.result-score .big.pass { color: var(--green); }
.result-score .big.fail { color: var(--amber); }
.result-score .label { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); margin-top: 8px; }
.review-list { list-style: none; margin: 24px 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.review-item { padding: 16px 18px; border: 1px solid var(--line); }
.review-item.correct { border-left: 3px solid var(--green); }
.review-item.incorrect { border-left: 3px solid var(--amber); }
.review-item .rq { color: #fff; font-size: 14.5px; margin-bottom: 8px; }
.review-item .ra { color: #cdd9ec; font-size: 14px; margin-bottom: 6px; }
.review-item .rc { font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); letter-spacing: 0.04em; }

/* ───────── certificate (three-zone, guide-cover derived) ───────── */
.cert-gate { text-align: center; padding: 24px 0; }
.cert-gate input[type="text"] { max-width: 320px; margin: 0 auto; display: block; }

/* gold treatment matching the landing page's .cert-preview mockup, so the
   certificate a passer receives is the one the landing page promised */
#certificate {
  margin: 32px auto; max-width: 860px; aspect-ratio: 1.5; width: 100%;
  /* solid background-color under the gradients: print engines strip
     background images (gradients) far more readily than solid colors,
     and without this the certificate prints as white text on white */
  background-color: #0d2245;
  background-image:
    radial-gradient(140% 120% at 50% 45%, transparent 55%, rgba(0,0,0,.4) 100%),
    radial-gradient(120% 90% at 20% 0%, rgba(255,210,74,.10), transparent 60%),
    linear-gradient(155deg, #123058 0%, #0d2245 55%, #0a1a31 100%);
  border: 1px solid rgba(255,210,74,.35); border-radius: 8px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.03);
  position: relative; padding: 40px 48px;
  display: flex; flex-direction: column; justify-content: space-between;
}
#certificate::before {
  content: ""; position: absolute; inset: 16px; pointer-events: none;
  border: 1px solid rgba(255,210,74,.25); border-radius: 5px;
  /* #certificate carries .framed, whose ::before paints cyan corner
     brackets via background gradients at 55% opacity -- neutralize both
     so only the gold inner frame shows */
  background: none; opacity: 1;
}
.cert-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cert-top .cert-mk {
  width: 34px; height: 34px; border: 1.5px solid var(--gold); color: var(--gold);
  font-family: var(--mono); font-weight: 700; font-size: 15px; display: grid; place-items: center;
  border-radius: 50%; flex: none;
}
.cert-eyebrow {
  font-family: var(--mono); font-size: 17px; font-weight: 700; letter-spacing: 0.24em;
  color: var(--gold); text-transform: uppercase; margin-top: 10px;
}
.cert-meta-block { text-align: right; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-dim); text-transform: uppercase; line-height: 1.6; }
.cert-mid { text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cert-title {
  font-family: var(--display-hd); font-weight: 700; font-size: clamp(24px, 3.4vw, 34px);
  color: #fff; line-height: 1.1; margin: 0;
}
.cert-title .cy { color: var(--gold); }
.cert-certifies {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim); margin: 30px 0 0;
}
.cert-name {
  font-family: var(--display-hd); font-weight: 700; font-size: clamp(30px, 5vw, 46px);
  color: #fff; margin: 12px 0 16px; line-height: 1.1;
}
.cert-sub { color: var(--ink-mute); font-size: 14px; max-width: 520px; margin: 0 auto; }
/* official-seal touches: the academy lockup below the completion line
   (screen blend melts its navy crop background into the certificate),
   and a huge ghost QA watermark behind the content */
.cert-seal {
  display: block; margin: 18px auto 10px; width: 250px; height: auto;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(105% 95% at 50% 50%, #000 55%, transparent 96%);
  mask-image: radial-gradient(105% 95% at 50% 50%, #000 55%, transparent 96%);
}
.cert-watermark {
  position: absolute; inset: 20px; pointer-events: none;
  background: url("/course/assets/qa-shield.png") center 58% / auto 92% no-repeat;
  opacity: .07;
}
.cert-bottom {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  border-top: 1px solid rgba(255,210,74,.3); padding-top: 16px; flex-wrap: wrap;
}
.cert-bottom .cb-left, .cert-bottom .cb-right { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-dim); line-height: 1.6; }
/* issuer is the credential's authority line -- white and bold so it reads
   at a glance, matching the emphasis of the recipient name above it */
.cert-bottom .cb-left { font-size: 13px; font-weight: 700; color: #fff; }
.cert-bottom .cb-right { text-align: right; }
.cert-bottom .cb-center { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-mute); text-transform: uppercase; }
#cert-print-btn { margin: 0 auto; display: block; }

@media (max-width: 760px) {
  #certificate { aspect-ratio: auto; padding: 30px 24px; }
  /* the wide letter-spacing breaks "COMPLETION" mid-word at narrow
     widths -- tighten it enough to stay on one line */
  .cert-eyebrow { letter-spacing: 0.08em; font-size: 13px; white-space: nowrap; }
  .cert-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cert-bottom .cb-right { text-align: left; }
}

/* ───────── sources table ───────── */
/* the citation column is intentionally nowrap (a broken-mid-citation wrap
   reads worse than a scrollbar) -- so on narrow screens the table itself
   scrolls horizontally instead of forcing the whole page to */
.table-scroll { overflow-x: auto; margin: 24px 0; -webkit-overflow-scrolling: touch; }
.sources-table { width: 100%; border-collapse: collapse; margin: 0; }
.sources-table th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bg-0); background: var(--cyan); padding: 12px; }
.sources-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: #cdd9ec; line-height: 1.5; vertical-align: top; }
.sources-table td.src-guide { font-family: var(--mono); color: var(--cyan); font-size: 13px; white-space: nowrap; }

/* ───────── footer ───────── */
footer { border-top: 1px solid var(--line); padding: 40px 0 60px; margin-top: 40px; }
footer .foot-links { display: flex; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 12.5px; color: var(--ink-mute); }
footer .foot-links a:hover { color: var(--cyan); }
footer .foot-copy { margin-top: 16px; font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }

/* ───────── responsive ───────── */
@media (max-width: 760px) {
  .hero { padding: 40px 0 8px; }
  .hero .ghost-num { font-size: clamp(90px, 30vw, 160px); }
  /* flex-basis tracks the MAIN axis, which flips from horizontal to
     vertical the moment flex-direction becomes column -- the 240px meant
     as the input's width above became its height here instead, ballooning
     it into a giant box. Reset the basis so width/height revert to the
     input's own natural sizing. */
  .gate-row { flex-direction: column; }
  .gate-row input[type="email"], .gate-row input[type="text"] { flex-basis: auto; width: 100%; }
  .gate-row .btn-primary { width: 100%; }
  .module-nav { flex-direction: column; align-items: stretch; }
  .module-nav .next { justify-content: center; }
  .callout-box.qasmith.primary { padding: 26px 22px; }
  .callout-box.qasmith.primary h4 { font-size: 22px; }
  .step-grid, .stat-row, .recap-row { grid-template-columns: 1fr 1fr; }
  .sandbox { padding: 20px 18px; }
  .learned { padding: 20px 18px; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
  .nav-inner { padding: 0 18px; }
  .step-grid, .stat-row, .recap-row, .hero-split .stat-row { grid-template-columns: 1fr; }
}

/* ───────── exam report: review explanations + standards tags ───────── */
.review-item .rya { color: var(--amber); font-size: 14px; margin-bottom: 6px; }
.review-item .rw { color: #aebfd8; font-size: 13.5px; line-height: 1.6; margin-bottom: 8px; }
.review-item .rstd {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  color: var(--ink-mute); border: 1px solid var(--line); border-radius: 3px;
  padding: 2px 8px; margin-left: 10px;
}
.istqb-note { font-size: 12px; color: var(--ink-dim); line-height: 1.55; max-width: 640px; margin: 18px 0 0; }
.print-only { display: none; }

/* ───────── print: exam report styling ─────────
   Which elements print at all is decided by module-8's inline print
   block (certificate full-bleed on page 1, report after). This block
   only recolors the report: browsers strip background colors by
   default, so the dark theme's white text would print invisibly on
   white paper. The certificate itself keeps its dark design via
   print-color-adjust in the inline block -- don't recolor it here. */
@media print {
  body { background: #fff !important; color: #111; }
  .quiz { margin: 0; padding: 0; border: none; }

  .print-only { display: block; font-family: var(--mono); font-size: 12px; color: #111; line-height: 1.7; padding-bottom: 12px; border-bottom: 2px solid #0a1a31; }
  .result-score .big, .result-score .big.pass, .result-score .big.fail { color: #0a1a31 !important; }
  .result-score .label { color: #444 !important; }
  .review-item { border-color: #bbb; page-break-inside: avoid; }
  .review-item.correct { border-left-color: #1d7a4f; }
  .review-item.incorrect { border-left-color: #b06a10; }
  .review-item .rq { color: #111 !important; }
  .review-item .ra { color: #222 !important; }
  .review-item .rya { color: #b06a10 !important; }
  .review-item .rw { color: #333 !important; }
  .review-item .rc { color: #555 !important; }
  .review-item .rstd { color: #555 !important; border-color: #bbb; }
  .istqb-note { color: #555 !important; }
}