/**
 * JuryBoard Essentials - module styles.
 *
 * One stylesheet for all JuryBoard Divi modules. Scope every rule under the
 * module's own block class so nothing leaks into Divi core modules.
 */

/* JuryBoard - Hello World */
.jb-hello-world {
	text-align: left;
}

.jb-hello-world__heading {
	margin: 0 0 0.5em;
}

.jb-hello-world__body> :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Homepage modules
   --------------------------------------------------------------------------
   Every rule is scoped to its module's own block class. Values come from
   design/01-Homepage.html; tokens come from the child theme's custom.css, so
   nothing here hard-codes a palette colour that has a token.

   Divi's Customizer CSS prints after every enqueued stylesheet, so anything
   it also sets — type sizes, link colour, button styling — is prefixed
   `html body` to win on specificity rather than load order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: type, buttons, seats
   -------------------------------------------------------------------------- */

/* The eyebrow. Court red by default; gold on a navy band, which is the one
   place court red does not have the contrast to work. */
html body .jbe-eyebrow {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--court-red);
}

html body .jbe-eyebrow--muted {
	color: var(--muted);
}

html body .jb-band-navy .jbe-eyebrow {
	color: var(--gold);
}

html body .jbe-lede {
	font-size: 19px;
	line-height: 1.62;
	color: var(--ink-2);
	max-width: 56ch;
	margin: 0;
}

html body .jbe-fine {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--muted);
	margin: 14px 0 0;
	max-width: 46ch;
}

/* 46ch is the measure for fine print under a button. Standing on its own at
   the foot of a section it gets the mockup's wider one. */
html body .jbe-fine.jb-fine-wide {
	max-width: 64ch;
}

/* Buttons. Divi styles .et_pb_button, not this, so these carry the whole
   definition rather than inheriting half of one. */
html body .jbe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	text-decoration: none;
	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	padding: 14px 22px;
	border-radius: 3px;
	/* --btn, not --plinth: the two are the same navy in light mode, but in dark
	   mode the plinth stays a dark band while the button inverts to a light
	   chip. Using the band token here made the primary button vanish into the
	   card behind it. */
	border: 1.5px solid var(--btn);
	transition: transform 0.12s ease;
}

html body .jbe-btn:hover {
	transform: translateY(-1px);
	text-decoration: none;
}

html body .jbe-btn:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 3px;
}

html body .jbe-btn--primary {
	background-color: var(--btn);
	color: var(--on-btn);
}

html body .jbe-btn--primary:hover {
	color: #FFFFFF
}

html body .jbe-btn--ghost {
	background-color: transparent;
	color: var(--ink);
	border-color: var(--ink);
}

/* Gold is the primary button only on navy — never as a page-level ground. */
html body .jb-band-navy .jbe-btn--primary {
	background-color: var(--gold);
	color: #002244;
	border-color: var(--gold);
}

html body .jb-band-navy .jbe-btn--ghost {
	color: var(--on-plinth);
	border-color: #3E5B7E;
}

/* Inside a price tier the button is full width and pinned to the card foot. */
html body .jbe-btn--block {
	width: 100%;
	margin-top: auto;
}

html body .jbe-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

/* The seat strip: a venire reduced to a rule. */
.jbe-seat-strip {
	display: flex;
	gap: 5px;
	align-items: center;
	flex-wrap: wrap;
}

.jbe-seat-strip .jbe-seat {
	display: block;
	width: 16px;
	height: 11px;
	border-radius: 1.5px;
	background-color: var(--seat);
	border: 1px solid transparent;
}

.jbe-seat-strip .jbe-seat.is-gold {
	background-color: var(--gold);
	border-color: var(--gold);
}

.jbe-seat-strip .jbe-seat.is-red {
	background-color: var(--court-red);
	border-color: var(--court-red);
}

.jbe-seat-strip .jbe-seat.is-empty {
	background-color: transparent;
	border-color: var(--hair);
}

/* Cards in a grid have to fill their row, and Divi puts two wrappers between
   the grid item and the card: .et_pb_module (the grid item) and
   .et_pb_module_inner inside it. The item stretches on its own; the inner
   wrapper does not, so height:100% on the card resolves against a
   content-height box and every card ends up a different height. Chain the
   height through both wrappers instead. */
/* Divi gives every module a bottom margin of 2.75% via
   `.et_pb_gutters3 .et_pb_column_4_4 .et_pb_module`. That is three classes, so
   an `html body .parent .et_pb_module` selector loses to it — the band class
   has to be in the chain to make it four. Inside these parents the gap comes
   from the grid, and in the FAQ the rows must sit on their hairline with no
   gap at all. */
html body .jb-band .jbe-faq>.et_pb_module,
html body .jb-band .jbe-cards>.et_pb_module,
html body .jb-band .jbe-steps>.et_pb_module,
html body .jb-band .jbe-tiers>.et_pb_module,
html body .jb-band .jbe-vgrid>.et_pb_module {
	margin-bottom: 0;
}

html body .jbe-cards>.et_pb_module,
html body .jbe-steps>.et_pb_module,
html body .jbe-tiers>.et_pb_module,
html body .jbe-vgrid>.et_pb_module,
html body .jbe-cards>.et_pb_module>.et_pb_module_inner,
html body .jbe-steps>.et_pb_module>.et_pb_module_inner,
html body .jbe-tiers>.et_pb_module>.et_pb_module_inner,
html body .jbe-vgrid>.et_pb_module>.et_pb_module_inner {
	height: 100%;
}

/* Same for the blurb-built device cards, which sit one per Divi column. */
html body .jb-band .et_pb_row.jb-dev-grid>.et_pb_column,
html body .jb-band .et_pb_row.jb-dev-grid>.et_pb_column>.et_pb_module {
	height: 100%;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.jbe-hero {
	position: relative;
	padding: clamp(48px, 6vw, 84px) 0 0;
	/* clip, not hidden: hidden on an ancestor turns it into a scroll container
	   and silently kills the sticky header. */
	overflow-x: hidden;
	overflow: clip;
}

/* The hero owns its container rather than sitting inside the Divi row, so the
   venire behind it can span the full width of the band. */
.jbe-hero__in {
	position: relative;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 32px;
}

/* The venire: the room before anyone sits down, fading out under the copy. */
.jbe-venire {
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, 26px);
	grid-auto-rows: 18px;
	gap: 7px;
	padding: 22px;
	opacity: 0.5;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 78%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 78%);
}

.jbe-venire i {
	background-color: var(--seat);
	border-radius: 2px;
	opacity: 0.55;
}

.jbe-venire i.is-on {
	opacity: 1;
}

html body .jbe-hero__h {
	font-family: Newsreader, Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-size: clamp(46px, 6.6vw, 80px);
	line-height: 0.98;
	letter-spacing: -0.028em;
	text-wrap: balance;
	max-width: 15ch;
	margin: 16px 0 0;
	padding: 0;
}

html body .jbe-hero .jbe-lede {
	margin-top: 18px;
	font-size: 20px;
}

.jbe-hero__shot {
	position: relative;
	margin: clamp(40px, 5vw, 64px) 0 0;
}

.jbe-hero__shot img {
	display: block;
	width: 100%;
	height: auto;
	/* 4px, not the site's 3px: the mockup treats a framed screenshot as its
	   own case, so the frame reads as a device edge rather than a card. */
	border: 1px solid var(--hair);
	border-radius: 4px;
	box-shadow: 0 18px 44px var(--shadow, rgba(0, 34, 68, 0.16));
}

.jbe-hero__shot figcaption {
	font-size: 13.5px;
	font-style: italic;
	color: var(--muted);
	margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.jbe-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--jbe-step-min, 240px), 1fr));
	gap: 16px;
}

.jbe-step {
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(233, 227, 213, 0.17);
	border-radius: 3px;
	padding: 26px 24px;
	height: 100%;
}

.jbe-step__n {
	display: block;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--gold);
	margin-bottom: 10px;
}

html body .jbe-step__h {
	font-size: 20px;
	line-height: 1.25;
	color: var(--on-plinth);
	margin: 0 0 8px;
	padding: 0;
}

