.lhc-guide-library,
.lhc-guide-detail,
.lhc-guide-templates,
.lhc-related-guides,
.lhc-public-content-hub {
	max-width: 1080px;
	margin: 32px auto 64px;
	padding: 0 min(5vw, 28px);
	color: #06244a;
}

/* 0.6.0: distinctive, backend-driven journey layout for the main guide hub. */
.lhc-guide-route-hub {
	--lhc-route-blue: #1687f8;
	--lhc-route-deep-blue: #0b65b5;
	--lhc-route-teal: #1bae9f;
	--lhc-route-violet: #6b63b5;
	--lhc-route-line: rgba(13, 71, 123, .16);
}

.lhc-guide-route-hub > .lhc-public-content-hub__hero {
	display: grid;
	grid-template-columns: minmax(0, 58%) minmax(360px, 42%);
	grid-template-rows: minmax(370px, auto) auto;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	background: #fff;
}

.lhc-guide-route-hub > .lhc-public-content-hub__hero::after {
	content: none;
}

.lhc-guide-route-hub .lhc-public-content-hub__hero-copy {
	grid-column: 1;
	grid-row: 1;
	transform: none;
	padding: clamp(46px, 5.2vw, 76px);
	background:
		radial-gradient(circle at 12% 88%, rgba(53, 199, 189, .22), transparent 29%),
		linear-gradient(135deg, #0c4777 0%, #0d5d95 65%, #1175a8 100%);
}

.lhc-guide-route-hub .lhc-public-content-hub__hero-copy h1 {
	max-width: 650px;
	margin: 0 0 22px;
	color: #fff;
}

.lhc-guide-route-hub .lhc-public-content-hub__hero-copy > div {
	max-width: 620px;
	color: rgba(255, 255, 255, .92);
	line-height: 1.8;
}

.lhc-guide-route-hub .lhc-public-content-hub__hero-visual {
	grid-column: 2;
	grid-row: 1;
	min-height: 370px;
	background-image: linear-gradient(90deg, rgba(6, 36, 74, .24), transparent 32%), url("../images/home-guides-default.webp");
	background-position: center center;
	background-size: cover;
}

.lhc-guide-route-hub .lhc-public-content-hub__hero-visual::after {
	right: 8%;
	bottom: 8%;
	width: 104px;
	height: 104px;
	border-width: 14px;
	border-color: rgba(53, 199, 189, .26);
}

.lhc-guide-station-map {
	grid-column: 1 / -1;
	grid-row: 2;
	padding: 25px clamp(28px, 4vw, 54px) 27px;
	border-top: 1px solid rgba(13, 71, 123, .12);
	background: #fff;
}

.lhc-guide-station-map ol {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.lhc-guide-station-map ol::before {
	position: absolute;
	top: 17px;
	right: 9%;
	left: 9%;
	height: 2px;
	background: linear-gradient(90deg, var(--lhc-route-blue), var(--lhc-route-deep-blue), var(--lhc-route-teal), var(--lhc-route-violet));
	content: "";
	opacity: .42;
}

.lhc-guide-station-map__item {
	--lhc-station-accent: var(--lhc-route-blue);
	position: relative;
	z-index: 1;
}

.lhc-guide-station-map__item--document { --lhc-station-accent: var(--lhc-route-deep-blue); }
.lhc-guide-station-map__item--arrival { --lhc-station-accent: var(--lhc-route-teal); }
.lhc-guide-station-map__item--family { --lhc-station-accent: var(--lhc-route-violet); }

.lhc-guide-station-map__item a {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 0 10px;
	color: #244665;
	text-align: center;
	text-decoration: none;
}

.lhc-guide-station-map__item a > span {
	display: grid;
	width: 35px;
	height: 35px;
	place-items: center;
	border: 3px solid var(--lhc-station-accent);
	border-radius: 50%;
	background: #fff;
	color: var(--lhc-station-accent);
	font-family: var(--lhc-type-body-family);
	font-size: 11px;
	font-weight: 800;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}

.lhc-guide-station-map__item a strong {
	font-weight: 700;
	font-family: var(--lhc-type-body-family);
	font-size: 14px;
	line-height: 1.4;
}

.lhc-guide-station-map__item a:hover > span,
.lhc-guide-station-map__item a:focus-visible > span {
	background: var(--lhc-station-accent);
	color: #fff;
	transform: translateY(-2px);
}

.lhc-guide-station-map__item a:focus-visible,
.lhc-guide-route-card a:focus-visible,
.lhc-guide-terminus a:focus-visible {
	outline: 3px solid rgba(22, 135, 248, .42);
	outline-offset: 4px;
}

.lhc-guide-journey {
	margin-top: clamp(54px, 6vw, 82px);
}

.lhc-guide-journey__heading {
	max-width: 760px;
	margin: 0 0 clamp(34px, 4vw, 52px) 94px;
}

.lhc-guide-journey__heading h2,
.lhc-guide-terminus h2 {
	margin: 0;
	font-family: var(--lhc-type-display-family);
	font-size: var(--lhc-type-h2-size);
	font-weight: 800;
	line-height: var(--lhc-type-h2-line-height);
}

/* "更多指南" sits directly above a dense grid of 19px card titles, unlike
   the roomier route-timeline and closing-CTA headings above (which keep the
   full section-break H2 token) -- split out of that shared rule and given
   its own smaller size so it doesn't tower over the cards below it. Family/
   weight/line-height still follow the same canonical h2 formula as those. */
.lhc-guide-more h2 {
	margin: 0;
	font-family: var(--lhc-type-display-family);
	font-size: 22px;
	font-weight: 800;
	line-height: var(--lhc-type-h2-line-height);
}

.lhc-guide-journey__heading p {
	margin: 14px 0 0;
	color: #52657a;
	font-size: 17px;
	line-height: 1.75;
}

.lhc-guide-route {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lhc-guide-route::before {
	position: absolute;
	top: 34px;
	bottom: 34px;
	left: 39px;
	width: 3px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--lhc-route-blue), var(--lhc-route-deep-blue), var(--lhc-route-teal), var(--lhc-route-violet));
	content: "";
	opacity: .3;
}

.lhc-guide-route__item {
	--lhc-station-accent: var(--lhc-route-blue);
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: 14px;
	margin: 0 0 28px;
	scroll-margin-top: 120px;
}

.lhc-guide-route__item--document { --lhc-station-accent: var(--lhc-route-deep-blue); }
.lhc-guide-route__item--arrival { --lhc-station-accent: var(--lhc-route-teal); }
.lhc-guide-route__item--family { --lhc-station-accent: var(--lhc-route-violet); }

.lhc-guide-route__rail {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	padding-top: 32px;
}

.lhc-guide-route__rail span {
	display: grid;
	width: 46px;
	height: 46px;
	place-items: center;
	border: 4px solid #fff;
	border-radius: 50%;
	background: var(--lhc-station-accent);
	box-shadow: 0 0 0 1px var(--lhc-station-accent), 0 8px 20px rgba(6, 36, 74, .13);
	color: #fff;
	font-family: var(--lhc-type-body-family);
	font-size: 13px;
	font-weight: 800;
}

.lhc-guide-route-card {
	display: grid;
	grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
	grid-template-areas: "media copy";
	min-height: 330px;
	overflow: hidden;
	border: 1px solid var(--lhc-route-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: inset 5px 0 0 var(--lhc-station-accent), 0 16px 38px rgba(6, 36, 74, .07);
	transition: box-shadow .22s ease, transform .22s ease;
}

.lhc-guide-route__item:nth-child(even) .lhc-guide-route-card {
	grid-template-columns: minmax(0, 1.28fr) minmax(280px, .72fr);
	grid-template-areas: "copy media";
}

.lhc-guide-route-card--no-media,
.lhc-guide-route__item:nth-child(even) .lhc-guide-route-card--no-media {
	grid-template-columns: 1fr;
	grid-template-areas: "copy";
}

.lhc-guide-route-card:hover {
	box-shadow: inset 5px 0 0 var(--lhc-station-accent), 0 22px 48px rgba(6, 36, 74, .11);
	transform: translateY(-3px);
}

.lhc-guide-route-card__media {
	grid-area: media;
	min-height: 330px;
	overflow: hidden;
	background: #eaf4ff;
}

.lhc-guide-route-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .32s ease;
}

.lhc-guide-route__item--document .lhc-guide-route-card__media img { object-position: 54% center; }
.lhc-guide-route__item--timeline .lhc-guide-route-card__media img { object-position: center; }
.lhc-guide-route__item--arrival .lhc-guide-route-card__media img { object-position: center; }
.lhc-guide-route__item--family .lhc-guide-route-card__media img { object-position: 62% center; }

.lhc-guide-route-card:hover .lhc-guide-route-card__media img {
	transform: scale(1.025);
}

.lhc-guide-route-card__copy {
	grid-area: copy;
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(28px, 3.5vw, 46px);
}

.lhc-guide-route-card__meta {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 13px;
	color: #607087;
	font-size: 12px;
	font-weight: 700;
}

.lhc-guide-route-card__meta span {
	padding: 4px 9px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--lhc-station-accent) 12%, white);
	color: var(--lhc-station-accent);
}

