/* The Jackson look (Jackson design system, 14 Oct 2026: say less, do more).
   Tokens match the design system: https://claude.ai/artifact/GGCo2NkUR2RJCamcgS3k8h
   Each section is a full-width band with its own ground, so the page reads as a run of rooms.
   Cinzel is the logo face only (JACKSON, and an offer's name above its headline). Everything people
   read is Libre Caslon, in sentence case: Display for headlines, Text for the rest. */
:root {
  --jk-bone: #ece5d8;
  --jk-parchment: #f6f1e7;
  --jk-iron: #1c1b18;
  --jk-iron-muted: #5b554b;
  --jk-rust: #a8461a;
  --jk-on-rust: #f6f1e7;
  --jk-ember: #c2541d;
  --jk-saddle: #6e4127;
  --jk-brass: #a07a3c;
  --jk-hairline: #d3c9b6;
  --jk-logo: "Cinzel", "Trajan Pro", Georgia, serif;
  --jk-head: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --jk-body: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --jk-s1: 8px;
  --jk-s2: 16px;
  --jk-s4: 32px;
  --jk-s8: 64px;
  --jk-s16: 128px;
  --jk-band: var(--jk-s16);
  --jk-gutter: var(--jk-s8);
  --jk-wide: 1040px;
}
@media (max-width: 720px) {
  :root {
    --jk-band: var(--jk-s8);
    --jk-gutter: var(--jk-s2);
  }
}

body.jk {
  background: var(--jk-bone);
  color: var(--jk-iron);
  font: 400 18px/1.75 var(--jk-body);
}
body.jk > header.top {
  display: none;
}

/* Header (hub and other non-landing pages): logo left, links, one button right. Scrolls away. */
.jk-top {
  display: flex;
  align-items: center;
  gap: var(--jk-s4);
  padding: var(--jk-s2) max(var(--jk-gutter), calc((100% - 1200px) / 2));
}
.jk-top .jk-mark {
  margin-right: auto;
}
.jk-nav {
  display: flex;
  gap: var(--jk-s4);
}
.jk-nav a,
.jk-menu nav a {
  color: var(--jk-iron);
  text-decoration: none;
  font-size: 15px;
}
.jk-nav a:hover {
  color: var(--jk-rust);
}
.jk-top .btn {
  padding: 14px 24px;
  font-size: 15px;
}
.jk-menu {
  display: none;
  position: relative;
}
.jk-menu summary {
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  padding: 10px 0;
}
.jk-menu summary::-webkit-details-marker {
  display: none;
}
.jk-menu nav {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  display: grid;
  gap: var(--jk-s2);
  min-width: 220px;
  padding: var(--jk-s4);
  background: var(--jk-iron);
}
.jk-menu nav a {
  color: var(--jk-bone);
  font: 400 24px/1.2 var(--jk-head);
}
@media (max-width: 900px) {
  .jk-nav,
  .jk-top-act {
    display: none;
  }
  .jk-menu {
    display: block;
  }
}

/* Footer on every Jackson page: iron band, logo / links / socials, a rule, the legal line */
.jk-foot {
  background: var(--jk-iron);
  color: var(--jk-bone);
  padding: var(--jk-s8) max(var(--jk-gutter), calc((100% - 1200px) / 2)) var(--jk-s4);
  font-family: var(--jk-body);
}
.jk-foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--jk-s4);
  padding-bottom: var(--jk-s4);
  border-bottom: 1px solid #3a3833;
}
.jk-foot .jk-mark {
  color: var(--jk-bone);
}
.jk-foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jk-s2) var(--jk-s4);
}
.jk-foot a {
  color: var(--jk-bone);
  text-decoration: none;
  font-size: 15px;
}
.jk-foot a:hover {
  color: var(--jk-hairline);
}
.jk-social {
  display: flex;
  gap: var(--jk-s2);
}
.jk-social svg {
  width: 22px;
  height: 22px;
  display: block;
}
.jk-legal {
  margin: var(--jk-s4) auto 0;
  max-width: 60em;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jk-hairline);
}
.jk-legal-links {
  display: flex;
  justify-content: center;
  gap: var(--jk-s4);
  margin-top: var(--jk-s2);
}
.jk-legal-links a {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 720px) {
  .jk-foot-row {
    flex-direction: column;
    text-align: center;
  }
  .jk-foot-nav {
    justify-content: center;
  }
}

