/* The Design Ledger footer, carried into the Learning Center. Same words, same order, same look as designledger.co.
   Reads the shared roles in dl-tokens.css. Owned in the Learning Center repo; lib/footer.ts holds the markup. First Law: no dashes. */
footer.dl-footer{--ft-mono:"JetBrains Mono","SF Mono","Monaco",monospace;--ft-text:rgb(var(--dl-rgbs-on-surface) / .92);--ft-soft:rgb(var(--dl-rgbs-on-surface) / .68);--ft-dim:rgb(var(--dl-rgbs-on-surface) / .42);position:relative;display:block;font-family:var(--dl-typeface-plain),system-ui,sans-serif;background:var(--dl-color-surface-container-lowest);color:var(--dl-color-on-surface);border-top:1px solid rgb(var(--dl-rgbs-on-surface) / .08);padding-bottom:0;line-height:1.6}
footer.dl-footer>*{position:relative;z-index:1}
html:not([data-theme="dark"]) footer.dl-footer{background:radial-gradient(ellipse 80% 55% at 12% 0%,rgb(var(--dl-rgbs-primary) / .05),transparent 62%),linear-gradient(180deg,var(--dl-color-surface-container-low) 0%,var(--dl-color-surface-container-low) 100%);border-color:rgb(var(--dl-rgbs-on-surface) / .1)}
footer.dl-footer *,footer.dl-footer *::before,footer.dl-footer *::after{box-sizing:border-box}
footer.dl-footer a{text-decoration:none}
footer.dl-footer .dl-footer__in{max-width:1440px;margin-inline:auto;padding:48px clamp(24px,4vw,56px)}
@media (max-width:700px){footer.dl-footer .dl-footer__in{padding-inline:16px}}
@media (min-width:640px){footer.dl-footer .dl-footer__in{padding-block:64px}}
footer.dl-footer .dl-footer__sitemap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:40px;row-gap:48px;margin:0 0 64px}
footer.dl-footer .dl-footer__sitemap-col{display:flex;flex-direction:column;gap:48px}
footer.dl-footer .dl-footer__group-title{margin:0 0 1.25rem;font-family:inherit;font-size:var(--dl-typescale-body-medium-size);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ft-text)}
footer.dl-footer .dl-footer__links{display:flex;flex-direction:column;gap:12px}
footer.dl-footer .dl-footer__link{font-size:var(--dl-typescale-body-large-size);line-height:1.35;color:var(--ft-soft);transition:color .18s ease}
footer.dl-footer .dl-footer__link:hover{color:var(--ft-text)}
html:not([data-theme="dark"]) footer.dl-footer .dl-footer__link{color:var(--dl-color-on-surface)}
@media (max-width:1023px){footer.dl-footer .dl-footer__sitemap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:559px){footer.dl-footer .dl-footer__sitemap{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:36px;margin-bottom:48px}footer.dl-footer .dl-footer__sitemap-col{display:contents}footer.dl-footer .dl-footer__group-title{font-size:var(--dl-typescale-body-small-size);margin-bottom:14px}footer.dl-footer .dl-footer__link{font-size:var(--dl-typescale-body-medium-size)}}
@media (max-width:339px){footer.dl-footer .dl-footer__sitemap{grid-template-columns:minmax(0,1fr)}}
footer.dl-footer .dl-footer__divider{padding-top:32px}
footer.dl-footer .dl-footer__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
footer.dl-footer .dl-footer__brand{display:inline-flex;align-items:center;gap:12px;color:var(--dl-color-on-surface)}
footer.dl-footer .dl-footer__brand svg{flex:none;width:40px;height:auto}
footer.dl-footer .dl-footer__brand-text{display:flex;flex-direction:column;gap:4px}
footer.dl-footer .dl-footer__brand-name{font-size:var(--dl-typescale-body-large-size);font-weight:700;letter-spacing:.05em;line-height:1.1;white-space:nowrap}
footer.dl-footer .dl-footer__brand-sub{font-size:var(--dl-typescale-label-small-size);font-weight:500;letter-spacing:.1em;line-height:1;text-transform:uppercase;opacity:.7;white-space:nowrap}
footer.dl-footer .dl-footer__legal{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.875rem;line-height:1.625;color:var(--dl-color-on-surface-variant)}
footer.dl-footer .dl-footer__legal a{color:inherit;transition:color .15s ease}
footer.dl-footer .dl-footer__legal a:hover{color:var(--dl-color-on-surface)}
footer.dl-footer .dl-footer__legal .dl-footer__ctp{color:inherit}
footer.dl-footer .dl-footer__legal .dl-footer__br{display:none}
footer.dl-footer .dl-footer__legal .dl-footer__dot{display:inline}
@media (max-width:639px){footer.dl-footer .dl-footer__legal .dl-footer__br{display:block}footer.dl-footer .dl-footer__legal .dl-footer__dot.is-wide{display:none}footer.dl-footer .dl-footer__legal .dl-footer__doi{display:block;margin-top:4px}}
/* Genesis: the way in to the Credentials, on the bottom of every page. */
footer.dl-footer .fge{background:var(--dl-color-surface-container-lowest)}
html:not([data-theme="dark"]) footer.dl-footer .fge{background:var(--dl-color-surface)}
:where(footer.dl-footer .fge) .fss-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;border-radius:var(--dl-shape-corner-medium);color:var(--dl-color-on-surface);overflow:hidden;background:var(--dl-color-surface-container-low)}
footer.dl-footer .fge .fge__kicker{margin:0 0 22px;color:var(--dl-color-on-surface-variant);font:400 var(--dl-typescale-body-small-size)/1.6 "JetBrains Mono",monospace;letter-spacing:.28em;text-transform:uppercase}
footer.dl-footer .fge h2.fge__title{margin:0;font:700 var(--dl-typescale-display-small-size)/1.02 var(--dl-typeface-plain),system-ui,sans-serif;letter-spacing:-.035em;max-width:none;text-transform:none}
@media (min-width:640px){footer.dl-footer .fge h2.fge__title{font-size:var(--dl-typescale-display-medium-size)}}
@media (min-width:1200px){footer.dl-footer .fge h2.fge__title{font-size:var(--dl-typescale-display-xl-size)}}
@media (max-width:700px){footer.dl-footer .fge .fge__kicker{margin-bottom:14px}}
html body footer.dl-footer .fge__wrap{max-width:1440px;padding-inline:clamp(24px,4vw,56px);margin-inline:auto}
@media (max-width:700px){html body footer.dl-footer .fge__wrap{padding-inline:16px}}
@media (min-width:1001px){html body footer.dl-footer .fge .fss-stage{grid-template-columns:minmax(0,1fr) minmax(0,600px)!important;justify-content:stretch!important}}