.lhc-guide-route-card__meta strong {
	color: #52657a;
}

/* Card-level title, not a page section break: sits right above a small
   "第 0N 站" meta badge (12px) and 16px body copy, so the generic H2 section
   token (24-30px) read as oversized here and -- since this rule never set
   font-weight -- also rendered in the browser's default regular weight
   instead of bold, looking unstyled next to every other bold heading on the
   site. Standardized to 19px/700, matching .lhc-guide-card h3 elsewhere in
   this file, the established size for this same "rich card title" role. */
.lhc-guide-route-card h3 {
	margin: 0 0 13px;
	font-family: var(--lhc-type-body-family);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.lhc-guide-route-card h3 a {
	color: #06244a;
	text-decoration: none;
}

.lhc-guide-route-card h3 a:hover {
	color: var(--lhc-station-accent);
}

.lhc-guide-route-card__copy > p {
	max-width: 690px;
	margin: 0 0 20px;
	color: #52657a;
	font-size: 16px;
	line-height: 1.75;
}

.lhc-guide-route-card__steps,
.lhc-guide-route-card__chips {
	display: flex;
	width: 100%;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.lhc-guide-route-card__steps {
	position: relative;
	gap: 0;
}

.lhc-guide-route-card__steps::before {
	position: absolute;
	top: 7px;
	right: 5%;
	left: 5%;
	height: 2px;
	background: color-mix(in srgb, var(--lhc-station-accent) 32%, white);
	content: "";
}

.lhc-guide-route-card__steps li {
	position: relative;
	z-index: 1;
	flex: 1 1 20%;
	padding: 22px 5px 0 0;
	color: #52657a;
	font-size: 12px;
	line-height: 1.35;
}

.lhc-guide-route-card__steps li::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 13px;
	height: 13px;
	border: 3px solid var(--lhc-station-accent);
	border-radius: 50%;
	background: #fff;
	content: "";
}

.lhc-guide-route-card__chips {
	gap: 8px;
	flex-wrap: wrap;
}

.lhc-guide-route-card__chips li {
	padding: 6px 12px;
	border: 1px solid color-mix(in srgb, var(--lhc-station-accent) 42%, white);
	border-radius: 999px;
	background: color-mix(in srgb, var(--lhc-station-accent) 7%, white);
	color: #244665;
	font-size: 13px;
}

.lhc-guide-route-card__roles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: 100%;
	margin: 0 0 24px;
	gap: 10px;
}

.lhc-guide-route-card__roles > div {
	display: grid;
	gap: 4px;
	padding: 13px 15px;
	border: 1px solid color-mix(in srgb, var(--lhc-station-accent) 25%, white);
	border-radius: 10px;
	background: color-mix(in srgb, var(--lhc-station-accent) 6%, white);
}

.lhc-guide-route-card__roles strong {
	font-weight: 700;
	margin-bottom: 3px;
	color: var(--lhc-station-accent);
	font-size: 14px;
}

.lhc-guide-route-card__roles span {
	color: #52657a;
	font-size: 12px;
}

.lhc-guide-route-card__cta {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-top: auto;
	padding-bottom: 3px;
	border-bottom: 2px solid var(--lhc-station-accent);
	color: #0b4f86;
	font-weight: 700;
	text-decoration: none;
}

.lhc-guide-route-card__cta span {
	transition: transform .2s ease;
}

.lhc-guide-route-card__cta:hover span {
	transform: translateX(4px);
}

.lhc-guide-more {
	margin: clamp(62px, 7vw, 90px) 0 0 94px;
}

.lhc-guide-more h2 {
	margin-bottom: 24px;
}

