/* =========================================================
   JOB DESCRIPTION ROLE PAGE  ( .jd-* )
   ---------------------------------------------------------
   One page per tech role in the Job Description Templates
   series. Namespaced `jd-*` so it can sit alongside the shared
   .playbook-* system without touching it.

   REBUILT 2026-08-21. An editing script deleted the middle of
   this file; it was reconstructed from the session transcript,
   taking the last version of every selector. The declarations
   are the real ones, but the section comments that grouped them
   did not survive, and the order is approximate. Re-comment
   each group as it is next touched. Documentation/Job
   Description Page.md is the authority on why any of it is the
   way it is.
========================================================= */


/* The same gradient as the fold, on the section rather than on a panel behind
   the sheet, so the two objects the page is about, the hero mockup and the live
   document, sit on one surface. */
.jd-section-wash{
  background-color: #fff;
  background-image:
    radial-gradient(1100px 620px at 50% 0%, rgba(0,113,235,.13), transparent 70%),
    linear-gradient(180deg, #f0f5ff 0%, #f4f7fc 42%, rgba(248,250,252,0) 100%);
  background-repeat: no-repeat;
}


/* Written back by hand: these four were only ever defined inside an editing
   script, so the rebuild could not recover them from the transcript. */
.jd-feature-text{
  min-width: 0;
}

.jd-lvl-corner{
  background: transparent;
}

.jd-section--compact{
  padding-top: clamp(32px, 3.4vw, 52px);
  padding-bottom: clamp(32px, 3.4vw, 52px);
}


.jd-page{
  background: #fff;
}

.jd-section{
  padding: clamp(52px, 6vw, 84px) 22px;
}

.jd-section-alt{
  background: #f8fafc;
}

.jd-inner{
  max-width: 1080px;
  margin: 0 auto;
}

.jd-inner-narrow{
  max-width: 780px;
  margin: 0 auto;
}

.jd-sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.jd-h2{
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--text-main);
}

.jd-h3{
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--text-main);
}

.jd-h4{
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text-main);
}

.jd-kicker{
  font-size: var(--extra-small);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}

.jd-p{
  margin-top: 14px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-muted);
}

.jd-p strong{
  color: var(--text-main);
  font-weight: 700;
}

.jd-p a{
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.jd-p a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jd-section-head{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.jd-section-head .jd-p{
  max-width: 700px;
  margin: 16px auto 0;
}

.jd-intro-head{
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.jd-intro-title{
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--text-main);
}

.jd-summary{
  max-width: 860px;
  margin: clamp(26px, 3vw, 40px) auto 0;
  border-top: 1px solid var(--border-subtle);
}

.jd-sum{
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 20px);

  padding: clamp(15px, 1.8vw, 20px) clamp(10px, 1.2vw, 16px);
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;

  transition: background-color .16s ease;
}

.jd-sum:hover{
  background: rgba(0,113,235,.045);
}

.jd-sum:focus-visible{
  outline: none;
  background: rgba(0,113,235,.06);
  box-shadow: inset 0 0 0 2px rgba(0,113,235,.35);
}

.jd-sum-icon{
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: inline-flex;
}

.jd-sum-icon svg{
  width: 21px;
  height: 21px;
}

.jd-sum-body{
  flex: 1;
  min-width: 0;
}

.jd-sum-title{
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--text-main);
}

