:root {
  --ink: #172c29;
  --muted: #52615e;
  --green: #155947;
  --green-dark: #0c4434;
  --blue: #235fb5;
  --line: #d7dfdc;
  --paper: #fff;
  --soft: #f2f6f4;
  --amber: #a36915;
  --radius: 6px;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}
* {
  box-sizing: border-box;
  letter-spacing: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 124px;
}
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  background: var(--paper);
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--green);
}
img {
  max-width: 100%;
  display: block;
}
svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  line-height: 1.14;
  font-weight: 600;
}
h1,
h2 {
  text-wrap: balance;
}
h1 {
  font-family: var(--serif);
  font-size: 60px;
  font-weight: 400;
  max-width: 680px;
}
h2 {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
}
h3 {
  font-size: 20px;
  line-height: 1.35;
}
p + p {
  margin-top: 16px;
}
p {
  color: var(--muted);
}
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}
::selection {
  background: #cce4d8;
}
section {
  scroll-margin-top: 0;
}
[hidden] {
  display: none !important;
}
.container {
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
}
.narrow {
  max-width: 820px;
}
.section {
  padding: 76px 0;
}
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.muted {
  color: var(--muted);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  background: #fff;
  padding: 12px 20px;
  z-index: 1000;
}
.skip-link:focus {
  top: 8px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--green);
  border: 1px solid var(--green);
  color: #fff;
  padding: 14px 22px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 650;
  min-height: 48px;
  text-align: center;
  line-height: 1.4;
}
.button:hover {
  background: var(--green-dark);
  color: #fff;
}
.button:disabled {
  background: #e0e6e3;
  border-color: #d7dfdc;
  color: #54625d;
}
.button.secondary {
  background: transparent;
  color: var(--green);
}
.button.small {
  padding: 10px 16px;
  min-height: 42px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--green);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}
.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.nav {
  height: 76px;
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 24px;
  font-weight: 750;
  color: var(--ink);
}
.brand svg {
  width: 26px;
  height: 26px;
  color: var(--green);
}
.brand-dot {
  color: var(--green);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 550;
}
.nav-links a {
  display: flex;
  gap: 3px;
  align-items: center;
  min-height: 42px;
}
.nav-links svg {
  width: 15px;
  height: 15px;
}
.nav-toggle {
  display: none;
}

.language-switch {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  font-size: 12px;
}
.language-switch a {
  display: grid;
  place-items: center;
  min-width: 32px;
  min-height: 36px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.language-switch a[aria-current="page"] {
  border-bottom-color: currentColor;
  font-weight: 700;
}
html[lang="en"] .hero h1 {
  overflow-wrap: break-word;
}
.icon-button {
  background: none;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.hero {
  position: relative;
  isolation: isolate;
  min-height: 490px;
  overflow: hidden;
  background: #eef2f3;
}
/* SPLIT HERO, NOT AN OVERLAY. A screenshot behind the headline reads as a watermark — two layers
   of text competing — no matter how the scrim is tuned. The product now sits beside the copy at full
   opacity, framed like a window. Copy stays on the left, where NN/g eyetracking puts 69% of viewing
   time; the product occupies the right half and is read as evidence rather than decoration. */
.hero-image {
  position: absolute;
  top: 50%;
  right: max(24px, calc((100vw - 1180px) / 2));
  transform: translateY(-50%);
  width: min(44%, 580px);
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: left center;
  border: 1px solid rgba(23, 44, 41, .12);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(23, 44, 41, .16);
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: 1;
}
@media (max-width: 980px) {
  /* Below the split threshold the image would crowd the copy; the demo section carries it instead. */
  .hero-image { display: none; }
}

/* THE HERO IMAGE IS NOW THE PRODUCT, NOT A PROP. The stock desk photo it replaced had a large empty
   left side, which is what made the overlaid copy readable — a real screenshot is busy everywhere,
   so the headline collided with a SQL console. This scrim restores that reading surface: the copy
   side fades to the hero background, the right side keeps the lab visible. */
@media (max-width: 820px) {
  /* Single column: the copy sits over the whole image, so the scrim has to cover it all. */
  }
.hero-inner {
  min-height: 490px;
  display: flex;
  align-items: center;
}
.hero-copy {
  padding: 54px 0 60px;
  max-width: 590px;
  width: 52%;
}
.hero-lead {
  font-size: 18px;
  line-height: 1.7;
  max-width: 540px;
  margin-top: 24px;
  color: #334942;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.hero-note {
  font-size: 12px;
  margin-top: 18px;
  max-width: 440px;
  color: #4b5e56;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
}
.image-caption {
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-size: 10px;
  color: #33443e;
  background: rgba(255, 255, 255, 0.88);
  padding: 2px 8px;
}
.fact-band {
  border-bottom: 1px solid var(--line);
}
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding-block: 24px;
}
.facts > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--line);
  padding-right: 10px;
}
.facts > div:last-child {
  border: 0;
}
.facts span {
  font-size: 11px;
  text-transform: uppercase;
  color: #68716e;
}
.facts strong {
  font-size: 14px;
  font-weight: 600;
}
.facts:has(> div:nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}
/* The flagship band carries a fifth fact (planned start). Without this it wraps to a second row
   holding one lonely item, which reads as a layout bug rather than a deliberate row. */