.lhc-guide-more .lhc-guide-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lhc-guide-terminus {
	position: relative;
	margin: clamp(68px, 8vw, 104px) 0 0;
	padding: clamp(44px, 5.2vw, 68px);
	overflow: hidden;
	border-radius: 16px;
	background:
		radial-gradient(circle at 88% 18%, rgba(53, 199, 189, .24), transparent 25%),
		linear-gradient(135deg, #0a3f6d 0%, #0d5d95 70%, #106b9c 100%);
	color: #fff;
	text-align: center;
}

.lhc-guide-terminus::before {
	position: absolute;
	top: 52px;
	right: -30px;
	width: 220px;
	height: 220px;
	border: 26px solid rgba(255, 255, 255, .06);
	border-radius: 50%;
	content: "";
}

.lhc-guide-terminus > div {
	display: flex;
	justify-content: center;
	gap: 10px;
	align-items: center;
	margin-bottom: 16px;
	color: #7ce0d7;
	font-size: 13px;
}

.lhc-guide-terminus > div span {
	display: block;
	width: 16px;
	height: 16px;
	border: 4px solid #35c7bd;
	border-radius: 50%;
	background: #0a3f6d;
}

.lhc-guide-terminus h2 {
	position: relative;
	z-index: 1;
	max-width: 780px;
	margin-right: auto;
	margin-left: auto;
	color: #fff;
}

.lhc-guide-terminus p {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 16px auto 28px;
	color: rgba(255, 255, 255, .9);
	font-size: 16px;
	line-height: 1.75;
}

/* Was a plain 8px rounded rectangle -- every other button on the site
   (including the other CTA buttons in this same file) uses the shared
   --lhc-brand-pill-radius token for a fully-rounded capsule shape. Switched
   to match. */
.lhc-guide-terminus .button {
	position: relative;
	z-index: 1;
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding: 11px 26px;
	border: 0;
	border-radius: var(--lhc-brand-pill-radius, 999px);
	background: #35c7bd;
	color: #06244a;
	font-weight: 800;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.lhc-guide-route-hub *,
	.lhc-guide-route-hub *::before,
	.lhc-guide-route-hub *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}

@media (max-width: 980px) {
	.lhc-guide-route-hub > .lhc-public-content-hub__hero {
		grid-template-columns: 1fr;
		grid-template-rows: auto 300px auto;
	}

	.lhc-guide-route-hub .lhc-public-content-hub__hero-copy,
	.lhc-guide-route-hub .lhc-public-content-hub__hero-visual,
	.lhc-guide-station-map {
		grid-column: 1;
	}

	.lhc-guide-route-hub .lhc-public-content-hub__hero-copy { grid-row: 1; }
	.lhc-guide-route-hub .lhc-public-content-hub__hero-visual { grid-row: 2; min-height: 300px; }
	.lhc-guide-station-map { grid-row: 3; }

	.lhc-guide-route-card,
	.lhc-guide-route__item:nth-child(even) .lhc-guide-route-card {
		grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
		grid-template-areas: "media copy";
	}

	.lhc-guide-route-card__copy {
		padding: 28px;
	}

	.lhc-guide-more .lhc-guide-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.lhc-guide-route-hub {
		width: calc(100vw - 28px) !important;
	}

	.lhc-guide-route-hub .lhc-public-content-hub__hero-copy {
		padding: 40px 26px 44px;
	}

	.lhc-guide-route-hub .lhc-public-content-hub__hero-visual {
		min-height: 230px;
	}

	.lhc-guide-station-map {
		padding: 22px 16px 24px;
	}

	.lhc-guide-station-map ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 20px;
	}

	.lhc-guide-station-map ol::before {
		content: none;
	}

	.lhc-guide-station-map__item a strong {
	font-weight: 700;
		font-size: 13px;
	}

	.lhc-guide-journey__heading {
		margin-left: 0;
	}

	.lhc-guide-route::before {
		left: 23px;
	}

	.lhc-guide-route__item {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 10px;
	}

	.lhc-guide-route__rail {
		padding-top: 24px;
	}

	.lhc-guide-route__rail span {
		width: 38px;
		height: 38px;
		border-width: 3px;
		font-size: 11px;
	}

	.lhc-guide-route-card,
	.lhc-guide-route__item:nth-child(even) .lhc-guide-route-card {
		grid-template-columns: 1fr;
		grid-template-areas: "media" "copy";
		min-height: 0;
	}

	.lhc-guide-route-card__media {
		min-height: 210px;
		height: 210px;
	}

	.lhc-guide-route-card__copy {
		padding: 24px 20px 26px;
	}

	/* Was font-size: 24px here, re-inflating the card title on phones right
	   back toward the oversized generic H2 range this rule's base
	   declaration was just fixed away from (see .lhc-guide-route-card h3
	   earlier in this file). 19px already works at every width, so this
	   mobile-only override is no longer needed. */

	.lhc-guide-route-card__steps {
		flex-wrap: wrap;
		gap: 10px 0;
	}

	.lhc-guide-route-card__steps::before {
		content: none;
	}

	.lhc-guide-route-card__steps li {
		flex-basis: 33.333%;
		padding-top: 18px;
	}

	.lhc-guide-route-card__roles {
		grid-template-columns: 1fr;
	}

	.lhc-guide-more {
		margin-left: 0;
	}

	.lhc-guide-more .lhc-guide-grid {
		grid-template-columns: 1fr;
	}

	.lhc-guide-terminus {
		padding: 42px 24px;
	}
}

.lhc-public-content-hub__hero {
	position: relative;
	margin-bottom: 26px;
	padding: clamp(28px, 5vw, 54px);
	border: 1px solid rgba(22, 135, 248, 0.14);
	border-radius: 14px;
	background: linear-gradient(135deg, #f3f9ff, #fff 54%, #eefaf8);
	overflow: hidden;
}

.lhc-public-content-hub__hero::after {
	position: absolute;
	right: -70px;
	bottom: -92px;
	width: 230px;
	height: 230px;
	border: 32px solid rgba(22, 135, 248, 0.07);
	border-radius: 50%;
	content: "";
}

.lhc-public-content-hub__hero p {
	color: #1687f8;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.lhc-public-content-hub__hero h1 {
	font-weight: 700;
	max-width: 760px;
	margin: 8px 0 12px;
	font-family: var(--lhc-type-display-family);
	font-size: var(--lhc-type-h1-size);
	line-height: 1.08;
}

.lhc-public-content-hub__hero div {
	max-width: 760px;
	color: #5c6d82;
	font-size: 17px;
	line-height: 1.7;
}

.lhc-guide-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.lhc-guide-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	padding: 22px;
	border: 1px solid rgba(22, 135, 248, 0.14);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(6, 36, 74, 0.06);
}