html body .jbe-step__b,
html body .jbe-step__b p {
	font-size: 15px;
	line-height: 1.6;
	color: #B6C4D6;
}

html body .jbe-step__b> :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Problem block
   -------------------------------------------------------------------------- */

.jbe-blk {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
	padding: clamp(40px, 5vw, 64px) 0;
	border-top: 1px solid var(--hair);
}

.jbe-blk--no-rule {
	border-top: 0;
}

.jbe-blk--single {
	grid-template-columns: 1fr;
}

/* Reversing swaps the grid order, so the media leads on alternate blocks. */
.jbe-blk--reverse {
	grid-template-columns: 1.15fr 0.85fr;
}

.jbe-blk--reverse .jbe-blk__txt {
	order: 2;
}

.jbe-blk__n {
	display: block;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--court-red);
}

html body .jbe-blk__h {
	font-size: clamp(24px, 2.8vw, 31px);
	line-height: 1.15;
	font-weight: 500;
	margin: 10px 0 12px;
	padding: 0;
}

html body .jbe-blk__b,
html body .jbe-blk__b p {
	font-size: 16.5px;
	line-height: 1.62;
	color: var(--ink-2);
}

html body .jbe-blk__b p+p {
	margin-top: 12px;
}

html body .jbe-blk__b> :last-child {
	margin-bottom: 0;
}

.jbe-blk__fix {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--hair);
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--ink-2);
}

.jbe-blk__fix b {
	display: block;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 5px;
}

html body .jbe-blk__fix p {
	font-size: 15.5px;
}

html body .jbe-blk__fix> :last-child {
	margin-bottom: 0;
}

.jbe-blk__media img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--hair);
	border-radius: 4px;
	box-shadow: 0 12px 30px var(--shadow, rgba(0, 34, 68, 0.16));
}

/* Once stacked, the text always leads — reading a screenshot before its
   explanation is worse than losing the alternation. */
@media (max-width: 900px) {

	.jbe-blk,
	.jbe-blk--reverse {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.jbe-blk--reverse .jbe-blk__txt {
		order: 0;
	}
}

/* --------------------------------------------------------------------------
   Exported report card
   -------------------------------------------------------------------------- */

.jbe-export {
	background-color: var(--card);
	border: 1px solid var(--hair);
	border-radius: 4px;
	box-shadow: 0 12px 30px var(--shadow, rgba(0, 34, 68, 0.16));
	max-width: 460px;
	overflow: hidden;
}

.jbe-export__hd {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	background-color: var(--plinth);
	color: var(--on-plinth);
	padding: 13px 18px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: 0.06em;
}

.jbe-export__tag {
	color: var(--gold);
}

.jbe-export__body {
	padding: 20px 18px;
}

.jbe-export__lbl {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 10px;
}

.jbe-export__lbl--spaced {
	margin-top: 20px;
}

.jbe-export__seats {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
}

.jbe-export__seat {
	aspect-ratio: 5 / 4;
	display: grid;
	place-items: center;
	border-radius: 2px;
	font-style: normal;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	background-color: var(--seat);
	color: var(--ink-2);
	border: 1px solid var(--hair);
}

.jbe-export__seat.is-gold {
	background-color: var(--gold);
	color: #002244;
	border-color: var(--gold);
}

.jbe-export__seat.is-red {
	background-color: var(--court-red);
	color: #FFFFFF;
	border-color: var(--court-red);
}

.jbe-export__seat.is-empty {
	background-color: transparent;
}

.jbe-export__rows {
	margin: 0;
}

.jbe-export__rows>div {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 0;
	border-bottom: 1px solid var(--hair);
	font-size: 14px;
}

.jbe-export__rows dt {
	color: var(--ink-2);
}

.jbe-export__rows dd {
	margin: 0;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

.jbe-export__ft {
	padding: 13px 18px;
	border-top: 1px solid var(--hair);
	background-color: var(--paper);
	font-size: 13px;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   Video grid
   -------------------------------------------------------------------------- */

.jbe-vgrid {
	display: grid;
	grid-template-columns: repeat(var(--jbe-vcols, 4), 1fr);
	gap: 16px;
}

@media (max-width: 900px) {
	.jbe-vgrid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.jbe-vgrid {
		grid-template-columns: 1fr;
	}
}

html body a.jbe-vcard {
	display: block;
	position: relative;
	background-color: var(--card);
	border: 1px solid var(--hair);
	border-radius: 3px;
	box-shadow: var(--lift);
	overflow: hidden;
	text-decoration: none;
	color: var(--ink);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

html body a.jbe-vcard:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(0, 34, 68, 0.07), 0 18px 34px -16px rgba(0, 34, 68, 0.42);
	text-decoration: none;
}

html body a.jbe-vcard:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: -3px;
}

.jbe-vcard img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: top center;
}

.jbe-vcard__play {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
}

.jbe-vcard__play>span {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: rgba(0, 34, 68, 0.86);
	display: grid;
	place-items: center;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* The play triangle, drawn in borders so it stays sharp and takes the token. */
.jbe-vcard__play>span::after {
	content: "";
	border-left: 12px solid var(--gold);
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	margin-left: 4px;
}

.jbe-vcard__m {
	padding: 15px 16px;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: baseline;
}

.jbe-vcard__t {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
}

html body a.jbe-vcard:hover .jbe-vcard__t {
	text-decoration: underline;
}

.jbe-vcard__d {
	font-style: normal;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11.5px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.jbe-tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--jbe-tier-min, 255px), 1fr));
	gap: 16px;
	align-items: stretch;
}

.jbe-tier {
	background-color: var(--card);
	border: 1px solid var(--hair);
	border-radius: 3px;
	box-shadow: var(--lift);
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
}

/* The gold edge is an inset shadow, not a border: a border would make the
   featured card a pixel taller than its neighbours. */
.jbe-tier--featured {
	box-shadow:
		inset 0 4px 0 var(--gold),
		0 2px 5px rgba(0, 34, 68, 0.08),
		0 22px 44px -18px rgba(0, 34, 68, 0.46);
}

.jbe-tier__n {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--court-red);
}