.facts:has(> div:nth-child(5):last-child) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.breadcrumb {
  padding-block: 13px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
}
.breadcrumb span:last-child {
  color: var(--ink);
}
.section-heading {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: end;
  gap: 70px;
  margin-bottom: 36px;
}
.section-heading p {
  max-width: 480px;
}
.section-heading .eyebrow {
  margin-bottom: 14px;
}
.flagship {
  border-bottom: 1px solid var(--line);
  background: #f9fbfa;
}
.flagship-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;
  align-items: start;
}
.flagship-copy h2 {
  max-width: 500px;
}
.flagship-lead {
  margin-top: 22px;
  font-size: 16px;
}
.flagship-highlights {
  margin: 28px 0;
  padding: 0;
  list-style: none;
}
.flagship-highlights li {
  display: flex;
  gap: 14px;
  margin: 18px 0;
  font-size: 14px;
  color: var(--muted);
}
.flagship-highlights svg {
  color: var(--green);
  margin-top: 4px;
}
.flagship-highlights strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 3px;
}
.flagship-offer {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.flagship-offer > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flagship-offer span {
  font-size: 11px;
  color: var(--muted);
}
.flagship-offer strong {
  font-size: 28px;
  color: var(--green);
  white-space: nowrap;
}
.flagship-offer small {
  font-size: 12px;
  font-weight: 400;
}
.flagship-evidence {
  border-left: 1px solid var(--line);
  padding-left: 42px;
}
.flagship-evidence h3 {
  font-size: 24px;
  line-height: 1.45;
  margin-bottom: 24px;
}
.flagship-evidence-note {
  margin-top: 22px;
  font-size: 12px;
  line-height: 1.7;
}
.flagship-process {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.flagship-process > p {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 650;
}
.flagship-process ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.flagship-process li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-left: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.flagship-process li:first-child {
  padding-left: 0;
  border-left: 0;
}
.flagship-process svg {
  color: var(--green);
  width: 18px;
  height: 18px;
}
.catalog-controls {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.filters label {
  position: relative;
  cursor: pointer;
}
.filters input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.filters span {
  display: block;
  padding: 9px 13px;
  font-size: 12px;
  border-radius: 4px;
  line-height: 1.5;
  pointer-events: none;
}
.filters input:checked + span {
  background: var(--green);
  color: white;
}
.filters input:focus-visible + span {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.search-field {
  position: relative;
  display: flex;
  align-items: center;
}
.search-field svg {
  position: absolute;
  left: 12px;
  color: #68736e;
  width: 18px;
}
.search-field input {
  width: 260px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px 10px 39px;
  background: #fff;
  font-size: 13px;
  color: var(--ink);
}
.results-count {
  font-size: 12px;
  margin: 16px 0;
  color: #65716b;
}
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 28px;
}
#szkolenia,
.related-section {
  background: #f5f7f6;
}
.course-card {
  border: 2px solid #bdcbc5;
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 2px 5px #172c2910,
    0 10px 24px #172c2917;
  display: flex;
  flex-direction: column;
  min-width: 0;
  scroll-margin-top: 100px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.course-card:hover,
.course-card:focus-within {
  border-color: var(--card-accent);
  box-shadow:
    0 3px 8px #172c291a,
    0 14px 28px #172c2924;
}
.card-head {
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #637069;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.card-meta > span:last-child {
  margin-left: auto;
  color: var(--card-accent);
}
.course-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--card-accent);
  border-radius: 4px;
}
.course-icon svg {
  width: 18px;
  height: 18px;
}
.mini-status {
  margin-left: auto;
  color: #8b6419;
  font-size: 10px;
}
.course-card h3 {
  font-size: 20px;
  min-height: 48px;
  line-height: 1.2;
}
.course-card > p {
  font-size: 13px;
  line-height: 1.65;
  margin: 14px 20px 18px;
}
.card-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 10px;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  border-top: 1px solid #e5eae7;
  padding: 14px 0;
  margin: auto 20px 0;
}
.card-bottom a {
  font-weight: 700;
  color: var(--card-accent);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 42px;
}
.course-card .card-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  min-height: 44px;
  font-weight: 700;
  justify-content: space-between;
  padding: 13px 14px;
  border-radius: 4px;
  background: var(--card-accent);
  color: #fff;
  font-size: 12px;
}
.card-cta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.card-cta:hover {
  filter: brightness(0.9);
}
.card-program:hover {
  text-decoration: underline;
}
.card-bottom svg {
  width: 17px;
}
.no-results {
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}
.no-results p {
  margin: 12px 0 20px;
}
.catalog-more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.catalog-more:has([hidden]) {
  display: none;
}
[data-catalog-toggle] svg {
  transition: transform 0.15s;
}
[data-catalog-toggle][aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.catalog-primary-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin-top: 28px;
  font-size: 14px;
}
.soft-section {
  background: var(--soft);
  border-block: 1px solid var(--line);
}
.path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.path-card {
  padding: 28px;
  border: 1px solid #d7dfdc;
  border-radius: 6px;
  background: #fff;
}
.path-card > svg {
  color: var(--green);
  width: 26px;
  height: 26px;
  margin-bottom: 20px;
}
.path-card p {
  font-size: 14px;
  margin: 16px 0 24px;
}
.ecosystem-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.ecosystem-grid > * {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ecosystem-grid strong {
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ecosystem-grid span {
  font-size: 14px;
  color: var(--muted);
}
.author-section {
  border-block: 1px solid var(--line);
  background: #f8faf9;
}
.author-grid {
  max-width: 880px;
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 60px;
  align-items: start;
}
.author-grid img {
  width: 168px;
  height: 195px;
  object-fit: cover;
  border-radius: 4px;
}
.author-grid p:not(.eyebrow) {
  font-size: 15px;
  margin-top: 20px;
}
.author-grid .text-link {
  margin-top: 24px;
}
.faq {
  margin-top: 30px;
}
.faq details {
  border-bottom: 1px solid var(--line);
}
summary {
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
.faq summary {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
.faq details > p {
  font-size: 14px;
  padding: 0 30px 24px 0;
  line-height: 1.8;
}
details[open] > summary svg {
  transform: rotate(45deg);
}
.waitlist-section {
  background: #123d31;
  color: #fff;
}
.waitlist-section .eyebrow {
  color: #9fd1b9;
}
.waitlist-section p {
  color: #d4e2db;
}
.waitlist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
}
.waitlist-grid h2 {
  font-size: 38px;
  max-width: 510px;
}
.waitlist-grid p:not(.eyebrow) {
  margin-top: 22px;
  font-size: 15px;
}
.waitlist-grid p.muted {
  font-size: 13px;
  color: #bed0c5;
}
.waitlist-form {
  min-width: 0;
}
.form-status {
  background: #ffffff0e;
  border-left: 2px solid #bed4bb;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.65;
  margin-bottom: 18px;
}
.waitlist-form > label,
.waitlist-form fieldset > label:not(.consent) {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
}
.waitlist-form input[type="email"],
.waitlist-form select {
  width: 100%;
  height: 48px;
  border: 1px solid #729283;
  border-radius: 5px;
  padding: 10px 14px;
  background: #fff;
  color: var(--ink);
}
.waitlist-form select {
  margin-bottom: 16px;
}
.waitlist-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.waitlist-form fieldset:disabled input[type="email"] {
  background: #e4ebe7;
  color: #52655d;
  opacity: 1;
}
.consent {
  display: flex;
  align-items: start;
  gap: 10px;
  margin: 17px 0;
  font-size: 12px;
  color: #d3e2d9;
  line-height: 1.65;
}
.consent input {
  margin: 4px 0 0;
  min-width: 17px;
  width: 17px;
  height: 17px;
  accent-color: #1b6a50;
}
.consent a {
  color: #fff;
  text-decoration: underline;
}
.waitlist-form .button {
  width: 100%;
  background: #fff;
  color: #123d31;
  border-color: #fff;
}
.waitlist-form .button:disabled {
  background: #829a8d;
  color: #102f25;
  border-color: #829a8d;
}
.form-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-top: 18px;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.form-contact:hover {
  color: #b7dfcc;
}
.waitlist-grid .form-footnote {
  font-size: 11px;
  line-height: 1.6;
  color: #c2d5c9;
  margin-top: 15px;
}
.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status.is-error {
  border-color: #ffc5b5;
  background: #643324;
  color: #fff3ec;
}
.form-status.is-success {
  border-color: #b6e2c2;
  background: #23513a;
}
.site-footer {
  padding: 40px 0 22px;
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-top p,
.footer-top > a:last-child {
  font-size: 13px;
}
.footer-bottom {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 10px;
  color: #63716b;
  padding-top: 26px;
  margin-top: 28px;
  border-top: 1px solid var(--line);
}
.footer-bottom span:last-child {
  margin-left: auto;
}
.course-nav {
  position: sticky;
  top: 76px;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.course-nav .container {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.course-nav .container::-webkit-scrollbar {
  display: none;
}
.course-nav a {
  font-size: 12px;
  padding: 16px 0;
  display: block;
}
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin-top: 40px;
}
.outcome-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #bad4c6;
  color: var(--green);
  margin-bottom: 20px;
  border-radius: 4px;
}
.outcome-grid h3 {
  font-size: 18px;
}
.outcome-grid p {
  font-size: 14px;
  margin-top: 12px;
}
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}
.check-list,
.plain-list {
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}
.check-list li {
  display: flex;
  gap: 12px;
  align-items: start;
  margin: 14px 0;
  color: var(--muted);
  font-size: 15px;
}
.check-list svg {
  color: var(--green);
  margin-top: 3px;
}
.plain-list li {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  font-size: 15px;
  color: var(--muted);
}
.audience-grid > div + div {
  padding-top: 44px;
}
.language-note {
  font-size: 12px !important;
  background: #e9eef6;
  padding: 16px;
  color: #344e6e;
  margin-top: 22px !important;
  line-height: 1.7;
}
.language-note svg {
  margin-right: 6px;
  width: 17px;
}
.agenda-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}
.agenda-intro {
  position: sticky;
  top: 154px;
}
.agenda-intro p:not(.eyebrow) {
  font-size: 14px;
  margin-top: 20px;
}
.agenda-intro .text-link {
  margin-top: 26px;
}
.agenda {
  border-top: 1px solid var(--line);
}
.agenda details {
  border-bottom: 1px solid var(--line);
}
.agenda summary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: center;
  padding: 19px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
.agenda-number {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: #829187;
}
.agenda summary svg {
  width: 17px;
  height: 17px;
  color: var(--green);
}
.agenda-body {
  padding: 0 32px 22px 42px;
  font-size: 14px;
  line-height: 1.8;
}
.agenda-practice {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.agenda-format {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.agenda-format svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.agenda-practice dl {
  display: grid;
  gap: 14px;
  margin: 14px 0 0;
}
.agenda-practice dl > div {
  min-width: 0;
  padding-left: 14px;
  border-left: 2px solid #b3cabb;
}
.agenda-practice dt {
  font-weight: 650;
  color: #203d31;
}
.agenda-practice dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}
.agenda-label {
  margin: 0 0 22px;
  font-size: 19px;
}
.agenda + .agenda-label {
  margin-top: 36px;
}
.example-section {
  background: #edf3ef;
  border-block: 1px solid var(--line);
}
.example-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}
.example-grid h2 {
  font-size: 34px;
}
.example-grid > div > p:not(.eyebrow) {
  margin-top: 22px;
  font-size: 15px;
}
.document-sample {
  background: #fff;
  border: 1px solid #d0d9d2;
  border-radius: 4px;
  padding: 28px;
  box-shadow: 0 5px 14px #1a3f2510;
}
.document-top {
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #dde4df;
  padding-bottom: 15px;
  margin-bottom: 22px;
  font-size: 11px;
}
.document-top svg {
  color: var(--blue);
}
.document-top span:last-child {
  margin-left: auto;
  font-size: 10px;
  color: #758379;
}
.document-sample h3 {
  font-size: 18px;
}
.document-sample ol {
  list-style: none;
  padding: 0;
  margin: 18px 0;
}
.document-sample li {
  padding: 10px 0;
  border-bottom: 1px solid #e6ebe7;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.document-sample li strong {
  color: var(--green);
}
.document-sample li span {
  color: var(--muted);
}
.example-grid .document-sample > p {
  font-size: 10px !important;
  color: #65726c !important;
  margin-top: 14px !important;
}
.demo-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid #cbd8d0;
  font-size: 12px;
  background: #edf3ef;
}
.demo-content {
  text-align: center;
  padding: 46px 24px;
  max-width: 650px;
  margin: auto;
}
.demo-symbol {
  display: inline-flex;
  color: #498270;
  margin-bottom: 20px;
}
.demo-symbol svg {
  width: 32px;
  height: 32px;
}
.demo-content h3 {
  font-size: 23px;
}
.demo-content p {
  font-size: 14px;
  margin: 16px 0 24px;
}
.related-section h2 {
  margin-bottom: 30px;
}
.path-intro {
  margin-top: 24px;
}
.path-steps {
  list-style: none;
  margin: 44px 0;
  padding: 0;
}
.path-steps li {
  display: flex;
  gap: 25px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.path-steps li > span {
  font-size: 13px;
  color: var(--green);
  padding-top: 4px;
  min-width: 22px;
}
.path-steps p {
  margin-top: 12px;
  font-size: 15px;
}
.path-steps a svg {
  width: 18px;
}
.confirmation {
  min-height: 60vh;
  padding-top: 100px;
}
.confirmation h1 {
  font-size: 48px;
  margin-bottom: 24px;
}
.confirmation .button {
  margin-top: 32px;
}
@media (min-width: 1600px) {
  .hero-image {
    object-position: center 56%;
  }
  .hero-inner {
    min-height: 540px;
  }
  .hero-copy {
    width: 50%;
  }
}
@media (max-width: 1100px) {
  h1 {
    font-size: 50px;
  }
  .nav {
    gap: 20px;
  }
  .nav-links {
    gap: 16px;
  }
  .hero-copy {
    width: 56%;
  }
  .hero-image {
    object-position: 42% center;
  }
  .section-heading {
    gap: 35px;
  }
  .flagship-grid {
    gap: 50px;
  }
  .course-grid {
    gap: 28px 22px;
  }
  .card-meta {
    gap: 6px;
  }
  .mini-status {
    margin-left: 0;
  }
  .waitlist-grid,
  .audience-grid,
  .example-grid {
    gap: 50px;
  }
  .agenda-layout {
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 44px;
  }
  .footer-top {
    flex-wrap: wrap;
  }
  .footer-bottom span:last-child {
    margin-left: 0;
  }
}
@media (max-width: 820px) {
  .container {
    width: calc(100% - 40px);
  }
  .nav {
    height: 64px;
    gap: 10px;
  }
  .brand {
    font-size: 23px;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 14px 24px;
    flex-direction: column;
    align-items: start;
    gap: 6px;
  }
  .nav-links.is-open {
    display: flex;
  }
  .nav-toggle {
    display: flex;
    margin-left: auto;
  }
  .nav-cta {
    display: none;
  }
  .hero-inner {
    min-height: 485px;
  }
  .hero-copy {
    width: 65%;
    padding-block: 45px;
  }
  .hero-image {
    object-position: 30% 48%;
  }
  .hero-lead {
    font-size: 16px;
  }
  .hero-actions {
    gap: 18px;
  }
  .hero-actions .button {
    padding: 12px 16px;
    font-size: 13px;
  }
  h1 {
    font-size: 44px;
  }
  h2 {
    font-size: 34px;
  }
  .section {
    padding: 54px 0;
  }
  .facts {
    gap: 18px;
    padding-block: 20px;
    grid-template-columns: repeat(2, 1fr);
  }
  .facts > div:nth-child(2) {
    border: 0;
  }
  .facts strong {
    font-size: 13px;
  }
  .facts:has(> div:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .facts:has(> div:nth-child(5):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .section-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .section-heading p {
    max-width: none;
  }
  .flagship-grid {
    gap: 35px;
    grid-template-columns: 1fr;
  }
  .flagship-evidence {
    padding: 28px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .path-grid {
    grid-template-columns: 1fr;
  }
  .path-card {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0 15px;
    padding: 24px;
  }
  .path-card > svg {
    grid-row: 1/4;
  }
  .path-card .text-link,
  .path-card p {
    grid-column: 2;
  }
  .path-card p {
    margin: 10px 0 18px;
  }
  .author-grid {
    gap: 30px;
    grid-template-columns: 130px 1fr;
  }
  .author-grid img {
    width: 130px;
    height: 154px;
  }
  .ecosystem-grid {
    gap: 22px;
  }
  .ecosystem-grid strong {
    font-size: 16px;
  }
  .waitlist-grid,
  .audience-grid,
  .example-grid {
    gap: 36px;
    grid-template-columns: 1fr;
  }
  .waitlist-grid h2 {
    font-size: 34px;
  }
  .waitlist-form {
    max-width: 600px;
  }
  .course-nav {
    top: 64px;
  }
  .course-nav .container {
    gap: 24px;
  }
  .outcome-grid {
    gap: 25px;
  }
  .audience-grid > div + div {
    padding-top: 0;
  }
  .agenda-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .agenda-intro {
    position: static;
  }
  .agenda-intro p {
    max-width: 660px;
  }
  .example-grid {
    max-width: 700px;
  }
  .footer-top p {
    display: none;
  }
}
@media (max-width: 540px) {
  .site-header .brand { font-size: 19px; gap: 6px; }
  .site-header .brand svg { width: 22px; height: 22px; }
  .language-switch a { min-width: 28px; min-height: 42px; }
  html {
    scroll-padding-top: 124px;
  }
  .hero-image {
    object-position: 15% 52%;
    opacity: 0.42;
  }
  .hero {
    min-height: 0;
    background: #f0f4f3;
  }
  .hero-inner {
    min-height: 460px;
  }
  .hero-copy {
    width: 100%;
    padding: 37px 0 48px;
    max-width: 430px;
  }
  h1 {
    font-size: 39px;
    line-height: 1.14;
  }
  .hero-lead {
    font-size: 16px;
    line-height: 1.65;
    margin-top: 20px;
  }
  .hero-actions {
    gap: 17px;
    margin-top: 24px;
  }
  .hero-actions .button {
    font-size: 13px;
    min-height: 46px;
  }
  .hero-note {
    font-size: 11px;
    max-width: 310px;
  }
  .eyebrow {
    font-size: 10px;
    margin-bottom: 14px;
  }
  .image-caption {
    font-size: 8px;
    right: 10px;
  }
  .facts:has(> div:nth-child(3):last-child) {
    grid-template-columns: 1fr;
  }
  .facts:has(> div:nth-child(3):last-child) > div {
    border: 0;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
  }
  .facts:has(> div:nth-child(5):last-child) {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .facts:has(> div:nth-child(5):last-child) > div {
    border: 0;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
  }
  .facts {
    font-size: 12px;
    gap: 16px;
  }
  .facts span {
    font-size: 10px;
  }
  .facts strong {
    font-size: 12px;
    line-height: 1.5;
  }
  .facts:has(> div:nth-child(3):last-child) strong {
    font-size: 11px;
    text-align: right;
  }
  .flagship-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .flagship-process ol {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .flagship-process li {
    border-left: 0;
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
  }
  .flagship-process li:last-child {
    border-bottom: 0;
  }
  .catalog-controls {
    gap: 12px;
    margin-top: 24px;
  }
  .filters {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .filters span {
    text-align: center;
    padding: 9px 8px;
    font-size: 11px;
  }
  .search-field,
  .search-field input {
    width: 100%;
  }
  .course-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .course-card h3 {
    min-height: 0;
    font-size: 22px;
  }
  .card-meta {
    margin-bottom: 16px;
  }
  .mini-status {
    margin-left: auto;
  }
  .course-card > p {
    font-size: 14px;
    margin-bottom: 22px;
  }
  .card-bottom {
    font-size: 12px;
  }
  .outcome-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .outcome-grid > div {
    border-bottom: 1px solid var(--line);
    padding-bottom: 28px;
  }
  .outcome-grid > div:last-child {
    border: 0;
    padding: 0;
  }
  .outcome-marker {
    margin-bottom: 14px;
  }
  .ecosystem-grid {
    grid-template-columns: 1fr;
  }
  .author-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .author-grid img {
    width: 110px;
    height: 126px;
  }
  .author-grid h2 {
    font-size: 32px;
  }
  .faq summary {
    font-size: 14px;
  }
  .section-heading {
    margin-bottom: 28px;
  }
  .document-sample {
    padding: 20px;
  }
  .document-top {
    font-size: 10px;
    flex-wrap: wrap;
  }
  .document-top span:last-child {
    margin-left: 0;
  }
  .demo-toolbar {
    padding: 12px;
    font-size: 11px;
    flex-wrap: wrap;
  }
  .demo-toolbar span:last-child {
    margin-left: 0;
  }
  .demo-content {
    padding: 35px 20px;
  }
  .demo-content h3 {
    font-size: 21px;
  }
  .breadcrumb {
    font-size: 10px;
    gap: 8px;
  }
  .course-nav .container {
    width: 100%;
    padding: 0 20px;
    gap: 22px;
  }
  .course-nav a {
    font-size: 11px;
  }
  .agenda summary {
    font-size: 14px;
    grid-template-columns: 23px minmax(0, 1fr) 18px;
    gap: 9px;
  }
  .agenda-body {
    padding-left: 32px;
    font-size: 13px;
  }
  .agenda-intro h2 {
    font-size: 34px;
  }
  .waitlist-grid {
    gap: 28px;
  }
  .waitlist-grid h2 {
    font-size: 32px;
  }
  .waitlist-grid p:not(.eyebrow) {
    font-size: 14px;
  }
  .footer-top {
    align-items: start;
    flex-direction: column;
  }
  .footer-bottom {
    gap: 16px;
  }
  .confirmation h1 {
    font-size: 38px;
  }
  .path-steps li {
    gap: 16px;
  }
  .path-steps h3 {
    font-size: 19px;
  }
}
@media (max-height: 740px) {
  .hero,
  .hero-inner {
    min-height: 0;
  }
  .hero-copy {
    padding-block: 28px 34px;
  }
  .hero h1 {
    font-size: 40px;
  }
  .hero .eyebrow {
    margin-bottom: 12px;
  }
  .hero-lead {
    font-size: 15px;
    line-height: 1.55;
    margin-top: 16px;
  }
  .hero-actions {
    margin-top: 20px;
  }
  .hero-note {
    margin-top: 12px;
  }
}
@media (max-height: 740px) and (max-width: 540px) {
  .hero h1 {
    font-size: 32px;
  }
  .hero-copy {
    padding-block: 25px 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}
.course-hero h1 {
  font-size: 46px;
}
.course-hero .hero-copy {
  width: 60%;
  max-width: 650px;
}
.course-hero .hero-lead {
  font-size: 17px;
  line-height: 1.65;
}
.hero-subject {
  margin: 12px 0 0;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.4;
}
.hero-subject + .hero-lead {
  margin-top: 12px;
}
.hero-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 18px;
}
.hero-price strong {
  color: var(--green);
  font-size: 27px;
  font-weight: 750;
  white-space: nowrap;
}
.hero-price span {
  font-size: 12px;
}
.course-hero .hero-actions {
  margin-top: 18px;
}
.course-card {
  --card-accent: var(--green);
  --card-tint: #f0f6f3;
}
.course-card[data-group="terminal"] {
  --card-accent: var(--blue);
  --card-tint: #f0f4fb;
}
.course-card[data-group="risk"] {
  --card-accent: #994c45;
  --card-tint: #faf1ef;
}
.course-card[data-course-id="pc-01-http-network-mastery"] {
  --card-accent: #215d99;
  --card-tint: #edf4fc;
}
.course-card[data-course-id="pc-02-cookies-browser-state-mastery"] {
  --card-accent: #905029;
  --card-tint: #fbf0e5;
}
.course-card[data-course-id="pc-03-encoding-crypto-token-mastery"] {
  --card-accent: #694387;
  --card-tint: #f4eef8;
}
.course-card[data-course-id="pc-04-sql-data-access-mastery"] {
  --card-accent: #236b6a;
  --card-tint: #eaf5f4;
}
.course-card[data-course-id="pc-05-xss-client-execution-mastery"] {
  --card-accent: #a13f53;
  --card-tint: #fbeff2;
}
.course-card[data-course-id="pc-06-shell-recon-evidence-mastery"] {
  --card-accent: #456a31;
  --card-tint: #eff5e9;
}
.course-card[data-course-id="pc-07-reporting-cvss-mastery"] {
  --card-accent: #974027;
  --card-tint: #fcf0eb;
}
.course-card[data-course-id="pc-08-methodology-planning-engagement-mastery"] {
  --card-accent: #3e5884;
  --card-tint: #edf2f9;
}
.course-card[data-course-id="pc-09-linux-command-line-mastery"] {
  --card-accent: #405724;
  --card-tint: #f0f5e8;
}
.course-card[data-course-id="pc-10-bash-scripting-mastery"] {
  --card-accent: #265d8b;
  --card-tint: #edf4fb;
}
.course-card[data-course-id="pc-11-pentest-operations-toolchain-mastery"] {
  --card-accent: #82591d;
  --card-tint: #faf3e7;
}
.course-card[data-course-id="pc-12-git-version-control-mastery"] {
  --card-accent: #a34a33;
  --card-tint: #fcf0eb;
}
.course-art {
  height: 152px;
  flex-shrink: 0;
  background: var(--card-tint);
  color: var(--card-accent);
  padding: 16px 20px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.art-content {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.art-flow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.art-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.art-node > svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
}
.art-node b {
  font-size: 11px;
  font-weight: 600;
}
.art-arrow {
  display: flex;
  opacity: 0.6;
}
.art-arrow svg {
  width: 20px;
}
.art-caption {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 650;
}
.art-caption svg {
  width: 20px;
}
.art-cover-web {
  background: #134a3b;
  color: #e2f9ec;
}
.art-cover-web .art-flow {
  padding-inline: 8px;
}
.art-cover-web .art-caption {
  border-top: 1px solid #49816d;
  padding-top: 14px;
  color: #a5d2b9;
}
.art-http {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.art-http > div {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.art-http > div > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font:
    11px ui-monospace,
    monospace;
  padding-bottom: 5px;
  border-bottom: 1px solid #a8bfd7;
}
.art-http svg {
  width: 18px;
}
.art-http .art-node > svg {
  width: 30px;
  height: 30px;
}
.art-session {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.art-cookie > svg {
  width: 42px;
  height: 42px;
  stroke-width: 1.4;
}
.art-session div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.art-session b {
  font:
    600 17px ui-monospace,
    monospace;
}
.art-session div > span {
  font-size: 10px;
}
.art-session + .art-flow .art-node {
  flex-direction: row;
  gap: 4px;
}
.art-session + .art-flow .art-node svg {
  width: 18px;
  height: 18px;
}
.art-token {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font:
    12px ui-monospace,
    monospace;
}
.art-token span {
  background: #e4d8ee;
  border-bottom: 3px solid #9a7fb0;
  padding: 15px 8px;
}
.art-token span:last-child {
  background: #dceddf;
  border-color: #71937d;
  color: #35593f;
}
.art-code {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font:
    12px/1.4 ui-monospace,
    monospace;
}
.art-code > span {
  white-space: pre;
}
.art-code .art-emphasis {
  font-weight: 750;
}
.art-code .art-muted {
  opacity: 0.65;
}
.art-cover-sql .art-content {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.art-cover-sql .art-code {
  font-size: 11px;
}
.art-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font:
    10px ui-monospace,
    monospace;
  border: 1px solid #9ec4bf;
}
.art-data > * {
  padding: 7px;
  border-bottom: 1px solid #c3dad7;
  font-weight: 500;
}
.art-data > span {
  background: #d1e9e4;
}
.art-browser {
  border: 1px solid #d5a7b1;
  border-radius: 4px;
  background: #fff9fb;
}
.art-browser-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 10px;
  padding: 5px 10px;
  border-bottom: 1px solid #e5c4cc;
}
.art-browser-bar svg {
  width: 12px;
  height: 12px;
}
.art-browser > div {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}
.art-browser > div svg {
  width: 22px;
}
.art-recon {
  display: grid;
  justify-items: center;
  gap: 24px;
}
.art-recon-root {
  display: flex;
  align-items: center;
  gap: 8px;
  font:
    13px ui-monospace,
    monospace;
}
.art-recon > div {
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: relative;
  border-top: 1px solid #9bb98a;
  padding-top: 12px;
}
.art-recon > div::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 24px;
  background: #9bb98a;
  left: 50%;
  top: -24px;
}
.art-recon .art-node {
  gap: 4px;
}
.art-recon .art-node > svg {
  width: 22px;
  height: 22px;
}
.art-vector {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 18px;
  font:
    12px ui-monospace,
    monospace;
}
.art-vector b {
  grid-row: span 2;
  align-self: center;
  font-size: 18px;
}
.art-severity {
  display: flex;
  gap: 4px;
  height: 8px;
}
.art-severity span {
  flex: 1;
  background: #4d886a;
}
.art-severity span:nth-child(2) {
  background: #d8b14f;
}
.art-severity span:nth-child(3) {
  background: #d67d4a;
}
.art-severity span:nth-child(4) {
  background: #b94547;
}
.art-paper {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 8px;
  background: #fff;
  box-shadow: 3px 4px 0 #ccd7e9;
  padding: 14px 20px;
  margin: 0 18px;
  border: 1px solid #c0cee1;
  transform: rotate(-2deg);
}
.art-paper > b {
  font-size: 13px;
}
.art-checklist {
  grid-column: 1/-1;
  display: grid;
  gap: 3px;
}
.art-checklist > span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
}
.art-checklist svg {
  width: 13px;
  height: 13px;
}
.art-cover-linux {
  background: #252e20;
  color: #e7eedf;
}
.art-cover-linux .art-accent {
  color: #b1d68d;
}
.art-cover-bash {
  background: #1f3447;
  color: #e1ecf7;
}
.art-cover-bash .art-accent {
  color: #93ceeb;
}
.art-terminal-mark {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0.18;
}
.art-terminal-mark svg {
  width: 60px;
  height: 60px;
  stroke-width: 1.3;
}
.art-tool-trace {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
}
.art-tool-trace > span {
  flex: 1;
  border-top: 1px dashed #af976a;
}
.art-git {
  display: grid;
  gap: 24px;
  padding: 0 12px;
}
.art-git > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: relative;
}
.art-git > div::before {
  content: "";
  position: absolute;
  height: 2px;
  background: #d39580;
  left: 70px;
  right: 8px;
  top: 50%;
}
.art-git > div:last-child {
  padding-left: 32px;
}
.art-git > div:last-child::before {
  background: #7b9bbd;
  left: 90px;
}
.art-git span {
  font:
    11px ui-monospace,
    monospace;
  width: 56px;
}
.art-git i {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 3px solid #b96d52;
  background: #f9e7df;
}
.art-git > div:last-child i {
  border-color: #6687ab;
  background: #e9f1fb;
}
.art-git svg {
  position: relative;
  width: 22px;
  height: 22px;
  background: #fcf0eb;
}
.art-risk {
  display: grid;
  grid-template-columns: 116px 1fr;
  align-items: center;
  gap: 22px;
}
.art-matrix {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  width: 116px;
  height: 116px;
}
.art-matrix > span {
  display: grid;
  place-items: center;
  background: #b7444e;
  border-radius: 2px;
}
.art-matrix svg {
  width: 14px;
  height: 14px;
  color: #fff;
}
.art-matrix .risk-tone-0 {
  background: #95c3a0;
}
.art-matrix .risk-tone-1 {
  background: #b7cb8d;
}
.art-matrix .risk-tone-2 {
  background: #dcc66c;
}
.art-matrix .risk-tone-3 {
  background: #d69663;
}
.art-risk > div:last-child {
  display: grid;
  gap: 9px;
}
.art-risk b {
  font-size: 15px;
}
.art-risk > div > span {
  font-size: 11px;
}
.main-demo {
  background: #edf3f1;
  border-bottom: 1px solid var(--line);
}
/* The landing demo is now a full-width stage, not a column beside its own description. The lede
   stays narrow so it reads as a lede; the stage below gets the whole container. */
.main-demo-lede {
  max-width: 62ch;
  margin-bottom: 36px;
}
.main-demo-lede h2 {
  margin-bottom: 14px;
}
.main-demo-lede > p:not(.eyebrow) {
  font-size: 15.5px;
  line-height: 1.8;
  margin: 0 0 18px;
}
/* The un-launched player was capped at 380px by
     .demo-player[data-demo-state="idle"] { width: min(100%, 380px); margin: 18px auto 0 }
   which suited the old narrow column and is exactly why the demo read as a small tile. On the
   showcase it takes the full stage. */
.demo-showcase .demo-player[data-demo-state="idle"],
.demo-showcase .demo-player[data-demo-state="error"],
.course-demo .demo-player[data-demo-state="idle"],
.course-demo .demo-player[data-demo-state="error"] {
  width: 100%;
  margin: 0;
}
/* Course pages had the same problem as the landing, one level worse: the demo sat in a 558px
   column NEXT TO the signup form, and the player was then capped at 380px inside it. The order was
   also backwards — asking someone to join a waitlist before they have seen the thing. The demo now
   spans the row and comes first; the form keeps its own column underneath, where a form belongs. */
.course-demo {
  grid-column: 1 / -1;
  order: -1;
}
.course-demo .demo-poster {
  aspect-ratio: auto;
}
.course-demo .demo-poster-screen {
  aspect-ratio: 16 / 10;
}
.course-demo .demo-poster-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.course-demo .demo-viewport {
  height: min(78dvh, 820px);
}
/* 16:10 belongs on the SCREEN, not on the whole button: putting it on .demo-poster made the
   caption eat a third of the ratio and letterboxed the 1280x800 capture inside what was left. */
.demo-showcase .demo-poster {
  aspect-ratio: auto;
}
.demo-showcase .demo-poster-screen {
  aspect-ratio: 16 / 10;
}
.demo-showcase .demo-poster-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.demo-showcase .demo-viewport {
  height: min(78dvh, 820px);
}
.demo-showcase .demo-tabs {
  margin-bottom: 16px;
}
/* Facts, not adjectives: four numbers the product can actually back. */
.main-demo-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 13.5px;
  color: #52615e;
}
.main-demo-facts strong {
  color: var(--ink);
  font-weight: 700;
  margin-right: 6px;
}
.main-demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}
.main-demo-grid > div > p:not(.eyebrow) {
  font-size: 15px;
  line-height: 1.8;
  margin: 20px 0;
}
.main-demo .demo-placeholder {
  margin: 0;
  background: #fff;
}
.main-demo .demo-content {
  min-height: 260px;
  padding: 32px;
}
.main-demo .demo-content h3 {
  font-size: 22px;
}
.main-demo .text-link {
  margin-top: 16px;
}
.card-scale {
  padding: 6px 20px 0;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.metric-grid > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 14px 0;
}
.metric-grid > li:nth-child(odd) {
  padding-right: 16px;
  border-right: 1px solid var(--line);
}
.metric-grid > li:nth-child(even) {
  padding-left: 18px;
}
.metric-grid > li:nth-child(n + 3) {
  border-top: 1px solid var(--line);
}
.metric-label {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  min-height: 35px;
}
.metric-value {
  color: var(--card-accent, var(--green));
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  font-weight: 750;
  white-space: nowrap;
}
.card-scale-note {
  font-size: 10px;
  line-height: 1.5;
  color: var(--muted);
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.card-stats > li {
  gap: 4px;
  padding-block: 8px;
}
.card-stats .metric-label {
  font-size: 11px;
  min-height: 30px;
  line-height: 1.35;
}
.flagship-stats .metric-value {
  font-size: 48px;
}
.flagship-stats .metric-label {
  font-size: 14px;
  min-height: 42px;
}
.flagship-stats > li {
  padding-block: 22px;
}
.flagship-stats > li:nth-child(even) {
  padding-left: 24px;
}
@media (max-width: 820px) {
  .main-demo-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 540px) {
  .flagship-stats .metric-value {
    font-size: 36px;
  }
  .flagship-stats > li:nth-child(even) {
    padding-left: 18px;
  }
  .course-art {
    padding-inline: 20px;
  }
  .art-http {
    gap: 8px;
  }
  .art-http .art-node b {
    font-size: 9px;
  }
  .art-http > div > span {
    font-size: 10px;
    gap: 4px;
  }
  .art-session + .art-flow .art-node {
    flex-direction: column;
  }
  .art-session + .art-flow {
    gap: 4px;
  }
  .art-cover-sql .art-code {
    font-size: 10px;
  }
  .art-data > * {
    padding: 6px 4px;
  }
  .art-risk {
    gap: 16px;
    grid-template-columns: 104px 1fr;
  }
  .art-matrix {
    width: 104px;
    height: 104px;
  }
  .art-token {
    font-size: 10px;
    gap: 4px;
  }
  .art-token span {
    padding-inline: 7px;
  }
  .art-vector {
    gap: 5px 12px;
    font-size: 10px;
  }
  .art-vector b {
    font-size: 15px;
  }
  .art-paper {
    margin: 0 12px;
  }
  .art-code {
    font-size: 11px;
  }
  .main-demo .demo-content {
    padding: 26px 20px;
  }
}
.card-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.card-price strong {
  font-size: 23px;
  color: var(--ink);
  font-weight: 750;
  white-space: nowrap;
}
.card-price span {
  font-size: 10px;
}
.aiseclabs-preserved {
  background: #f4f7fd;
  border-bottom: 1px solid #dce3f0;
}
.ai-heading {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 60px;
  align-items: center;
  margin-bottom: 24px;
}
.ai-heading h2 {
  font-size: 52px;
}
.ai-lead {
  font-size: 24px;
  line-height: 1.5;
  margin-top: 18px;
  color: #24436b;
}
.ai-diagram {
  position: relative;
  width: 280px;
  height: 280px;
}
.ai-security-visual {
  width: 100%;
  height: 100%;
  display: block;
}
.ai-course-card {
  --card-accent: #295ca3;
  --card-tint: #eff4fc;
}
.ai-card-art {
  height: 152px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px 6px 6px;
  position: relative;
  background: var(--card-tint);
  border-bottom: 1px solid var(--line);
}
.ai-card-art .ai-diagram {
  width: 140px;
  height: 140px;
  flex: 0 0 140px;
}
.ai-card-art > p {
  color: #29517f;
  font-size: 12px;
  line-height: 1.6;
  padding-bottom: 24px;
}
.ai-card-art .motion-toggle {
  right: 8px;
  bottom: 8px;
  width: 36px;
  height: 36px;
}
.ai-card-topics {
  margin: 16px 20px 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.8;
  color: #34547e;
}
.motion-toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  background: #fff;
  display: inline-flex;
}
.ai-offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.ai-offer-copy h3 {
  font-size: 25px;
  margin-bottom: 16px;
}
.ai-offer-copy p {
  font-size: 15px;
}
.ai-offer-copy .button {
  background: var(--blue);
  border-color: var(--blue);
  margin-top: 14px;
}
.ai-offer-copy .button:hover {
  background: #154484;
}
.ai-offer-copy .check-list {
  margin-top: 18px;
}
.ai-offer-copy .check-list li {
  font-size: 14px;
}
.ai-terminal {
  background: #0f172a;
  min-width: 0;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 12px 36px #172c2914;
}
.terminal-header {
  background: #1e293b;
  border-bottom: 1px solid #0f172a;
  padding: 12px 16px;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.window-controls {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.window-controls span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f56;
}
.window-controls span:nth-child(2) {
  background: #ffbd2e;
}
.window-controls span:nth-child(3) {
  background: #27c93f;
}
.terminal-title {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: #aab7ce;
}
.terminal-code {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.95;
  padding: 24px;
  overflow-wrap: anywhere;
}
.t-prompt {
  color: #38bdf8;
  font-weight: 700;
}
.t-cmd {
  color: #f8fafc;
  font-weight: 500;
}
.t-ok {
  color: #34d399;
  font-weight: 600;
}
.t-warn {
  color: #fbbf24;
  font-weight: 600;
}
.t-info {
  color: #a5b4fc;
  font-weight: 600;
}
.t-comment {
  color: #a5b2c7;
  font-style: italic;
}
.t-cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: #f8fafc;
  vertical-align: text-bottom;
  animation: ai-blink 1s step-end infinite;
}
@keyframes ai-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.motion-paused .t-cursor {
  animation-play-state: paused;
}
.scale-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: 40px 0 26px;
}
.scale-grid > div {
  border-top: 2px solid #bfd3cc;
  padding-top: 20px;
}
.scale-grid dt {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scale-grid strong {
  font-size: 42px;
  line-height: 1.2;
  color: var(--green);
  overflow-wrap: anywhere;
}
.scale-grid dt span {
  font-weight: 650;
  font-size: 15px;
  line-height: 1.5;
}
.scale-grid dd {
  font-size: 12px;
  line-height: 1.7;
  margin: 10px 0 0;
  color: var(--muted);
}
.scale-note {
  font-size: 12px;
  max-width: 850px;
}
.journey-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  margin: 42px 0 28px;
  gap: 32px;
}
.journey-steps li {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.journey-steps svg {
  color: var(--blue);
  width: 28px;
  height: 28px;
  margin-bottom: 18px;
}
.journey-steps h3 {
  font-size: 18px;
  margin-bottom: 12px;
}
.journey-steps p {
  font-size: 14px;
}
.agenda-toggle {
  margin-top: 24px;
}
.project-row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  border-top: 1px solid #cbd9cf;
  padding: 30px 0;
}
.project-row:last-child {
  padding-bottom: 0;
}
.project-title {
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.project-title svg {
  color: var(--green);
}
.project-row p {
  font-size: 15px;
}
.project-row .project-result {
  border-left: 3px solid #88ab99;
  padding-left: 16px;
  font-size: 14px;
}
.project-result strong {
  display: block;
  color: var(--green);
  font-size: 12px;
  margin-bottom: 5px;
}
.pricing-section {
  background: #eef2fa;
  border-block: 1px solid #d2daea;
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 100px;
  align-items: center;
}
.price-offer {
  border-left: 1px solid #c5d0e1;
  padding-left: 48px;
}
.price-amount {
  font-size: 54px;
  font-weight: 750;
  color: #204b80;
  line-height: 1.2;
  margin: 14px 0;
}
.price-amount span {
  font-size: 14px;
  color: var(--muted);
  display: block;
  margin-top: 8px;
}
.price-edition {
  font-size: 14px;
  margin-bottom: 24px;
}
.offer-footnote {
  font-size: 12px !important;
  margin-top: 16px;
}
.waitlist-form > h3 {
  margin-bottom: 24px;
}
.waitlist-benefits {
  padding: 0;
  list-style: none;
  margin-top: 24px;
}
.waitlist-benefits li {
  display: flex;
  align-items: start;
  gap: 12px;
  font-size: 14px;
  margin: 14px 0;
  color: #d5e8df;
}
.waitlist-benefits svg {
  color: #9ddbbf;
}
.waitlist-price strong {
  color: #fff;
}
.path-price {
  font-size: 13px;
}
@media (max-width: 1000px) {
  .ai-offer-grid {
    gap: 28px;
  }
  .ai-heading {
    gap: 28px;
  }
  .scale-grid,
  .journey-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pricing-grid {
    gap: 40px;
  }
  .price-offer {
    padding-left: 30px;
  }
  .course-hero .hero-copy {
    width: 70%;
  }
}
@media (max-width: 700px) {
  .ai-offer-grid,
  .pricing-grid,
  .project-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .ai-heading {
    grid-template-columns: 1fr 160px;
    gap: 20px;
  }
  .ai-heading h2 {
    font-size: 38px;
  }
  .ai-lead {
    font-size: 18px;
  }
  .ai-diagram {
    width: 160px;
    height: 190px;
  }
  .ai-offer-copy h3 {
    font-size: 22px;
  }
  .ai-offer-copy {
    margin-top: 8px;
  }
  .price-offer {
    padding: 28px 0 0;
    border-left: 0;
    border-top: 1px solid #c5d0e1;
  }
  .project-row {
    gap: 18px;
  }
  .course-hero .hero-copy {
    width: 100%;
    padding-block: 30px;
  }
  .course-hero h1 {
    font-size: 36px;
  }
  .course-hero .hero-lead {
    font-size: 15px;
    line-height: 1.6;
  }
  .course-hero .hero-actions {
    gap: 14px;
  }
}
@media (max-width: 440px) {
  .ai-heading {
    grid-template-columns: minmax(0, 1fr);
  }
  .ai-diagram {
    width: 220px;
    height: 220px;
    margin: auto;
  }
  .ai-heading h2 {
    font-size: 38px;
  }
  .terminal-code {
    padding: 16px;
    font-size: 11px;
  }
  .terminal-header {
    padding: 12px;
    gap: 10px;
  }
  .terminal-title {
    font-size: 9px;
  }
  .scale-grid {
    gap: 24px 18px;
  }
  .scale-grid strong {
    font-size: 34px;
  }
  .scale-grid dt span {
    font-size: 13px;
  }
  .journey-steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .journey-steps li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 0 16px;
  }
  .journey-steps p {
    grid-column: 2;
  }
  .price-amount {
    font-size: 46px;
  }
  .course-hero h1 {
    font-size: 32px;
  }
  .course-hero .hero-copy {
    padding-block: 24px;
  }
  .course-hero .hero-lead {
    font-size: 14px;
    margin-top: 14px;
  }
  .course-hero .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 14px;
    gap: 14px;
  }
  .hero-price {
    margin-top: 12px;
  }
  .hero-price strong {
    font-size: 24px;
  }
}
@media (max-height: 740px) {
  .course-hero h1 {
    font-size: 36px;
  }
  .course-hero .hero-copy {
    padding-block: 24px;
  }
  .course-hero .hero-lead {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 12px;
  }
}
@media (max-height: 740px) and (max-width: 540px) {
  .course-hero h1 {
    font-size: 28px;
  }
  .course-hero .hero-note {
    font-size: 11px;
  }
  .course-hero .hero-actions {
    margin-top: 12px;
  }
  .course-hero .hero-actions .button {
    padding: 10px 14px;
    min-height: 44px;
    font-size: 13px;
  }
}
@media (max-width: 440px) {
  .breadcrumb {
    padding-block: 8px;
  }
  .hero-subject {
    font-size: 16px;
    margin-top: 8px;
  }
  .breadcrumb > span:last-child,
  .breadcrumb > span:nth-last-child(2) {
    display: none;
  }
}
.flagship-lead > strong {
  display: block;
  font-size: 22px;
  line-height: 1.4;
  margin-bottom: 12px;
  color: var(--ink);
}
.value-labels,
.value-row {
  display: grid;
  grid-template-columns: 0.9fr 1fr 1.2fr;
  gap: 32px;
}
.value-labels {
  padding-bottom: 14px;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
}
.value-row {
  border-top: 1px solid var(--line);
  padding: 28px 0;
  align-items: start;
}
.value-row p {
  font-size: 15px;
  line-height: 1.7;
}
.value-before p {
  color: var(--muted);
}
.value-after {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
}
.value-after svg {
  color: var(--green);
  width: 20px;
  height: 20px;
  margin-top: 3px;
}
.value-after h3 {
  font-size: 18px;
  line-height: 1.5;
}
.value-proof {
  border-left: 3px solid #91b7cb;
  padding-left: 20px;
}
.value-mobile-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.value-application,
.route-entry {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 30px;
  padding: 24px 0;
  border-block: 1px solid var(--line);
  font-size: 15px;
}
.web-route {
  background: #f5f8f6;
}
.web-learning-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding: 0;
  list-style: none;
  margin: 0 0 32px;
  counter-reset: learning-stage;
}
.web-learning-path li {
  counter-increment: learning-stage;
  border-top: 3px solid #719b87;
  padding-top: 20px;
}
.web-learning-path li:nth-child(even) {
  border-color: #7da0b8;
}
.web-learning-path li::before {
  content: counter(learning-stage, decimal-leading-zero);
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 12px;
}
.path-modules,
.engagement-source {
  font-size: 12px;
  font-weight: 650;
  color: #365e6c;
}
.web-learning-path h3 {
  font-size: 20px;
  line-height: 1.4;
  margin: 10px 0;
}
.web-learning-path li > p:last-child {
  font-size: 14px;
}
.engagement-section {
  background: #eef3f6;
}
.engagement-caption {
  font-size: 13px;
  max-width: 840px;
  margin-bottom: 28px;
}
.engagement-workspace {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 48px;
  border-block: 1px solid #bdced6;
  padding: 28px 0;
}
.engagement-tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.engagement-tabs button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #425a66;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.engagement-tabs button svg {
  width: 20px;
  height: 20px;
}
.engagement-tabs button svg:last-child {
  width: 16px;
  height: 16px;
}
.engagement-tabs button:hover {
  background: #e1eaed;
}
.engagement-tabs button[aria-selected="true"] {
  background: #155947;
  color: #fff;
}
.engagement-panels {
  min-width: 0;
  min-height: 620px;
}
.engagement-panels [role="tabpanel"] > h3 {
  font-size: 24px;
  line-height: 1.35;
  margin: 10px 0 12px;
}
.engagement-action {
  font-size: 15px;
  max-width: 820px;
}
.engagement-document {
  background: #fff;
  border: 1px solid #c0ced5;
  border-radius: 4px;
  box-shadow: 0 4px 12px #2946550a;
  padding: 24px 28px;
  margin: 24px 0;
}
.engagement-document header {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.engagement-document header svg {
  color: #416778;
  flex-shrink: 0;
}
.engagement-document h4 {
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
}
.engagement-document header p {
  font-size: 12px;
  margin-top: 4px;
}
.engagement-document dl {
  margin: 18px 0 0;
}
.engagement-document dl > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 18px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
}
.engagement-document dt {
  font-weight: 650;
  color: #344c57;
}
.engagement-document dd {
  margin: 0;
  color: #344c57;
}
.engagement-document dl > div:last-child {
  border-left: 3px solid #d6a64a;
  padding: 12px;
  background: #fff8df;
}
.engagement-skill {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--green);
}
.engagement-skill svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.engagement-close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding-top: 28px;
}
.engagement-close p {
  font-size: 15px;
}
@media (max-width: 1000px) {
  .value-labels,
  .value-row {
    gap: 22px;
  }
  .engagement-workspace {
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 28px;
  }
  .engagement-document dl > div {
    grid-template-columns: 100px minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  .value-labels {
    display: none;
  }
  .value-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 26px 0;
  }
  .value-mobile-label {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    white-space: normal;
    font-size: 11px;
    color: var(--muted);
    font-weight: 650;
    margin-bottom: 6px;
  }
  .value-after .value-mobile-label {
    grid-column: 1 / -1;
    margin: 0;
  }
  .value-application,
  .route-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .web-learning-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .engagement-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .engagement-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .engagement-tabs button {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 6px;
    text-align: center;
    font-size: 12px;
    padding: 10px 6px;
    min-height: 72px;
  }
  .engagement-tabs button svg:last-child {
    display: none;
  }
  .engagement-panels {
    min-height: 720px;
  }
  .engagement-document {
    padding: 18px;
  }
  .engagement-document dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .engagement-close {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .engagement-close .button {
    justify-self: start;
  }
}
@media (max-width: 440px) {
  .web-learning-path {
    grid-template-columns: minmax(0, 1fr);
  }
  .engagement-close .button {
    font-size: 13px;
    padding-inline: 12px;
  }
}
.course-entry {
  padding-block: 44px;
  background: #f2f6f3;
  border-bottom: 1px solid var(--line);
}
.course-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.waitlist-form-early,
.course-demo {
  min-width: 0;
  scroll-margin-top: 24px;
}
.waitlist-form-early h2,
.course-demo h2 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 600;
  margin-top: 10px;
}
.waitlist-form-early .signup-intro,
.course-demo .demo-intro {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.65;
}
.waitlist-form-early .signup-price {
  margin: 10px 0 20px;
  font-size: 13px;
}
.waitlist-form-early .consent {
  color: #475e52;
}
.waitlist-form-early .consent a,
.waitlist-form-early .form-contact {
  color: #155947;
}
.waitlist-form-early .button {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.waitlist-form-early .button:disabled {
  background: #b8c9bf;
  color: #213a2d;
  border-color: #b8c9bf;
}
.waitlist-form-early .form-footnote {
  font-size: 11px;
  line-height: 1.6;
  margin-top: 12px;
  color: #53695b;
}
.waitlist-form-early .form-status {
  background: #fff;
  color: var(--ink);
}
.waitlist-form-early .form-status.is-error {
  border-color: #b64027;
  color: #8b321f;
}
.waitlist-form-early .form-status.is-success {
  border-color: var(--green);
  color: #155947;
}
.course-demo .demo-placeholder {
  margin-top: 20px;
  background: #fff;
}
.course-demo .demo-content {
  min-height: 244px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.course-demo .demo-content h3 {
  font-size: 18px;
}
.course-demo .demo-content p {
  margin: 12px 0 0;
  max-width: 360px;
}
.course-demo .demo-symbol {
  margin-bottom: 16px;
}
.course-demo > .text-link {
  margin-top: 18px;
  font-size: 13px;
}
@media (max-width: 760px) {
  .course-entry {
    padding-block: 28px;
  }
  .course-entry-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .course-demo {
    border-top: 1px solid var(--line);
    padding-top: 28px;
  }
  .waitlist-form-early,
  .course-demo {
    scroll-margin-top: 8px;
  }
  .waitlist-form-early h2,
  .course-demo h2 {
    font-size: 22px;
  }
  .waitlist-form-early .button {
    font-size: 13px;
    padding-inline: 10px;
  }
}
.browser-learning {
  background: #edf4f6;
  border-block: 1px solid #d3e1e7;
}
.learning-features,
.lab-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.learning-features > div {
  border-top: 3px solid #287266;
  padding-top: 22px;
  min-width: 0;
}
.learning-features > div:nth-child(2) {
  border-color: #426cc4;
}
.learning-features > div:nth-child(3) {
  border-color: #ad593b;
}
.learning-features svg {
  color: var(--green);
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
}
.learning-features h3,
.lab-reference h4 {
  font-size: 19px;
  line-height: 1.4;
  margin-bottom: 12px;
}
.learning-features p,
.lab-reference p {
  font-size: 15px;
  line-height: 1.7;
}
.browser-learning-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-top: 1px solid #c4d7dd;
  padding-top: 26px;
  margin-top: 30px;
}
.browser-learning-note svg {
  flex: 0 0 24px;
}
.browser-learning-note strong {
  display: block;
  color: var(--ink);
  margin-bottom: 4px;
}
.lab-syllabus-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin: 30px 0 22px;
}
.lab-syllabus-toolbar .search-field {
  flex: 1 1 320px;
  max-width: 520px;
  min-width: 0;
}
.lab-syllabus-toolbar .search-field input {
  width: 100%;
}
.lab-syllabus-toolbar [role="status"] {
  font-size: 14px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.lab-syllabus-toolbar button {
  border: 0;
  background: none;
  cursor: pointer;
}
.lab-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0 32px;
  border-top: 1px solid var(--line);
}
.lab-topic {
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.lab-topic summary {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 28px 18px;
  align-items: start;
  gap: 14px;
  padding: 24px 0;
  list-style: none;
  cursor: pointer;
}
.lab-topic summary::-webkit-details-marker {
  display: none;
}
.lab-topic summary > svg {
  color: var(--green);
  width: 22px;
  height: 22px;
}
.lab-topic summary > svg:last-child {
  width: 18px;
  transition: transform 160ms ease;
}
.lab-topic[open] summary > svg:last-child {
  transform: rotate(180deg);
}
.lab-topic-heading {
  display: grid;
  gap: 8px;
}
.lab-topic-heading strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
}
.lab-topic-heading > span {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}
.lab-topic-count {
  color: var(--green);
  font-size: 17px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lab-topic-body {
  padding: 0 0 24px 38px;
}
.lab-topic-body ul,
.lab-reference ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lab-topic-body li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.5;
}
.lab-topic-body li svg {
  flex: 0 0 16px;
  width: 16px;
  height: 20px;
  color: var(--green);
}
.lab-empty {
  padding: 28px 0;
}
.lab-reference-heading {
  margin: 48px 0 28px;
  max-width: 820px;
}
.lab-reference-heading h3 {
  font-size: 26px;
  line-height: 1.35;
  margin-bottom: 16px;
}
.lab-reference {
  min-width: 0;
  border-top: 2px solid #a6becd;
  padding-top: 20px;
}
.lab-reference a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--blue);
  font-size: 14px;
  padding-block: 8px;
  text-underline-offset: 3px;
}
.lab-reference a svg {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
}
.lab-syllabus .scale-note {
  margin-block: 24px;
}
.lab-syllabus :is(strong, span, h3, h4, p, a),
.learning-features :is(h3, p) {
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .learning-features,
  .lab-reference-grid,
  .lab-topic-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .lab-topic summary {
    grid-template-columns: 20px minmax(0, 1fr) 24px 16px;
    gap: 10px;
    padding-block: 20px;
  }
  .lab-topic summary > svg {
    width: 20px;
  }
  .lab-topic summary > svg:last-child {
    width: 16px;
  }
  .lab-syllabus h2,
  .browser-learning h2 {
    font-size: 28px;
    line-height: 1.3;
  }
  .lab-topic-heading strong {
    font-size: 16px;
  }
  .lab-topic-body {
    padding-left: 30px;
  }
  .lab-syllabus-toolbar .search-field {
    flex-basis: 100%;
  }
  .browser-learning-note {
    gap: 12px;
  }
}