.lhc-guide-card h3 {
	margin: 0 0 10px;
	font-size: 19px;
	letter-spacing: 0;
}

.lhc-guide-card p,
.lhc-guide-summary,
.lhc-guide-disclaimer {
	color: #5f6863;
}

.lhc-guide-card .button {
	margin-top: auto;
}

.lhc-guide-card textarea {
	width: 100%;
	margin-bottom: 10px;
	resize: vertical;
}

.lhc-guide-copy-status {
	display: block;
	min-height: 20px;
	margin-top: 6px;
	font-size: 13px;
}

.lhc-guide-detail h1 {
	font-weight: 700;
	font-size: var(--lhc-type-h1-size);
	line-height: 1.08;
	letter-spacing: 0;
}

.lhc-guide-detail {
	max-width: 920px;
}

.lhc-guide-detail > header {
	margin: 18px 0 30px;
	padding: clamp(26px, 4vw, 44px);
	border-radius: 14px;
	background: linear-gradient(135deg, #f3f9ff, #fff 58%, #eefaf8);
}

.lhc-guide-detail > header:not(.lhc-guide-hero) h1 {
	margin: 10px 0 14px;
	font-family: var(--lhc-type-display-family);
}

.lhc-guide-body {
	max-width: 760px;
	margin: 0 auto;
}

/* This selector is (re)declared two more times further down this file,
   each from an earlier "TASK" pass that added its own margin/color/
   font-size instead of editing the rule already here. All three share
   the exact same selector and specificity, so per property the LAST one
   in the file always wins regardless of what the earlier two say -- this
   first declaration was fully inert. See the final .lhc-guide-body h2
   rule (search this file for it) for the one actually in effect, and for
   the font-size fix. Left as a marker rather than deleted outright so a
   future edit doesn't have to rediscover this by trial and error. */

.lhc-guide-source,
.lhc-guide-next-step {
	display: flex;
	max-width: 760px;
	margin: 28px auto 0;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.lhc-guide-source {
	padding: 18px;
	border-left: 4px solid #1bae9f;
	background: #f2faf8;
}

.lhc-guide-source span {
	width: 100%;
	color: #607087;
	font-size: 13px;
}

.lhc-guide-next-step .button {
	padding: 10px 18px;
	border-radius: 999px;
}

.lhc-guide-disclaimer {
	max-width: 760px;
	margin: 26px auto 0;
}

.lhc-guide-body {
	font-size: 17px;
	line-height: 1.75;
}

.lhc-guide-breadcrumbs,
.lhc-guide-disclaimer {
	font-size: 13px;
}

@media (max-width: 760px) {
	.lhc-guide-grid {
		grid-template-columns: 1fr;
	}

	.lhc-guide-library,
	.lhc-guide-detail,
	.lhc-guide-templates,
	.lhc-related-guides {
		padding: 0 12px;
	}

	.lhc-public-content-hub {
		padding: 0 12px;
	}

	.lhc-guide-card .button {
		width: 100%;
		text-align: center;
	}
}

/* 0.5.1: formal public-content pages use the accepted full-width inner-page frame. */
body.lhc-public-content-page-shell :where(.lhc-template, .lhc-template__content, .lhc-template__article, .lhc-template__body),
body.lhc-public-content-page-shell :where(.wp-site-blocks, main, .site-main, .content-area, .entry-content, .wp-block-post-content, .wp-block-shortcode, .is-layout-constrained, .alignwide, .alignfull) {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.lhc-public-content-page-shell .lhc-content-shell {
	width: 100% !important;
	max-width: none !important;
}

.lhc-public-content-hub,
.lhc-guide-detail {
	width: min(90vw, 1320px);
	max-width: 1320px;
	margin: clamp(18px, 2.4vw, 34px) auto clamp(64px, 7vw, 96px);
	padding: 0;
}

/* 0.5.8: keep public guide pages inside the shared 90% content frame.
 * The WordPress shell reset above intentionally makes generic <main> elements
 * full width, so this component-level rule must win with matching importance. */
body.lhc-public-content-page-shell .lhc-content-shell > .lhc-public-content-hub,
body.lhc-public-content-page-shell .lhc-content-shell > .lhc-guide-detail,
body:has(.lhc-content-shell) .lhc-content-shell > .lhc-public-content-hub,
body:has(.lhc-content-shell) .lhc-content-shell > .lhc-guide-detail {
	width: min(90vw, 1320px) !important;
	max-width: 1320px !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

.lhc-public-content-hub__hero {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(390px, .82fr);
	min-height: clamp(370px, 32vw, 470px);
	margin-bottom: clamp(28px, 4vw, 48px);
	padding: 0;
	border: 1px solid rgba(22, 135, 248, .14);
	border-radius: 16px;
	background: linear-gradient(135deg, #edf7ff 0%, #fff 48%, #effaf8 100%);
	box-shadow: 0 20px 48px rgba(6, 36, 74, .08);
}

.lhc-public-content-hub__hero-copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(36px, 5.6vw, 76px);
}

.lhc-public-content-hub--guide .lhc-public-content-hub__hero-copy {
	transform: translateY(-18px);
}

.lhc-public-content-hub__hero-copy h1 {
	max-width: 720px;
	margin: 12px 0 20px;
	font-family: var(--lhc-type-display-family);
	font-size: var(--lhc-type-h1-size);
	font-weight: 700;
	line-height: var(--lhc-type-h1-line-height);
}

.lhc-public-content-hub__hero-copy > div {
	max-width: 650px;
	font-size: clamp(17px, 1.35vw, 20px);
}

.lhc-public-content-hub__hero-visual {
	position: relative;
	min-height: 100%;
	background-image: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .3) 24%, transparent 54%), url("../images/home-guides-default.webp");
	background-position: center center;
	background-size: cover;
}

.lhc-public-content-hub--parent_qa .lhc-public-content-hub__hero-visual {
	background-image: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .28) 24%, transparent 54%), url("../images/about-hero-consultation.webp");
	background-position: right center;
	background-size: auto 118%;
	background-repeat: no-repeat;
}

.lhc-public-content-hub--parent_qa .lhc-public-content-hub__hero-copy {
	transform: translateY(-24px);
}

.lhc-public-content-hub--parent_qa .lhc-public-content-hub__hero-copy h1 {
	margin-top: 0;
}