.jd-sum-text{
  display: block;
  margin-top: 3px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.jd-sum-arrow{
  flex-shrink: 0;
  display: inline-flex;
  color: var(--blue);
  transition: transform .16s ease;
}

.jd-sum:hover .jd-sum-arrow{
  transform: translateX(3px);
}

.jd-gen{
  margin-top: clamp(28px, 3.4vw, 46px);
}

.jd-paper{
  position: relative;
  z-index: 1;

  /* A4 as a floor, not a lock: aspect-ratio alone pins the height and lets long
     content spill out, and min-height: fit-content does not rescue it. */
  min-height: 141.43cqw;

  padding: clamp(26px, 3.4vw, 52px) clamp(22px, 3.6vw, 54px) clamp(28px, 3.6vw, 52px);
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 2px 4px rgba(11,18,32,.05),
    0 18px 44px -18px rgba(11,18,32,.28);
}

.jd-paper-title{
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.jd-paper-block{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(15,23,42,.07);
}

/* Section labels take the four Google accents in rotation, the same palette and
   the same order as the illustrations. Yellow is darkened to #b27700: brand
   #F9AB00 as 11px uppercase on white fails contrast. */
.jd-paper-block[data-jd-c="blue"]{ --jd-c: #1a73e8; }
.jd-paper-block[data-jd-c="red"]{ --jd-c: #d93025; }
.jd-paper-block[data-jd-c="yellow"]{ --jd-c: #b27700; }
.jd-paper-block[data-jd-c="green"]{ --jd-c: #188038; }

.jd-paper-h{
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jd-c, var(--blue));
}

.jd-mark{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 17px;
  height: 17px;
  border-radius: 50%;

  background: var(--jd-c, var(--blue));
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.jd-paper-p{
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.65;
  color: #3a4350;
}

.jd-paper-list{
  margin: 9px 0 0;
  padding-left: 18px;
}

.jd-paper-list li{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: #3a4350;
}

.jd-var{
  border-radius: 999px;
  padding: 1px 9px 2px 10px;

  background: rgba(0,113,235,.10);
  box-shadow: inset 0 0 0 1px rgba(0,113,235,.30);
  color: #0b4f9e;
  font-weight: 600;

  cursor: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color .14s ease, box-shadow .14s ease;
}

.jd-var::after{
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 5px;
  vertical-align: -1px;
  opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b4f9e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jd-var:hover{
  background: rgba(0,113,235,.17);
  box-shadow: inset 0 0 0 1px rgba(0,113,235,.48);
}

.jd-var:focus{
  outline: none;
  background: #fff;
  box-shadow:
    inset 0 0 0 1.5px var(--blue),
    0 0 0 3px rgba(0,113,235,.16);
}

.jd-var:focus::after{
  opacity: .3;
}

.jd-paper[contenteditable="true"]{
  outline: none;
}

.jd-paper[contenteditable="true"] *:focus{
  outline: none;
}

.jd-download{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.jd-download--center{
  justify-content: center;
  text-align: center;
  margin-top: 30px;
}

.jd-download-note{
  font-size: 13.5px;
  color: var(--text-muted);
}

.jd-btn-download{
  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 13px 22px;
  border: none;
  border-radius: 11px;
  background: var(--blue);

  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;

  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 20px -12px rgba(0,113,235,.9);
}

.jd-btn-download svg{
  width: 16px;
  height: 16px;
}

.jd-btn-download:hover{
  background: var(--blue-hover);
  transform: translateY(-1px);
}

.jd-btn-download[disabled]{
  opacity: .65;
  cursor: progress;
  transform: none;
}

.jd-carousel{
  position: relative;
  margin-top: 34px;

  --item-w: clamp(230px, 25vw, 320px);
  /* A side sheet is scaled to .9 and pushed out 30% of its own width, so its
     outer edge lands at 0.75 x the item width from centre. The arrows hang off
     that measure rather than off the container, so they stay beside the stage
     instead of drifting to the page edges on a wide screen. */
  --stage-half: calc(var(--item-w) * .75);
  --nav-gap: clamp(8px, 1.4vw, 22px);
}

.jd-carousel-viewport{
  position: relative;
  height: clamp(360px, 40vw, 500px);
  perspective: 1200px;
  overflow: visible;
}

.jd-carousel-track{
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jd-carousel-item{
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--item-w);

  transform: translate(-50%, -50%);
  transition: transform .36s ease, filter .36s ease, opacity .26s ease;
  will-change: transform;
  cursor: pointer;
}

.jd-carousel-item[data-pos="center"]{
  transform: translate(-50%, -50%) scale(1.06);
  z-index: 3;
  cursor: zoom-in;
}

.jd-carousel-item[data-pos="left"]{
  transform: translate(calc(-50% - 30%), -50%) rotateY(9deg) scale(.9);
  z-index: 2;
  filter: saturate(.9) brightness(.96);
}

.jd-carousel-item[data-pos="right"]{
  transform: translate(calc(-50% + 30%), -50%) rotateY(-9deg) scale(.9);
  z-index: 2;
  filter: saturate(.9) brightness(.96);
}

.jd-sheet{
  aspect-ratio: 210 / 297;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20,32,54,.28);
}

.jd-carousel-item[data-pos="center"] .jd-sheet{
  box-shadow: 0 16px 40px rgba(20,32,54,.34);
}

.jd-sheet .jd-sample-body{
  font-size: 2.32cqw;
  padding: 6.4cqw 5.8cqw;
  line-height: 1.45;
}

.jd-sheet-title{
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-main);
}

.jd-sheet-label{
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue);
}

.jd-sheet .jd-sheet-title{
  font-size: 1.5em;
  margin: 0 0 0.35em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid rgba(15,23,42,.1);
}

.jd-sheet .jd-sample-part{
  margin-top: 0.85em;
}

.jd-sheet .jd-sample-part:first-of-type{
  margin-top: 0.9em;
}

.jd-sheet .jd-sheet-label{
  font-size: 0.92em;
  margin: 0 0 0.4em;
}

.jd-sheet .jd-list{
  padding-left: 1.15em;
  margin-top: 0;
}

.jd-carousel-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;

  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: #fff;
  color: var(--text-main);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20,32,54,.14);

  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.jd-carousel-nav svg{
  width: 17px;
  height: 17px;
}

.jd-carousel-nav:hover{
  border-color: rgba(0,113,235,.45);
  color: var(--blue);
  transform: translateY(-50%) scale(1.06);
}

.jd-carousel-nav:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,113,235,.32);
}

.jd-carousel-caption{
  margin-top: 26px;
  text-align: center;
}

.jd-carousel-caption .jd-h3{
  font-size: 20px;
}

.jd-carousel-band{
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.jd-carousel-actions{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.jd-carousel-dots{
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
}

.jd-carousel-dot{
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c6cedb;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}

.jd-carousel-dot[aria-current="true"]{
  background: var(--blue);
  transform: scale(1.25);
}

.jd-modal{
  --gap: 20px;
  --foot-h: 58px;
  --paper-h: min(
    calc(100vh - var(--gap) * 2 - var(--foot-h)),
    calc((100vw - 32px) * 297 / 210)
  );

  width: calc(var(--paper-h) * 210 / 297);
  max-width: calc(100vw - 32px);

  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.jd-modal[open]{
  display: flex;
  flex-direction: column;
}

.jd-modal::backdrop{
  background: rgba(15,23,42,.62);
  backdrop-filter: blur(2px);
}

.jd-modal-title{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.jd-modal-paper{
  position: relative;
  height: var(--paper-h);
  width: 100%;

  background: #fff;
  border-radius: 5px;
  box-shadow: 0 30px 70px -25px rgba(15,23,42,.75);
  overflow: hidden;
}

.jd-modal-close{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;

  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;

  transition: background-color .16s ease, color .16s ease;
}

.jd-modal-close svg{
  width: 14px;
  height: 14px;
}

.jd-modal-close:hover{
  background: #f1f5f9;
  color: var(--text-main);
}

.jd-modal-body{
  --doc-scale: 1;

  height: 100%;
  overflow: hidden;
  padding: clamp(22px, 4.8%, 40px) clamp(22px, 6.4%, 50px);
}

.jd-modal-body .jd-sample-body{
  max-height: none;
  overflow: visible;
  padding: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

.jd-modal-body .jd-sheet-title{
  font-size: calc(26px * var(--doc-scale));
  margin: 0 0 calc(18px * var(--doc-scale));
}

.jd-modal-body .jd-sample-part + .jd-sample-part{
  margin-top: calc(18px * var(--doc-scale));
  padding-top: calc(16px * var(--doc-scale));
  border-top: 1px solid var(--border-subtle);
}

.jd-modal-body .jd-sample-part .jd-sheet-label{
  font-size: calc(15px * var(--doc-scale));
  margin: 0 0 calc(7px * var(--doc-scale));
}

.jd-modal-body .jd-sample-part .jd-list{
  margin: 0;
  padding-left: calc(19px * var(--doc-scale));
}

.jd-modal-body .jd-sample-part .jd-list li + li{
  margin-top: calc(5px * var(--doc-scale));
}

.jd-modal-foot{
  flex-shrink: 0;
  height: var(--foot-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jd-block + .jd-block{
  margin-top: 30px;
}


.jdh{
  --jdh-max: 1120px;
  --jdh-pad: 22px;
  --jdh-ink: #0f172a;
  --jdh-grey: #5b6476;
  --jdh-line: #e6e8ef;

  /* The gradient belongs to the fold and has to finish inside it. Stops in px
     leave a hard line wherever the section ends before the ramp does, so they
     are percentages of the section's own height and land on transparent at its
     bottom edge, whatever the fold measures at this width. */
  background-color: #fff;
  background-image:
    radial-gradient(1100px 600px at 50% 0%, rgba(0,113,235,.13), transparent 70%),
    linear-gradient(180deg, #f0f5ff 0%, #f4f7fc 42%, rgba(248,250,252,0) 100%);
  background-repeat: no-repeat;

  padding: clamp(22px, 2.6vw, 40px) var(--jdh-pad) clamp(34px, 4vw, 60px);
}

/* Centred above the fold, on the same content edge as the grid below it. */
.jdh-crumbs{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;

  width: 100%;
  max-width: var(--jdh-max);
  margin: 0 auto 22px;
  font-size: 13px;
  font-weight: 500;
  color: var(--jdh-grey);
}

.jdh-crumbs a{
  color: var(--jdh-grey);
  text-decoration: none;
}

.jdh-crumbs a:hover{
  color: var(--blue);
  text-decoration: underline;
}

.jdh-crumbs span[aria-current]{
  color: var(--jdh-ink);
  font-weight: 600;
}

.jdh-grid{
  width: 100%;
  max-width: var(--jdh-max);
  margin-inline: auto;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: "text media" "cta media";
  gap: clamp(28px, 3.6vw, 56px);
  row-gap: 1.6rem;
  align-items: center;
}

.jdh-title{
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--jdh-ink);
}

.jdh-blurb{
  margin: 1.2rem 0 0;
  max-width: 50ch;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--jdh-grey);
}

.jdh-cta-block{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
}

.jdh-cta-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  width: 100%;
}

.jdh-cta{
  display: inline-block;
  padding: 18px 34px;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font-size: var(--extra-large);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;

  /* Blue-tinted rather than neutral: a grey shadow under a saturated fill
     reads as haze. Tight layer draws the edge, wide layer does the lifting. */
  box-shadow: 0 1px 2px rgba(0,62,130,.24), 0 8px 20px -4px rgba(0,113,235,.42);
  transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
}

.jdh-cta:hover{
  background: var(--dark-blue);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,62,130,.26), 0 14px 28px -6px rgba(0,113,235,.5);
}

.jdh-cta:focus-visible{
  outline: 3px solid var(--dark-blue);
  outline-offset: 3px;
}

.jdh-byline{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--jdh-grey);
}

.jdh-byline a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: #c4c7cb;
  transition: color .15s ease, text-decoration-color .15s ease;
}

.jdh-byline a:hover{
  color: var(--blue);
  text-decoration-color: var(--blue);
}

.jdh-avatars{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.jdh-avatars .jdh-portrait{
  position: relative;
  z-index: 2;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow:
    0 0 0 2px #fff, 0 0 0 3px var(--jdh-line),
    0 2px 5px rgba(15,23,42,.18), 0 6px 14px -4px rgba(15,23,42,.16);
}

.jdh-avatars .jdh-avatar-mark{
  display: flex;
  margin-left: -6px;
}

.jdh-avatars .jdh-avatar-mark img{
  filter: drop-shadow(0 2px 3px rgba(15,23,42,.3)) drop-shadow(0 5px 10px rgba(15,23,42,.2));
}

.jdh-avatars .jdh-portrait,
.jdh-avatars .jdh-avatar-mark img{
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: block;
}

.jdh-deeplink{
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--jdh-grey);
}

.jdh-deeplink a{
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.jdh-deeplink a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jdh-creds{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  width: 100%;
  margin-top: 1.2rem;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--jdh-grey);
}

.jdh-cred{
  display: flex;
  align-items: center;
  gap: 8px;
}

.jdh-cred .jdh-star{
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  display: block;
}

.jdh-cred .jdh-score{
  color: var(--jdh-ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.jdh-cred .jdh-google-wordmark{
  width: auto;
  height: 21px;
}

.jdh-illus{
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

.jd-sample-head .jd-h3{
  font-size: 18px;
  line-height: 1.3;
}

.jd-sum:hover .jd-sum-title{
  color: var(--blue);
}

.jd-sum-arrow svg{
  width: 16px;
  height: 16px;
}


html[lang="ja"] .jd-h2,
html[lang="ja"] .jd-h3,
html[lang="ja"] .jd-h4,
html[lang="ja"] .jd-intro-title,
html[lang="ja"] .jd-paper-title{
  letter-spacing: 0;
  line-height: 1.4;
}

.jd-level-part .jd-p{
  margin-top: 7px;
  font-size: 14.5px;
  line-height: 1.6;
}

.jd-intro-body .jd-p:first-of-type{
  margin-top: 20px;
}

html[lang="ja"] .jd-p,
html[lang="ja"] .jd-list li,
html[lang="ja"] .jd-paper-p,
html[lang="ja"] .jd-paper-list li{
  line-height: 1.9;
}

.jd-sheetwrap{
  position: relative;
  width: min(880px, 100%);
  margin-inline: auto;
  container-type: inline-size;
}

.jd-paper:focus-visible{
  outline: 3px solid rgba(0,113,235,.4);
  outline-offset: 4px;
}

.jd-paper[contenteditable="true"] .jd-var{
  background: rgba(0,113,235,.15);
}

.jd-paper-block:first-of-type{
  margin-top: 24px;
}

.jd-paper-block + .jd-paper-block{
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
}

/* The guidance that used to float beside the sheet on connector lines. As a
   hint under its own heading it reads as part of filling the form in. */
.jd-paper-hint{
  margin: 4px 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8a93a3;
}

.jd-ready{
  position: absolute;
  right: clamp(-30px, -2vw, -8px);
  bottom: clamp(58px, 7vw, 96px);
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;

  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 26px -10px rgba(11,18,32,.34), 0 2px 6px rgba(11,18,32,.06);
}

.jd-ready-mark{
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #34A853;
  color: #fff;
}

.jd-ready-mark svg{
  width: 13px;
  height: 13px;
}

.jd-ready-t{
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-main);
}

.jd-ready-d{
  margin-top: 1px;
  font-size: 12px;
  color: var(--text-muted);
}

.jd-sample .jd-download{
  margin-top: 14px;
  justify-content: center;
}

.jd-sample .jd-btn-download{
  width: 100%;
  justify-content: center;
  padding: 11px 16px;
  font-size: 14px;
}

.jd-section-blue{
  color: #fff;
  background:
    radial-gradient(760px 380px at 50% -8%, rgba(255,255,255,.13), transparent 68%),
    linear-gradient(135deg, #00224a 0%, #003e82 62%, #004e9c 100%);
}

.jd-section-blue .jd-h2{
  color: #fff;
}

.jd-section-blue .jd-kicker{
  color: #8ab4f8;
}

.jd-section-blue .jd-btn-download{
  background: #fff;
  color: var(--blue);
}

.jd-section-blue .jd-carousel-dot{
  background: rgba(255,255,255,.34);
}

.jd-section-blue .jd-carousel-nav{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  color: #fff;
  box-shadow: none;
}

.jd-section-blue .jd-carousel-band{
  color: rgba(255,255,255,.72);
}

.jd-section-blue .jd-section-head .jd-p{
  color: rgba(255,255,255,.78);
}

.jd-section-blue .jd-carousel-nav:hover{
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.2);
  color: #fff;
}

.jd-section-blue .jd-carousel-caption .jd-h3{
  color: #fff;
}

.jd-section-blue .rpv-pick-foot .jd-btn-download{
  background: var(--blue);
  color: #fff;
}

.jd-section-blue .jd-carousel-dot[aria-current="true"]{
  background: #fff;
}

.jd-carousel-nav--prev{
  left: clamp(-6px, 1vw, 14px);
}

.jd-carousel-item:focus-visible{
  outline: none;
}

.jd-sheet .jd-h4{
  font-size: 6.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 3px;
}

.jd-sheet .jd-list li + li{
  margin-top: 0.22em;
}

.jd-sheet .jd-p,
.jd-sheet .jd-list li{
  margin-top: 0;
  font-size: 1em;
  line-height: 1.45;
  color: #46505f;
}

.jd-sample-body{
  max-height: 430px;
  overflow: hidden;
  padding: 22px 20px 30px;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
}

.jd-sample-part .jd-p{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
}

.jd-sample-part .jd-h4{
  font-size: 13.5px;
  margin-bottom: 5px;
}

.jd-sample-part .jd-list li{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
}

.jd-sample-part + .jd-sample-part{
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

.jd-list{
  margin: 10px 0 0;
  padding-left: 20px;
}

.jd-list li{
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

.jd-list li strong{
  color: var(--text-main);
  font-weight: 700;
}

.jd-carousel-nav--next{
  right: clamp(-6px, 1vw, 14px);
}

.jd-modal-body .jd-sample-part .jd-h4{
  font-size: 16px;
}

.jd-modal-body .jd-sample-part .jd-p,
.jd-modal-body .jd-sample-part .jd-list li{
  font-size: calc(14.5px * var(--doc-scale));
  line-height: 1.6;
  margin: 0;
}

.jd-mission{
  margin-top: clamp(30px, 3.4vw, 46px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 3.6vw, 52px);

  list-style: none;
  margin-bottom: clamp(30px, 3.4vw, 44px);
  padding: 0;
}

.jd-mission-item{
  text-align: center;
}

.jd-mission-item .jd-p{
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.7;
}

.jd-mission-item .jd-h4{
  font-size: 18.5px;
}

.jd-mission-art{
  width: clamp(124px, 13.5vw, 164px);
  height: clamp(124px, 13.5vw, 164px);
  margin: 0 auto 16px;
}

.jd-mission-art svg{
  display: block;
  width: 100%;
  height: 100%;
}

.jd-split-part .jd-h4{
  margin-top: 8px;
}

.jd-level-part .jd-h4{
  font-size: 14px;
}

.jd-feature{
  display: grid;
  grid-template-columns: clamp(250px, 31%, 370px) 1fr;
  align-items: center;
  gap: clamp(30px, 5vw, 74px);
}

.jd-feature + .jd-feature{
  margin-top: clamp(48px, 6vw, 88px);
}

.jd-feature-art svg{
  display: block;
  width: 100%;
  height: auto;
}

.jd-feature--flip{
  grid-template-columns: 1fr clamp(250px, 31%, 370px);
}

.jd-feature--flip .jd-feature-art{
  grid-column: 2;
  grid-row: 1;
}

.jd-scope{
  position: relative;
  overflow: hidden;
  border-radius: 26px;

  width: min(1500px, calc(100vw - 40px));
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: clamp(28px, 3.6vw, 50px);

  padding: clamp(34px, 4.2vw, 62px) clamp(20px, 3.2vw, 54px) clamp(36px, 4.4vw, 64px);

  background:
    radial-gradient(820px 420px at 50% -6%, rgba(66,133,244,.13), transparent 66%),
    linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
}

.jd-scope::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(0deg,  rgba(15,23,42,.05) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(15,23,42,.05) 0 1px, transparent 1px 36px);

  -webkit-mask-image: radial-gradient(760px 480px at 50% 32%, #000 0%, transparent 76%);
  mask-image: radial-gradient(760px 480px at 50% 32%, #000 0%, transparent 76%);
}

.jd-scope-inner{
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
}

.jd-scope-inner .jd-sample-body{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 70px);
}

.jd-scope-group + .jd-scope-group{
  margin-top: clamp(40px, 5vw, 68px);
  padding-top: clamp(38px, 4.6vw, 62px);
  border-top: 1px solid rgba(15,23,42,.10);
}

.jd-scope-head{
  text-align: center;
  margin-bottom: clamp(26px, 3.2vw, 44px);
}

.jd-scope-head .jd-h4{
  font-size: clamp(19px, 2.1vw, 23px);
}

.jd-scope-art{
  width: clamp(120px, 12vw, 152px);
  margin: 0 auto 12px;
}

.jd-scope-art svg{
  display: block;
  width: 100%;
  height: auto;
}

.jd-scope-count{
  margin-top: 6px;
  font-size: var(--extra-small);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.jd-scope-grid{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 46px);
}

.jd-scope-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0;
  padding: 0;
}

.rpv-pick .jd-scope-item{
  padding: 16px 12px 20px;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color .14s ease, opacity .14s ease;
}

.rpv-pick .jd-scope-item:hover{
  background: rgba(0,113,235,.05);
}

.jd-scope-ico{
  order: 1;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
}

.jd-scope-ico svg{
  width: 22px;
  height: 22px;
}

.jd-scope-term{
  order: 2;
  margin-top: 14px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text-main);
}

.jd-scope-note{
  order: 4;
  margin-top: 9px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.jd-scope-grid--four{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jd-scope-grid--gated{
  margin-top: clamp(30px, 3.6vw, 50px);
  padding-top: clamp(28px, 3.4vw, 46px);
  border-top: 1px solid rgba(15,23,42,.08);
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
}

.jd-scope-lvl{
  order: 3;
  margin-top: 7px;
  padding: 3px 10px 4px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);

  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.jd-duties{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(42px, 5.2vw, 80px) clamp(34px, 4.4vw, 72px);
}

.jd-duty{
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: clamp(190px, 28%, 320px) 1fr;
  align-items: center;
  gap: clamp(26px, 4.4vw, 66px);
}

.jd-duty .jd-p{
  margin-top: 13px;
}

.jd-duty .jd-h3{
  font-size: clamp(20px, 2.2vw, 25px);
}

.jd-duty:nth-child(even){
  grid-template-columns: 1fr clamp(190px, 28%, 320px);
}

.jd-duty:nth-child(even) .jd-duty-art{
  grid-column: 2;
  grid-row: 1;
}

.jd-duty:nth-child(even) .jd-duty-text{
  grid-column: 1;
  grid-row: 1;
}

.jd-duty-art{
  width: clamp(190px, 20vw, 264px);
  margin: 0 auto 20px;
}

.jd-duty-art svg{
  display: block;
  width: 100%;
  height: auto;
}

.jd-req{
  margin-top: clamp(30px, 3.6vw, 48px);
}

.jd-req-legend{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 52px);
  padding-bottom: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--border-default);
}

.jd-req-key{
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.jd-req-key[data-tone="must"] .jd-req-key-mark{
  background: rgba(52,168,83,.12);
  color: #34A853;
}

.jd-req-key[data-tone="nice"] .jd-req-key-mark{
  background: rgba(66,133,244,.11);
  color: #4285F4;
}

.jd-req-key-mark{
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
}

.jd-req-key-mark svg{
  width: 19px;
  height: 19px;
}

.jd-req-key-title{
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-main);
}

.jd-req-key-note{
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.jd-req-family{
  padding-top: clamp(26px, 3vw, 40px);
}

.jd-req-family > .jd-p{
  max-width: 820px;
}

.jd-req-family + .jd-req-family{
  margin-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--border-subtle);
}

.jd-req-family-head{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(14px, 1.8vw, 24px);
  margin-bottom: clamp(10px, 1.4vw, 18px);
}

.jd-req-art{
  flex-shrink: 0;
  width: clamp(108px, 12vw, 152px);
}

.jd-req-art svg{
  display: block;
  width: 100%;
  height: auto;
}

.jd-req-levels{
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
}

.jd-req-levels button{
  padding: 8px 17px 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;

  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;

  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.jd-req-levels button:hover{
  color: var(--text-main);
}

.jd-req-levels button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,113,235,.34);
}

.jd-req-levels button[aria-selected="true"]{
  background: #fff;
  color: var(--blue);
  box-shadow: 0 1px 3px rgba(15,23,42,.16), 0 1px 1px rgba(15,23,42,.06);
}

.jd-req-panel[hidden]{
  display: none;
}

.jd-req-cols{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 44px);
}

.jd-req-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.jd-req-list li{
  display: flex;
  align-items: flex-start;
  gap: 11px;

  font-size: 15.5px;
  line-height: 1.68;
  color: var(--text-muted);
}

.jd-req-list li + li{
  margin-top: 12px;
}

.jd-req-list li::before{
  content: "";
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 5px;
  background: var(--req-mark) center/contain no-repeat;
}

.jd-req-list + .jd-req-list{
  padding-left: clamp(22px, 2.6vw, 44px);
  border-left: 1px solid var(--border-subtle);
}

.jd-req-list[data-tone="must"] .jd-req-ico{
  background: rgba(52,168,83,.12);
  color: #34A853;
}

.jd-req-list[data-tone="nice"] .jd-req-ico{
  background: rgba(66,133,244,.11);
  color: #4285F4;
}

.jd-req-item{
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0;
  padding: 0;
}

.jd-req-item + .jd-req-item{
  margin-top: clamp(20px, 2.2vw, 28px);
}

.jd-req-ico{
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.jd-req-ico svg{
  width: 20px;
  height: 20px;
}

.jd-req-body{
  min-width: 0;
  padding-top: 2px;
}

.jd-req-title{
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text-main);
}

.jd-req-note{
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.jd-req-tags{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jd-req-tags li{
  margin: 0;
  padding: 4px 10px 5px;
  border-radius: 999px;
  background: rgba(15,23,42,.055);

  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-muted);
}

.jd-req-tags li[data-tech]{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 8px;
}

.jd-req-tags li[data-tech]::before{
  content: "";
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  background-color: var(--tech-colour, currentColor);
  -webkit-mask: var(--tech) center/contain no-repeat;
  mask: var(--tech) center/contain no-repeat;
}

.jd-lvl-wrap{
  margin-top: clamp(30px, 3.6vw, 50px);
}

.jd-lvl{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.jd-lvl td{
  padding: clamp(20px, 2.4vw, 30px) clamp(14px, 1.8vw, 24px);
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-muted);
}

.jd-lvl tbody th{
  width: clamp(150px, 17%, 210px);
  padding: clamp(20px, 2.4vw, 30px) clamp(16px, 2vw, 28px) clamp(20px, 2.4vw, 30px) 0;
}

.jd-lvl thead th{
  padding: 0 clamp(14px, 1.8vw, 24px) clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--border-default);
}

.jd-lvl th,
.jd-lvl td{
  text-align: left;
  vertical-align: top;
}

.jd-lvl tbody tr + tr th,
.jd-lvl tbody tr + tr td{
  border-top: 1px solid var(--border-subtle);
}

.jd-lvl[data-active="junior"] [data-level="junior"],
.jd-lvl[data-active="mid"] [data-level="mid"],
.jd-lvl[data-active="senior"] [data-level="senior"]{
  background: rgba(0,113,235,.05);
  box-shadow:
    inset 1px 0 0 rgba(0,113,235,.16),
    inset -1px 0 0 rgba(0,113,235,.16);
}

.jd-lvl[data-active="junior"] th[data-level="junior"] .jd-lvl-name,
.jd-lvl[data-active="mid"] th[data-level="mid"] .jd-lvl-name,
.jd-lvl[data-active="senior"] th[data-level="senior"] .jd-lvl-name{
  color: var(--blue);
}

.jd-lvl-name{
  display: block;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-main);
}

.jd-lvl-note{
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.jd-lvl-facts{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}

.jd-lvl-facts span{
  align-self: flex-start;
  padding: 4px 10px 5px;
  border-radius: 999px;
  background: rgba(15,23,42,.055);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.jd-lvl-dim{
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-main);
}

.jd-lvl-hint{
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

.jd-jds{
  list-style: none;
  margin: clamp(28px, 3.4vw, 46px) 0 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}

.jd-jd{
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(18px, 2.2vw, 24px);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  background: #fff;

  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.jd-jd:hover{
  border-color: rgba(0,113,235,.34);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(15,23,42,.45);
}

.jd-jd-head{
  display: flex;
  align-items: center;
  gap: 11px;
}

.jd-jd-logo{
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--brand) 12%, #fff);
}

.jd-jd-logo img{
  width: 22px;
  height: 22px;
  display: block;
}

.jd-jd-co{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-main);
}

.jd-jd-title{
  margin-top: 14px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-main);
}

.jd-jd-verdict{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

.jd-jd-stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--border-subtle);
}

.jd-jd-stats dt{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.jd-jd-stats dd{
  margin: 1px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.jd-jd-stats div:first-child{
  grid-column: 1 / -1;
}

.jd-jd-stats dd[data-pay="yes"]{
  color: #1f7a4d;
}

.jd-jd-tags{
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jd-jd-tags li{
  margin: 0;
  padding: 4px 10px 5px;
  border-radius: 999px;
  background: rgba(15,23,42,.055);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.jd-jd-tags li[data-tech]{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 8px;
}

.jd-jd-tags li[data-tech]::before{
  content: "";
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  background-color: var(--tech-colour, currentColor);
  -webkit-mask: var(--tech) center/contain no-repeat;
  mask: var(--tech) center/contain no-repeat;
}

.jd-jd-more{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  interpolate-size: allow-keywords;
}

.jd-jd-more summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  cursor: pointer;

  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
}

.jd-jd-more summary svg{
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform .26s ease;
}

.jd-jd-more[open] summary{
  color: var(--blue);
}

.jd-jd-more::details-content{
  block-size: 0;
  overflow: hidden;
  transition: block-size .28s ease, content-visibility .28s allow-discrete;
  transition-behavior: allow-discrete;
}

.jd-jd-more[open] summary svg{
  transform: rotate(180deg);
  color: var(--blue);
}

.jd-jd-more:focus-within summary{
  color: var(--blue);
}

.jd-jd-more[open]::details-content{
  block-size: auto;
}

.jd-jd-more summary::-webkit-details-marker{
  display: none;
}

.jd-jd-read{
  padding-top: 10px;
}

.jd-jd-read p{
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.jd-jd-read b{
  color: var(--text-main);
}

.jd-jd-read p + p{
  margin-top: 9px;
}

.jd-jd-link{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 14px;

  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}

.jd-jd-link svg{
  width: 13px;
  height: 13px;
}

.jd-jd-link:hover{
  text-decoration: underline;
}

.jd-jd-logo--mono{
  font-size: 17px;
  font-weight: 800;
  color: var(--brand);
}

.jd-jds-note{
  max-width: 780px;
  margin: clamp(24px, 2.8vw, 34px) auto 0;
  font-size: 13.5px;
  line-height: 1.65;
  text-align: center;
  color: var(--text-muted);
}

.jd-legal{
  display: grid;
  grid-template-columns: clamp(150px, 20%, 230px) 1fr;
  align-items: start;
  gap: clamp(28px, 4vw, 66px);
  margin-top: clamp(30px, 3.6vw, 48px);
}

.jd-legal .jd-req-ico{
  background: rgba(0,113,235,.10);
  color: var(--blue);
}

.jd-legal .jd-req-item + .jd-req-item{
  margin-top: 0;
}

.jd-legal-note-foot,
.jd-legal + .jd-legal-note{
  max-width: 820px;
  margin: clamp(30px, 3.4vw, 44px) auto 0;
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--border-subtle);

  font-size: 14px;
  line-height: 1.65;
  text-align: center;
  color: var(--text-muted);
}

.jd-legal-art svg{
  display: block;
  width: 100%;
  height: auto;
}

.jd-legal-steps{
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.jd-legal-step{
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  margin: 0;
  padding-bottom: clamp(22px, 2.6vw, 32px);
}

.jd-legal-step:last-child{
  padding-bottom: 0;
}

.jd-legal-step:not(:last-child)::before{
  content: "";
  position: absolute;
  top: 38px;
  bottom: 6px;
  left: 16.5px;
  width: 1px;
  background: rgba(15,23,42,.14);
}

.jd-legal-num{
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue);

  font-size: 14px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.jd-legal-body{
  min-width: 0;
  padding-top: 5px;
}

.jd-legal-title{
  display: inline;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-main);
}

.jd-legal-note{
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-muted);
}

.jd-legal-src{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;

  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}

.jd-legal-src svg{
  width: 13px;
  height: 13px;
}

.jd-legal-src:hover{
  text-decoration: underline;
}

.jd-legal-tag{
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px 3px;
  border-radius: 999px;
  background: rgba(249,171,0,.18);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a5c00;
  vertical-align: 2px;
}

.jd-legal-sources{
  display: grid;
  grid-template-columns: clamp(150px, 20%, 230px) 1fr;
  gap: 0 clamp(28px, 4vw, 66px);

  margin-top: clamp(34px, 4vw, 52px);
  padding-top: clamp(24px, 2.8vw, 32px);
  border-top: 1px solid var(--border-subtle);
}

.jd-legal-sources a{
  display: inline-flex;
  align-items: center;
  gap: 7px;

  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}

.jd-legal-sources ul{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px clamp(24px, 3vw, 44px);
}

.jd-legal-sources li{
  margin: 0;
}

.jd-legal-sources > *{
  grid-column: 2;
}

.jd-legal-sources span{
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
}

.jd-legal-sources a svg{
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.jd-legal-sources a:hover{
  text-decoration: underline;
}

.jd-legal-sources-title{
  font-size: var(--extra-small);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

.jd-legal-foot{
  max-width: 820px;
  margin: clamp(26px, 3vw, 36px) auto 0;

  font-size: 14px;
  line-height: 1.65;
  text-align: center;
  color: var(--text-muted);
}

.jd-faq{
  max-width: 900px;
  margin: clamp(26px, 3vw, 40px) auto 0;
  border-top: 1px solid var(--border-subtle);

  /* Lets height animate to and from auto. Inherited, so scoping it here keeps
     it off the rest of the page. */
  interpolate-size: allow-keywords;
}

.jd-faq-item{
  border-bottom: 1px solid var(--border-subtle);
}

.jd-faq-item[open] .jd-faq-h{
  color: var(--blue);
}

.jd-faq-item::details-content{
  block-size: 0;
  overflow: hidden;
  transition: block-size .3s ease, content-visibility .3s allow-discrete;
  transition-behavior: allow-discrete;
}

.jd-faq-item[open] .jd-faq-mark{
  transform: rotate(180deg);
  background: rgba(0,113,235,.10);
  color: var(--blue);
}

.jd-faq-item[open]::details-content{
  block-size: auto;
}

.jd-faq-q{
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 24px);

  padding: clamp(18px, 2.2vw, 24px) clamp(4px, 1vw, 12px);
  cursor: pointer;
  list-style: none;

  transition: color .16s ease;
}

.jd-faq-q:focus-visible{
  outline: none;
  border-radius: 10px;
  box-shadow: 0 0 0 3px rgba(0,113,235,.32);
}

.jd-faq-q:hover .jd-faq-h{
  color: var(--blue);
}

.jd-faq-q::-webkit-details-marker{
  display: none;
}

.jd-faq-h{
  flex: 1;
  min-width: 0;

  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-main);

  transition: color .16s ease;
}

.jd-faq-mark{
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: rgba(15,23,42,.05);
  color: var(--text-muted);

  transition: transform .28s ease, background-color .18s ease, color .18s ease;
}

.jd-faq-mark svg{
  width: 17px;
  height: 17px;
}

.jd-faq-a{
  padding: 0 clamp(4px, 1vw, 12px) clamp(20px, 2.4vw, 26px);
  max-width: 74ch;
}

.jd-faq-a .jd-p{
  margin-top: 0;
}

.jd-related{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
}

.jd-related a{
  display: flex;
  align-items: center;
  gap: 13px;

  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;

  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.jd-related li{
  margin: 0;
}

.jd-related a svg{
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--blue);
}

.jd-related a:hover{
  border-color: rgba(0,113,235,.42);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -16px rgba(15,23,42,.45);
}

.jd-related a:focus-visible{
  outline: none;
  border-color: rgba(0,113,235,.42);
  box-shadow: 0 0 0 3px rgba(0,113,235,.3);
}

.jd-related a:hover .jd-related-arrow{
  transform: translateX(3px);
}

.jd-related-ico{
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.jd-related-ico svg{
  width: 20px;
  height: 20px;
}

.jd-related-name{
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text-main);
}

.jd-related-arrow{
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--blue);
  transition: transform .16s ease;
}


/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */


@media (max-width: 1000px){
  .jd-gen{
    grid-template-columns: 1fr;
  }

  .jd-rail{
    position: static;
  }
}

@media (max-width: 560px){
  .jd-section{
    padding: 42px 18px;
  }

  .jd-field-row{
    grid-template-columns: 1fr;
  }

  .jd-btn-download{
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce){
  .jd-btn-download,
  .jd-icon-btn,
  .jd-related a{
    transition: none;
  }

  .jd-btn-download:hover,
  .jd-related a:hover{
    transform: none;
  }
}


@media (max-width: 680px){
  .jd-desk{
    padding: 24px 14px 30px;
    border-radius: 20px;
  }

  .jd-desk-scene{
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .jd-paper{
    padding: 28px 22px 26px;
  }

  .jd-desk-clip{
    top: -14px;
    left: 24px;
    width: 21px;
  }
}

@media (max-width: 700px){
  .jd-carousel{
    padding: 0 clamp(30px, 9vw, 48px);
  }

  .jd-carousel-item[data-pos="left"]{
    transform: translate(calc(-50% - 34%), -50%) rotateY(12deg) scale(.82);
  }

  .jd-carousel-item[data-pos="right"]{
    transform: translate(calc(-50% + 34%), -50%) rotateY(-12deg) scale(.82);
  }
}

@supports (height: 100dvh){
  .jd-modal{
    --sheet-h: min(calc(100dvh - 56px), calc((100vw - 32px) * 297 / 210));
  }
}

@supports (height: 100dvh){
  .jd-modal{
    --paper-h: min(
      calc(100dvh - var(--gap) * 2 - var(--foot-h)),
      calc((100vw - 32px) * 297 / 210)
    );
  }
}

@media (max-width: 900px){
  .jd-mission{
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .jd-mission-item{
    display: grid;
    grid-template-columns: clamp(96px, 22vw, 132px) 1fr;
    align-items: center;
    gap: clamp(18px, 3.4vw, 30px);
    text-align: left;
  }

  .jd-mission-art{
    width: 100%;
    height: auto;
    margin: 0;
  }
}

@media (max-width: 860px){
  .jd-feature{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .jd-feature-art{
    width: min(320px, 76%);
  }
}

@media (max-width: 900px){
  .jd-scope-inner .jd-sample-body{
    grid-template-columns: 1fr;
    gap: 40px;
  }
}


@media (max-width: 1000px){
  .jd-scope-grid,
  .jd-scope-grid--four,
  .jd-scope-grid--gated{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px){
  .jd-scope-grid,
  .jd-scope-grid--four,
  .jd-scope-grid--gated{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px){
  .jd-duties{
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

@media (max-width: 860px){
  .jd-req-legend,
  .jd-req-cols{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .jd-req-list + .jd-req-list{
    padding-left: 0;
    padding-top: 22px;
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
  }
}

@media (max-width: 560px){
  .jd-section{
    padding: 42px 18px;
  }
}

@media (max-width: 900px){
  .jd-lvl,
  .jd-lvl thead,
  .jd-lvl tbody,
  .jd-lvl tr,
  .jd-lvl th,
  .jd-lvl td{
    display: block;
    width: auto;
  }

  .jd-lvl thead{
    display: none;
  }

  .jd-lvl tbody th{
    padding: 0 0 4px;
  }

  .jd-lvl tbody tr + tr th{
    border-top: 0;
  }

  .jd-lvl tbody tr{
    padding-top: 26px;
    margin-top: 26px;
    border-top: 1px solid var(--border-subtle);
  }

  .jd-lvl tbody tr:first-child{
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
  }

  .jd-lvl td{
    padding: 14px 0 0;
    border-top: 0;
  }

  .jd-lvl td::before{
    content: attr(data-level-label);
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-main);
  }

  .jd-lvl[data-active] [data-level]{
    box-shadow: none;
    background: transparent;
  }

  .jd-lvl td[data-level="junior"]::before{ content: "Junior"; }
  .jd-lvl td[data-level="mid"]::before{ content: "Mid-level"; }
  .jd-lvl td[data-level="senior"]::before{ content: "Senior"; }
}

@media (max-width: 560px){
  .jd-section{
    padding: 42px 18px;
  }
}

@media (max-width: 860px){
  .jd-req-legend,
  .jd-req-cols{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .jd-req-list + .jd-req-list{
    padding-left: 0;
    padding-top: 22px;
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
  }

  /* The heading wraps under the scene rather than beside it, so a long role name
     is not squeezed into what is left of the row. */
  .jd-req-family-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .jd-req-art{
    width: 108px;
  }

  /* The pill goes full width and shares it three ways rather than overflowing. */
  .jd-req-levels{
    margin-left: 0;
    width: 100%;
  }

  .jd-req-levels button{
    flex: 1;
    padding: 9px 6px 10px;
    font-size: 13px;
  }
}

@media (max-width: 860px){
  .jd-legal{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 860px){
  .jd-legal{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .jd-legal-art{
    width: min(190px, 46%);
  }
}

@media (max-width: 720px){
  .jd-legal-sources ul{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px){
  .jd-sum{
    align-items: flex-start;
  }

  .jd-sum-arrow{
    margin-top: 11px;
  }
}

@media (prefers-reduced-motion: reduce){
  .jd-faq-mark,
  .jd-faq-item::details-content{
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .jd-jd{
    transition: none;
  }

  .jd-jd:hover{
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .jd-jd-more summary svg,
  .jd-jd-more::details-content{
    transition: none;
  }
}

@media (max-width: 900px){
  .jdh-grid{
    grid-template-columns: 1fr;
    grid-template-areas: "text" "media" "cta";
    row-gap: 26px;
  }

  .jdh-text,
  .jdh-cta-block{
    align-self: auto;
    align-items: center;
  }

  .jdh-crumbs,
  .jdh-cta-row,
  .jdh-creds{
    justify-content: center;
  }

  .jdh-title,
  .jdh-blurb{
    text-align: center;
  }

  .jdh-blurb{
    max-width: 62ch;
    margin-inline: auto;
  }
}

@media (max-width: 560px){
  .jdh-title{ font-size: clamp(1.6rem, 8.6vw, 2.3rem); line-height: 1.12; }
  .jdh-cta{ width: 100%; max-width: 420px; text-align: center; padding: 16px 22px; font-size: var(--large); }
  .jdh-cta-row{ width: 100%; gap: 10px 12px; }
}

@media (prefers-reduced-motion: reduce){
  .jdh-cta{ transition: none; }
  .jdh-cta:hover{ transform: none; }
}

@media (max-width: 720px){
  .jd-ready{
    position: static;
    margin: 16px auto 0;
    width: fit-content;
  }
}

@media (max-width: 680px){


  .jd-paper{
    padding: 28px 22px 26px;
  }

}

/* Written back by hand: the breadcrumb separator and the hero art column were
   only ever defined inside an editing script, so the rebuild could not recover
   them from the transcript. */
.jdh-crumbs .jdh-sep{
  color: #c3cad6;
}

.jdh-media{
  grid-area: media;
  min-width: 0;
}