/* Bands: full-width grounds, content held to one column */
.jk-page {
  display: block;
}
.jk-page > section {
  padding-block: var(--jk-band);
  padding-inline: max(var(--jk-gutter), calc((100% - var(--jk-wide)) / 2));
}
.jk-page > section > * {
  min-width: 0;
}
.jk-parchment {
  background: var(--jk-parchment);
}
.jk-saddle {
  background: var(--jk-saddle);
  color: var(--jk-bone);
}

/* The logo: JACKSON, and an offer's name above its headline */
.jk-mark {
  justify-self: start;
  font: 600 15px/1 var(--jk-logo);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--jk-iron);
  text-decoration: none;
}
.jk-name {
  margin: 0;
  font: 600 15px/1.2 var(--jk-logo);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: inherit;
}

/* Everything people read: Libre Caslon, sentence case */
.jk-display {
  margin: 0;
  font: 400 clamp(36px, 5.2vw, 60px)/1.1 var(--jk-head);
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: inherit;
  max-width: 18em;
}
.jk-title {
  margin: 0 0 var(--jk-s8);
  font: 400 clamp(30px, 3.6vw, 40px)/1.15 var(--jk-head);
  color: inherit;
}
.jk-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: var(--jk-s2);
  background: var(--jk-ember);
}
.jk-label {
  margin: 0;
  font: italic 400 19px/1.3 var(--jk-body);
  color: inherit;
  opacity: 0.85;
}
.jk-lede {
  margin: 0;
  max-width: 34em;
  font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.6;
}
.jk-small {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--jk-iron-muted);
}
.jk-item {
  margin: 0;
  font: 700 19px/1.35 var(--jk-body);
  color: inherit;
}

/* Hero: the name and headline sit centred, like a gate sign over the road */
.jk-hero {
  padding-top: var(--jk-s4) !important;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--jk-s4);
}
.jk-hero .jk-mark {
  margin-bottom: var(--jk-s8);
}
.jk-video {
  width: 100%;
  max-width: 960px;
}
.jk-video .f-media {
  border-radius: 0;
  box-shadow: none;
}
.jk-act {
  display: grid;
  justify-items: center;
  gap: var(--jk-s2);
}
.jk-end {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--jk-s4);
}

/* The one action */
body.jk .btn {
  appearance: none;
  border: 0;
  border-radius: 2px;
  background: var(--jk-rust);
  color: var(--jk-on-rust);
  font: 700 17px/1 var(--jk-body);
  letter-spacing: 0.01em;
  padding: 20px 40px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
}
body.jk.mm-c .btn {
  margin-inline: 0;
}
body.jk .btn:hover,
body.jk .btn:active {
  background: var(--jk-saddle);
}
body.jk a:focus-visible,
body.jk button:focus-visible,
body.jk summary:focus-visible {
  outline: 2px solid var(--jk-rust);
  outline-offset: 3px;
}

/* One quiet line of proof, between the hero and the first band */
.jk-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--jk-s2) var(--jk-s8);
  padding-block: var(--jk-s4) var(--jk-s8) !important;
}
.jk-proof p {
  margin: 0;
  font-size: 16px;
  color: var(--jk-iron-muted);
}
.jk-proof b {
  font: 400 26px/1 var(--jk-head);
  color: var(--jk-iron);
  margin-right: 6px;
}

/* What you get: a grid of tiles on parchment, the first one wide */
.jk-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jk-s4);
}
.jk-grid li {
  background: var(--jk-bone);
  padding: var(--jk-s4);
  display: grid;
  align-content: start;
  gap: var(--jk-s1);
  border-top: 2px solid var(--jk-ember);
}
.jk-grid li p {
  margin: 0;
}
.jk-grid li p:not(.jk-item) {
  color: var(--jk-iron-muted);
}
.jk-grid .jk-lead {
  grid-column: 1 / -1;
  background: var(--jk-iron);
  color: var(--jk-bone);
  padding: var(--jk-s8) var(--jk-s4);
}
.jk-grid .jk-lead .jk-item {
  font: 400 clamp(24px, 3vw, 32px)/1.2 var(--jk-head);
}
.jk-grid .jk-lead p:not(.jk-item) {
  color: var(--jk-hairline);
  font-size: 19px;
  max-width: 34em;
}
@media (max-width: 720px) {
  .jk-grid {
    grid-template-columns: 1fr;
    gap: var(--jk-s2);
  }
}

