/* Learning Center, Certification Programs: the certification stage. The Design Ledger
   home Get access section (src/components/home/GenesisEvidence.css in the designledger
   repo), carried as is into the Learning Center; keep the two files the same and add
   only the Learning Center lines at the end. First Law: no dashes. */
html body .ge { --se-bar-h: 64px; }
html body .ge__wrap { max-width: 1360px; margin: 0 auto; padding: 0 clamp(24px, 3vw, 48px); }
/* Start sealing, the stage: tabs and words on the left, the chosen route on the
   right as the front card of a tilted deck. Dark register, the terminal teal for
   what is selected, no boxed panels. */
html body .ge .ss-stage {
  --ss-accent: var(--dl-tier-seed);
  --ss-ink: var(--dl-color-on-surface);
  --ss-sub: rgb(var(--dl-rgbs-on-surface) / 0.66);
  --ss-line: rgb(var(--dl-rgbs-on-surface) / 0.12);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 96px); align-items: center;
  min-height: 0; padding: 0 0 160px;
}
html body .ge .ss-stage::before {
  content: ""; position: absolute; z-index: 0; right: 4%; top: 18%; width: 46%; height: 70%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--dl-rgbs-tier-seed) / 0.14), rgb(var(--dl-rgbs-tier-seed) / 0) 70%);
}
html body .ge .ss-copy { position: relative; z-index: 1; min-width: 0; }
html body .ge .ss-copy h2 {
  margin: 0; color: var(--ss-ink); font: 700 var(--dl-typescale-display-small-size)/1.02 var(--dl-typeface-plain), system-ui, sans-serif; letter-spacing: -.035em; text-wrap: balance;
}
@media (min-width: 640px) {
 html body .ge .ss-copy h2 { font-size: var(--dl-typescale-display-medium-size); } }
@media (min-width: 1200px) {
 html body .ge .ss-copy h2 { font-size: var(--dl-typescale-display-xl-size); } }
html body .ge .ss-lead { max-width: 58ch; margin: clamp(18px, 2vw, 26px) 0 0; color: var(--ss-sub); font: 400 var(--dl-typescale-body-medium-size)/1.6 var(--dl-typeface-plain), system-ui, sans-serif; }
@media (min-width: 1200px) {
 html body .ge .ss-lead { font-size: var(--dl-typescale-body-large-size); } }
html body .ge .ss-points {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; margin: clamp(26px, 3vw, 40px) 0 0; padding: clamp(22px, 2.4vw, 30px) 0 0;
  list-style: none; border-top: 1px solid var(--ss-line);
}
html body .ge .ss-points button { display: block; width: 100%; text-align: left; cursor: pointer; }
html body .ge .ss-points b { position: relative; display: block; padding-left: 16px; color: rgb(var(--dl-rgbs-on-surface) / 0.78); font: 600 var(--dl-typescale-body-medium-size)/1.35 var(--dl-typeface-plain), system-ui, sans-serif; transition: color .2s ease; }
html body .ge .ss-points b::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--dl-rgbs-on-surface) / 0.3); transition: background .2s ease, box-shadow .2s ease; }
html body .ge .ss-points span { display: block; margin-top: 6px; padding-left: 16px; color: rgb(var(--dl-rgbs-on-surface) / 0.5); font: 400 var(--dl-typescale-body-small-size)/1.55 var(--dl-typeface-plain), system-ui, sans-serif; }
html body .ge .ss-points li.is-on b { color: var(--ss-ink); }
html body .ge .ss-points li.is-on b::before { background: var(--ss-accent); }
html body .ge .ss-points li.is-on span { color: rgb(var(--dl-rgbs-on-surface) / 0.7); }