.lhc-public-content-hub__hero-visual::after {
	position: absolute;
	inset: auto 10% 10% auto;
	width: 130px;
	height: 130px;
	border: 18px solid rgba(53, 199, 189, .2);
	border-radius: 50%;
	content: "";
}

.lhc-public-content-hub--guide .lhc-guide-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.22fr) minmax(330px, .78fr);
	grid-template-rows: repeat(2, minmax(240px, auto)) auto;
	grid-auto-flow: row;
	gap: 18px;
}

.lhc-public-content-hub--guide .lhc-guide-card:first-child {
	grid-column: 1;
	grid-row: 1 / 3;
	justify-content: flex-end;
	min-height: 680px;
	padding: clamp(28px, 4vw, 54px);
	background: linear-gradient(160deg, rgba(6, 36, 74, .02), rgba(22, 135, 248, .1)), #fff;
}

.lhc-public-content-hub--guide .lhc-guide-card:nth-child(2) {
	grid-column: 2;
	grid-row: 1;
}

.lhc-public-content-hub--guide .lhc-guide-card:nth-child(3) {
	grid-column: 2;
	grid-row: 2;
}

@media (min-width: 981px) {
	.lhc-public-content-hub--guide .lhc-guide-card:nth-child(2) .lhc-guide-card__media,
	.lhc-public-content-hub--guide .lhc-guide-card:nth-child(3) .lhc-guide-card__media {
		height: clamp(220px, 16vw, 238px);
	}
}

.lhc-public-content-hub--guide .lhc-guide-card:nth-child(4) {
	grid-column: 1 / 3;
	grid-row: 3;
}

/* This rule was fully shadowed by an identical-specificity, later
   declaration of the same selector further down this file (now the
   .lhc-public-content-hub--guide .lhc-guide-card:first-child h3 rule
   right before .lhc-guide-card:first-child .lhc-guide-card__media) --
   that later one already wins the cascade tie by source order and uses
   the correct body font + h2 scale, so the display-serif/h1-size version
   here was dead weight, just a landmine for the next edit that happened
   to reorder these two blocks. Removed; its one still-useful property
   (max-width, to control the featured card title's line wrapping) has
   been folded into the surviving rule instead of being lost. */

.lhc-public-content-hub--guide .lhc-guide-card:first-child p {
	max-width: 610px;
	font-size: 18px;
	line-height: 1.7;
}