/* Who it's for: three columns */
.jk-cols {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--jk-s4);
}
.jk-cols li {
  border-top: 2px solid var(--jk-iron);
  padding-top: var(--jk-s2);
}
.jk-cols p {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .jk-cols {
    grid-template-columns: 1fr;
  }
}

/* The guarantee: iron */
.jk-band {
  background: var(--jk-iron);
  color: var(--jk-bone);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--jk-s4);
}
.jk-guar {
  margin: 0;
  max-width: 20em;
  font: 400 clamp(26px, 3.4vw, 38px)/1.3 var(--jk-head);
  text-wrap: balance;
}
.jk-band a {
  color: var(--jk-bone);
  font-size: 15px;
  text-underline-offset: 4px;
  text-decoration-color: var(--jk-ember);
}

/* The call: three steps across, on saddle */
.jk-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--jk-s4);
  counter-reset: jk;
}
.jk-steps li {
  counter-increment: jk;
  display: grid;
  align-content: start;
  gap: var(--jk-s1);
}
.jk-steps li::before {
  content: counter(jk);
  font: 400 44px/1 var(--jk-head);
  color: var(--jk-parchment);
  opacity: 0.6;
  margin-bottom: var(--jk-s1);
}
.jk-steps p {
  margin: 0;
  color: var(--jk-hairline);
}
.jk-steps .jk-item {
  color: var(--jk-parchment);
}
.jk-saddle .jk-title::after {
  background: var(--jk-parchment);
}
@media (max-width: 720px) {
  .jk-steps {
    grid-template-columns: 1fr;
  }
}

/* Questions */
.jk-sec details {
  border-top: 1px solid var(--jk-hairline);
  padding-block: var(--jk-s4);
  max-width: 760px;
}
.jk-sec details:last-of-type {
  border-bottom: 1px solid var(--jk-hairline);
}
.jk-sec summary {
  cursor: pointer;
  list-style: none;
  font: 700 19px/1.4 var(--jk-body);
}
.jk-sec summary::-webkit-details-marker {
  display: none;
}
.jk-sec summary::after {
  content: "+";
  float: right;
  color: var(--jk-ember);
  font-weight: 400;
}
.jk-sec details[open] summary::after {
  content: "–";
}
.jk-sec details p {
  margin: var(--jk-s2) 0 0;
  color: var(--jk-iron-muted);
}

/* The hub (/): two-column hero, start cards on saddle, offers stacked, the Jackson Select band */
.jk-hub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--jk-s8);
  padding-block: var(--jk-s8) var(--jk-s8) !important;
  padding-inline: max(var(--jk-gutter), calc((100% - 1200px) / 2)) !important;
}
.jk-hub-copy {
  display: grid;
  gap: var(--jk-s4);
  justify-items: start;
}
.jk-hub-hero .jk-display {
  font-size: clamp(38px, 4.6vw, 60px);
}
.jk-hub-hero .jk-display em {
  font-style: normal;
  color: var(--jk-rust);
}
.jk-hub-hero .jk-act {
  justify-items: start;
}
@media (max-width: 900px) {
  .jk-hub-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .jk-hub-copy,
  .jk-hub-hero .jk-act {
    justify-items: center;
  }
}
.jk-start {
  background: var(--jk-saddle);
  color: var(--jk-bone);
  text-align: center;
}
.jk-start .jk-title::after {
  margin-inline: auto;
  background: var(--jk-parchment);
}
.jk-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--jk-s4);
}
.jk-card {
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 6px;
  min-height: 300px;
  padding: var(--jk-s4);
  background: var(--jk-iron);
  border-top: 2px solid var(--jk-ember);
  color: var(--jk-parchment);
  text-align: left;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.jk-card:hover {
  transform: translateY(-6px);
}
/* With a photo (the hub, like Caleb's "Complimentary Education" cards): the photo fills the card, darkened
   towards the bottom where the words sit */
.jk-card-img {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  min-height: 0;
}
.jk-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.4s ease;
}
.jk-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(28, 27, 24, 0.92) 30%, rgba(28, 27, 24, 0.25) 75%);
}
.jk-card-img:hover {
  transform: none;
}
.jk-card-img:hover img {
  transform: scale(1.04);
}
.jk-card-k {
  font: italic 400 17px/1.3 var(--jk-body);
}
.jk-card b {
  font: 400 clamp(24px, 2.4vw, 30px)/1.15 var(--jk-head);
  text-wrap: balance;
}
.jk-card-m {
  font-size: 15px;
  opacity: 0.85;
}
.jk-card-go {
  margin-top: var(--jk-s2);
  font-weight: 700;
  font-size: 15px;
  border-bottom: 1px solid currentColor;
}
@media (max-width: 900px) {
  .jk-cards {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }
  .jk-card {
    min-height: 220px;
  }
}
.jk-offers {
  display: grid;
  gap: var(--jk-s2);
}
/* Each offer: words left, photo right. The shade steps down from full-contrast iron (Jackson Select)
   to a softer iron (the community), highest value first */