/* The deck: the chosen route in front, the others stacked behind it. */
html body .ge .ss-art { position: relative; z-index: 1; min-width: 0; perspective: 1600px; }
html body .ge .ss-deck { position: relative; width: min(100%, 620px); aspect-ratio: 1.586; margin: 0 auto; transform: rotateY(-16deg) rotateX(9deg) rotateZ(4deg); transform-style: preserve-3d; }
html body .ge .ss-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: 7% 7.5%; box-sizing: border-box; overflow: hidden;
  color: var(--ss-ink);
  transform: translate3d(calc(var(--d) * 6%), calc(var(--d) * -9%), calc(var(--d) * -70px));
  opacity: calc(1 - var(--d) * .3); filter: blur(calc(var(--d) * .6px));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, filter .5s ease, border-color .5s ease;
}
html body .ge .ss-card.is-front { z-index: 4; }
html body .ge .ss-card:not(.is-front) { z-index: calc(3 - var(--d)); }
html body .ge .ss-chip { width: 13%; aspect-ratio: 1.25; border-radius: var(--dl-shape-corner-small); background: linear-gradient(135deg, var(--dl-tier-architect), var(--dl-tier-architect) 55%, var(--dl-tier-architect)); }
html body .ge .ss-chip { position: relative; }
html body .ge .ss-chip::before, html body .ge .ss-chip::after { content: ""; position: absolute; background: rgb(var(--dl-rgbs-tier-architect) / 0.45); }
html body .ge .ss-chip::before { left: 50%; top: 14%; bottom: 14%; width: 1.5px; }
html body .ge .ss-chip::after { top: 50%; left: 12%; right: 12%; height: 1.5px; }
html body .ge .ss-wave { position: absolute; top: 9.5%; left: 23%; display: flex; gap: 3px; }
html body .ge .ss-wave i { display: block; width: 4px; height: 12px; border: 2px solid var(--ss-accent); border-left: 0; border-radius: 0 var(--dl-shape-corner-medium) var(--dl-shape-corner-medium) 0; opacity: .8; }
html body .ge .ss-wave i:nth-child(2) { height: 16px; margin-top: -2px; }
html body .ge .ss-wave i:nth-child(3) { height: 20px; margin-top: -4px; }
html body .ge .ss-code { position: absolute; top: 8.5%; right: 7.5%; color: var(--ss-accent); font: italic 700 var(--dl-typescale-body-small-size)/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; }
@media (min-width: 1200px) {
 html body .ge .ss-code { font-size: var(--dl-typescale-body-large-size); } }
html body .ge .ss-face { margin-top: auto; animation: ssIn .55s cubic-bezier(.2, .8, .2, 1) both; }
html body .ge .ss-face b { display: block; color: var(--ss-ink); font: italic 800 var(--dl-typescale-title-large-size)/1.05 var(--dl-typeface-plain), system-ui, sans-serif; letter-spacing: -.02em; }
@media (min-width: 640px) {
 html body .ge .ss-face b { font-size: var(--dl-typescale-headline-small-size); } }
@media (min-width: 1200px) {
 html body .ge .ss-face b { font-size: var(--dl-typescale-display-small-size); } }
html body .ge .ss-face em { display: block; margin-top: 10px; color: rgb(var(--dl-rgbs-on-surface) / 0.72); font: italic 400 var(--dl-typescale-body-small-size)/1.45 var(--dl-typeface-plain), system-ui, sans-serif; }
@media (min-width: 1200px) {
 html body .ge .ss-face em { font-size: var(--dl-typescale-body-large-size); } }
html body .ge .ss-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 7%; padding-top: 5%; border-top: 1px solid rgb(var(--dl-rgbs-on-surface) / 0.1); }
html body .ge .ss-card:not(.is-front) .ss-foot { margin-top: auto; }
html body .ge .ss-foot small { color: rgb(var(--dl-rgbs-on-surface) / 0.55); font: italic 500 var(--dl-typescale-label-small-size)/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 1200px) {
 html body .ge .ss-foot small { font-size: var(--dl-typescale-body-small-size); } }
html body .ge .ss-mark { display: inline-flex; align-items: center; gap: 10px; }
html body .ge .ss-mark img { height: clamp(18px, 2vw, 28px); width: auto; opacity: .85; }
html body .ge .ss-mark b { color: var(--ss-ink); font: 800 var(--dl-typescale-body-medium-size)/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .18em; }
@media (min-width: 1200px) {
 html body .ge .ss-mark b { font-size: var(--dl-typescale-title-large-size); } }
@keyframes ssIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Bright register. */