.lhc-public-content-hub--parent_qa .lhc-guide-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.lhc-guide-card {
	position: relative;
	padding: 26px;
	border-radius: 14px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.lhc-guide-card:hover {
	border-color: rgba(22, 135, 248, .34);
	box-shadow: 0 20px 42px rgba(6, 36, 74, .1);
	transform: translateY(-3px);
}

.lhc-guide-card h3 {
	margin: 10px 0 12px;
	color: #06244a;
	font-size: 19px;
	font-weight: 750;
	line-height: 1.3;
}

.lhc-guide-card p {
	font-size: 15px;
	line-height: 1.65;
}

.lhc-guide-card .button {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	margin-top: 18px;
	padding: 8px 16px;
	border: 1px solid rgba(22, 135, 248, .24);
	border-radius: 999px;
	color: #0b65b5;
	text-decoration: none;
}

.lhc-guide-breadcrumbs {
	margin-bottom: 18px;
	color: #607087;
	font-size: 13px;
}

.lhc-guide-breadcrumbs a {
	color: var(--lhc-brand-blue, #1687F8);
	font-weight: 700;
	text-decoration: none;
}

.lhc-guide-breadcrumbs a:hover {
	text-decoration: underline;
}

.lhc-guide-detail > header {
	min-height: 360px;
	margin: 0 0 clamp(34px, 4vw, 52px);
	padding: clamp(36px, 4vw, 56px);
	background: radial-gradient(circle at 86% 28%, rgba(53, 199, 189, .18), transparent 24%), linear-gradient(135deg, #edf7ff, #fff 58%, #eefaf8);
}

.lhc-guide-detail > header:not(.lhc-guide-hero) h1 {
	max-width: 900px;
	margin: 0 0 18px;
	font-family: var(--lhc-type-display-family);
	font-size: var(--lhc-type-h1-size);
	font-weight: 700;
	letter-spacing: 0;
	line-height: var(--lhc-type-h1-line-height);
}

.lhc-guide-detail > header .lhc-guide-summary {
	max-width: 820px;
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.7;
}

.lhc-guide-article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: clamp(42px, 6vw, 84px);
	align-items: start;
	max-width: 1120px;
	margin: 0 auto;
}

.lhc-guide-body {
	max-width: none;
	font-family: var(--lhc-type-body-family);
	font-size: 16px;
	line-height: 1.85;
}

/* Also inert -- see the comment on the first .lhc-guide-body h2 rule
   earlier in this file; the last declaration of this selector (further
   below) wins every property, including this one's padding-top and
   font-size. */

.lhc-guide-sidebar {
	position: sticky;
	top: 32px;
	display: grid;
	gap: 16px;
}

.lhc-guide-source,
.lhc-guide-next-step {
	max-width: none;
	margin: 0;
}

.lhc-guide-source {
	display: grid;
	padding: 24px;
	border: 1px solid rgba(53, 199, 189, .24);
	border-left: 4px solid #1bae9f;
	border-radius: 10px;
}

.lhc-guide-next-step {
	display: grid;
}

.lhc-guide-next-step .button {
	display: flex;
	justify-content: center;
	text-align: center;
}

body.lhc-public-content-page-shell .lhc-branded-footer {
	margin-top: 0;
}

@media (max-width: 980px) {
	.lhc-public-content-hub__hero {
		grid-template-columns: 1fr;
	}

	.lhc-public-content-hub__hero-visual {
		min-height: 280px;
	}

	.lhc-public-content-hub--parent_qa .lhc-public-content-hub__hero-copy {
		transform: none;
	}

	.lhc-public-content-hub--parent_qa .lhc-public-content-hub__hero-visual {
		background-position: right center;
		background-size: cover;
	}

	.lhc-public-content-hub--guide .lhc-guide-grid,
	.lhc-public-content-hub--parent_qa .lhc-guide-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
		grid-auto-flow: row;
	}

	.lhc-public-content-hub--guide .lhc-guide-card:first-child,
	.lhc-public-content-hub--guide .lhc-guide-card:not(:first-child) {
		grid-column: auto;
		grid-row: auto;
		min-height: 0;
	}

	.lhc-public-content-hub--guide .lhc-guide-card:nth-child(4) {
		display: flex;
		grid-template-columns: none;
	}

	.lhc-public-content-hub--guide .lhc-guide-card:nth-child(4) .lhc-guide-card__media {
		height: 168px;
		min-height: 0;
	}

	.lhc-guide-article-layout {
		grid-template-columns: 1fr;
	}

	.lhc-guide-sidebar {
		position: static;
	}
}

@media (max-width: 980px) {
	.lhc-public-content-hub--guide .lhc-guide-card:nth-child(4) {
		display: flex;
		grid-template-columns: none;
	}

	.lhc-public-content-hub--guide .lhc-guide-card:nth-child(4) .lhc-guide-card__media {
		height: 168px;
		min-height: 0;
	}

	.lhc-public-content-hub--guide .lhc-guide-card:first-child .lhc-guide-card__route {
		display: none;
	}
}

@media (max-width: 680px) {
	.lhc-public-content-hub,
	.lhc-guide-detail {
		width: calc(100vw - 28px);
	}

	.lhc-public-content-hub__hero-copy {
		padding: 30px 24px;
	}

	.lhc-public-content-hub__hero-copy h1,
	.lhc-guide-detail > header:not(.lhc-guide-hero) h1 {
		font-size: clamp(38px, 10vw, 48px);
	}

	.lhc-public-content-hub__hero-visual {
		min-height: 220px;
	}

	.lhc-public-content-hub--guide .lhc-guide-grid,
	.lhc-public-content-hub--parent_qa .lhc-guide-grid {
		grid-template-columns: 1fr;
	}

	.lhc-guide-detail > header {
		min-height: 0;
		padding: 30px 24px;
	}
}

/* 0.5.3: shared typography + content-led public guide layouts. */
.lhc-guide-detail,
.lhc-public-content-hub {
	--lhc-guide-accent: var(--lhc-home-blue, #1687f8);
	--lhc-guide-accent-soft: #eaf4ff;
	font-size: var(--lhc-type-body-size, 16px);
}

.lhc-public-content-hub__hero-copy h1 {
	font-family: var(--lhc-type-display-family, Georgia, "Times New Roman", "Songti SC", SimSun, serif);
	font-size: var(--lhc-type-h1-size, clamp(36px, 3.3vw, 52px));
	font-weight: 700;
	line-height: var(--lhc-type-h1-line-height, 1.08);
}

.lhc-guide-detail > .lhc-guide-hero h1 {
	font-family: var(--lhc-type-display-family, Georgia, "Times New Roman", "Songti SC", SimSun, serif);
	font-size: var(--lhc-type-h2-size, clamp(24px, 2.5vw, 30px));
	font-weight: 700;
	line-height: var(--lhc-type-h2-line-height, 1.2);
}

.lhc-guide-card {
	padding: 0;
	overflow: hidden;
}

.lhc-guide-card__media {
	display: block;
	width: 100%;
	height: 168px;
	overflow: hidden;
}

.lhc-guide-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms ease;
}

.lhc-guide-card:hover .lhc-guide-card__media img {
	transform: scale(1.025);
}

.lhc-guide-card__copy {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 26px 26px;
}

.lhc-guide-card__route {
	display: none;
}

.lhc-public-content-hub--guide .lhc-guide-card:first-child .lhc-guide-card__route {
	display: grid;
	width: 100%;
	margin: 28px 0 26px;
	padding: 22px;
	gap: 12px;
	border: 1px solid rgba(22, 135, 248, .14);
	border-radius: 14px;
	background: rgba(255, 255, 255, .66);
	list-style: none;
}

.lhc-public-content-hub--guide .lhc-guide-card:first-child .lhc-guide-card__route li {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	min-height: 42px;
}

.lhc-public-content-hub--guide .lhc-guide-card:first-child .lhc-guide-card__route span {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 999px;
	background: #eaf4ff;
	color: #0b65b5;
	font-size: 12px;
	font-weight: 800;
}

.lhc-public-content-hub--guide .lhc-guide-card:first-child .lhc-guide-card__route strong {
	font-weight: 700;
	color: #244665;
	font-size: 15px;
	line-height: 1.35;
}

.lhc-public-content-hub--guide .lhc-guide-card:nth-child(4) {
	display: grid;
	grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);
}

.lhc-public-content-hub--guide .lhc-guide-card:nth-child(4) .lhc-guide-card__media {
	height: 100%;
	min-height: 270px;
}

.lhc-public-content-hub--guide .lhc-guide-card:first-child {
	justify-content: flex-start;
	padding: 0;
}

.lhc-public-content-hub--guide .lhc-guide-card:first-child .lhc-guide-card__media {
	height: 300px;
}

.lhc-public-content-hub--guide .lhc-guide-card:first-child h3 {
	font-weight: 700;
	max-width: 620px;
	font-family: var(--lhc-type-body-family);
	font-size: var(--lhc-type-h2-size);
	line-height: 1.25;
}

.lhc-guide-breadcrumbs {
	margin: 0 0 20px;
}

.lhc-guide-detail > .lhc-guide-hero {
	display: grid;
	grid-template-columns: minmax(0, 43%) minmax(0, 57%);
	min-height: clamp(280px, 24vw, 340px);
	margin: 0 0 clamp(44px, 5vw, 66px);
	padding: 0;
	border: 1px solid rgba(13, 71, 123, .14);
	border-radius: 16px;
	background: #f3f9ff;
	box-shadow: 0 18px 44px rgba(6, 36, 74, .08);
	overflow: hidden;
}

.lhc-guide-hero__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(26px, 3.2vw, 40px);
}

.lhc-guide-hero__eyebrow {
	width: max-content;
	margin: 0 0 20px;
	padding: 6px 14px;
	border: 1px solid rgba(22, 135, 248, .42);
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	color: #0b65b5;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
}

.lhc-guide-detail > .lhc-guide-hero h1 {
	max-width: 680px;
	margin: 0;
	color: #06244a;
	letter-spacing: -.028em;
}

.lhc-guide-detail > .lhc-guide-hero .lhc-guide-summary {
	max-width: 610px;
	margin: 22px 0 0;
	color: #52657a;
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.75;
}

.lhc-guide-hero__media {
	min-height: 100%;
	overflow: hidden;
}

.lhc-guide-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Guides without a real photo yet fall back to this soft branded panel
   instead of leaving the layout's image column empty — swap it for a real
   topical photo any time from the guide's own admin edit screen (Choose
   the guide hero image). */