.jk-offer {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  overflow: hidden;
  color: var(--jk-bone);
  text-decoration: none;
  border-top: 2px solid var(--jk-ember);
  transition: filter 0.2s ease;
}
.jk-offer-1 {
  background: var(--jk-iron);
}
.jk-offer-2 {
  background: #34302a;
}
.jk-offer-3 {
  background: #4a443d;
}
.jk-offer:hover {
  filter: brightness(1.08);
}
.jk-offer-copy {
  display: grid;
  align-content: center;
  gap: var(--jk-s1);
  padding: var(--jk-s4);
}
.jk-offer-copy > span {
  display: block;
}
.jk-offer-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}
.jk-offer-n {
  font: 400 clamp(26px, 3vw, 34px)/1.15 var(--jk-head);
  color: var(--jk-parchment);
}
.jk-offer-p {
  font-size: 19px;
  max-width: 34em;
}
.jk-offer-s {
  font-size: 15px;
  color: var(--jk-hairline);
}
.jk-offer-go {
  margin-top: var(--jk-s1);
  font-weight: 700;
  font-size: 15px;
  color: var(--jk-parchment);
}
@media (max-width: 720px) {
  .jk-offer {
    grid-template-columns: 1fr;
  }
  .jk-offer-img {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}
.jk-offers-more {
  margin: var(--jk-s4) 0 0;
  text-align: center;
}
.jk-offers-more a {
  color: var(--jk-rust);
  text-underline-offset: 4px;
}
.jk-sel {
  background: var(--jk-rust);
  color: var(--jk-on-rust);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--jk-s4);
}
.jk-sel-mark {
  margin: 0;
  display: grid;
  gap: 6px;
  font: 700 clamp(44px, 6vw, 72px)/1 var(--jk-logo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.jk-sel-mark span {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.32em;
}
.jk-sel-p {
  margin: 0;
  max-width: 34em;
  font-size: 19px;
}
body.jk .jk-btn-light {
  background: var(--jk-parchment);
  color: var(--jk-iron);
}
body.jk .jk-btn-light:hover {
  background: var(--jk-bone);
}
.jk-shots .pr-row {
  margin: 0;
  padding: 0;
}

/* Thank-you page: the confirmation, then the next step beside its video (Caleb's thank-you layout) */
.jk-done {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--jk-s4);
  padding-block: var(--jk-s8) !important;
}
.jk-next {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--jk-s8);
  padding-inline: max(var(--jk-gutter), calc((100% - 1200px) / 2)) !important;
}
.jk-next-copy {
  display: grid;
  gap: var(--jk-s2);
  justify-items: start;
}
.jk-next .jk-display {
  font-size: clamp(30px, 3.6vw, 44px);
}
.jk-next .jk-act {
  justify-items: start;
  margin-top: var(--jk-s2);
}
.jk-why {
  margin: 0;
  font-weight: 700;
  color: var(--jk-rust);
}
.jk-more {
  color: var(--jk-iron);
  font-size: 15px;
  text-underline-offset: 4px;
}
@media (max-width: 900px) {
  .jk-next {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .jk-next-copy,
  .jk-next .jk-act {
    justify-items: center;
  }
}

/* /workbook: Caleb's workbook page. One centred column, the workbook, one button that opens the form. */
.jk-qual {
  margin: 0;
  max-width: 30em;
  font: italic 400 clamp(19px, 2.2vw, 23px)/1.5 var(--jk-body);
  color: var(--jk-iron-muted);
  text-wrap: balance;
}
.jk-wb-mock {
  display: block;
  width: 100%;
  max-width: 760px;
}
.jk-wb-mock img {
  width: 100%;
  height: auto;
  display: block;
}
.jk-steps-pic img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin-bottom: var(--jk-s2);
}
.jk-steps-pic li::before {
  margin-bottom: 0;
}
.jk-outs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jk-s4) var(--jk-s8);
}
.jk-outs li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--jk-s2);
  border-top: 1px solid var(--jk-hairline);
  padding-top: var(--jk-s2);
}
.jk-outs-n {
  grid-row: span 2;
  font: 400 26px/1 var(--jk-head);
  color: var(--jk-rust);
}
.jk-outs p {
  margin: 0;
}
.jk-outs p:not(.jk-item) {
  color: var(--jk-iron-muted);
}
@media (max-width: 720px) {
  .jk-outs {
    grid-template-columns: 1fr;
  }
}
.jk-end-img {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
}
/* The form pop-up: opens on #optin (no script needed), or straight away after a failed submit */
.jk-pop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  place-items: start center;
  overflow-y: auto;
  padding: var(--jk-s8) var(--jk-s2);
}
.jk-pop:target,
.jk-pop.open {
  display: grid;
}
.jk-pop-bg {
  position: fixed;
  inset: 0;
  background: rgba(28, 27, 24, 0.72);
}
.jk-pop-card {
  position: relative;
  width: 100%;
  max-width: 620px;
  background: var(--jk-parchment);
  border-top: 4px solid var(--jk-ember);
}
.jk-pop-card .form {
  margin: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.jk-pop-card .form h2 {
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.15;
  padding-right: var(--jk-s4);
}
.jk-pop-x {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 32px;
  line-height: 1;
  color: var(--jk-iron);
  text-decoration: none;
}

/* Jackson Select (/select) on Caleb Ralston's Select layout: a dark page. Iron ground, a slightly lighter
   iron band to break it up, saddle cards with a fine light edge, parchment text, ember for the payoff. */
body.jk-dark {
  background: var(--jk-iron);
  color: var(--jk-parchment);
}
body.jk-dark .jk-mark,
body.jk-dark .jk-name {
  color: var(--jk-parchment);
}
body.jk-dark .jk-page > section {
  background: var(--jk-iron);
}
body.jk-dark .jk-page > section.jk-band2 {
  background: #26241f;
}
body.jk-dark .jk-display em {
  font-style: normal;
  color: var(--jk-ember);
}
body.jk-dark .jk-small,
body.jk-dark .jk-label,
body.jk-dark .jk-proof p {
  color: var(--jk-hairline);
}
body.jk-dark .jk-proof b {
  color: var(--jk-parchment);
}
body.jk-dark .jk-title::after {
  background: var(--jk-ember);
}
body.jk-dark .jk-center {
  text-align: center;
}
body.jk-dark .jk-center .jk-title::after {
  margin-inline: auto;
}
body.jk-dark .jk-center .jk-act {
  justify-items: center;
}
.jk-dark .jk-act {
  display: grid;
  gap: var(--jk-s2);
  margin-top: var(--jk-s4);
}
.jk-dark .jk-hero .jk-act {
  margin-top: 0;
}
/* Who it's for: three cards, each opening with who you are */
.jk-fit {
  display: grid;
  gap: var(--jk-s2);
  max-width: 900px;
  margin-inline: auto;
  text-align: left;
}
.jk-fit-card {
  background: var(--jk-saddle);
  border: 1px solid rgba(236, 229, 216, 0.25);
  padding: var(--jk-s4);
  display: grid;
  gap: var(--jk-s1);
}
.jk-fit-card p {
  margin: 0;
}
.jk-fit-who {
  font: 400 clamp(22px, 2.6vw, 28px)/1.2 var(--jk-head);
  color: var(--jk-parchment);
}
.jk-fit-out b {
  color: var(--jk-parchment);
}
.jk-fit-card p:not(.jk-fit-who) {
  color: var(--jk-bone);
}
.jk-fit-not {
  margin: var(--jk-s4) auto 0;
  max-width: 40em;
  font-style: italic;
  color: var(--jk-hairline);
}
.jk-dark a {
  color: var(--jk-parchment);
  text-underline-offset: 4px;
  text-decoration-color: var(--jk-ember);
}
/* The founder: copy beside the portrait on saddle */
.jk-bio {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--jk-s8);
  align-items: center;
}
.jk-bio-copy {
  display: grid;
  gap: var(--jk-s2);
  justify-items: start;
}
.jk-bio-copy p {
  margin: 0;
}
.jk-bio-copy .jk-act {
  justify-items: start;
}
.jk-bio-pic {
  display: block;
  background: var(--jk-saddle);
  border: 1px solid rgba(236, 229, 216, 0.25);
  padding: var(--jk-s4) var(--jk-s4) 0;
}
.jk-bio-pic img {
  display: block;
  width: 100%;
  height: auto;
}
.jk-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--jk-s1);
}
.jk-ticks li {
  padding-left: 30px;
  position: relative;
}
.jk-ticks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--jk-ember);
  font-weight: 700;
}
@media (max-width: 900px) {
  .jk-bio {
    grid-template-columns: 1fr;
  }
  .jk-bio-pic {
    max-width: 420px;
  }
}
/* What you get: stacked cards, the name with its line underneath in plain upright type (Lewis, 14 Oct:
   the italic line beside the name was hard to read) */