@media (max-width: 1000px) {
  html body .ge .ss-stage { grid-template-columns: 1fr; min-height: 0; gap: 40px; }
  html body .ge .ss-art { order: -1; }
  html body .ge .ss-deck { width: min(88%, 520px); transform: rotateY(-10deg) rotateX(6deg) rotateZ(3deg); }
}
@media (max-width: 640px) {
  html body .ge .ss-points { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html body .ge .ss-card, html body .ge .ss-face { transition: none; animation: none; }
}

/* Behind the front card only the outline and the chip show. */
html body .ge .ss-card:not(.is-front) .ss-code,
html body .ge .ss-card:not(.is-front) .ss-foot,
html body .ge .ss-card:not(.is-front) .ss-wave { opacity: 0; }
html body .ge .ss-wave i { box-sizing: border-box; }
html body .ge .ss-points { border-top: 1px solid var(--ss-line) !important; }
html body .ge .ss-wave, html body .ge .ss-wave i { display: flex !important; }
html body .ge .ss-wave i { display: block !important; }
@media (max-width: 640px) {
  html body .ge .ss-stage::before { display: none; }
  html body .ge .ss-deck { width: 94%; transform: rotateY(-8deg) rotateX(5deg) rotateZ(2deg); }
  html body .ge .ss-card { padding: 6% 6.5%; }
  html body .ge .ss-face b { font-size: var(--dl-typescale-body-large-size); }
  html body .ge .ss-face em { margin-top: 6px; font-size: var(--dl-typescale-body-small-size); }
  html body .ge .ss-foot { margin-top: 4%; padding-top: 3%; }
  html body .ge .ss-foot small { display: none; }
  html body .ge .ss-mark img { height: 16px; }
  html body .ge .ss-mark b { font-size: var(--dl-typescale-body-small-size); }
  html body .ge .ss-code { font-size: var(--dl-typescale-label-small-size); }
}

/* The stage fills the screen under the bar and nothing more: every line of it,
   tabs to button, sits inside the viewport, and the type and gaps give way to
   the height before anything is pushed below the fold. */
@media (min-width: 1001px) {
  html body .ge .ss-stage {
    height: auto; min-height: 0; max-height: none;
    /* The masterclasses section above already ends with its own space, so the
       stage adds none on top and the same amount below the card. */
    padding: 0 0 clamp(120px, 14vw, 200px); box-sizing: border-box;
  }
  html body .ge .ss-copy h2 { font-size: var(--dl-typescale-display-medium-size) !important; }
  @media (min-width: 1200px) {
  html body .ge .ss-copy h2 { font-size: var(--dl-typescale-display-xl-size) !important; } }
  html body .ge .ss-lead { margin-top: clamp(10px, 2vh, 26px); font-size: var(--dl-typescale-body-medium-size); }
  @media (min-width: 1200px) {
  html body .ge .ss-lead { font-size: var(--dl-typescale-body-large-size); } }
  html body .ge .ss-points { margin-top: clamp(14px, 2.8vh, 40px); padding-top: clamp(12px, 2.2vh, 30px); gap: 0 32px; }
  html body .ge .ss-points span { margin-top: 4px; font-size: var(--dl-typescale-body-medium-size); }

  /* The deck keeps clear of the frame: room on the right and above for the
     cards behind it, so no card meets the edge as it moves. */
  html body .ge .ss-art { display: flex; align-items: center; justify-content: flex-start; height: auto; padding: 0 clamp(24px, 4vw, 64px) 0 0; box-sizing: border-box; }
  html body .ge .ss-deck { width: min(78%, calc((100svh - 240px) * 1.586 * .82), 560px); margin: 0 0 0 2%; }
}

/* Card type scales with the card itself, so the face never crowds at any size. */
html body .ge .ss-card { container-type: inline-size; }
html body .ge .ss-face b { font-size: 6.4cqi !important; line-height: 1.04 !important; }
html body .ge .ss-face em { font-size: 2.9cqi !important; margin-top: 2cqi !important; }
html body .ge .ss-code { font-size: 2.9cqi !important; }
html body .ge .ss-foot { gap: 3cqi; }
html body .ge .ss-foot small { font-size: 1.9cqi !important; white-space: nowrap; }
html body .ge .ss-mark img { height: 4.6cqi !important; }
html body .ge .ss-mark b { font-size: 3.4cqi !important; }
@media (min-width: 1001px) {
  html body .ge .ss-deck { width: min(calc(100% / 1.22), calc((100svh - 240px) * 1.586 * .82), 600px) !important; }
}

/* ── The guarantees as buttons; pointing at one lifts its card ───────────── */
html body .ge .ss-points { grid-template-columns: 1fr 1fr; gap: 10px !important; padding-top: 0 !important; border-top: 0 !important; }
html body .ge .ss-points button {
  display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px; box-sizing: border-box; text-align: left;
  transition: border-color .25s ease, background .25s ease, transform .2s ease;
}
html body .ge .ss-points button:active { transform: scale(.98); }
html body .ge .ss-points button b { padding-left: 0 !important; color: var(--ss-ink) !important; }
html body .ge .ss-points button b::before { display: none; }
html body .ge .ss-points button > span:last-child { margin: 0 !important; padding-left: 0 !important; color: rgb(var(--dl-rgbs-on-surface) / 0.6) !important; }

/* At rest the deck leans in perspective; lifted, the front card turns to face
   the reader, comes forward and lights, and the deck behind falls away. */
html body .ge .ss-deck { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
html body .ge .ss-stage.is-hot .ss-deck { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(40px) scale(1.04); }
html body .ge .ss-stage.is-hot .ss-card:not(.is-front) { opacity: 0; transform: translate3d(calc(var(--d) * 3%), calc(var(--d) * -4%), -160px) scale(.94); }
html body .ge .ss-card.is-front::after {
  content: ""; position: absolute; inset: -1px; padding: 1.5px; pointer-events: none; opacity: 0;
  -webkit-mask: linear-gradient(var(--dl-color-surface-container-lowest) 0 0) content-box, linear-gradient(var(--dl-color-surface-container-lowest) 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .5s ease;
}
html body .ge .ss-stage.is-hot .ss-card.is-front::after { opacity: 1; animation: ssSpin 3.2s linear infinite; }
@property --ss-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ssSpin { to { --ss-spin: 360deg; } }
html body .ge .ss-glint { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 30%, rgb(var(--dl-rgbs-on-surface) / 0.16) 48%, rgb(var(--dl-rgbs-tier-seed) / 0.12) 52%, transparent 70%); background-size: 250% 100%; background-position: 120% 0; }
html body .ge .ss-stage.is-hot .ss-card.is-front .ss-glint { opacity: 1; animation: ssGlint 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ssGlint { from { background-position: 120% 0; } to { background-position: -40% 0; } }

/* The way in to Genesis appears on the lifted card. */
html body .ge .ss-foot { position: relative; align-items: center; }
html body .ge .ss-apply {
  position: absolute; left: 0; bottom: 0; z-index: 3; display: inline-flex; align-items: center; gap: 2cqi; height: 8.4cqi; padding: 0 3.6cqi;
  border-radius: 1.6cqi; background: var(--ss-accent); color: var(--dl-color-inverse-on-surface) !important; font: 700 2.6cqi/1 var(--dl-typeface-plain), system-ui, sans-serif; text-decoration: none;
  opacity: 0; transform: translateY(2cqi); pointer-events: none; transition: opacity .35s ease .15s, transform .45s cubic-bezier(.2, .8, .2, 1) .15s, background .2s ease;
}
html body .ge .ss-apply i { font-style: normal; transition: transform .2s ease; }
html body .ge .ss-apply:hover { background: var(--dl-tier-seed); }
html body .ge .ss-apply:hover i { transform: translateX(3px); }
html body .ge .ss-stage.is-hot .ss-apply { opacity: 1; transform: none; pointer-events: auto; }
html body .ge .ss-stage.is-hot .ss-foot small { opacity: 0; }
html body .ge .ss-foot small { transition: opacity .25s ease; }
@media (prefers-reduced-motion: reduce) {
  html body .ge .ss-stage.is-hot .ss-card.is-front::after, html body .ge .ss-stage.is-hot .ss-card.is-front .ss-glint { animation: none; }
}
@media (max-width: 640px) {
  html body .ge .ss-points { grid-template-columns: 1fr; }
}

/* The whole block sits in the middle of the screen: one centred measure for the
   words and the deck together, never pinned to the left edge on wide screens. */
@media (min-width: 1001px) {
  html body .ge .ss-stage {
    width: min(100%, 1320px); margin-inline: auto !important;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px);
    justify-content: center;
  }
  html body .ge .ss-art { padding-right: 0; justify-content: center; }
  html body .ge .ss-deck { margin: 9% auto 0 !important; }
}

/* No green line on the cards: a quiet edge at rest, the lift carried by light. */
html body .ge .ss-card.is-front::after { display: none !important; }

/* The deck and the cards behind it stay inside the block at every width. */
@media (min-width: 1001px) {
  html body .ge .ss-deck { width: min(calc(100% / 1.3), calc((100svh - 240px) * 1.586 * .82), 580px) !important; margin: 9% 0 0 !important; }
  html body .ge .ss-art { justify-content: flex-start; }
}

/* Stacked: room above the deck for the cards behind it. */
@media (max-width: 1000px) {
  html body .ge { padding-top: clamp(48px, 8vw, 72px); }
}
/* No perspective at any size: the deck faces the reader, the front card in front. */
html body .ge .ss-art { perspective: none; }
html body .ge .ss-deck { transform: none !important; }
html body .ge .ss-stage.is-hot .ss-deck { transform: scale(1.03) !important; }
@media (max-width: 760px) {
  html body .ge .ss-deck { width: 100%; }
}

/* The chip as its gold contact blocks only, the card showing between them. */
html body .ge .ss-chip { background: none !important; box-shadow: none !important; }
html body .ge .ss-chip::before, html body .ge .ss-chip::after { display: none !important; }
html body .ge .ss-chip svg { display: block; width: 100%; height: 100%; }

/* One card: the chosen one zooms up from the middle to its place, the one
   before fades out where it stands. No deck behind. */
html body .ge .ss-card.ss-card { filter: none !important; }
html body .ge .ss-card.ss-card:not(.is-front) { transform: none !important; }
html body .ge .ss-card:not(.is-front),
html body .ge .ss-stage.is-hot .ss-card:not(.is-front) { z-index: 1 !important; opacity: 0 !important; pointer-events: none; transition: opacity .45s ease !important; }
html body .ge .ss-card.is-front { z-index: 4 !important; opacity: 1 !important; animation: geZoomIn .6s cubic-bezier(.2, .8, .2, 1) both; }
html body .ge .ss-card:not(.is-front) .ss-code,
html body .ge .ss-card:not(.is-front) .ss-foot,
html body .ge .ss-card:not(.is-front) .ss-wave { opacity: 1; }
html body .ge .ss-card:not(.is-front) .ss-face { animation: none; }
@keyframes geZoomIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html body .ge .ss-card.is-front { animation: none; } }

/* Even measure: the block spans the home container, the card closes on its
   right edge as the words open on the left. */
@media (min-width: 1001px) {
  html body .ge .ss-stage { width: 100%; }
  html body .ge .ss-art { justify-content: flex-end !important; padding-right: 0 !important; }
  html body .ge .ss-deck { margin: 0 0 0 auto !important; }
}

/* No green line on the controls: the chosen one is marked by its words and a
   quiet tone, the edge stays as it is. */

/* The card in black metal: a brushed dark face with a soft sheen. */

/* Controls change the card on click only; no hover state and no edge lines on
   the controls or the card. The chosen control keeps its quiet tone. */

/* The controls follow the page card standard: the card radius, the OVP arrow
   in the corner, no edge lines. */
html body .ge .ss-points button { position: relative; }
html body .ge .ge-arrow { position: absolute; top: 20px; right: 20px; width: 24px; height: 24px; fill: none; stroke: var(--dl-color-on-surface-variant); stroke-width: 2.4; stroke-linecap: square; pointer-events: none; }
html body .ge .ss-points button.is-on .ge-arrow { stroke: var(--ss-accent); }

/* The card: the page card radius and no edge lines at all, its face included. */
html body .ge .ss-foot { border-top: 0 !important; }

/* The card sits close to the controls, the pair centred so both margins match. */
@media (min-width: 1001px) {
  html body .ge .ss-stage { grid-template-columns: minmax(0, 600px) minmax(0, 600px) !important; gap: clamp(32px, 3.6vw, 56px) !important; justify-content: center !important; }
  html body .ge .ss-art { justify-content: flex-start !important; }
  html body .ge .ss-deck { width: min(100%, calc((100svh - 240px) * 1.586 * .82), 600px) !important; margin: 0 !important; }
}

/* The eyebrow, the Apply page's own. */
html body .ge .ge__kicker { margin: 0 0 clamp(14px, 1.6vw, 22px); }

/* The section sits on the plain page ground. */
html body .ge { position: relative; isolation: isolate; overflow: hidden; }
html body .ge > .ge__wrap { position: relative; z-index: 1; }

/* No green anywhere in the stage: what was green is white, and no green glow. */
html body .ge .ss-stage { --ss-accent: var(--dl-color-inverse-surface); }
html body .ge .ss-stage::before { display: none; }
html body .ge .ss-glint { background: linear-gradient(115deg, transparent 30%, rgb(var(--dl-rgbs-on-surface) / 0.14) 48%, rgb(var(--dl-rgbs-on-surface) / 0.08) 52%, transparent 70%) !important; background-size: 250% 100% !important; }
html body .ge .ss-apply { color: var(--dl-color-inverse-on-surface) !important; }
html body .ge .ss-apply:hover { background: var(--dl-color-inverse-surface); }

/* The four controls without boxes: words and the arrow on the page itself. */
html body .ge .ss-points button,
html body .ge .ss-points button:hover,
html body .ge .ss-points button:focus-visible,
html body .ge .ss-points button.is-on,
html body .ge .ss-points button.is-on:hover { height: 100%; background: none !important; border: 0 !important; border-radius: 0 !important; padding: 14px 40px 14px 0 !important; }
html body .ge .ss-points button:focus-visible { outline: 2px solid var(--dl-color-inverse-surface); outline-offset: 4px; border-radius: var(--dl-shape-corner-small) !important; }
html body .ge .ge-arrow { top: 12px; right: 4px; }
html body .ge .ss-points button:not(.is-on) .ge-arrow { opacity: .55; }

/* The Design Ledger symbol, holographic, where the chip was. */
html body .ge .ss-chip.ge-mark { width: 13%; aspect-ratio: 1 / 1; border-radius: 0 !important; }
html body .ge .ss-chip.ge-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Apply for Genesis stays on the card at all times. */
html body .ge .ss-card.is-front .ss-apply { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
html body .ge .ss-foot small { opacity: 0 !important; }

/* Phones: the way in stands in the footer row beside the seal mark, never over it. */
@media (max-width: 639px) {
  html body .ge .ss-card.is-front .ss-foot { justify-content: space-between; }
  html body .ge .ss-card.is-front .ss-apply { position: static; }
}

/* The card as a premium black card. It keeps the card proportion it already has
   and becomes true black in both themes: the card carries .dark-mode, so its inks
   and the white pill stay as on a dark ground, whatever the section around it. A
   brushed metal face with a soft sheen, a bevelled edge, the holographic symbol,
   the contactless mark beside it, embossed words. Every
   value is a role or a fixed ink; the corner follows the card width between the
   large and the extra large corner tokens, as a real card's corner does. */
html body .ge .ss-deck { container-type: inline-size; }
html body .ge .ss-card.ss-card {
  --ss-ink: var(--dl-ink-white);
  --dl-color-on-surface: var(--dl-ink-white);
  --dl-rgbs-on-surface: var(--dl-rgbs-white);
  --dl-color-on-surface-variant: rgb(var(--dl-rgbs-white) / 0.72);
  color: var(--dl-ink-white);
  border-radius: clamp(var(--dl-shape-corner-large), 3.7cqi, var(--dl-shape-corner-extra-large));
  background:
    radial-gradient(120% 95% at 10% 0%, rgb(var(--dl-rgbs-white) / 0.14), transparent 58%),
    radial-gradient(80% 70% at 100% 100%, rgb(var(--dl-rgbs-white) / 0.07), transparent 62%),
    linear-gradient(115deg, transparent 38%, rgb(var(--dl-rgbs-white) / 0.04) 50%, transparent 62%),
    repeating-linear-gradient(100deg, rgb(var(--dl-rgbs-white) / 0.024) 0 1px, transparent 1px 4px),
    var(--dl-ink-black);
  box-shadow:
    inset 0 1px 0 rgb(var(--dl-rgbs-white) / 0.28),
    inset 0 -1px 0 rgb(var(--dl-rgbs-white) / 0.06),
    inset 0 0 0 1px rgb(var(--dl-rgbs-white) / 0.12),
    var(--dl-elevation-level4);
}
html body .ge .ss-card.ss-card .ss-face b { text-shadow: 0 1px 2px rgb(var(--dl-rgbs-black) / 0.7); }
html body .ge .ss-card.ss-card .ss-face em { color: rgb(var(--dl-rgbs-white) / 0.74); }
html body .ge .ss-card.ss-card .ss-code { color: rgb(var(--dl-rgbs-white) / 0.78); }
html body .ge .ss-card.ss-card .ss-mark b { color: var(--dl-ink-white); }
html body .ge .ss-card.ss-card .ss-mark img { opacity: .92; }

/* The contactless mark sits after the symbol and scales with the card. */
html body .ge .ss-wave { left: 37.5%; top: calc(8.5% + 2.9cqi); gap: .8cqi; }
html body .ge .ss-wave i { width: 1.1cqi; height: 3.2cqi; margin-top: 0; border-width: .5cqi; border-left: 0; border-color: rgb(var(--dl-rgbs-white) / 0.9); opacity: 1; }
html body .ge .ss-wave i:nth-child(2) { height: 4.4cqi; margin-top: -.6cqi; }
html body .ge .ss-wave i:nth-child(3) { height: 5.6cqi; margin-top: -1.2cqi; }

/* On the home the section is a white ground from the first load, in both themes:
   the section carries .light-mode, so the words take the bright inks, and the
   black card stands on white. The band keeps the same room above as below. */
html body .dl-ui section.ge.ge--bright.light-mode, html body section.ge.ge--bright.light-mode { background: var(--dl-ink-white) !important; color: var(--dl-color-on-surface); }
html body .ge.ge--bright .ge__kicker { color: var(--dl-color-on-surface-variant); }
/* The same room above the stage on every page, so the kicker and the deck never touch the top edge. */
html body .ge .ss-stage { padding-top: clamp(40px, 8vw, 88px); }
@media (min-width: 1001px) {
  html body .ge .ss-stage { padding-top: clamp(120px, 14vw, 200px); }
}

/* The Learning Center catalogue hero ground, carried onto this section: the same silk picture and the
   same dark scrim, full bleed, on a dark ground in both themes. Text on the photograph is white
   ink (the colour law). The card deck is unchanged. First Law: no dashes. */
html body section.ge.ge--bright.light-mode,
html body section.ge {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--dl-ink-black) !important; color: var(--dl-ink-white);
}
html body section.ge::before,
html body section.ge::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none;
}
html body section.ge::before {
  z-index: -2;
  background: var(--dl-ink-black) url('/assets-dl/lc-hero-silk.webp') center top / cover no-repeat;
}
html body section.ge::after {
  z-index: -1;
  background: linear-gradient(90deg, rgb(var(--dl-rgbs-black) / .82), rgb(var(--dl-rgbs-black) / .4) 45%, transparent 72%);
}
@media (max-width: 700px) {
  html body section.ge::after { background: linear-gradient(90deg, rgb(var(--dl-rgbs-black) / .88), rgb(var(--dl-rgbs-black) / .64) 60%, rgb(var(--dl-rgbs-black) / .12)); }
}
html body .ge .ss-stage {
  --ss-ink: var(--dl-ink-white);
  --ss-sub: rgb(var(--dl-rgbs-white) / 0.74);
  --ss-line: rgb(var(--dl-rgbs-white) / 0.22);
}
html body .ge .ge__kicker,
html body .ge.ge--bright .ge__kicker { color: rgb(var(--dl-rgbs-white) / 0.72); }
html body .ge .ss-copy h2 { color: var(--dl-ink-white); }
html body .ge .ss-lead { color: rgb(var(--dl-rgbs-white) / 0.76); }
html body .ge .ss-points b { color: rgb(var(--dl-rgbs-white) / 0.78); }
html body .ge .ss-points li.is-on b { color: var(--dl-ink-white); }
html body .ge .ss-points span { color: rgb(var(--dl-rgbs-white) / 0.6); }
html body .ge .ss-points li.is-on span { color: rgb(var(--dl-rgbs-white) / 0.8); }
html body .ge .ss-points { border-top-color: rgb(var(--dl-rgbs-white) / 0.22) !important; }
html body .ge .ss-points button > span:last-child { color: rgb(var(--dl-rgbs-white) / 0.66) !important; }
html body .ge .ss-points li.is-on button > span:last-child { color: rgb(var(--dl-rgbs-white) / 0.84) !important; }
html body .dl-ui section.ge.ge--bright.light-mode { background: var(--dl-ink-black) !important; color: var(--dl-ink-white); }
html body .ge .ss-lead { color: rgb(var(--dl-rgbs-white) / 0.86); }
html body .ge .ss-points b { color: rgb(var(--dl-rgbs-white) / 0.92); }
html body .ge .ss-points span { color: rgb(var(--dl-rgbs-white) / 0.76); }
html body .ge .ss-points li.is-on span { color: rgb(var(--dl-rgbs-white) / 0.92); }
html body .ge .ss-points button > span:last-child { color: rgb(var(--dl-rgbs-white) / 0.74) !important; }