html body .jbe-tier__p {
	font-family: Newsreader, Georgia, "Times New Roman", serif;
	font-size: 42px;
	line-height: 1;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

html body .jbe-tier__p small {
	font-size: 15px;
	color: var(--muted);
	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html body ul.jbe-tier__f {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ink-2);
}

html body ul.jbe-tier__f li {
	display: flex;
	gap: 9px;
	padding: 0;
	list-style: none;
}

/* The bullet is a gold seat, not a tick: the product is the yellow card. */
html body ul.jbe-tier__f li::before {
	content: "";
	flex: 0 0 6px;
	height: 6px;
	background-color: var(--gold);
	border-radius: 1px;
	margin-top: 9px;
}

.jbe-tier__note {
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Bullet list
   -------------------------------------------------------------------------- */

html body ul.jbe-bullets {
	list-style: none;
	margin: 0;
	padding: 0;
}

html body ul.jbe-bullets li {
	display: flex;
	gap: 12px;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--ink);
	padding: 13px 0;
	list-style: none;
}

html body ul.jbe-bullets li::before {
	content: "";
	flex: 0 0 7px;
	height: 7px;
	background-color: var(--gold);
	border-radius: 1px;
	margin-top: 9px;
}

html body ul.jbe-bullets--divided {
	border-top: 1px solid var(--hair);
}

html body ul.jbe-bullets--divided li {
	border-bottom: 1px solid var(--hair);
}

/* --------------------------------------------------------------------------
   Definition list
   -------------------------------------------------------------------------- */

.jbe-deflist {
	margin: 0;
	border-top: 1px solid var(--hair);
}

.jbe-deflist>div {
	display: flex;
	gap: 14px;
	align-items: baseline;
	padding: 9px 0;
	border-bottom: 1px solid var(--hair);
	font-size: 14.5px;
}

.jbe-deflist dt {
	flex: 0 0 var(--jbe-dl-label, 92px);
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.jbe-deflist dd {
	margin: 0;
	color: var(--ink);
}

/* On navy the hairline token has too little contrast, so this variant carries
   its own rule and text colours. */
.jbe-deflist--dark {
	border-top-color: #1B3A5C;
}

.jbe-deflist--dark>div {
	border-bottom-color: #1B3A5C;
}

.jbe-deflist--dark dt {
	color: #7D93AC;
}

.jbe-deflist--dark dd {
	color: #CBD6E4;
}

/* --------------------------------------------------------------------------
   Callout
   -------------------------------------------------------------------------- */

.jbe-callout {
	display: flex;
	align-items: center;
	gap: 13px;
	max-width: 52ch;
	padding: 14px 18px;
	background-color: var(--card);
	/* A hairline on three sides and the gold edge on the fourth, so the callout
	   reads as a card that has been flagged rather than a coloured strip. The
	   dark variant drops both: on navy the tinted ground is the edge. */
	border: 1px solid var(--hair);
	border-left: 4px solid var(--gold);
	border-radius: 3px;
	box-shadow: var(--lift);
	font-size: 15px;
	line-height: 1.5;
}

.jbe-callout--dark {
	background-color: rgba(255, 255, 255, 0.06);
	color: #E7E1D3;
	border-color: transparent;
	border-left-color: var(--gold);
	box-shadow: none;
}

.jbe-callout__badge {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background-color: var(--gold);
	color: #002244;
	padding: 4px 8px;
	border-radius: 2px;
	white-space: nowrap;
	flex: 0 0 auto;
}

html body .jbe-callout__b p {
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
}

html body .jbe-callout--dark .jbe-callout__b,
html body .jbe-callout--dark .jbe-callout__b p {
	color: #E7E1D3;
}

html body .jbe-callout--dark .jbe-callout__b strong {
	color: #FFFFFF;
}

@media (max-width: 480px) {
	.jbe-callout {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.jbe-faq {
	border-top: 1px solid var(--hair);
}

.jbe-faq__row {
	border-bottom: 1px solid var(--hair);
}

html body .jbe-faq__row>summary {
	cursor: pointer;
	padding: 16px 0;
	font-weight: 600;
	font-size: 16.5px;
	line-height: 1.4;
	color: var(--ink);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: center;
}

.jbe-faq__row>summary::-webkit-details-marker {
	display: none;
}

/* A mono + / – rather than a chevron: same family as the step numbers. */
.jbe-faq__row>summary::after {
	content: "+";
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	color: var(--muted);
	font-weight: 400;
	font-size: 19px;
	line-height: 1;
	flex: 0 0 auto;
}

.jbe-faq__row[open]>summary::after {
	content: "\2013";
}

.jbe-faq__row>summary:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

html body .jbe-faq__a,
html body .jbe-faq__a p {
	color: var(--ink-2);
	font-size: 15.5px;
	line-height: 1.62;
	max-width: 72ch;
}

html body .jbe-faq__a {
	padding: 0 0 18px;
}

html body .jbe-faq__a> :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Divi surfaces the homepage relies on

   Divi's section padding is a percentage of the viewport and cannot express a
   clamp(), so the homepage does not use it: sections carry .jb-band and take
   their padding from here instead. Module spacing is likewise a handful of
   utilities rather than per-module custom_margin, so the rhythm lives in one
   file and survives anyone re-saving the page in the builder.
   -------------------------------------------------------------------------- */

html body .et_pb_section.jb-band {
	padding: clamp(56px, 7vw, 100px) 0;
}

/* The hero opens tighter than a band and runs to the fold with no bottom gap. */
html body .et_pb_section.jb-band-hero {
	padding: 0;
}

/* One measure for the whole page. */
html body .jb-band .et_pb_row {
	max-width: 1160px;
	width: 100%;
	padding: 0 32px;
	margin-bottom: 0;
}

/* The hero manages its own container so the venire can span the full band. */
html body .jb-band .et_pb_row.jb-row-bleed {
	max-width: 100%;
	padding: 0;
}

html body .jb-band .et_pb_column {
	margin-bottom: 0;
}

html body .jb-band .et_pb_column .et_pb_module {
	margin-bottom: 0;
}

/* Vertical rhythm between modules inside a section. */
html body .jb-band .jb-mt-s {
	margin-top: 16px;
}

html body .jb-band .jb-mt-m {
	margin-top: 28px;
}

html body .jb-band .jb-mt-l {
	margin-top: 34px;
}

html body .jb-band .jb-mt-xl {
	margin-top: 44px;
}

/* The eyebrow / heading / lede stack every section opens with. */
html body .jb-sec-head .jbe-eyebrow {
	margin-bottom: 12px;
}

html body .jb-sec-head h2 {
	margin: 0 0 16px;
	padding: 0;
	max-width: 22ch;
}

html body .jb-sec-head h2.jb-w-18 {
	max-width: 18ch;
}

html body .jb-sec-head h2.jb-w-20 {
	max-width: 20ch;
}

html body .jb-sec-head h2.jb-w-24 {
	max-width: 24ch;
}

html body .jb-sec-head h2.jb-w-26 {
	max-width: 26ch;
}

html body .jb-sec-head p {
	max-width: 58ch;
	margin: 0;
}

html body .jb-sec-head> :last-child {
	margin-bottom: 0;
}

/* Bands. A background change or a hairline, never both — except the paper
   bands, where the mockup uses the hairline to close the band on both edges
   because paper against paper has no edge of its own. */
html body .et_pb_section.jb-band-paper {
	background-color: var(--paper);
}

html body .et_pb_section.jb-band-stone {
	background-color: var(--stone);
}

html body .et_pb_section.jb-band-navy {
	background-color: var(--plinth);
	color: var(--on-plinth);
}

html body .et_pb_section.jb-band-edged {
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
}

/* Text inside a navy band. Divi paints headings from the Customizer, so these
   need the html body prefix to win on specificity rather than load order. */
html body .jb-band-navy,
html body .jb-band-navy p,
html body .jb-band-navy .et_pb_text_inner p {
	color: #B6C4D6;
}

html body .jb-band-navy h1,
html body .jb-band-navy h2,
html body .jb-band-navy h3,
html body .jb-band-navy h4 {
	color: var(--on-plinth);
}

html body .jb-band-navy strong {
	color: var(--on-plinth);
}

/* Divi's own `.et_pb_text_inner p` selector outranks a bare class here, so the
   fine print has to match on the element too. */
html body .jb-band-navy p.jbe-fine,
html body .jb-band-navy .et_pb_text_inner p.jbe-fine {
	color: #8FA1B6;
}

/* The closing call to action is the one centred section on the page. */
html body .jb-band .jb-centred {
	text-align: center;
}

/* Divi stamps `et_pb_text_align_left` on every Text module, and a rule ON the
   element beats `text-align: center` INHERITED from an ancestor — so putting
   .jb-centred on a row centres the row's own text nodes and nothing else. The
   homepage sidesteps this by putting .jb-centred on each module; a section that
   wants everything centred has to reach the modules instead. */
html body .jb-band .jb-centred .et_pb_text,
html body .jb-band .jb-centred .et_pb_text_inner,
html body .jb-band .jb-centred .et_pb_module,
html body .jb-band .jb-centred h1,
html body .jb-band .jb-centred h2,
html body .jb-band .jb-centred h3,
html body .jb-band .jb-centred p,
html body .jb-band .jb-centred .jbe-eyebrow {
	text-align: center;
}

html body .jb-band .jb-centred h2 {
	max-width: 20ch;
	margin-left: auto;
	margin-right: auto;
}

html body .jb-band .jb-centred p {
	margin-left: auto;
	margin-right: auto;
}

html body .jb-band .jb-centred .jbe-ctas {
	justify-content: center;
}

/* Two-column bodies: the book band and the work-product band. */
/* Divi lays a row out with percentage-width, floated, margin-separated
   columns. Every row that becomes a grid has to switch that off, or the
   columns keep their own widths and the grid tracks do nothing. */
html body .jb-band .et_pb_row.jb-two-up>.et_pb_column,
html body .jb-band .et_pb_row.jb-book-grid>.et_pb_column,
html body .jb-band .et_pb_row.jb-tool-grid>.et_pb_column,
html body .jb-band .et_pb_row.jb-dev-grid>.et_pb_column {
	width: auto;
	max-width: none;
	margin: 0;
	float: none;
}

html body .jb-two-up {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 5vw, 60px);
	align-items: start;
}

html body .jb-book-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

@media (max-width: 860px) {
	html body .jb-book-grid {
		grid-template-columns: 1fr;
	}
}

/* The tool band: copy leads, the miniboard sits beside it on the narrower
   track. The mirror of .jb-book-grid, which leads with its cover. */
html body .jb-tool-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

@media (max-width: 820px) {
	html body .jb-tool-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 820px) {
	html body .jb-two-up {
		grid-template-columns: 1fr;
	}
}

.jb-book-cover {
	display: block;
	width: min(280px, 72%);
	height: auto;
	margin: 0 auto;
	border-radius: 2px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

/* The "works everywhere" cards, built from Divi blurbs. Divi lays a row out
   with percentage widths and margins; the mockup wants an auto-fit grid with a
   real 16px gap, so the row becomes the grid and the columns stop sizing
   themselves. */
html body .jb-band .et_pb_row.jb-dev-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
}

html body .jb-dev-card {
	background-color: var(--card);
	border: 1px solid var(--hair);
	border-radius: 3px;
	box-shadow: var(--lift);
	padding: 22px 20px;
	height: 100%;
}

html body .jb-dev-card .et_pb_blurb_content {
	max-width: none;
	text-align: left;
}

html body .jb-dev-card .et_pb_module_header {
	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	padding-bottom: 6px;
	color: var(--ink);
}

html body .jb-dev-card .et_pb_blurb_description,
html body .jb-dev-card .et_pb_blurb_description p {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ink-2);
}


/* --------------------------------------------------------------------------
   Video lightbox

   Magnific Popup's own stylesheet does the overlay and the close button; this
   only sizes the player and keeps it inside the design system.
   -------------------------------------------------------------------------- */

.jbe-video-popup .mfp-iframe-holder .mfp-content,
.jbe-video-popup .mfp-inline-holder .mfp-content {
	max-width: 1100px;
	width: 92%;
}

.jbe-video-popup .mfp-iframe-scaler iframe {
	background-color: var(--plinth);
	border-radius: 3px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.jbe-video-popup__frame {
	position: relative;
	background-color: #000000;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
	line-height: 0;
}

.jbe-video-popup__frame video {
	display: block;
	width: 100%;
	height: auto;
	max-height: 82vh;
}

/* The close button is Magnific's, so it takes the gold focus ring the rest of
   the site uses rather than the browser default. */
.jbe-video-popup .mfp-close:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 2px;
}

/* ==========================================================================
   BOOK PAGE
   Section 3 of design/02-book-page.md. Everything below is scoped to a block
   class the book page's modules own, so nothing here can reach the homepage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Book hero
   -------------------------------------------------------------------------- */

.jbe-bookhero {
	position: relative;
	padding: clamp(48px, 6vw, 80px) 0 0;
	/* clip, not hidden: hidden on an ancestor turns it into a scroll container
	   and silently kills the sticky header. */
	overflow-x: hidden;
	overflow: clip;
}

/* Like the product hero, this one owns its container so the venire can span
   the full width of the band rather than the width of the Divi row. */
.jbe-bookhero__in {
	position: relative;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 32px;
}

@media (max-width: 900px) {
	.jbe-bookhero__in {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* The book hero's venire holds its full opacity further down the band than the
   product hero's, because the copy column here runs longer. */
.jbe-bookhero .jbe-venire {
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
}

html body .jbe-bookhero__h {
	font-family: Newsreader, Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-size: clamp(52px, 8vw, 88px);
	line-height: 0.94;
	letter-spacing: -0.025em;
	text-wrap: balance;
	margin: 14px 0 0;
	padding: 0;
}

html body .jbe-bookhero__deck {
	font-family: Newsreader, Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-style: italic;
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.25;
	color: var(--ink-2);
	margin-top: 10px;
}

.jbe-bookhero__rule {
	width: 52px;
	height: 4px;
	background-color: var(--gold);
	margin: 26px 0 22px;
}

html body .jbe-bookhero .jbe-lede {
	font-size: 18.5px;
	max-width: 52ch;
}

html body .jbe-bookhero .jbe-ctas {
	margin-top: 24px;
}

html body .jbe-bookhero .jbe-fine {
	margin-top: 14px;
	max-width: 44ch;
}

html body .jbe-bookhero .jbe-callout {
	margin-top: 22px;
	max-width: 54ch;
}

.jbe-bookhero__byline {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 26px;
}

.jbe-bookhero__cover {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.jbe-bookhero__img {
	display: block;
	width: min(330px, 80%);
	height: auto;
	border: 1px solid var(--hair);
	/* 2px, not the site's 3px: this is the edge of a book, not a card. */
	border-radius: 2px;
	box-shadow:
		0 2px 4px var(--shadow, rgba(0, 34, 68, 0.16)),
		0 26px 52px var(--shadow, rgba(0, 34, 68, 0.16));
}

.jbe-bookhero__cap {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
	text-align: center;
	margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Pull quote
   -------------------------------------------------------------------------- */

html body blockquote.jbe-pull {
	font-family: Newsreader, Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-size: clamp(22px, 2.9vw, 32px);
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: var(--ink);
	max-width: var(--jbe-pull-measure, 26ch);
	/* Divi's blockquote carries a 20px left border and 24px of padding from
	   .et_pb_text; this quote is set on its own measure, not indented. */
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

html body blockquote.jbe-pull em {
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */

.jbe-cards {
	display: grid;
	/* min() around the track minimum, not the bare length: a plain
	   minmax(440px, 1fr) refuses to go under 440px and pushes the whole page
	   into a horizontal scroll on a phone. The "who it is for" grid asks for
	   440px so it lands two-up on the desktop, so this is not optional. */
	grid-template-columns: repeat(auto-fit, minmax(min(var(--jbe-card-min, 280px), 100%), 1fr));
	gap: 16px;
	align-items: stretch;
}

.jbe-card {
	background-color: var(--card);
	border: 1px solid var(--hair);
	border-radius: 3px;
	box-shadow: var(--lift);
	padding: 26px 24px;
	height: 100%;
}

.jbe-cards--parts .jbe-card {
	padding: 24px 22px;
}

.jbe-cards--columns .jbe-card {
	padding: 28px 26px;
}

.jbe-card__l {
	display: block;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--muted);
	margin-bottom: 12px;
}

/* The parts and columns variants label the card rather than number it, so the
   label takes the eyebrow's weight and court red. It is NOT uppercased: the
   copy is literally "Part I" and "If you have never picked one". */
.jbe-cards--parts .jbe-card__l,
.jbe-cards--columns .jbe-card__l {
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--court-red);
	margin-bottom: 7px;
}

html body .jbe-card__h {
	font-size: 21px;
	line-height: 1.25;
	color: var(--ink);
	margin: 0 0 8px;
	padding: 0;
}

html body .jbe-cards--parts .jbe-card__h {
	font-size: 18.5px;
	line-height: 1.2;
	margin-bottom: 14px;
}

html body .jbe-cards--columns .jbe-card__h {
	margin: 10px 0 12px;
}

html body .jbe-card__b,
html body .jbe-card__b p {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ink-2);
}

/* Divi's stylesheet gives every <p> a 1em padding-bottom. Left alone it adds
   to the margin below and doubles every paragraph gap on the page, so the
   spacing is taken back and re-set as a margin. */
html body .jbe-card__b p {
	padding-bottom: 0;
}

html body .jbe-card__b p+p {
	margin-top: 14px;
}

html body .jbe-card__b> :last-child {
	margin-bottom: 0;
}

/* The chapter list. The number sits in a fixed column so the titles line up
   down the card whether the number is 1, 14 or an appendix letter. */
html body ol.jbe-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

html body ol.jbe-card__list li {
	display: flex;
	gap: 10px;
	list-style: none;
	padding: 0;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--ink-2);
}

html body ol.jbe-card__list li b {
	flex: 0 0 24px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
	padding-top: 2px;
}

/* --------------------------------------------------------------------------
   Stat row
   -------------------------------------------------------------------------- */

.jbe-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
}

.jbe-stats--ruled {
	padding-top: 24px;
	border-top: 1px solid var(--hair);
}

html body .jbe-stat b {
	display: block;
	font-family: Newsreader, Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-size: 34px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.jbe-stat span {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   Figure
   -------------------------------------------------------------------------- */

.jbe-figure {
	margin: 0;
}

.jbe-figure img {
	display: block;
	width: 100%;
	height: auto;
	/* No radius: these are pages, and a page has square corners. */
	border: 1px solid var(--hair);
	box-shadow: 0 10px 28px var(--shadow, rgba(0, 34, 68, 0.16));
}

html body .jbe-figure figcaption {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--muted);
	max-width: 70ch;
	margin-top: 12px;
}

html body .jbe-figure figcaption b {
	color: var(--ink-2);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Author
   -------------------------------------------------------------------------- */

.jbe-author {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
}

@media (max-width: 820px) {
	.jbe-author {
		grid-template-columns: 1fr;
	}
}

html body .jbe-author__n {
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 12px 0 0;
	padding: 0;
}

html body .jbe-author__p {
	margin-top: 14px;
	color: var(--ink-2);
}

html body .jbe-author .jbe-deflist {
	margin-top: 20px;
}

html body .jbe-author .jbe-deflist>div {
	padding: 11px 0;
}

/* --------------------------------------------------------------------------
   Miniboard
   -------------------------------------------------------------------------- */

.jbe-miniboard {
	display: grid;
	grid-template-columns: repeat(var(--jbe-mb-cols, 6), 1fr);
	gap: 7px;
}

.jbe-miniboard .jbe-seat {
	display: block;
	width: auto;
	height: auto;
	aspect-ratio: 5 / 3;
	border-radius: 2px;
	/* Fixed navy values rather than tokens: the board sits on the plinth in
	   both themes, so it does not follow the page's ground. */
	background-color: #0E2743;
	border: 1px solid #1B3A5C;
}

.jbe-miniboard .jbe-seat.is-seated {
	background-color: #17395C;
	border-color: #27506F;
}

.jbe-miniboard .jbe-seat.is-gold {
	background-color: var(--gold);
	border-color: var(--gold);
}

.jbe-miniboard .jbe-seat.is-red {
	background-color: var(--court-red);
	border-color: var(--court-red);
}

/* --------------------------------------------------------------------------
   Book page Divi surfaces
   -------------------------------------------------------------------------- */

/* The seat strip's unlit seat has too little contrast against the plinth, so
   on navy it takes the same lifted navy the miniboard's empty seat uses. */
html body .jb-band-navy .jbe-seat-strip .jbe-seat {
	background-color: #123258;
}

html body .jb-band-navy .jbe-seat-strip .jbe-seat.is-gold {
	background-color: var(--gold);
}

html body .jb-band-navy .jbe-seat-strip .jbe-seat.is-red {
	background-color: var(--court-red);
}

html body .jb-band-navy .jbe-seat-strip .jbe-seat.is-empty {
	background-color: transparent;
	border-color: #3E5B7E;
}

/* The closing band takes a hairline on top only — the footer supplies the
   bottom edge, and two rules in a row would read as an empty band. */
html body .et_pb_section.jb-band-capped {
	border-top: 1px solid var(--hair);
}

/* The sources note: deliberately small, deliberately last. */
html body .jbe-sources,
html body .et_pb_text_inner p.jbe-sources {
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted);
	max-width: 72ch;
}

/* The premise's prose column runs a little wider than the page measure. */
html body .jb-prose p {
	max-width: 64ch;
	padding-bottom: 0;
}

html body .jb-prose p+p {
	margin-top: 16px;
}

/* The tool band's copy is narrower than the page measure so it clears the
   miniboard beside it. */
html body .jb-band-navy .jb-tool-copy p,
html body .jb-band-navy .jb-tool-copy .et_pb_text_inner p {
	max-width: 52ch;
	padding-bottom: 0;
}

html body .jb-band-navy .jb-tool-copy p+p {
	margin-top: 14px;
}

/* ==========================================================================
   ABOUT PAGE
   Section 3.5 of design/04-about.md. Scoped to block classes the About page's
   modules own, plus four Divi surfaces the story section needs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page hero — the eyebrow / title / deck opener for an interior page
   -------------------------------------------------------------------------- */

html body .jbe-pagehero__h {
	font-family: Newsreader, Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-size: clamp(42px, 6.2vw, 76px);
	line-height: 0.98;
	letter-spacing: -0.028em;
	text-wrap: balance;
	color: var(--ink);
	/* The measure is what shapes the line breaks. Do not add manual breaks. */
	max-width: var(--jbe-hero-measure, 15ch);
	margin: 14px 0 0;
	padding: 0;
}

html body .jbe-pagehero__deck {
	font-family: Newsreader, Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-style: italic;
	font-size: clamp(19px, 2.2vw, 25px);
	line-height: 1.3;
	color: var(--ink-2);
	max-width: 44ch;
	margin: 14px 0 0;
	padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Pull quote, ruled variant

   The plain quote stands alone on its own measure. This one sits INSIDE
   running prose, so it needs an edge of its own to separate it from the
   paragraphs above and below.
   -------------------------------------------------------------------------- */

html body blockquote.jbe-pull--ruled {
	font-size: clamp(21px, 2.6vw, 29px);
	line-height: 1.32;
	max-width: var(--jbe-pull-measure, 24ch);
	margin: 26px 0 0;
	padding: 0 0 0 20px;
	border-left: 3px solid var(--gold);
}

/* --------------------------------------------------------------------------
   Figure, soft variant — a device screenshot rather than a book page
   -------------------------------------------------------------------------- */

html body .jbe-figure--soft img {
	/* 4px, the same call .jbe-hero__shot makes: the frame reads as a device
	   edge rather than a card. */
	border-radius: 4px;
	box-shadow: 0 12px 30px var(--shadow, rgba(0, 34, 68, 0.16));
}

html body .jbe-figure--soft figcaption {
	font-size: 13.5px;
	font-style: italic;
	max-width: 60ch;
	margin-top: 11px;
}

/* --------------------------------------------------------------------------
   Card grid, principles variant — no label, serif heading
   -------------------------------------------------------------------------- */

.jbe-cards--principles .jbe-card {
	padding: 24px 22px;
}

html body .jbe-cards--principles .jbe-card__h {
	font-family: Newsreader, Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-size: 19px;
	line-height: 1.3;
	margin: 0 0 8px;
}

html body .jbe-cards--principles .jbe-card__b,
html body .jbe-cards--principles .jbe-card__b p {
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   Book promo — the book referenced from another page
   -------------------------------------------------------------------------- */

.jbe-bookpromo {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: clamp(30px, 5vw, 60px);
	align-items: center;
}

@media (max-width: 860px) {
	.jbe-bookpromo {
		grid-template-columns: 1fr;
	}
}

.jbe-bookpromo__cover {
	display: block;
	/* Sized against its own track, not the viewport. */
	width: min(var(--jbe-cover-w, 250px), 70%);
	height: auto;
	margin: 0 auto;
	border: 1px solid var(--hair);
	/* 2px, not the site's 3px: this is the edge of a book, not a card. */
	border-radius: 2px;
	box-shadow:
		0 2px 4px var(--shadow, rgba(0, 34, 68, 0.16)),
		0 22px 44px var(--shadow, rgba(0, 34, 68, 0.16));
}

html body .jbe-bookpromo__lede,
html body .jbe-bookpromo__b {
	color: var(--ink-2);
	margin: 0;
	padding-bottom: 0;
}

html body .jbe-bookpromo__b {
	margin-top: 14px;
}

/* --------------------------------------------------------------------------
   Bio band — greyscale portrait bleeding in from the left under a scrim
   -------------------------------------------------------------------------- */

.jbe-bioband {
	position: relative;
	background-color: var(--band);
	/* clip, not hidden: hidden on an ancestor turns it into a scroll container
	   and silently kills the sticky header. */
	overflow-x: hidden;
	overflow: clip;
}

.jbe-bioband__ph {
	position: absolute;
	inset: 0 auto 0 0;
	pointer-events: none;
	/* Sized from the CONTAINER, not the viewport: the container's left offset
	   plus a fixed run into the text column, so the overlap stays constant
	   instead of growing on a wide screen. */
	width: min(calc((100% - var(--jbe-bio-wrap, 1160px)) / 2 + var(--jbe-bio-run, 660px)),
			62%);
}

.jbe-bioband__ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--jbe-bio-focal, 42% 72%);
	/* Belt and braces: the supplied file is already greyscale, but a colour
	   replacement should not change the band. */
	filter: grayscale(1) contrast(1.03);
}

/* The scrim. Two gradients, and both earn their place: the horizontal one
   dissolves the photo before it reaches the text column, the vertical one
   closes the band at the top and bottom so it reads as one edge. */
.jbe-bioband__ph::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right,
			rgba(var(--band-rgb), 0) 0%,
			rgba(var(--band-rgb), 0) 30%,
			rgba(var(--band-rgb), 0.45) 56%,
			rgba(var(--band-rgb), 0.88) 80%,
			rgba(var(--band-rgb), 1) 96%),
		linear-gradient(to bottom,
			rgba(var(--band-rgb), 0.86) 0%,
			rgba(var(--band-rgb), 0.34) 15%,
			rgba(var(--band-rgb), 0) 32%,
			rgba(var(--band-rgb), 0) 78%,
			rgba(var(--band-rgb), 0.5) 100%);
}

.jbe-bioband__in {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
	max-width: 1160px;
	margin: 0 auto;
	padding: clamp(52px, 6vw, 84px) 32px clamp(56px, 6.5vw, 88px);
	min-height: clamp(520px, 44vw, 660px);
}

html body .jbe-bioband__head .jbe-eyebrow {
	color: var(--gold);
}

html body .jbe-bioband__n {
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: #F4F0E6;
	margin: 12px 0 0;
	padding: 0;
}

html body .jbe-bioband__p {
	font-size: 16.5px;
	line-height: 1.6;
	color: #C2D0DE;
	margin: 0;
	padding-bottom: 0;
}

html body .jbe-bioband .jbe-deflist {
	margin-top: 22px;
}

html body .jbe-bioband .jbe-deflist>div {
	padding: 11px 0;
}

/* Below 900px the band reshapes: the photograph stops bleeding and becomes a
   short banner over the text, so its scrim becomes a single vertical fade and
   the crop moves up to keep the face in frame. */
@media (max-width: 900px) {
	.jbe-bioband__ph {
		position: relative;
		inset: auto;
		width: 100%;
		height: 300px;
	}

	.jbe-bioband__ph img {
		object-position: var(--jbe-bio-focal-sm, 46% 34%);
	}

	.jbe-bioband__ph::after {
		background: linear-gradient(to bottom,
				rgba(var(--band-rgb), 0.55) 0%,
				rgba(var(--band-rgb), 0) 34%,
				rgba(var(--band-rgb), 0.92) 86%,
				rgba(var(--band-rgb), 1) 100%);
	}

	.jbe-bioband__in {
		grid-template-columns: 1fr;
		min-height: 0;
		padding-top: 8px;
	}
}

/* --------------------------------------------------------------------------
   About page Divi surfaces
   -------------------------------------------------------------------------- */

/* The story acts. The fifth row-as-grid in this file, and the reason it is a
   row rather than a module: each act holds something different in its wide
   column — a pull quote, a figure, a card grid — so no single module and no
   single child slug could cover all four. */
html body .jb-band .et_pb_row.jb-act>.et_pb_column {
	width: auto;
	max-width: none;
	margin: 0;
	float: none;
}

/* The row selector is carried through here on purpose. Divi's own row rule in
   this file is `html body .jb-band .et_pb_row` — (0,2,2) — and sets
   `padding: 0 32px`, so a bare `html body .jb-act` at (0,1,2) would lose its
   vertical padding to it. */
html body .jb-band .et_pb_row.jb-act {
	display: grid;
	grid-template-columns: 118px 1fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
	padding: clamp(34px, 4vw, 52px) 32px;
	border-top: 1px solid var(--hair);
}

/* The first act needs neither: the section's own padding already opened it. */
html body .jb-band .et_pb_row.jb-act.jb-act--open {
	padding-top: 0;
	border-top: 0;
}

@media (max-width: 820px) {
	html body .jb-band .et_pb_row.jb-act {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

html body .jb-act__k {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--court-red);
	/* Sits on the heading's first baseline rather than its box top. */
	padding-top: 9px;
}

@media (max-width: 820px) {
	html body .jb-act__k {
		padding-top: 0;
	}
}

html body .jb-act__body h2 {
	font-size: clamp(25px, 3vw, 34px);
	max-width: 22ch;
	margin: 0;
	padding: 0;
}

html body .jb-act__body p,
html body .jb-act__body .et_pb_text_inner p {
	font-size: 17px;
	color: var(--ink-2);
	max-width: 62ch;
	margin-top: 14px;
	padding-bottom: 0;
}

html body .jb-act__body> :first-child>p:first-child,
html body .jb-act__body .et_pb_text_inner>p:first-child {
	margin-top: 0;
}

html body .et_pb_section.jb-band-pagehead {
	padding: clamp(48px, 6vw, 84px) 0 clamp(40px, 5vw, 60px);
}

/* A section closed by a hairline below only. .jb-band-capped rules above,
   .jb-band-edged rules both; this completes the set. */
html body .et_pb_section.jb-band-floored {
	border-bottom: 1px solid var(--hair);
}

/* The bio band supplies its own padding, so the section supplies none. */
html body .et_pb_section.jb-band-bio {
	padding: 0;
}

/* The closer's seat strip is the first centred one on the site. */
html body .jb-band .jb-centred .jbe-seat-strip {
	justify-content: center;
}

/* ==========================================================================
   How it works — the video tour
   --------------------------------------------------------------------------
   Values come from design/03-How-It-Works.html. Two deliberate departures from
   it are marked inline: the player radius, and the closing band's alignment,
   which is handled on the page rather than here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The tour row: rail left, acts right
   -------------------------------------------------------------------------- */

/* The sixth row-as-grid in this file. It is a row rather than a module because
   the rail and the acts are separate modules that have to sit side by side, and
   Divi's own column widths are floats that cannot produce a 238px track. */
html body .jb-band .et_pb_row.jb-tour>.et_pb_column {
	width: auto;
	max-width: none;
	margin: 0;
	float: none;
}

/* The row selector is carried through on purpose: Divi's own row rule in this
   file is `html body .jb-band .et_pb_row` at (0,2,2), and it sets the 32px side
   padding a bare `.jb-tour` would lose. */
html body .jb-band .et_pb_row.jb-tour {
	display: grid;
	grid-template-columns: 238px 1fr;
	gap: clamp(28px, 4vw, 56px);
	padding: 0 32px;
}

/* NOT align-items:start, however much the rail looks like it wants it. A
   sticky element only travels inside a box taller than itself, so the rail's
   column has to stretch to the height of the acts beside it — and so does
   Divi's module wrapper in between, which is what the height:100% below is
   for. With align-items:start both collapse to the rail's own height and the
   rail scrolls straight off the top of the screen.

   And it is TWO wrappers, not one: Divi puts .et_pb_module_inner between the
   module and its content, and that one is content-height on its own. Chain the
   height through both, or the rail sits in a box its own size, has nowhere to
   travel, and scrolls away like static content — which is exactly how this
   failed the first time. Same chain as the cards further up this file. */
html body .jb-tour .jb_tour_rail,
html body .jb-tour .jb_tour_rail>.et_pb_module_inner {
	height: 100%;
}

/* One column, no rail. A sticky sidebar has nowhere to stick at this width,
   and the tour is a single reading column. The whole Divi column is hidden
   rather than just the nav inside it, so the grid gap goes with it. */
@media (max-width: 980px) {
	html body .jb-band .et_pb_row.jb-tour {
		grid-template-columns: 1fr;
	}

	html body .jb-band .et_pb_row.jb-tour>.et_pb_column.jb-tour__rail {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   JuryBoard - Tour Rail
   -------------------------------------------------------------------------- */

html body .jbe-rail {
	position: sticky;
	top: var(--jbe-rail-top, 92px);
}

html body .jbe-rail__k {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 14px;
}

html body .jbe-rail__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--hair);
}

html body .jbe-rail__group {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--court-red);
	padding: 16px 0 5px 14px;
}

html body .jbe-rail__group:first-child {
	padding-top: 0;
}

html body .jbe-rail__item a {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 8px;
	padding: 8px 0 8px 14px;
	/* Pulled back over the list's own rule so the gold marker replaces that
	   2px rather than sitting beside it. */
	margin-left: -2px;
	border-left: 2px solid transparent;
	text-decoration: none;
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--muted);
	transition: color 0.15s ease;
}

html body .jbe-rail__item a:hover {
	color: var(--ink);
	text-decoration: none;
}

html body .jbe-rail__item a:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

html body .jbe-rail__item a i {
	font-style: normal;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	padding-top: 1px;
}

html body .jbe-rail__item a.is-on {
	color: var(--ink);
	border-left-color: var(--gold);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   JuryBoard - Tour Act
   -------------------------------------------------------------------------- */

/* Acts space themselves off each other, so the first one needs no flag to know
   it is first — it simply has no preceding sibling. */
html body .jb-tour .jb_tour_act+.jb_tour_act {
	margin-top: clamp(48px, 5vw, 72px);
}

html body .jbe-tour-act__head {
	margin-bottom: 12px;
}

html body .jbe-tour-act__h {
	font-family: Newsreader, Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--ink);
	max-width: var(--jbe-act-measure, 20ch);
	margin: 10px 0 0;
	padding: 0;
}

html body .jbe-tour-act__p {
	font-size: 16.5px;
	line-height: 1.62;
	color: var(--ink-2);
	max-width: 60ch;
	margin: 12px 0 0;
	padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   JuryBoard - Tour Episode
   -------------------------------------------------------------------------- */

html body .jbe-tour-ep {
	/* The rail jumps here, and the site header is sticky over the top. */
	scroll-margin-top: 96px;
	padding-top: clamp(30px, 3.5vw, 44px);
}

html body .jbe-tour-ep__hd {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}

html body .jbe-tour-ep__n {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

html body .jbe-tour-ep__t {
	font-family: Newsreader, Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-size: clamp(22px, 2.5vw, 28px);
	line-height: 1.18;
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: var(--ink);
	/* Grows to fill the head, which is what pushes the duration to the right
	   edge; the min-width makes it take its own line before the duration is
	   squeezed off the end of a long title. */
	flex: 1 1 auto;
	min-width: 260px;
	margin: 0;
	padding: 0;
}

html body .jbe-tour-ep__d {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

html body .jbe-tour-ep__sub {
	font-size: 16px;
	line-height: 1.62;
	color: var(--ink-2);
	max-width: 62ch;
	margin: 8px 0 0;
	padding-bottom: 0;
}

html body .jbe-tour-ep__why {
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--ink-2);
	max-width: 66ch;
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--hair);
}

html body .jbe-tour-ep__why b {
	display: block;
	margin-bottom: 5px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   The player
   -------------------------------------------------------------------------- */

html body .jbe-player {
	position: relative;
	margin-top: 18px;
	border: 1px solid var(--hair);
	/* 3px, not the mockup's 4px. The site radius is 3px everywhere and one
	   pixel of disagreement is not worth breaking that for. */
	border-radius: 3px;
	overflow: hidden;
	background-color: var(--card);
	box-shadow: 0 12px 30px var(--shadow, rgba(0, 34, 68, 0.16));
}

html body .jbe-player__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 10px 16px;
	background-color: var(--plinth);
	color: var(--on-plinth);
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11.5px;
	letter-spacing: 0.06em;
	line-height: 1.4;
}

html body .jbe-player__bar em {
	font-style: normal;
	font-variant-numeric: tabular-nums;
	color: var(--gold);
	flex: 0 0 auto;
}

/* The badge covers the stage, not the whole player: the bar above carries the
   episode's title and has to stay readable behind nothing. */
html body .jbe-player__stage {
	position: relative;
	display: block;
	background-color: #000;
}

html body .jbe-player__v,
html body .jbe-player__poster {
	display: block;
	width: 100%;
	height: auto;
	background-color: #000;
}

/* 16:9 on both the empty stage and the frame that replaces a poster, so
   pressing play does not move the rest of the page. */
html body .jbe-player__blank,
html body .jbe-player__frame {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	background-color: #000;
}

html body .jbe-player__play {
	position: absolute;
	inset: 0;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 10px;
	color: #fff;
}

html body .jbe-player__play:hover .jbe-player__ico {
	transform: scale(1.06);
}

html body .jbe-player__play:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: -4px;
}

html body .jbe-player__ico {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background-color: rgba(0, 34, 68, 0.88);
	display: grid;
	place-items: center;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
	transition: transform 0.12s ease;
}

/* The triangle is drawn from borders rather than shipped as an icon, so it
   stays sharp at any size and takes the gold token in both themes. */
html body .jbe-player__ico::after {
	content: "";
	border-left: 20px solid var(--gold);
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
	margin-left: 6px;
}

html body .jbe-player__label {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	background-color: rgba(0, 34, 68, 0.88);
	padding: 5px 11px;
	border-radius: 2px;
}

/* Playing: the native controls are the interface from here on. */
html body .jbe-player[data-jbe-playing] .jbe-player__play {
	display: none;
}

@media (max-width: 520px) {
	html body .jbe-player__ico {
		width: 54px;
		height: 54px;
	}

	html body .jbe-player__ico::after {
		border-left-width: 16px;
		border-top-width: 10px;
		border-bottom-width: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {

	html body .jbe-rail__item a,
	html body .jbe-player__ico {
		transition: none;
	}

	html body .jbe-player__play:hover .jbe-player__ico {
		transform: none;
	}
}

/* ==========================================================================
   CONTACT PAGE
   --------------------------------------------------------------------------
   The form itself is styled in the child theme (custom.css, section 07),
   because a form control is a site-wide component and this page is only the
   first place one appears. What lives here is the page: the column pairing,
   the panel the aside sits in, and the routing rows underneath.
   ========================================================================== */

/* Divi lays a row out with floated, percentage-width columns, so every row
   that becomes a grid has to switch that off first. Same reason as
   .jb-two-up above. */
html body .jb-band .et_pb_row.jb-contact-grid>.et_pb_column {
	width: auto;
	max-width: none;
	margin: 0;
	float: none;
}

/* The form takes the wider column. The design system puts the image on the
   wider side of a two-column block; here the form is the thing being read
   and filled, and the aside is the caption to it. */
html body .jb-contact-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

@media (max-width: 900px) {
	html body .jb-contact-grid {
		grid-template-columns: 1fr;
	}
}

/* The form column keeps a measure of its own. Left to fill the column the
   inputs run to 640px and the eye loses the start of the next label. */
html body .jb-contact-form {
	max-width: 600px;
}

/* The aside is a card, so the form reads as the page and the aside as the
   note beside it. */
html body .et_pb_column.jb-contact-panel {
	background-color: var(--card);
	border: 1px solid var(--hair);
	border-radius: 3px;
	padding: clamp(24px, 3vw, 32px);
	box-shadow: var(--lift);
}

html body .jb-contact-panel .jbe-eyebrow {
	margin-bottom: 14px;
}

html body .jb-contact-panel h3 {
	font-family: "Newsreader", Georgia, serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.2;
	margin: 0 0 12px;
	padding: 0;
	color: var(--ink);
}

html body .jb-contact-panel p {
	font-size: 15.5px;
	line-height: 1.6;
	padding-bottom: 0;
}

html body .jb-contact-panel p+p {
	margin-top: 12px;
}

/* A hairline between the panel's blocks rather than a second card inside a
   card — the rule is the separator this design system uses. */
html body .jb-contact-panel .jb-panel-rule {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--hair);
}

/* The routing rows: where a message goes, set as a definition list of its
   own rather than as three more cards. Three cards would out-weigh the form
   they sit under. */
html body .jb-band .et_pb_row.jb-route-grid>.et_pb_column {
	width: auto;
	max-width: none;
	margin: 0;
	float: none;
}

html body .jb-route-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}

@media (max-width: 820px) {
	html body .jb-route-grid {
		grid-template-columns: 1fr;
	}
}

html body .jb-route h3 {
	font-family: "Newsreader", Georgia, serif;
	font-weight: 500;
	font-size: 21px;
	line-height: 1.2;
	margin: 10px 0 10px;
	padding: 0;
	max-width: 20ch;
}

html body .jb-route p {
	font-size: 16px;
	line-height: 1.6;
	max-width: 40ch;
	padding-bottom: 0;
}

/* Each route opens on a hairline, so the three read as one row of entries
   rather than three floating blocks. */
html body .jb-route {
	border-top: 1px solid var(--hair);
	padding-top: 18px;
}

/* Divi closes every row with a clearfix `::after`. In a floated row it is
   invisible; in a grid row it is a grid ITEM, so it opens a second track and
   adds one whole gap of empty space under the columns — 64px here, and the
   same bug is latent in every other grid row on the site. */
html body .jb-band .et_pb_row.jb-contact-grid::after,
html body .jb-band .et_pb_row.jb-route-grid::after {
	display: none;
}

/* ==========================================================================
   DOWNLOAD PAGE
   --------------------------------------------------------------------------
   Two ways in, presented as a pair: the App Store on one card and the browser
   on the other. There is no mockup for this page, so everything here is built
   from the parts the other pages already established — the card ground and
   hairline, the 3px radius, the tick in gold, the button on the plinth — and
   nothing invents a new colour or a new corner.

   The icons are the one new thing. They are line drawings on currentColor
   (see includes/class-jbe-icons.php), which is what lets the same chip sit on
   paper, in a card, and on the navy closer without a second rule per band.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The icon itself
   -------------------------------------------------------------------------- */

/* Sized in em rather than px so an icon always matches whatever it sits beside
   — the chip sets 13px, the card head sets 30px, and neither needs its own
   width rule. */
.jbe-ico {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	display: block;
}

/* --------------------------------------------------------------------------
   The platform card
   -------------------------------------------------------------------------- */

/* Flex column, because the button has to be pinned to the foot: the App Store
   card and the web app card never carry the same amount of copy, and two
   buttons landing at different heights is the first thing the eye finds. */
html body .jbe-plat {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--card);
	border: 1px solid var(--hair);
	border-radius: 3px;
	box-shadow: var(--lift);
	padding: 30px 28px;
}