.jk-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jk-s2);
}
.jk-feats li {
  background: var(--jk-saddle);
  border: 1px solid rgba(236, 229, 216, 0.25);
  padding: var(--jk-s4);
  display: grid;
  align-content: start;
  gap: var(--jk-s1);
}
.jk-feats p {
  margin: 0;
}
.jk-feats li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.jk-feat-t {
  font: 400 clamp(22px, 2.4vw, 27px)/1.2 var(--jk-head);
  color: var(--jk-parchment);
}
.jk-feat-d {
  font-size: 18px;
  line-height: 1.6;
  color: var(--jk-bone);
}
@media (max-width: 720px) {
  .jk-feats {
    grid-template-columns: 1fr;
  }
}
/* The call: numbered cards */
.jk-mods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--jk-s4);
  text-align: left;
}
.jk-mods li {
  border: 1px solid rgba(236, 229, 216, 0.25);
  padding: var(--jk-s4);
  display: grid;
  gap: var(--jk-s1);
  align-content: start;
}
.jk-mods p {
  margin: 0;
  color: var(--jk-hairline);
}
.jk-mods .jk-item {
  color: var(--jk-parchment);
}
.jk-mod-n {
  font: 400 44px/1 var(--jk-head);
  color: var(--jk-ember);
}
@media (max-width: 900px) {
  .jk-mods {
    grid-template-columns: 1fr;
  }
}
/* The investment: one card with the price, the rows and the guarantee */
.jk-price {
  max-width: 820px;
  margin: 0 auto;
  background: var(--jk-saddle);
  border: 2px solid var(--jk-bone);
  padding: var(--jk-s8) var(--jk-s4);
  display: grid;
  gap: var(--jk-s2);
  justify-items: center;
}
.jk-price p {
  margin: 0;
}
.jk-price-n {
  font: 400 clamp(56px, 8vw, 80px)/1 var(--jk-head);
}
.jk-price-p {
  max-width: 30em;
  font-size: 20px;
}
.jk-price-rows {
  list-style: none;
  margin: var(--jk-s2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--jk-s1);
  width: 100%;
  text-align: left;
}
.jk-price-rows li {
  background: rgba(28, 27, 24, 0.45);
  border-left: 4px solid var(--jk-ember);
  padding: var(--jk-s2) var(--jk-s4);
  display: grid;
  gap: 2px;
}
.jk-price-rows span {
  color: var(--jk-bone);
}
.jk-price-g {
  max-width: 34em;
  margin-top: var(--jk-s2) !important;
  color: var(--jk-bone);
}
.jk-now {
  max-width: 760px;
  margin: var(--jk-s8) auto 0;
  border: 1px solid rgba(236, 229, 216, 0.25);
  padding: var(--jk-s8) var(--jk-s4);
}
.jk-now p {
  margin: 0 auto;
  max-width: 34em;
}
.jk-dark .pr-grid,
.jk-dark .pr-card {
  color: var(--jk-iron);
  text-decoration: none;
}
/* Questions on dark */
body.jk-dark .jk-sec details {
  border-color: rgba(236, 229, 216, 0.25);
  max-width: none;
}
body.jk-dark .jk-sec details p {
  color: var(--jk-hairline);
}
.jk-faq-act {
  display: grid;
  justify-items: center;
}
body.jk-dark .jk-foot {
  border-top: 1px solid rgba(236, 229, 216, 0.15);
}