.lhc-guide-hero__media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #eef2fb 0%, #f7f9fd 60%, #eef7f4 100%);
}

.lhc-guide-hero__media--placeholder img {
	width: 34%;
	height: auto;
	max-width: 120px;
	object-fit: contain;
	opacity: 0.45;
}

.lhc-guide-detail--document .lhc-guide-hero__media img {
	object-position: 54% center;
}

.lhc-guide-detail--document .lhc-guide-hero {
	grid-template-columns: minmax(0, 50%) minmax(0, 50%);
}

.lhc-guide-detail--document .lhc-guide-hero__copy {
	padding-right: clamp(34px, 3.5vw, 48px);
	padding-left: clamp(34px, 3.5vw, 48px);
}

.lhc-guide-detail--timeline {
	--lhc-guide-accent: #1687f8;
	--lhc-guide-accent-soft: #eaf4ff;
}

.lhc-guide-detail--timeline .lhc-guide-hero {
	grid-template-columns: minmax(0, 46%) minmax(0, 54%);
}

.lhc-guide-detail--timeline .lhc-guide-hero__media img {
	object-position: center;
}

.lhc-guide-hero__route {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 7px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: hero-route;
}

.lhc-guide-hero__route li {
	position: relative;
	padding-top: 18px;
	border-top: 2px solid rgba(22, 135, 248, .32);
	color: #49627c;
	font-size: 12px;
	line-height: 1.35;
	counter-increment: hero-route;
}

.lhc-guide-hero__route li::before {
	position: absolute;
	top: -8px;
	left: 0;
	display: grid;
	width: 15px;
	height: 15px;
	place-items: center;
	border: 2px solid var(--lhc-guide-accent);
	border-radius: 50%;
	background: #fff;
	content: "";
}

.lhc-guide-detail--arrival {
	--lhc-guide-accent: #0f9f91;
	--lhc-guide-accent-soft: #e8f8f5;
}

.lhc-guide-detail--arrival .lhc-guide-hero {
	grid-template-columns: minmax(0, 55%) minmax(0, 45%);
	background: #eff9f7;
}

.lhc-guide-detail--arrival .lhc-guide-hero__copy {
	grid-column: 2;
	grid-row: 1;
}

.lhc-guide-detail--arrival .lhc-guide-hero__media {
	grid-column: 1;
	grid-row: 1;
}

.lhc-guide-detail--arrival .lhc-guide-hero__media img {
	object-position: center;
}

.lhc-guide-detail--family {
	--lhc-guide-accent: #087960;
	--lhc-guide-accent-soft: #ebf7f2;
}

.lhc-guide-detail--family .lhc-guide-hero {
	grid-template-columns: minmax(0, 45%) minmax(0, 55%);
	background: #f5faf7;
}

.lhc-guide-detail--family .lhc-guide-hero__media img {
	object-position: 62% center;
}

.lhc-guide-detail--qa {
	--lhc-guide-accent: #0b65b5;
	--lhc-guide-accent-soft: #eef5fb;
}

.lhc-guide-detail--qa .lhc-guide-hero {
	grid-template-columns: minmax(0, 48%) minmax(0, 52%);
	min-height: clamp(350px, 29vw, 410px);
	background: #f7fafc;
}

.lhc-guide-detail--qa .lhc-guide-hero__media img {
	object-position: center;
}

.lhc-guide-article-layout {
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(42px, 6vw, 84px);
	max-width: 1120px;
}

/* Bug fix: an earlier "@media (max-width: 980px) { .lhc-guide-article-layout
   { grid-template-columns: 1fr; } }" rule further up this file was meant to
   collapse this two-column (article + 320px sidebar) layout to one column on
   phones/tablets. But the unconditional base rule directly above -- added in
   a later pass -- has the same selector and specificity and comes AFTER that
   media rule in source order, so on every screen size (mobile included) it
   was the one actually winning the cascade, pinning the layout at
   "minmax(0, 1fr) 320px" even on a ~340px-wide phone viewport. With almost no
   room left over from the fixed 320px sidebar track, the main content column
   collapsed toward 0px wide, forcing headings and body text into a
   one-character-per-line vertical wrap. Redeclaring the collapse here, after
   the base rule, makes it win again on narrow screens as originally
   intended. */
@media (max-width: 980px) {
	.lhc-guide-article-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.lhc-guide-sidebar {
		position: static;
	}
}

.lhc-guide-body {
	counter-reset: guide-section;
	font-size: var(--lhc-type-body-size, 16px);
	line-height: 1.85;
}

.lhc-guide-section {
	position: relative;
	min-height: 118px;
	padding: 0 0 34px 78px;
	border-bottom: 1px solid rgba(13, 71, 123, .14);
	counter-increment: guide-section;
}

.lhc-guide-section + .lhc-guide-section {
	padding-top: 34px;
}

.lhc-guide-section:last-child {
	border-bottom: 0;
}

.lhc-guide-section::before {
	position: absolute;
	top: 3px;
	left: 0;
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border: 1px solid rgba(22, 135, 248, .14);
	border-radius: 50%;
	background: var(--lhc-guide-accent-soft);
	color: var(--lhc-guide-accent);
	content: counter(guide-section, decimal-leading-zero);
	font-family: var(--lhc-type-body-family);
	font-size: 16px;
	font-weight: 800;
}

.lhc-guide-section + .lhc-guide-section::before {
	top: 37px;
}

/* This is the only effective .lhc-guide-body h2 rule in this file (see the
   two dead-code markers earlier in this file for the ones this superseded).
   Guide-detail body headings sit directly above 16px paragraph text and next
   to small numbered "01/02/03" badges, so the generic H2 section token
   (24-38px, meant for spacious top-level section breaks) read as oversized
   here -- standardized to 20px, the same H3-tier size used site-wide for
   in-context/list-level headings (card titles, contact box, etc.), which
   still gives clear hierarchy over the body text without looking mismatched
   next to the small badges around it. */