/* The same mark the featured price tier carries, for the same reason: it names
   the card most people want without saying so in words. */
html body .jbe-plat--featured {
	border-top: 3px solid var(--gold);
	box-shadow: 0 1px 2px rgba(0, 34, 68, 0.05), 0 18px 40px -20px rgba(0, 34, 68, 0.42);
	/* The gold edge is 2px thicker than the hairline the other card carries, so
	   the padding gives those 2px back. Without it the featured card is 2px
	   taller, and since both buttons are pinned to the foot, the pair sit off
	   the same line by exactly that much — visible precisely because they are
	   side by side. */
	padding-top: 28px;
}

html body .jbe-plat__ico {
	display: block;
	font-size: 30px;
	line-height: 1;
	color: var(--ink);
	margin-bottom: 18px;
}

html body .jbe-plat__l {
	display: block;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--court-red);
	margin-bottom: 8px;
}

html body .jbe-plat__h {
	font-family: Newsreader, Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-size: 25px;
	line-height: 1.18;
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: var(--ink);
	margin: 0 0 10px;
	padding: 0;
	max-width: 20ch;
}

html body .jbe-plat__b p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 46ch;
	padding-bottom: 0;
}

html body .jbe-plat__b p+p {
	margin-top: 12px;
}

/* --------------------------------------------------------------------------
   The ticked points
   -------------------------------------------------------------------------- */