.signup-resource {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid currentColor;
  font-size: 14px;
}
.signup-resource p {
  margin: 8px 0 12px;
}
.signup-resource .text-link {
  color: inherit;
  white-space: normal;
}
.first-test h1 {
  font-size: 42px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.first-test-steps {
  padding-left: 24px;
  margin: 40px 0;
}
.first-test-steps li {
  padding: 20px 0 24px 12px;
  border-top: 1px solid var(--line);
  break-inside: avoid;
}
.first-test-steps h2,
.first-test-next h2 {
  font-family: var(--sans);
  font-size: 23px;
  line-height: 1.3;
}
.first-test-next {
  border-top: 2px solid var(--green);
  padding-top: 24px;
}
@media (max-width: 600px) {
  .first-test h1 { font-size: 32px; }
}
@media print {
  .first-test .hero-actions,
  .first-test-next .button {
    display: none;
  }
  .site-header,
  .course-nav,
  .waitlist-section,
  .course-entry,
  .site-footer,
  .hero-actions,
  .demo-section {
    display: none;
  }
  .hero {
    min-height: 0;
  }
  .hero-image,
  .image-caption {
    display: none;
  }
  .hero-inner {
    min-height: 0;
  }
  .hero-copy {
    width: 100%;
    padding: 20px 0;
  }
  .section {
    padding: 24px 0;
  }
  .container {
    width: 100%;
  }
  .agenda-intro {
    position: static;
  }
  details > * {
    display: block !important;
  }
  .course-card,
  .document-sample {
    break-inside: avoid;
  }
  h1 {
    font-size: 30px;
  }
  h2 {
    font-size: 25px;
  }
  .hero-lead {
    font-size: 15px;
  }
}

/* ── cookie consent ──────────────────────────────────────────────────────────
   Injected by assets/consent.js, and only on a build that actually has a Meta pixel.
   Anchored bottom-centre rather than as a full-screen overlay: the banner must not block reading
   the privacy policy it links to, and a modal that traps the page is both hostile and unnecessary
   for a choice that can be deferred. */
.cookie-consent {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 34px rgba(23, 44, 41, 0.16);
  padding: 16px 18px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cookie-consent__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.cookie-consent__text a {
  color: var(--blue);
  text-decoration: underline;
}
.cookie-consent__actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
/* Both buttons share a size and weight: an accept that is visually louder than the reject is the
   dark pattern EU regulators penalise most often. Only the fill differs. */
.cookie-consent__accept,
.cookie-consent__reject {
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}
.cookie-consent__accept {
  background: var(--green);
  border: 1px solid var(--green);
  color: #fff;
}
.cookie-consent__reject {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
}
.cookie-consent__accept:hover { background: var(--green-dark); border-color: var(--green-dark); }
.cookie-consent__reject:hover { border-color: var(--muted); }
.cookie-consent--hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
}
.footer-consent-button {
  font: inherit;
  font-size: 10px;
  color: #63716b;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
@media (max-width: 560px) {
  .cookie-consent { gap: 12px; padding: 14px; }
  .cookie-consent__actions { width: 100%; }
  .cookie-consent__accept, .cookie-consent__reject { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-consent { transition: none; }
}

/* ── legal documents ─────────────────────────────────────────────────────────
   Regulamin, Zwroty and Polityka prywatności had no styles at all: they rendered as unstyled
   markup inside the container. These are the pages Paddle's reviewer reads, and the ones a buyer
   checks before paying, so they get the same care as the rest of the site — a comfortable measure,
   a clear heading rhythm, and an unmissable notice while the text is still a draft. */
.legal-doc h1 {
  font-size: clamp(28px, 4vw, 38px);
  text-wrap: balance;
  margin-bottom: 10px;
}
.legal-summary {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.legal-doc h2 {
  font-size: 19px;
  margin: 34px 0 10px;
  text-wrap: balance;
}
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc p {
  max-width: 68ch;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 12px;
}
/* Amber, not the brand green: this is a warning about the document's status, and it must not read
   as an ordinary callout a reader can skim past. */
.legal-doc .legal-draft {
  background: #fdf6e9;
  border: 1px solid var(--amber);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--amber);
  font-weight: 650;
  font-size: 14px;
  margin-bottom: 30px;
  max-width: none;
}

/* ── hero shot: a still that ROUTES to the live demo ───────────────────────────────
   A screenshot in the hero teaches the eye that "lab picture = decoration". The big demo further
   down is also a screenshot — with a play button — so the hero risks training people not to click
   the one thing that matters. Two defences: the hero shot is itself a link to the demo, so a click
   on it is never wasted; and it says plainly that it is a still and the live one is below. */
.hero-shot {
  position: absolute;
  top: 50%;
  /* Pulled tighter to the viewport edge and widened. At 580px a 1152px-wide lab UI is drawn at
     50% of native size and the interface type is unreadable — the shot stops reading as a product
     and starts reading as a thumbnail. The gutter here was inherited from the stock photo, which
     needed breathing room; a screenshot needs SIZE. The copy column is capped separately at the
     end of this file, so widening the shot does not push into the headline. */
  right: max(20px, calc((100vw - 1320px) / 2));
  transform: translateY(-50%);
  width: min(48%, 680px);
  display: block;
  border-radius: 10px;
  z-index: 0;
  text-decoration: none;
}
.hero-shot .hero-image {
  position: static;
  transform: none;
  width: 100%;
  right: auto;
  top: auto;
  /* The base `.hero-image` rule (line 301) was written for the full-bleed STOCK PHOTO hero: it
     pins a 3/2 box and fills it with `object-fit: cover`, anchored left, so a photo could bleed
     behind the copy at any viewport. Cropping a photograph is free; cropping a SCREENSHOT is not.
     The captures are 1280x800 (ratio 1.600) against a 3/2 box (1.500), so cover sliced 80px off
     the right of every hero — which is precisely where the lab's tutor panel lives. The panel
     looked chopped mid-render and the whole frame read as malformed.
     Reset all three: honour the file's own ratio and draw it whole. The responsive
     `object-position` rules further up (lines 1365-1604) retarget the photo crop at narrower
     widths; with no crop left to position they are inert here, but `object-fit` must be reset
     too or `cover` silently returns at those breakpoints. */
  aspect-ratio: auto;
  object-fit: fill;
  object-position: center;
  height: auto;
}
.hero-shot-cue {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(14, 27, 25, .82);
  color: #d8ece6;
  font-size: 12.5px;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.hero-shot:hover .hero-shot-cue,
.hero-shot:focus-visible .hero-shot-cue {
  opacity: 1;
  transform: translateY(0);
}
.hero-shot:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-shot-cue { transition: none; }
}
@media (max-width: 980px) {
  .hero-shot { display: none; }
}

/* ── hero split: last word on copy width ─────────────────────────────────────────────
   Placed at the end deliberately. Earlier in the file this rule was outranked by the responsive
   .course-hero .hero-copy overrides further down, and the course hero kept overlapping its own
   screenshot. */
@media (min-width: 981px) {
  /* Course heroes let the copy run to 650px, which reached under the image and reproduced the
     overlap this layout exists to remove. While the split is active the copy owns the left half
     and stops there — measured: copy ended at 780px, image began at 730px. */
  /* 560px reached under the widened shot by 10px. The shot grew because a screenshot has to be
     legible; the copy gives back the difference. Verified clear at 1000-1920px, not just at the
     one width I happened to be looking at. */
  .hero-copy,
  .course-hero .hero-copy {
    width: 50%;
    max-width: 520px;
  }
}

/* The caption belongs to the shot, not to the section. `.image-caption` (line 369) is
   absolutely positioned against the hero section, which in the split layout drops it in the
   section's bottom-right corner with nothing around it — it read as a stray tooltip. Inside
   `.hero-shot` the same absolute positioning resolves against the image instead. Appended at
   the end of the file so it outranks the earlier rule by cascade order, not by specificity. */
.hero-shot .image-caption {
  bottom: auto;
  top: calc(100% + 8px);
  right: 0;
  background: none;
  padding: 0;
  color: var(--muted, #5b6f69);
  font-size: 11.5px;
}
@media (max-width: 980px) {
  .hero-shot .image-caption { display: none; }
}

/* ── checkout ────────────────────────────────────────────────────────────────
   A purchase page is the one screen where hesitation costs money, so the price and the single
   action are the only things competing for attention. The consent is given its own block rather
   than sitting inline next to the button: it is a legal act, not a form detail, and a buyer has to
   be able to read it without it running into the thing they are about to click. ── */
.checkout-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 28px;
  margin: 24px 0 20px;
}
.checkout-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.checkout-price strong { font-size: 2rem; line-height: 1; color: var(--ink); }
.checkout-price span { color: var(--muted); font-size: 0.95rem; }
.checkout-what { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.checkout-what li { position: relative; padding-left: 26px; color: var(--ink); }
.checkout-what li::before {
  content: ""; position: absolute; left: 4px; top: 0.45em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--green);
}
.checkout-consent {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 0 0 18px;
  font-size: 0.95rem;
  line-height: 1.55;
  cursor: pointer;
}
.checkout-consent input { margin: 0.25em 0 0; flex: none; width: 18px; height: 18px; accent-color: var(--green); }
.checkout-buy { width: 100%; justify-content: center; font-size: 1.05rem; padding: 14px 20px; }
.checkout-note { margin: 10px 0 0; color: var(--amber); font-size: 0.9rem; }
.checkout-legal { margin: 18px 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.6; }
.checkout-secure { margin: 14px 0 0; color: var(--muted); font-size: 0.85rem; display: flex; gap: 8px; align-items: center; }
@media (max-width: 560px) {
  .checkout-card { padding: 20px; }
  .checkout-price strong { font-size: 1.6rem; }
}
/* The B2B hint is guidance, not a selling point — quieter than the benefit list, but inside the
   card where a company buyer is already looking at the price and the VAT line. */
.checkout-b2b {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--blue);
  background: var(--soft);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ── certificate specimen (J2) ───────────────────────────────────────────────
   A white A4 sheet on a white section loses its edge, so it gets the hero shot's frame (hairline +
   soft shadow, lines 311-313). No inline styles anywhere: the landing CSP is style-src 'self', so a
   style="" attribute works on a local python server and is silently dropped on Cloudflare. */
.certificate-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px 64px; /* the row gap only spaces the zoom row (J2c) from the copy + figure row */
  align-items: center;
}
.certificate-copy h2 {
  margin-bottom: 18px;
}
.certificate-copy .check-list {
  margin-top: 24px;
}
/* At 1440 the English bullet "…without logging / in." left one word alone on its line. `pretty`
   avoids that orphan where supported (Chromium, Safari) and is ignored elsewhere. */
.certificate-copy p,
.certificate-copy li {
  text-wrap: pretty;
}
.certificate-verify {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 14px;
}
.certificate-verify svg {
  color: var(--green);
}
.certificate-verify strong {
  color: var(--ink);
  font-weight: 600;
}
.certificate-figure {
  margin: 0;
}
.certificate-figure img {
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid rgba(23, 44, 41, .12);
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(23, 44, 41, .16);
}
.certificate-figure figcaption {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 820px) {
  .certificate-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* ── certificate: both pages, CSS-only switch (J2b) ──────────────────────────────
   Markup (build.mjs certificate()), in this order inside .certificate-viewer: radio 1, radio 2,
   .certificate-tabs (two labels), .certificate-stack (the two .certificate-sheet). Radios first,
   so `~` reaches the tabs and the sheets with no :has().
   The checked page is the FRONT sheet; the other one is the BACK sheet.
   Desktop: the back sheet sits behind, shifted up/right and tilted, so page 2 is visible before
   anyone touches the tabs. It rises far enough that its header line ("COURSE SCOPE", or
   "CERTIFICATE OF COMPLETION" when page 2 is in front) reads whole above the front page. The
   stack's padding reserves exactly the room that needs (rise ~7.0%, overhang ~4.3% of the figure
   width, from the transform below), so nothing leaves the figure and nothing needs
   overflow:hidden, which would also clip the shadows.
   The back sheet is a picture, not a control: the tabs are the only way to switch. The only click
   targets in the whole figure are the two radios, and a mouse click on a focusable element focuses
   it WITHOUT scrolling. Anything that forwards a click to a radio (a <label>) focuses it WITH
   scrolling, which is what made the page jump by up to ~550 px (review 2026-10-07). So no label here may
   ever receive a click: see .certificate-tabs.
   <=820px: tabs above ONE page, no overlap at all; a paper edge under it shows there is a 2nd. */
.certificate-viewer {
  --tabs-w: 336px; /* two equal tabs; fits "Course scope", the longest label, with room to spare */
  --sheet-back: translate(3.6%, -8.6%) rotate(1.5deg);
  position: relative;
}
/* The real control. Transparent, but laid exactly over its own tab (the GOV.UK radios pattern), so
   a tap or click lands on the input itself and touch screen readers find a radio with its state,
   not a bare label. Tab states below are therefore keyed off the radio (:hover, :checked,
   :focus-visible), never off the label underneath it. */
.certificate-radio {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: calc(var(--tabs-w) / 2);
  height: 50px; /* the tab row: 40px tab + 2 x 4px padding + 2 x 1px border */
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.certificate-radio--2 {
  left: calc(var(--tabs-w) / 2);
}
.certificate-radio:checked {
  cursor: default;
}
/* The picture of the tabs (aria-hidden in the markup: the radios above carry the names). The radios
   already cover it edge to edge; pointer-events: none makes that a guarantee rather than geometry,
   so a click can never reach a <label> and scroll the page to its radio. The labels still work
   without this stylesheet, when the radios are plain visible radios. */
.certificate-tabs {
  display: flex;
  width: var(--tabs-w);
  max-width: 100%;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  pointer-events: none;
}
.certificate-tab {
  display: inline-flex;
  flex: 1 1 0;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px 8px 8px;
  border: 1px solid transparent; /* becomes visible in forced-colors mode */
  border-radius: 5px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.certificate-tab-num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--green);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.certificate-radio--1:hover ~ .certificate-tabs .certificate-tab--1,
.certificate-radio--2:hover ~ .certificate-tabs .certificate-tab--2 {
  background: #e3efe9;
  color: var(--green-dark);
}
.certificate-radio--1:active ~ .certificate-tabs .certificate-tab--1,
.certificate-radio--2:active ~ .certificate-tabs .certificate-tab--2 {
  background: #d2e6dc;
}
.certificate-radio--1:checked ~ .certificate-tabs .certificate-tab--1,
.certificate-radio--2:checked ~ .certificate-tabs .certificate-tab--2 {
  background: var(--green);
  color: #fff;
  box-shadow: 0 1px 2px rgba(12, 68, 52, .28), 0 6px 14px -8px rgba(12, 68, 52, .6);
}
.certificate-radio--1:checked ~ .certificate-tabs .certificate-tab--1 .certificate-tab-num,
.certificate-radio--2:checked ~ .certificate-tabs .certificate-tab--2 .certificate-tab-num {
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
  color: #fff;
}
/* Keyboard focus sits on the transparent radio; the ring is drawn on its tab. Same 3px blue ring
   as the catalogue filters (.filters input:focus-visible + span); offset 1px so it ends exactly at
   the track's 4px padding instead of crossing its border. A mouse click does not match
   :focus-visible, so clicking a tab shows no ring. */
.certificate-radio--1:focus-visible ~ .certificate-tabs .certificate-tab--1,
.certificate-radio--2:focus-visible ~ .certificate-tabs .certificate-tab--2 {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
}
.certificate-stack {
  position: relative;
  display: grid;
  padding: 7.6% 5% 0 0;
}
.certificate-sheet {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  transform: var(--sheet-back);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.certificate-sheet img {
  box-shadow: 0 10px 26px rgba(23, 44, 41, .13);
  filter: brightness(.985);
  transition: box-shadow .5s ease, filter .5s ease;
}
.certificate-radio--1:checked ~ .certificate-stack .certificate-sheet--1,
.certificate-radio--2:checked ~ .certificate-stack .certificate-sheet--2 {
  z-index: 3;
  transform: none;
}
.certificate-radio--1:checked ~ .certificate-stack .certificate-sheet--1 img,
.certificate-radio--2:checked ~ .certificate-stack .certificate-sheet--2 img {
  box-shadow: 0 20px 50px rgba(23, 44, 41, .16), 0 2px 6px rgba(23, 44, 41, .05);
  filter: none;
}
.certificate-viewer + figcaption {
  margin-top: 16px;
  text-wrap: pretty; /* at 1024 the caption ended on "przykładowe." alone */
}
@media (max-width: 820px) {
  .certificate-viewer {
    --tabs-w: 100%;
  }
  .certificate-tabs {
    margin-bottom: 16px;
  }
  .certificate-stack {
    padding: 0 0 9px;
  }
  /* the edge of a second sheet under the visible one: decoration only, it covers nothing */
  .certificate-stack::after {
    content: "";
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: 0;
    height: 48px;
    z-index: 0;
    background: #fff;
    border: 1px solid rgba(23, 44, 41, .12);
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(23, 44, 41, .10);
  }
  .certificate-sheet {
    transform: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .certificate-radio--1:checked ~ .certificate-stack .certificate-sheet--1,
  .certificate-radio--2:checked ~ .certificate-stack .certificate-sheet--2 {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease;
  }
}
/* Below 360px the two equal tabs shrink to ~133px, and "Course scope" with its badge needs ~146px
   (measured: 92.5px of text + badge, gap and padding). Common 360px Android phones keep the badges. */
@media (max-width: 359px) {
  .certificate-tab-num {
    display: none;
  }
  .certificate-tab {
    padding-inline: 8px;
  }
}

/* ── certificate: course-scope zoom (J2c) ─────────────────────────────────────────
   In the figure the scope page is at most 583 px wide (1440 px viewport) and 350 px on a 390 px
   phone, so its 13 px canvas text lands at 4-7 px.
   build.mjs puts <details class="certificate-zoom"> AFTER the figure, as the grid's third child on a
   row of its own across both columns: opening it adds height below the copy + figure row instead
   of growing that row, so the vertically centred copy never moves. Closed, only the summary shows,
   on the left edge of the figure column (the caption's edge). Open, the same JPEG (already cached
   from page 2) shows at its natural size, 1400 px, where the 13 px text reads at ~16 px, in a
   focusable region that scrolls sideways.
   The region may be WIDER than the container: up to the image's own width, 20 px clear of each
   viewport edge, so from 1440 px up the whole page fits and nothing needs scrolling. It is centred
   on the container, which is centred in the viewport, and never wider than 100vw - 40px, so it
   cannot overflow the page: even with a classic scrollbar inside 100vw it clears each edge by
   20 px minus half the scrollbar (measured with real 15 px scrollbars, 360-1920 px: 13 px clear,
   no overflow). Below 821 px, on a phone, that width IS the container, so it lines up with the
   figure. The frame is a box-shadow ring, not a border, so a 1400 px region holds the 1400 px
   image without a 2 px scroll. */
.certificate-zoom {
  grid-column: 1 / -1;
  min-width: 0;
  /* Chrome's scroll anchoring picked the open scroll region as the anchor; its 14 px top margin
     vanished on close and the page shifted 14 px (phones, summary half under the sticky nav). */
  overflow-anchor: none;
}
/* Two columns: the figure sits at the BOTTOM of its row, so the summary under it is always the
   18px row gap below the caption. From ~1024px up the figure is the taller column and fills the row,
   so nothing changes there; at 821-1023px the copy is taller and a centred figure left the summary
   49-116px below the caption, reading as a separate control (measured). */
@media (min-width: 821px) {
  .certificate-figure {
    align-self: end;
  }
}
.certificate-zoom > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  min-height: 44px;
  /* The figure column's left edge. The copy column is 0.9 / (0.9 + 1.1) = 45% of what is left
     after the 64px column gap (.certificate-grid above): keep the three numbers in step. */
  margin-inline-start: calc((100% - 64px) * .45 + 64px);
  padding: 9px 14px 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.certificate-zoom > summary svg {
  width: 18px;
  height: 18px;
}
.certificate-zoom > summary svg:last-child {
  margin-inline-start: 2px;
  color: var(--muted);
  transition: transform .18s ease;
}
.certificate-zoom > summary:hover {
  background: #e3efe9;
  border-color: #bcd5c9;
  color: var(--green-dark);
}
/* undo the FAQ's plus-to-cross turn (details[open] > summary svg); only the chevron flips */
.certificate-zoom[open] > summary svg {
  transform: none;
}
.certificate-zoom[open] > summary svg:last-child {
  transform: rotate(180deg);
}
.certificate-zoom-scroll {
  --zoom-w: max(100%, min(1400px, 100vw - 40px));
  width: var(--zoom-w);
  margin: 14px calc((100% - var(--zoom-w)) / 2) 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain; /* a sideways swipe at the edge must not become "back" */
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgba(23, 44, 41, .12);
}
.certificate-zoom-scroll img {
  max-width: none; /* the global img rule would squeeze it back to the region's width */
  height: auto;
}
@media (max-width: 820px) {
  .certificate-zoom {
    margin-top: -14px; /* the single-column grid gap is 32px; the zoom sits 18px under the caption */
  }
  .certificate-zoom > summary {
    margin-inline-start: 0;
  }
}
@media print {
  .certificate-zoom {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .certificate-tab,
  .certificate-tab-num,
  .certificate-sheet,
  .certificate-sheet img,
  .certificate-zoom > summary,
  .certificate-zoom > summary svg {
    transition: none;
  }
}
@media (forced-colors: active) {
  .certificate-radio--1:checked ~ .certificate-tabs .certificate-tab--1,
  .certificate-radio--2:checked ~ .certificate-tabs .certificate-tab--2 {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  /* the box-shadow frame is dropped in forced colors; :not() leaves the focus ring alone */
  .certificate-zoom-scroll:not(:focus-visible) {
    outline: 1px solid CanvasText;
  }
}

/* For companies: same two-column grid as the price block, on the page ground so it reads as its own offer. */
.business-section {
  border-bottom: 1px solid var(--line);
}
.business-amount {
  font-size: 34px;
}
.lms-label {
  margin-top: 28px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.lms-names {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 12px 0 10px;
  list-style: none;
}
.lms-names li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
}
.lms-note {
  font-size: 13px;
  color: var(--muted);
}

/* Language suggestion bar (assets/site.js): above the sticky header, scrolls away with the page. */
.lang-hint {
  background: var(--soft);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.lang-hint-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 9px;
}
.lang-hint p {
  margin: 0;
  color: var(--ink);
}
.lang-hint a {
  color: var(--green);
  font-weight: 650;
  white-space: nowrap;
}
.lang-hint-close {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: var(--radius);
}
.lang-hint-close:hover,
.lang-hint-close:focus-visible {
  color: var(--ink);
  background: #fff;
}