/* Video pages (/5lessons, /getclients, /watchthis): the video, centred, 16:9; until it's out, when it goes out */
.jk-center-sec {
  text-align: center;
}
.jk-center-sec .jk-title::after {
  margin-inline: auto;
}
.jk-center-sec .jk-title {
  max-width: 24em;
  margin-inline: auto;
}
.jk-yt {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--jk-iron);
}
.jk-yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.jk-yt-soon {
  display: grid;
  place-content: center;
  gap: var(--jk-s2);
  color: var(--jk-parchment);
  border-top: 2px solid var(--jk-ember);
}
.jk-yt-soon p {
  margin: 0;
  font: 400 clamp(22px, 3vw, 32px)/1.2 var(--jk-head);
}
.jk-yt-soon a {
  color: var(--jk-parchment);
  text-underline-offset: 4px;
  text-decoration-color: var(--jk-ember);
}
.jk-act-c {
  margin-top: var(--jk-s8);
  justify-items: center;
}

/* Jackson skin for pages built from the workbook kit (the Mastermind application):
   the kit's own tokens pointed at Jackson's, so its forms and panels take the look. */
body.jk-skin {
  --paper: var(--jk-bone);
  --paper-2: var(--jk-parchment);
  --card: var(--jk-parchment);
  --ink: var(--jk-iron);
  --ink-2: var(--jk-iron);
  --muted: var(--jk-iron-muted);
  --line: var(--jk-hairline);
  --o10: #f3e6d9;
  --o20: #e3c3a8;
  --o60: var(--jk-rust);
  --o70: var(--jk-saddle);
  --font: var(--jk-body);
  --r: 2px;
}
body.jk-skin h1,
body.jk-skin h2,
body.jk-skin h3 {
  font-family: var(--jk-head);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
body.jk-skin .chip span,
body.jk-skin .field input,
body.jk-skin .field textarea {
  border-radius: 2px;
}
body.jk-skin .f-card,
body.jk-skin .f-panel {
  border-radius: 2px;
  box-shadow: none;
}
body.jk-skin .f-panel {
  border-top: 2px solid var(--jk-ember);
}
.jk-apply-hero {
  padding: var(--jk-s4) var(--jk-gutter) var(--jk-s8);
}

/* Pages built on the v2 kit (/build, /scorecard and their copies): its tokens pointed at Jackson's */
body.jk-skin.v2-page {
  --v2-paper: var(--jk-bone);
  --v2-paper2: var(--jk-parchment);
  --v2-card: var(--jk-parchment);
  --v2-ink: var(--jk-iron);
  --v2-ink2: var(--jk-iron);
  --v2-mute: var(--jk-iron-muted);
  --v2-line: var(--jk-hairline);
  --v2-o: var(--jk-rust);
  --v2-o7: var(--jk-saddle);
  --v2-o1: #f3e6d9;
  font-family: var(--jk-body);
}
/* Labels in the Jackson voice: italic, sentence case */
body.jk-skin .eyebrow,
body.jk-skin .v2-eyebrow {
  font: italic 400 17px/1.4 var(--jk-body);
  letter-spacing: 0;
  text-transform: none;
}
body.jk-skin .v2-btn {
  border-radius: 2px;
  font-family: var(--jk-body);
  font-weight: 700;
}

/* Lewis's scorecard tools (the editor, the workshop app) on sc.css: Jackson type and colours */
body.jk-sc {
  --accent: var(--jk-rust);
  background: var(--jk-bone);
  color: var(--jk-iron);
  font: 400 18px/1.65 var(--jk-body);
}
body.jk-sc h1,
body.jk-sc h2,
body.jk-sc h3 {
  font-family: var(--jk-head);
  font-weight: 400;
}
body.jk-sc button,
body.jk-sc input,
body.jk-sc textarea,
body.jk-sc select,
body.jk-sc .sc-card {
  border-radius: 2px;
}
body.jk-sc .sc-card {
  background: var(--jk-parchment);
  border-color: var(--jk-hairline);
}
body.jk-sc .sc-eyebrow {
  font: italic 400 17px/1.4 var(--jk-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--jk-iron-muted);
}

/* The brochure pages (site-src: /about, /ventures, /consulting, /youtube and the rest): their tokens
   pointed at Jackson's, Caslon for everything read, square corners */
body.jk-site {
  --canvas: var(--jk-bone);
  --surface: var(--jk-parchment);
  --line: var(--jk-hairline);
  --ink: var(--jk-iron);
  --muted: var(--jk-iron-muted);
  --cyan: var(--jk-rust);
  --cyan-deep: var(--jk-saddle);
  --green: var(--jk-rust);
  --green-deep: var(--jk-saddle);
  --magenta: var(--jk-ember);
  --magenta-deep: var(--jk-saddle);
  --radius: 2px;
  --radius-sm: 2px;
  --radius-pill: 2px;
  --font: var(--jk-body);
  --body-size: 17px;
  --body-lh: 1.65;
  --body-ls: 0;
  --lead-size: 20px;
  --lead-lh: 1.6;
  --lead-ls: 0;
  --ui-ls: 0;
  --eyebrow-ls: 0;
  color-scheme: light;
}
body.jk-site :is(.display, .h2, .h3, .stat, h1, h2, h3) {
  font-family: var(--jk-head);
  font-weight: 400;
  letter-spacing: 0;
}
body.jk-site .display {
  font-size: clamp(56px, 11vw, 140px);
  line-height: 1;
}
body.jk-site .eyebrow {
  font: italic 400 17px/1.4 var(--jk-body);
  text-transform: none;
  color: var(--jk-iron-muted);
}
body.jk-site .btn {
  font: 700 16px/1 var(--jk-body);
  letter-spacing: 0;
}
body.jk-site .btn--primary {
  background: var(--jk-rust);
  color: var(--jk-on-rust);
}
body.jk-site .btn--primary:hover {
  background: var(--jk-saddle);
}
body.jk-site .card,
body.jk-site .stat-card {
  border-top: 2px solid var(--jk-ember);
}
body.jk-site .jk-top .btn {
  border-radius: 2px;
  background: var(--jk-rust);
  color: var(--jk-on-rust);
  padding: 14px 24px;
  font: 700 15px/1 var(--jk-body);
  text-decoration: none;
}

/* The web workbook (/workbook/w/<token>) in Jackson tokens: Caslon throughout, square corners */
body.jk-app {
  --display: var(--jk-head);
  background: var(--jk-bone);
  font-family: var(--jk-body);
}
body.jk-app .wb-bar {
  background: rgba(236, 229, 216, 0.96);
}
body.jk-app #barIcon {
  display: none;
}
body.jk-app .wb-bar .title {
  font: 400 19px/1.2 var(--jk-head);
}
body.jk-app .btn,
body.jk-skin .btn {
  border-radius: 2px;
}