/* Gold is the product, so the tick is the one place on this card it appears in
   light mode. The list-style is removed rather than restyled — the tick IS the
   bullet, and a marker as well would be two. */
html body .jbe-plat__pts {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

html body .jbe-plat__pts li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--ink);
	padding: 0;
	margin: 0 0 9px;
}

html body .jbe-plat__pts li:last-child {
	margin-bottom: 0;
}

/* 0.72em on a 15.5px line, nudged down by the difference between the cap
   height and the line box so the tick sits on the text rather than above it. */
html body .jbe-plat__tick {
	font-size: 15.5px;
	width: 0.72em;
	height: 0.72em;
	margin-top: 0.32em;
	color: var(--gold);
	stroke-width: 2.6;
}

/* --------------------------------------------------------------------------
   The device chips
   -------------------------------------------------------------------------- */

/* Opens on a hairline: the chips are a different kind of statement from the
   sentence above them, and the rule is cheaper than more space. */
html body .jbe-plat__dev {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--hair);
}

html body .jbe-plat__devl {
	display: block;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 12px;
}

html body .jbe-plat__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

html body .jbe-plat__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--ink-2);
	background-color: var(--page);
	border: 1px solid var(--hair);
	border-radius: 3px;
	padding: 8px 11px;
}

html body .jbe-plat__chip .jbe-ico {
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   The foot
   -------------------------------------------------------------------------- */

/* margin-top:auto is the whole reason the card is a flex column. */
html body .jbe-plat__foot {
	margin-top: auto;
	padding-top: 26px;
}

html body .jbe-plat__note {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--muted);
	margin: 12px 0 0;
	padding-bottom: 0;
	max-width: 46ch;
}