/* The way in to Genesis wears the one button standard of designledger.co: the white pill in dark, the black pill in bright. */
html body footer.dl-footer .fge .fss-card.is-front .fss-apply{--_bg:var(--dl-ink-white);--_fg:color-mix(in srgb,var(--dl-color-scrim) 88%,var(--dl-ink-white));--_hv:color-mix(in srgb,var(--dl-ink-white) 88%,var(--dl-color-scrim));box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:10px!important;height:44px!important;min-height:44px!important;padding:0 22px!important;border-radius:var(--dl-shape-corner-full)!important;font:600 var(--dl-typescale-label-large-size)/1 var(--dl-typeface-plain),system-ui,sans-serif!important;letter-spacing:0!important;white-space:nowrap;text-decoration:none!important;box-shadow:none;cursor:pointer;background:var(--_bg)!important;color:var(--_fg)!important;border:1px solid transparent!important;transition:background-color .2s ease,transform .15s ease}
html:not([data-theme="dark"]) body footer.dl-footer .fge .fss-card.is-front .fss-apply{--_bg:color-mix(in srgb,var(--dl-color-scrim) 88%,var(--dl-ink-white));--_fg:var(--dl-ink-white);--_hv:var(--dl-color-scrim)}
html body footer.dl-footer .fge .fss-card.is-front .fss-apply:hover{background:var(--_hv)!important;color:var(--_fg)!important}
html body footer.dl-footer .fge .fss-apply>i{display:none!important}
html body footer.dl-footer .fge .fss-apply::after{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E") center / contain no-repeat;transition:transform .2s ease}
html body footer.dl-footer .fge .fss-apply:hover::after{transform:translateX(3px)}
html body footer.dl-footer .fge .fss-points button>span:last-child{color:var(--dl-color-on-surface-variant)!important}

/* The Genesis stage, from the Design Ledger home. */
/* Home: Genesis evidence. A copy of the sealed.energy start stage (src/app/start/start-stage.css),
   scoped to the Design Ledger home section. First Law: no dashes. */
html body .fge { --se-bar-h: 64px; }
html body .fge__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 .fge .fss-stage {
  --fss-accent: var(--dl-tier-seed);
  --fss-ink: var(--dl-color-on-surface);
  --fss-sub: rgb(var(--dl-rgbs-on-surface) / 0.66);
  --fss-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 .fge .fss-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 .fge .fss-copy { position: relative; z-index: 1; min-width: 0; }
html body .fge .fss-copy h2 {
  margin: 0; color: var(--fss-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 .fge .fss-copy h2 { font-size: var(--dl-typescale-display-medium-size); } }
@media (min-width: 1200px) {
 html body .fge .fss-copy h2 { font-size: var(--dl-typescale-display-xl-size); } }
html body .fge .fss-lead { max-width: 58ch; margin: clamp(18px, 2vw, 26px) 0 0; color: var(--fss-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 .fge .fss-lead { font-size: var(--dl-typescale-body-large-size); } }
html body .fge .fss-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(--fss-line);
}
html body .fge .fss-points button { display: block; width: 100%; text-align: left; cursor: pointer; }
html body .fge .fss-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 .fge .fss-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 .fge .fss-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 .fge .fss-points li.is-on b { color: var(--fss-ink); }
html body .fge .fss-points li.is-on b::before { background: var(--fss-accent); }
html body .fge .fss-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 .fge .fss-art { position: relative; z-index: 1; min-width: 0; perspective: 1600px; }
html body .fge .fss-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 .fge .fss-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: 7% 7.5%; box-sizing: border-box; overflow: hidden;
  color: var(--fss-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 .fge .fss-card.is-front { z-index: 4; }
html body .fge .fss-card:not(.is-front) { z-index: calc(3 - var(--d)); }
html body .fge .fss-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 .fge .fss-chip { position: relative; }
html body .fge .fss-chip::before, html body .fge .fss-chip::after { content: ""; position: absolute; background: rgb(var(--dl-rgbs-tier-architect) / 0.45); }
html body .fge .fss-chip::before { left: 50%; top: 14%; bottom: 14%; width: 1.5px; }
html body .fge .fss-chip::after { top: 50%; left: 12%; right: 12%; height: 1.5px; }
html body .fge .fss-wave { position: absolute; top: 9.5%; left: 23%; display: flex; gap: 3px; }
html body .fge .fss-wave i { display: block; width: 4px; height: 12px; border: 2px solid var(--fss-accent); border-left: 0; border-radius: 0 var(--dl-shape-corner-medium) var(--dl-shape-corner-medium) 0; opacity: .8; }
html body .fge .fss-wave i:nth-child(2) { height: 16px; margin-top: -2px; }
html body .fge .fss-wave i:nth-child(3) { height: 20px; margin-top: -4px; }
html body .fge .fss-code { position: absolute; top: 8.5%; right: 7.5%; color: var(--fss-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 .fge .fss-code { font-size: var(--dl-typescale-body-large-size); } }
html body .fge .fss-face { margin-top: auto; animation: ssIn .55s cubic-bezier(.2, .8, .2, 1) both; }
html body .fge .fss-face b { display: block; color: var(--fss-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 .fge .fss-face b { font-size: var(--dl-typescale-headline-small-size); } }
@media (min-width: 1200px) {
 html body .fge .fss-face b { font-size: var(--dl-typescale-display-small-size); } }
html body .fge .fss-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 .fge .fss-face em { font-size: var(--dl-typescale-body-large-size); } }
html body .fge .fss-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 .fge .fss-card:not(.is-front) .fss-foot { margin-top: auto; }
html body .fge .fss-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 .fge .fss-foot small { font-size: var(--dl-typescale-body-small-size); } }
html body .fge .fss-mark { display: inline-flex; align-items: center; gap: 10px; }
html body .fge .fss-mark img { height: clamp(18px, 2vw, 28px); width: auto; opacity: .85; }
html body .fge .fss-mark b { color: var(--fss-ink); font: 800 var(--dl-typescale-body-medium-size)/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .18em; }
@media (min-width: 1200px) {
 html body .fge .fss-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 .fge .fss-stage { grid-template-columns: 1fr; min-height: 0; gap: 40px; }
  html body .fge .fss-art { order: -1; }
  html body .fge .fss-deck { width: min(88%, 520px); transform: rotateY(-10deg) rotateX(6deg) rotateZ(3deg); }
}
@media (max-width: 640px) {
  html body .fge .fss-points { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html body .fge .fss-card, html body .fge .fss-face { transition: none; animation: none; }
}

/* Behind the front card only the outline and the chip show. */
html body .fge .fss-card:not(.is-front) .fss-code,
html body .fge .fss-card:not(.is-front) .fss-foot,
html body .fge .fss-card:not(.is-front) .fss-wave { opacity: 0; }
html body .fge .fss-wave i { box-sizing: border-box; }
html body .fge .fss-points { border-top: 1px solid var(--fss-line) !important; }
html body .fge .fss-wave, html body .fge .fss-wave i { display: flex !important; }
html body .fge .fss-wave i { display: block !important; }
@media (max-width: 640px) {
  html body .fge .fss-stage::before { display: none; }
  html body .fge .fss-deck { width: 94%; transform: rotateY(-8deg) rotateX(5deg) rotateZ(2deg); }
  html body .fge .fss-card { padding: 6% 6.5%; }
  html body .fge .fss-face b { font-size: var(--dl-typescale-body-large-size); }
  html body .fge .fss-face em { margin-top: 6px; font-size: var(--dl-typescale-body-small-size); }
  html body .fge .fss-foot { margin-top: 4%; padding-top: 3%; }
  html body .fge .fss-foot small { display: none; }
  html body .fge .fss-mark img { height: 16px; }
  html body .fge .fss-mark b { font-size: var(--dl-typescale-body-small-size); }
  html body .fge .fss-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 .fge .fss-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 .fge .fss-copy h2 { font-size: var(--dl-typescale-display-medium-size) !important; }
  @media (min-width: 1200px) {
  html body .fge .fss-copy h2 { font-size: var(--dl-typescale-display-xl-size) !important; } }
  html body .fge .fss-lead { margin-top: clamp(10px, 2vh, 26px); font-size: var(--dl-typescale-body-medium-size); }
  @media (min-width: 1200px) {
  html body .fge .fss-lead { font-size: var(--dl-typescale-body-large-size); } }
  html body .fge .fss-points { margin-top: clamp(14px, 2.8vh, 40px); padding-top: clamp(12px, 2.2vh, 30px); gap: 0 32px; }
  html body .fge .fss-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 .fge .fss-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 .fge .fss-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 .fge .fss-card { container-type: inline-size; }
html body .fge .fss-face b { font-size: 6.4cqi !important; line-height: 1.04 !important; }
html body .fge .fss-face em { font-size: 2.9cqi !important; margin-top: 2cqi !important; }
html body .fge .fss-code { font-size: 2.9cqi !important; }
html body .fge .fss-foot { gap: 3cqi; }
html body .fge .fss-foot small { font-size: 1.9cqi !important; white-space: nowrap; }
html body .fge .fss-mark img { height: 4.6cqi !important; }
html body .fge .fss-mark b { font-size: 3.4cqi !important; }
@media (min-width: 1001px) {
  html body .fge .fss-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 .fge .fss-points { grid-template-columns: 1fr 1fr; gap: 10px !important; padding-top: 0 !important; border-top: 0 !important; }
html body .fge .fss-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 .fge .fss-points button:active { transform: scale(.98); }
html body .fge .fss-points button b { padding-left: 0 !important; color: var(--fss-ink) !important; }
html body .fge .fss-points button b::before { display: none; }
html body .fge .fss-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 .fge .fss-deck { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
html body .fge .fss-stage.is-hot .fss-deck { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(40px) scale(1.04); }
html body .fge .fss-stage.is-hot .fss-card:not(.is-front) { opacity: 0; transform: translate3d(calc(var(--d) * 3%), calc(var(--d) * -4%), -160px) scale(.94); }
html body .fge .fss-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 .fge .fss-stage.is-hot .fss-card.is-front::after { opacity: 1; animation: ssSpin 3.2s linear infinite; }
@property --fss-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ssSpin { to { --fss-spin: 360deg; } }
html body .fge .fss-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 .fge .fss-stage.is-hot .fss-card.is-front .fss-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 .fge .fss-foot { position: relative; align-items: center; }
html body .fge .fss-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(--fss-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 .fge .fss-apply i { font-style: normal; transition: transform .2s ease; }
html body .fge .fss-apply:hover { background: var(--dl-tier-seed); }
html body .fge .fss-apply:hover i { transform: translateX(3px); }
html body .fge .fss-stage.is-hot .fss-apply { opacity: 1; transform: none; pointer-events: auto; }
html body .fge .fss-stage.is-hot .fss-foot small { opacity: 0; }
html body .fge .fss-foot small { transition: opacity .25s ease; }
@media (prefers-reduced-motion: reduce) {
  html body .fge .fss-stage.is-hot .fss-card.is-front::after, html body .fge .fss-stage.is-hot .fss-card.is-front .fss-glint { animation: none; }
}
@media (max-width: 640px) {
  html body .fge .fss-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 .fge .fss-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 .fge .fss-art { padding-right: 0; justify-content: center; }
  html body .fge .fss-deck { margin: 9% auto 0 !important; }
}

/* No green line on the cards: a quiet edge at rest, the lift carried by light. */
html body .fge .fss-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 .fge .fss-deck { width: min(calc(100% / 1.3), calc((100svh - 240px) * 1.586 * .82), 580px) !important; margin: 9% 0 0 !important; }
  html body .fge .fss-art { justify-content: flex-start; }
}

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

/* The chip as its gold contact blocks only, the card showing between them. */
html body .fge .fss-chip { background: none !important; }
html body .fge .fss-chip::before, html body .fge .fss-chip::after { display: none !important; }
html body .fge .fss-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 .fge .fss-card.fss-card { filter: none !important; }
html body .fge .fss-card.fss-card:not(.is-front) { transform: none !important; }
html body .fge .fss-card:not(.is-front),
html body .fge .fss-stage.is-hot .fss-card:not(.is-front) { z-index: 1 !important; opacity: 0 !important; pointer-events: none; transition: opacity .45s ease !important; }
html body .fge .fss-card.is-front { z-index: 4 !important; opacity: 1 !important; animation: geZoomIn .6s cubic-bezier(.2, .8, .2, 1) both; }
html body .fge .fss-card:not(.is-front) .fss-code,
html body .fge .fss-card:not(.is-front) .fss-foot,
html body .fge .fss-card:not(.is-front) .fss-wave { opacity: 1; }
html body .fge .fss-card:not(.is-front) .fss-face { animation: none; }
@keyframes geZoomIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html body .fge .fss-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 .fge .fss-stage { width: 100%; }
  html body .fge .fss-art { justify-content: flex-end !important; padding-right: 0 !important; }
  html body .fge .fss-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 .fge .fss-points button { position: relative; }
html body .fge .fge-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 .fge .fss-points button.is-on .fge-arrow { stroke: var(--fss-accent); }

/* The card: the page card radius and no edge lines at all, its face included. */
html body .fge .fss-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 .fge .fss-stage { grid-template-columns: minmax(0, 600px) minmax(0, 600px) !important; gap: clamp(32px, 3.6vw, 56px) !important; justify-content: center !important; }
  html body .fge .fss-art { justify-content: flex-start !important; }
  html body .fge .fss-deck { width: min(100%, calc((100svh - 240px) * 1.586 * .82), 600px) !important; margin: 0 !important; }
}

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

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

/* No green anywhere in the stage: what was green is white, and no green glow. */
html body .fge .fss-stage { --fss-accent: var(--dl-color-inverse-surface); }
html body .fge .fss-stage::before { display: none; }
html body .fge .fss-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 .fge .fss-apply { color: var(--dl-color-inverse-on-surface) !important; }
html body .fge .fss-apply:hover { background: var(--dl-color-inverse-surface); }

/* The four controls without boxes: words and the arrow on the page itself. */
html body .fge .fss-points button,
html body .fge .fss-points button:hover,
html body .fge .fss-points button:focus-visible,
html body .fge .fss-points button.is-on,
html body .fge .fss-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 .fge .fss-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 .fge .fge-arrow { top: 12px; right: 4px; }
html body .fge .fss-points button:not(.is-on) .fge-arrow { opacity: .55; }

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

/* Apply for Genesis stays on the card at all times. */
html body .fge .fss-card.is-front .fss-apply { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
html body .fge .fss-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 .fge .fss-card.is-front .fss-foot { justify-content: space-between; }
  html body .fge .fss-card.is-front .fss-apply { position: static; }
}

/* The card as a premium black card, the same as on designledger.co. 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, a silver contact chip beside it, the
   contactless mark, 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 .fge .fss-deck { container-type: inline-size; }
html body .fge .fss-card.fss-card {
  --fss-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 .fge .fss-card.fss-card .fss-face b { text-shadow: 0 1px 2px rgb(var(--dl-rgbs-black) / 0.7); }
html body .fge .fss-card.fss-card .fss-face em { color: rgb(var(--dl-rgbs-white) / 0.74); }
html body .fge .fss-card.fss-card .fss-code { color: rgb(var(--dl-rgbs-white) / 0.78); }
html body .fge .fss-card.fss-card .fss-mark b { color: var(--dl-ink-white); }
html body .fge .fss-card.fss-card .fss-mark img { opacity: .92; }

/* The way in stays the white pill on the black card in both themes. */
html body footer.dl-footer .fge .fss-card.fss-card.fss-card.is-front .fss-apply { --_bg: var(--dl-ink-white); --_fg: color-mix(in srgb, var(--dl-color-scrim) 88%, var(--dl-ink-white)); --_hv: color-mix(in srgb, var(--dl-ink-white) 88%, var(--dl-color-scrim)); }

/* The contact chip: a silver plate with its contact lines, beside the symbol. */
html body .fge .fss-emv {
  position: absolute; top: 8.5%; left: 23%; width: 11.5%; aspect-ratio: 1.28; overflow: hidden;
  border-radius: clamp(var(--dl-shape-corner-extra-small), 1.2cqi, var(--dl-shape-corner-small));
  background: linear-gradient(135deg, rgb(var(--dl-rgbs-white) / 0.95), rgb(var(--dl-rgbs-white) / 0.58) 42%, rgb(var(--dl-rgbs-white) / 0.84) 68%, rgb(var(--dl-rgbs-white) / 0.52));
  box-shadow: inset 0 0 0 1px rgb(var(--dl-rgbs-black) / 0.4);
}
html body .fge .fss-emv i {
  position: absolute; inset: 0; display: block;
  background:
    linear-gradient(rgb(var(--dl-rgbs-black) / 0.42), rgb(var(--dl-rgbs-black) / 0.42)) 0 31% / 100% 1px no-repeat,
    linear-gradient(rgb(var(--dl-rgbs-black) / 0.42), rgb(var(--dl-rgbs-black) / 0.42)) 0 69% / 100% 1px no-repeat,
    linear-gradient(rgb(var(--dl-rgbs-black) / 0.42), rgb(var(--dl-rgbs-black) / 0.42)) 50% 0 / 1px 100% no-repeat;
}
html body .fge .fss-emv::after {
  content: ""; position: absolute; left: 31%; right: 31%; top: 27%; bottom: 27%;
  border-radius: clamp(var(--dl-shape-corner-extra-small), 0.8cqi, var(--dl-shape-corner-small));
  box-shadow: inset 0 0 0 1px rgb(var(--dl-rgbs-black) / 0.42);
  background: linear-gradient(135deg, rgb(var(--dl-rgbs-white) / 0.9), rgb(var(--dl-rgbs-white) / 0.6));
}

/* The contactless mark sits after the chip and scales with the card. */
html body .fge .fss-wave { left: 37.5%; top: calc(8.5% + 2.9cqi); gap: .8cqi; }
html body .fge .fss-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 .fge .fss-wave i:nth-child(2) { height: 4.4cqi; margin-top: -.6cqi; }
html body .fge .fss-wave i:nth-child(3) { height: 5.6cqi; margin-top: -1.2cqi; }

/* Footer, ruled layout: the brand block at the left (mark, line, Request Access, Trust), five columns
   that follow the main menu at the right, then one quiet legal row. Same on designledger.co and the
   Learning Center. First Law: no dashes. */
footer.dl-footer .dl-footer__in { max-width: 1440px; margin-inline: auto; padding: 64px clamp(24px, 4vw, 56px) 96px; box-sizing: border-box; }
footer.dl-footer .dl-footer__grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px 64px; }
footer.dl-footer .dl-footer__side { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
footer.dl-footer .dl-footer__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ft-text); text-decoration: none; }
footer.dl-footer .dl-footer__tag { margin: 0; max-width: 30ch; color: var(--ft-soft); font: 400 var(--dl-typescale-body-large-size)/1.5 var(--dl-typeface-plain), system-ui, sans-serif; }
footer.dl-footer .dl-footer__cta { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; border-radius: var(--dl-shape-corner-full); background: var(--dl-color-inverse-surface); color: var(--dl-color-inverse-on-surface); font: 600 var(--dl-typescale-body-medium-size)/1 var(--dl-typeface-plain), system-ui, sans-serif; text-decoration: none; box-shadow: none; }
footer.dl-footer .dl-footer__cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
footer.dl-footer .dl-footer__trust { margin-top: 16px; }
footer.dl-footer .dl-footer__sitemap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 32px; margin: 0; }
footer.dl-footer .dl-footer__sitemap-col { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
footer.dl-footer .dl-footer__group-title { margin: 0 0 18px; font: 600 var(--dl-typescale-label-small-size)/1.4 var(--dl-typeface-plain), system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ft-text); }
footer.dl-footer .dl-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
footer.dl-footer .dl-footer__link { font: 400 var(--dl-typescale-body-medium-size)/1.4 var(--dl-typeface-plain), system-ui, sans-serif; color: var(--ft-soft); text-decoration: none; transition: color .18s ease; }
footer.dl-footer .dl-footer__link:hover { color: var(--ft-text); }
footer.dl-footer .dl-footer__ext { opacity: .6; font-size: .85em; }
footer.dl-footer .dl-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgb(var(--dl-rgbs-on-surface) / 0.12); }
footer.dl-footer .dl-footer__copy { margin: 0; color: var(--ft-dim); font: 400 var(--dl-typescale-body-small-size)/1.5 var(--ft-mono); }
footer.dl-footer .dl-footer__legal-nav { display: flex; flex-wrap: wrap; gap: 24px; }
footer.dl-footer .dl-footer__legal-nav a { color: var(--ft-soft); font: 400 var(--dl-typescale-body-small-size)/1.5 var(--ft-mono); text-decoration: none; }
footer.dl-footer .dl-footer__legal-nav a:hover { color: var(--ft-text); }
@media (max-width: 1100px) {
  footer.dl-footer .dl-footer__grid { grid-template-columns: minmax(0, 1fr); }
  footer.dl-footer .dl-footer__sitemap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  footer.dl-footer .dl-footer__in { padding-inline: 16px; }
  footer.dl-footer .dl-footer__sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
  footer.dl-footer .dl-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Translate, coming soon: the same quiet pill as on designledger.co, under Trust. */
footer.dl-footer .dl-footer__translate { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 24px; box-sizing: border-box; border: 1px solid rgb(var(--dl-rgbs-on-surface) / .12); border-radius: var(--dl-shape-corner-full); color: rgb(var(--dl-rgbs-on-surface) / .38); font: 500 var(--dl-typescale-label-large-size)/1.43 var(--dl-typeface-plain), system-ui, sans-serif; letter-spacing: .1px; cursor: default; }
footer.dl-footer .dl-footer__translate svg { flex: none; }