/* Scan first in the web workbook: a short lead, short points, the long text behind "Read more" */
body.jk-app .sec-intro .lead {
  font-size: 20px;
  line-height: 1.5;
  margin: 0 0 var(--jk-s2);
}
body.jk-app .pts {
  margin: 0 0 var(--jk-s2);
  padding-left: 22px;
}
body.jk-app .pts li {
  margin: 0 0 6px;
}
body.jk-app details.more {
  margin: var(--jk-s1) 0 var(--jk-s2);
}
body.jk-app details.more > summary {
  cursor: pointer;
  color: var(--jk-rust);
  font-weight: 700;
  font-size: 16px;
}
body.jk-app details.more[open] > summary {
  margin-bottom: var(--jk-s2);
}

/* "Help me with this" under each question: a quiet link; the companion does the explaining */
body.jk-app .q-help {
  appearance: none;
  display: block;
  border: 0;
  background: none;
  padding: 0;
  margin: var(--jk-s2) 0 0;
  font: italic 400 16px/1.4 var(--jk-body);
  color: var(--jk-iron-muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--jk-hairline);
  text-underline-offset: 4px;
}
body.jk-app .q-help:hover {
  color: var(--jk-rust);
  text-decoration-color: currentColor;
}
body.jk-app .q-help-text {
  margin: var(--jk-s1) 0 0;
  white-space: pre-line;
  color: var(--jk-iron-muted);
}
body.jk-app #bubble {
  white-space: pre-line;
}

@media (prefers-reduced-motion: reduce) {
  body.jk * {
    transition: none !important;
  }
  .jk-card:hover {
    transform: none;
  }
}