/* Card art: a data network drawn as a picture (public/assets-dl/credential-network.svg), gold at the roots,
   violet along the branches, blue at the tips, over the upper right of the card and fading into the
   black before the words. It sits under the chip, the code and the face. First Law: no dashes. */
html body .ge .ss-net { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('/assets-dl/credential-network.svg') right top / 100% 100% no-repeat; opacity: .92; }
html body .ge .ss-card > :not(.ss-net):not(.ss-glint) { z-index: 1; }
html body .ge .ss-card > :is(.ss-chip, .ss-face, .ss-foot) { position: relative; }
html body .ge .ss-card:not(.is-front) .ss-net { opacity: .35; }

/* The top row: the symbol at the left edge, then the contactless mark. No contact chip. */
html body .ge .ss-wave { left: 22.5%; top: calc(8.5% + 6cqi); }
html body .ge .ss-chip.ge-mark { margin-left: 0; }


/* Learning Center lines. The four programs carry a number label above the name; the selected
   program reads in white, the others quieter. The certificate card keeps its CERTIFIED mark. */
/* The four programs run in one row, full width, under the words and the card. */
html body .ge .ss-points { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px) !important; margin-top: clamp(32px, 4vw, 64px) !important; }
html body .ge .ss-points li { min-width: 0; }
html body .ge .ss-points button, html body .ge .ss-points button.is-on, html body .ge .ss-points button.is-on:hover { padding: clamp(14px, 1.6vw, 22px) 40px clamp(14px, 1.6vw, 22px) 0 !important; }
html body .ge .ss-points .ss-points__n { display: block; margin: 0 0 8px; padding-left: 0; color: rgb(var(--dl-rgbs-white) / 0.5); font: 600 var(--dl-typescale-label-small-size)/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; }
html body .ge .ss-points li.is-on .ss-points__n, html body .ge .ss-points button.is-on .ss-points__n { color: var(--dl-ink-white); }
html body .ge .ss-points button:not(.is-on) b { color: rgb(var(--dl-rgbs-white) / 0.7) !important; }
html body .ge .ss-points button.is-on b { color: var(--dl-ink-white) !important; }
html body .ge .ss-points button > span:last-child { color: rgb(var(--dl-rgbs-white) / 0.6) !important; }
html body .ge .ss-points button.is-on > span:last-child { color: rgb(var(--dl-rgbs-white) / 0.82) !important; }
html body .ge .ss-points button.is-on .ge-arrow { stroke: var(--dl-ink-white); }
html body .ge .ss-mark img { height: clamp(16px, 4cqi, 26px) !important; width: auto; }
html body .lx-cert.padding-horizontal { padding-left: 0; padding-right: 0; }
html body .ge .ss-copy h2 { text-transform: none !important; }
@media (max-width: 1000px) {
  html body .ge .ss-points { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  html body .ge .ss-points { grid-template-columns: 1fr; }
  html body .ge .ss-points button, html body .ge .ss-points button.is-on, html body .ge .ss-points button.is-on:hover { padding-right: 48px !important; }
}

/* Ruled 8 Nov: in the bright theme the stage takes the white ground and the ink of the theme; the silk picture
   and the white ink belong to the dark theme only. The black card still stands on white. */
html:not([data-theme=dark]) body section.ge,
html:not([data-theme=dark]) body section.ge.ge--bright.light-mode,
html:not([data-theme=dark]) body .dl-ui section.ge.ge--bright.light-mode{background:var(--dl-ink-white)!important;color:var(--dl-color-on-surface)}
html:not([data-theme=dark]) body section.ge::before,
html:not([data-theme=dark]) body section.ge::after{display:none}
html:not([data-theme=dark]) body .ge .ss-stage{--ss-ink:var(--dl-color-on-surface);--ss-sub:var(--dl-color-on-surface-variant);--ss-line:rgb(var(--dl-rgbs-black) / .16)}
html:not([data-theme=dark]) body .ge .ge__kicker,
html:not([data-theme=dark]) body .ge.ge--bright .ge__kicker,
html:not([data-theme=dark]) body .ge .ss-lead,
html:not([data-theme=dark]) body .ge .ss-points span,
html:not([data-theme=dark]) body .ge .ss-points li.is-on span{color:var(--dl-color-on-surface-variant)}
html:not([data-theme=dark]) body .ge .ss-copy h2,
html:not([data-theme=dark]) body .ge .ss-points b,
html:not([data-theme=dark]) body .ge .ss-points li.is-on b{color:var(--dl-color-on-surface)}
html:not([data-theme=dark]) body .ge .ss-points{border-top-color:rgb(var(--dl-rgbs-black) / .16)!important}
html:not([data-theme=dark]) body .ge .ss-points button > span:last-child,
html:not([data-theme=dark]) body .ge .ss-points li.is-on button > span:last-child{color:var(--dl-color-on-surface-variant)!important}
html:not([data-theme=dark]) body .ge .lx-news__line,
html:not([data-theme=dark]) body .ge .lx-news__status{color:var(--dl-color-on-surface-variant)!important}
html:not([data-theme=dark]) body .ge .lx-news__field{border:1px solid rgb(var(--dl-rgbs-black) / .16)}