/* --------------------------------------------------------------------------
   The two-up row
   -------------------------------------------------------------------------- */

/* A grid rather than Divi's floats, so both cards are the height of the taller
   one and the buttons can line up. */
html body .jb-band .et_pb_row.jb-get-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	align-items: stretch;
}

html body .jb-band .et_pb_row.jb-get-grid>.et_pb_column,
html body .jb-band .et_pb_row.jb-get-grid>.et_pb_column>.et_pb_module {
	width: 100%;
	margin: 0;
	height: 100%;
}

@media (max-width: 900px) {
	html body .jb-band .et_pb_row.jb-get-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   The requirements strip
   -------------------------------------------------------------------------- */

/* Three plain columns of fine detail, opened on a hairline each, the same
   pattern the contact page's routing rows use. Deliberately NOT cards: this is
   reference material under the decision, not three more things to choose
   between. */
html body .jb-band .et_pb_row.jb-req-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px 32px;
}

html body .jb-band .et_pb_row.jb-req-grid>.et_pb_column {
	width: 100%;
	margin: 0;
	border-top: 1px solid var(--hair);
	padding-top: 18px;
}

html body .jb-req h3 {
	font-family: Newsreader, Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-size: 19px;
	line-height: 1.25;
	color: var(--ink);
	margin: 0 0 8px;
	padding: 0;
}

html body .jb-req p {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 42ch;
	padding-bottom: 0;
}

@media (max-width: 820px) {
	html body .jb-band .et_pb_row.jb-req-grid {
		grid-template-columns: 1fr;
	}
}

/* The clearfix again. Divi closes every row with an ::after, which in a grid
   row is an ITEM: it opens a fresh track and adds a whole gap of dead space
   under the columns. Same bug, same fix, third page. */
html body .jb-band .et_pb_row.jb-get-grid::after,
html body .jb-band .et_pb_row.jb-req-grid::after {
	display: none;
}