.lhc-guide-body h2 {
	margin: 0 0 12px;
	padding: 0;
	color: #07528e;
	font-family: var(--lhc-type-body-family);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.lhc-guide-body p {
	margin: 0;
	color: #405873;
}

.lhc-guide-detail--timeline .lhc-guide-section {
	margin-left: 23px;
	padding-left: 88px;
	border-left: 2px solid rgba(22, 135, 248, .28);
}

.lhc-guide-detail--timeline .lhc-guide-section::before {
	left: -25px;
	border: 2px solid var(--lhc-guide-accent);
	background: #fff;
}

.lhc-guide-sidebar {
	top: 24px;
	gap: 0;
}

.lhc-guide-source {
	gap: 14px;
	padding: 25px 26px;
	border: 1px solid rgba(13, 71, 123, .15);
	border-left: 4px solid var(--lhc-guide-accent);
	border-radius: 12px;
	background: #f8fbfd;
}

.lhc-guide-source strong {
	font-weight: 700;
	color: #06244a;
	font-size: 18px;
}

.lhc-guide-source a {
	color: #0b65b5;
	line-height: 1.55;
}

.lhc-guide-next-step {
	border-bottom: 1px solid rgba(13, 71, 123, .14);
}

.lhc-guide-next-step .button,
.lhc-guide-next-step .button-primary {
	justify-content: flex-start;
	min-height: 58px;
	margin: 0;
	padding: 14px 2px;
	border: 0;
	border-top: 1px solid rgba(13, 71, 123, .14);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #0b4f86;
	font-weight: 700;
}

.lhc-guide-next-step .button:hover,
.lhc-guide-next-step .button-primary:hover {
	background: transparent;
	color: var(--lhc-guide-accent);
}

.lhc-guide-disclaimer {
	max-width: 1120px;
	margin-top: 48px;
	padding-top: 18px;
	border-top: 1px solid rgba(13, 71, 123, .12);
}

@media (max-width: 980px) {
	.lhc-guide-hero,
	.lhc-guide-detail--document .lhc-guide-hero,
	.lhc-guide-detail--timeline .lhc-guide-hero,
	.lhc-guide-detail--family .lhc-guide-hero,
	.lhc-guide-detail--qa .lhc-guide-hero,
	.lhc-guide-detail--arrival .lhc-guide-hero {
		grid-template-columns: 1fr;
	}

	.lhc-guide-hero__copy,
	.lhc-guide-detail--arrival .lhc-guide-hero__copy {
		grid-column: 1;
		grid-row: 1;
	}

	.lhc-guide-hero__media,
	.lhc-guide-detail--arrival .lhc-guide-hero__media {
		grid-column: 1;
		grid-row: 2;
		min-height: 300px;
	}

	.lhc-public-content-hub--guide .lhc-guide-card:nth-child(4) {
		display: flex;
		grid-template-columns: none;
	}

	.lhc-public-content-hub--guide .lhc-guide-card:nth-child(4) .lhc-guide-card__media {
		height: 168px;
		min-height: 0;
	}

	.lhc-public-content-hub--guide .lhc-guide-card:first-child .lhc-guide-card__route {
		display: none;
	}
}

@media (max-width: 680px) {
	.lhc-public-content-hub__hero-copy h1 {
		font-size: clamp(38px, 10vw, 48px);
	}

	.lhc-guide-detail > .lhc-guide-hero h1 {
		font-size: clamp(26px, 7vw, 30px);
	}

	.lhc-guide-hero__copy {
		padding: 30px 24px;
	}

	.lhc-guide-hero__media,
	.lhc-guide-detail--arrival .lhc-guide-hero__media {
		min-height: 220px;
	}

	.lhc-guide-hero__route {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 18px;
	}

	.lhc-guide-section,
	.lhc-guide-detail--timeline .lhc-guide-section {
		margin-left: 0;
		padding-left: 62px;
		border-left: 0;
	}

	.lhc-guide-section::before,
	.lhc-guide-detail--timeline .lhc-guide-section::before {
		left: 0;
		width: 42px;
		height: 42px;
	}

	.lhc-public-content-hub--guide .lhc-guide-card:first-child .lhc-guide-card__media,
	.lhc-guide-card__media {
		height: 210px;
	}
}

/* Keep the route hub's composed hero aligned after legacy hub compatibility rules. */
.lhc-guide-route-hub .lhc-public-content-hub__hero-copy {
	transform: none;
}

/* The ".lhc-public-content-hub--guide .lhc-guide-card:first-child / :nth-child(2-4)"
   rules above build a magazine-style featured layout for a hub's PRIMARY guide
   grid — but that ancestor class also wraps the separate "More guides"
   section, so its first card was unintentionally inheriting the same
   featured grid position, oversized title, and enlarged summary text. Reset
   every card inside "More guides" back to the plain, uniform grid card
   treatment regardless of its position in that list.

   This reset was previously incomplete: it never restated the parent grid's
   own "display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(330px,
   .78fr); grid-template-rows: repeat(2, minmax(240px, auto)) auto;" (set
   unconditioned, i.e. at every screen width, by ".lhc-public-content-hub--guide
   .lhc-guide-grid" above), nor the 4th card's own unconditioned "display:
   grid; grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);"
   (from ".lhc-public-content-hub--guide .lhc-guide-card:nth-child(4)" above).
   Below ~980px wide, separate media-query rules happened to override both of
   those back to a plain flex/1-column layout, which is why this only ever
   showed up on desktop-width screens: the 4th "More guides" card's image and
   text got forced into that fixed-330px-vs-flexible split meant for a much
   wider featured card, squeezing its copy into a sliver of a column and
   wrapping every character onto its own line. Restated here, at higher
   specificity than the unconditioned rules above (this selector has an
   extra ".lhc-guide-more" class), so it wins at every width, not just under
   the ~980px media queries. */
.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: none;
}

.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-card:first-child,
.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-card:nth-child(2),
.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-card:nth-child(3),
.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-card:nth-child(4) {
	display: flex;
	grid-column: auto;
	grid-row: auto;
	grid-template-columns: none;
	justify-content: flex-start;
	min-height: 0;
	padding: 22px;
	background: #fff;
}

.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-card:first-child .lhc-guide-card__media,
.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-card:nth-child(2) .lhc-guide-card__media,
.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-card:nth-child(3) .lhc-guide-card__media,
.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-card:nth-child(4) .lhc-guide-card__media {
	height: auto;
}

.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-card:first-child h3,
.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-card:nth-child(2) h3,
.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-card:nth-child(3) h3,
.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-card:nth-child(4) h3 {
	max-width: none;
	font-family: inherit;
	font-size: 19px;
	font-weight: 750;
	line-height: 1.3;
}

.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-card:first-child p,
.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-card:nth-child(2) p,
.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-card:nth-child(3) p,
.lhc-public-content-hub--guide .lhc-guide-more .lhc-guide-card:nth-child(4) p {
	max-width: none;
	font-size: 15px;
	line-height: 1.65;
}