/* ==========================================================================
   Transit 101 block suite (t101-*)
   Built to match Figma "2375 DRPT Transit 101 Homepage" (Wireframe 07.20.2026)
   Palette from Figma inspect:
     navy      #1F187D   (headings, hero/app bg, card borders)
     blue      #004B87   (card titles, pills, agency names)
     teal      #0085AD   (eyebrows, checklist accents)
     lightblue #7DBDFA   (card borders)
     purple    #9940D1   (primary buttons, accents)
     green     #A3E00A   (hero eyebrow, tips, carousel arrows)
   Type: Montserrat — H1/H2 800 64/68 · eyebrow 700 16-18 · body 400/500 20/26
         card title 700 20/26 · card body 400 16/22
   ========================================================================== */
@import url("https://fonts.googleapis.com/css?family=Montserrat:800,800i");

:root {
	--t101-navy: #1F187D;
	--t101-blue: #004B87;
	--t101-teal: #0085AD;
	--t101-lightblue: #7DBDFA;
	--t101-purple: #9940D1;
	--t101-green: #A3E00A;
	--t101-band-blue: #E9F3FC;
	--t101-band-lavender: #ECEAF6;
	--t101-band-lilac: #F1EBF9;
	--t101-tip-bg: #F4F9E3;
	--t101-progress-bg: #EDF6D2;
	--t101-card-shadow: 0 4px 3px rgba(0, 0, 0, 0.25);
	--t101-circle: rgba(202, 202, 202, 0.31);
}

/* ---- shared -------------------------------------------------------------- */

.t101-hero .container,
.t101-section-heading .container,
.t101-cards .container,
.t101-tabs .container,
.t101-app .container,
.t101-check .container,
.t101-colorcards .container,
.t101-tiles .container,
.t101-agencies .container,
.t101-faq .container,
.t101-photocta .container,
.t101-rides-wrap .container {
	max-width: 1320px;
}

/* The theme decorates every a[target='_blank'] with an external-link ::after
   icon; T101 components carry their own affordances, so suppress it there. */
.t101-hero a[target='_blank']::after,
.t101-section-heading a[target='_blank']::after,
.t101-cards a[target='_blank']::after,
.t101-callout a[target='_blank']::after,
.t101-rides-wrap a[target='_blank']::after,
.t101-tabs a[target='_blank']::after,
.t101-app a[target='_blank']::after,
.t101-check a[target='_blank']::after,
.t101-colorcards a[target='_blank']::after,
.t101-tiles a[target='_blank']::after,
.t101-agencies a[target='_blank']::after,
.t101-faq a[target='_blank']::after,
.t101-photocta a[target='_blank']::after,
.t101-buttonwrap a[target='_blank']::after {
	content: none !important;
	display: none !important;
	background-image: none !important;
}

/* Callouts no longer use .container; constrain to content width only when the
   callout sits directly in a full-bleed band (not inside a column). */
.wp-block-group__inner-container > .t101-callout > .t101-callout__inner {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.t101-eyebrow {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 18px;
}
.t101-eyebrow--green { color: var(--t101-green); }
.t101-eyebrow--teal { color: var(--t101-teal); text-align: center; }
.t101-eyebrow--white { color: #fff; text-align: center; }

.t101-h2 {
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: clamp(36px, 4.5vw, 64px);
	line-height: 1.06;
	color: var(--t101-navy);
	text-align: center;
	margin: 0 0 18px;
}
.t101-h2--white { color: #fff; }
.t101-h2__accent { color: var(--t101-purple); }

.t101-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: 14px 40px;
	border-radius: 50px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.t101-btn,
.t101-btn:hover,
.t101-btn:focus,
.t101-btn:active {
	text-decoration: none !important;
}
.t101-btn:hover,
.t101-btn:focus {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.t101-btn--purple { background: var(--t101-purple); color: #FAFAFA; }
.t101-btn--purple:hover, .t101-btn--purple:focus { background: #8433b8; color: #fff; }
.t101-btn--white { background: #fff; color: var(--t101-navy); }
.t101-btn--white:hover, .t101-btn--white:focus { color: var(--t101-navy); }
.t101-btn--green { background: var(--t101-green); color: var(--t101-navy); }
.t101-btn--green:hover, .t101-btn--green:focus { background: #93cc06; color: var(--t101-navy); }
.t101-btn--outline { background: #fff; color: var(--t101-purple); box-shadow: inset 0 0 0 2px var(--t101-purple); }
.t101-btn--outline:hover, .t101-btn--outline:focus { color: var(--t101-purple); }

/* Band wrappers — apply to core Group blocks around t101 blocks */
.t101-band { padding: 90px 0; }
.t101-sec-why-try {
	position: relative;
	padding-bottom: 40px;
}
/* left-side dot patch (light blue, same dot language as the agencies band) */
.t101-sec-why-try::before {
	content: "";
	position: absolute;
	left: 0;
	top: -40px; /* reach up through the 40px block gap, flush to the nav bar */
	width: 368px; /* 16 columns of 23px */
	height: 592px;
	background-image: radial-gradient(circle at 11.5px 11.5px, rgba(125, 189, 250, 0.55) 3.2px, rgba(125, 189, 250, 0) 3.7px);
	background-size: 23px 23px;
	z-index: -1;
	pointer-events: none;
}
/* 48px gap between the section subheading and the photo/cards row */
.t101-sec-why-try .t101-section-heading { padding-bottom: 0; }
.t101-sec-why-try .t101-section-heading__text { margin-bottom: 48px; }
/* Photo column: image covers the full column height, aligned with the card grid */
.t101-sec-why-try .wp-block-column .wp-block-image.t101-rounded {
	height: 100%;
	margin: 0;
}
.t101-sec-why-try .wp-block-column .wp-block-image.t101-rounded img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
	display: block;
	box-shadow: var(--t101-card-shadow); /* match the benefit cards */
}
/* the cards block inside the split adds its own vertical padding — neutralize so heights align */
.t101-sec-why-try .wp-block-column .t101-cards { padding: 0; }
/* flatten the cards' inner .container inside the split so its edges match the image column */
.t101-sec-why-try .wp-block-column .t101-cards .container {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* stack the split (image above cards) from 960px down, edges aligned */
@media (max-width: 960px) {
	.t101-sec-why-try .wp-block-columns { flex-wrap: wrap !important; }
	.t101-sec-why-try .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
	.t101-sec-why-try .wp-block-column .wp-block-image.t101-rounded {
		height: auto;
		margin-bottom: 24px;
	}
	.t101-sec-why-try .wp-block-column .wp-block-image.t101-rounded img {
		height: auto;
		aspect-ratio: 16 / 9;
	}
}
.t101-band--blue { background-color: var(--t101-band-blue); }
.t101-band--lavender { background-color: var(--t101-band-lavender); }
.t101-band--lilac {
	background-color: var(--t101-band-lilac);
	background-image: url("../visuals/css-assets/t101-dashed-circles.svg"), url("../visuals/css-assets/t101-dashed-circles.svg");
	background-repeat: no-repeat, no-repeat;
	background-position: -180px -140px, calc(100% + 200px) calc(100% + 180px);
}
.t101-band--dots {
	background-image: url("../visuals/css-assets/blue-dots-texture.svg");
}
.t101-band--circles {
	background-color: var(--t101-band-blue);
	background-image: url("../visuals/css-assets/circles-2up-bg-pattern.svg");
	background-size: cover;
}

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

.t101-hero {
	position: relative;
	background-color: var(--t101-navy);
	overflow: hidden;
}
.t101-hero__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 68%;
	background-size: cover;
	background-position: center;
}
.t101-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--t101-navy) 34%, rgba(31, 24, 125, 0.55) 55%, rgba(31, 24, 125, 0) 78%);
}
.t101-hero__container { position: relative; z-index: 1; }
.t101-hero__content {
	max-width: 640px;
	padding: 72px 0 64px;
}
.t101-hero__title {
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: clamp(40px, 4.5vw, 64px);
	line-height: 1.06;
	color: #fff;
	margin: 0 0 20px;
}
.t101-hero__text,
.t101-hero__text p {
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 26px;
	color: #fff;
	margin: 0 0 28px;
}
.t101-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 28px;
}
.t101-hero__microcopy {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	font-size: 16px;
	margin: 0;
}
.t101-hero__dots { display: inline-flex; gap: 4px; }
.t101-hero__dots i {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: 1px solid #fff;
	display: inline-block;
}
.t101-hero__dots i:nth-child(1) { background: var(--t101-purple); }
.t101-hero__dots i:nth-child(2) { background: var(--t101-teal); }
.t101-hero__dots i:nth-child(3) { background: var(--t101-lightblue); }

/* ---- section heading ----------------------------------------------------- */

.t101-section-heading { padding: 56px 0 8px; text-align: center; }
.t101-section-heading__text,
.t101-section-heading__text p {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 26px;
	color: #000;
	max-width: 900px;
	margin: 0 auto;
}

/* ---- card grid ----------------------------------------------------------- */

.t101-cards { padding: 40px 0; }
.t101-cards__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(4, 1fr);
}
.t101-cards--cols-2 .t101-cards__grid { grid-template-columns: repeat(2, 1fr); }
.t101-cards--cols-3 .t101-cards__grid { grid-template-columns: repeat(3, 1fr); }

.t101-card {
	background: #fff;
	border-radius: 16px;
	border-top: 16px solid var(--t101-navy);
	box-shadow: var(--t101-card-shadow);
	padding: 28px 26px 30px;
}
.t101-card--navy { border-top-color: var(--t101-navy); }
.t101-card--blue { border-top-color: var(--t101-blue); }
.t101-card--teal { border-top-color: var(--t101-teal); }
.t101-card--lightblue { border-top-color: var(--t101-lightblue); }
.t101-card--purple { border-top-color: var(--t101-purple); }
.t101-card--green { border-top-color: var(--t101-green); }

.t101-card__icon {
	width: 49px;
	height: 49px;
	border-radius: 50%;
	background: var(--t101-circle);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.t101-card__icon img { max-width: 26px; max-height: 26px; }
.t101-card__title {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 26px;
	color: var(--t101-blue);
	margin: 0 0 10px;
}
.t101-card__text {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: #000;
	margin: 0;
}

/* ---- callout ------------------------------------------------------------- */

.t101-callout { padding: 28px 0; }
.t101-callout--tip .t101-callout__box,
.t101-tabs__tip {
	background: var(--t101-tip-bg);
	border-left: 7px solid var(--t101-green);
	padding: 26px 36px;
}
.t101-callout__label {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--t101-teal);
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.t101-callout__glyph { width: 25px; height: 25px; flex: 0 0 auto; display: block; }
.t101-callout__content,
.t101-callout__content p {
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	margin: 0;
}
.t101-callout__content--em,
.t101-callout__content--em p {
	font-weight: 700;
	font-style: italic;
	font-size: 18px;
	line-height: 26px;
	color: var(--t101-blue); /* #004B87 per Figma */
}
.t101-callout--tip .t101-callout__content h3,
.t101-callout--tip .t101-callout__content h4 {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--t101-blue);
	margin: 0 0 14px;
}
.t101-callout--tip .t101-callout__content ul {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 48px;
}
.t101-callout--outline .t101-callout__box {
	background: #fff;
	border: 2px solid var(--t101-blue);
	border-radius: 24px;
	padding: 36px 40px;
	max-width: none;
}
.t101-callout--outline .t101-callout__label {
	font-size: 20px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--t101-blue);
}
.t101-callout--outline .t101-callout__content ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.t101-callout__content ul,
.t101-tabs__extra ul,
.t101-app__timeline {
	list-style: none !important;
}
.t101-callout__content ul li::marker,
.t101-tabs__extra ul li::marker,
.t101-app__item::marker { content: none; }
.t101-callout__content ul li,
.t101-check-list-style li {
	position: relative;
	padding: 5px 0 5px 40px; /* checkmark (18px) + 22px gap */
	font-size: 16px;
	line-height: 23px;
	break-inside: avoid;
	list-style: none !important;
}
.t101-callout__content ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 9px;
	width: 16px;
	height: 9px;
	border-left: 3px solid var(--t101-green);
	border-bottom: 3px solid var(--t101-green);
	transform: rotate(-45deg);
}

/* ---- ride carousel ------------------------------------------------------- */

.t101-rides { position: relative; padding: 24px 0 8px; max-width: 1440px; margin: 0 auto; }
.t101-rides__viewport { overflow: hidden; margin: 0 96px; }
.t101-rides__track {
	display: flex;
	transition: transform 0.4s ease;
}
.t101-ride-card {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	gap: 36px;
	background: #fff;
	border-radius: 24px;
	padding: 40px 56px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.t101-ride-card__photo {
	flex: 0 0 300px;
	border-right: 7px solid var(--t101-green);
	padding-right: 36px;
}
.t101-ride-card__photo img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
.t101-ride-card__body { flex: 1; }
.t101-ride-card__title {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 28px;
	color: var(--t101-navy);
	margin: 0 0 10px;
}
.t101-ride-card__text {
	font-size: 17px;
	line-height: 24px;
	color: #000;
	margin: 0 0 16px;
}
.t101-ride-card__label {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--t101-teal);
	margin: 0 0 2px;
}
.t101-ride-card__value {
	font-size: 16px;
	line-height: 22px;
	color: #000;
	margin: 0 0 12px;
}
.t101-rides__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 0;
	background: var(--t101-green);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	transition: background-color 0.15s ease;
}
.t101-rides__arrow:hover { background: #93cc06; }
.t101-rides__arrow--prev { left: 8px; }
.t101-rides__arrow--next { right: 8px; }
.t101-rides__nav { text-align: center; }
.t101-rides__dots {
	display: inline-flex;
	gap: 14px;
	padding: 28px 0 8px;
}
.t101-rides__dot {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: #C4C4C4;
	cursor: pointer;
}
.t101-rides__dot.is-active { background: var(--t101-navy); }

/* ---- walkthrough tabs ---------------------------------------------------- */

.t101-tabs { padding: 32px 0 56px; }
.t101-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 20px;
	margin-bottom: 40px;
}
.t101-tabs__pill {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--t101-blue);
	background: #fff;
	border: 2px solid var(--t101-blue);
	border-radius: 50px;
	padding: 14px 28px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.t101-tabs__pill:hover,
.t101-tabs__pill:focus {
	background: var(--t101-band-blue);
	color: var(--t101-blue);
	box-shadow: none;
}
.t101-tabs__pill.is-active,
.t101-tabs__pill.is-active:hover,
.t101-tabs__pill.is-active:focus {
	background: var(--t101-blue);
	color: #fff;
}
.t101-tabs__intro {
	font-family: Montserrat, sans-serif;
	font-size: 20px;
	line-height: 28px;
	color: #000;
	text-align: center;
	max-width: 900px;
	margin: 0 auto 40px;
}
.t101-tabs__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 1180px;
	margin: 0 auto;
}
.t101-step-card {
	display: flex;
	gap: 18px;
	background: #fff;
	border: 1px solid #E2E2E2;
	border-radius: 16px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
	padding: 28px 30px;
}
.t101-step-card__icon { flex: 0 0 34px; }
.t101-step-card__icon img { max-width: 34px; max-height: 34px; }
.t101-step-card__title {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 19px;
	color: var(--t101-blue);
	margin: 0 0 10px;
}
.t101-step-card__text {
	font-size: 15px;
	line-height: 21px;
	color: #000;
	margin: 0;
}
.t101-tabs__extra {
	max-width: 1180px;
	margin: 40px auto 0;
}
.t101-tabs__extra ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.t101-tabs__extra ul li {
	position: relative;
	padding: 6px 0 6px 40px; /* checkmark (18px) + 22px gap */
	font-size: 17px;
}
.t101-tabs__extra ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 12px;
	width: 16px;
	height: 9px;
	border-left: 3px solid var(--t101-green);
	border-bottom: 3px solid var(--t101-green);
	transform: rotate(-45deg);
}
.t101-tabs__extra h4 {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--t101-blue);
	text-align: center;
	margin: 0 0 16px;
}
.t101-tabs__tip {
	max-width: 1180px;
	margin: 40px auto 0;
}

/* ---- app promo ----------------------------------------------------------- */

.t101-app {
	background: linear-gradient(180deg, var(--t101-navy) 0%, var(--t101-purple) 100%);
	padding: 90px 0;
	overflow: hidden;
}
.t101-app__container {
	display: flex;
	align-items: center;
	gap: 64px;
}
.t101-app__media { flex: 0 0 44%; text-align: center; }
.t101-app__media img { max-width: 100%; height: auto; }
.t101-app__content { flex: 1; position: relative; padding-left: 64px; }
/* White rule runs from the very top of the section (clipped by .t101-app overflow) down to the content's bottom edge, per Figma. */
.t101-app__content::before {
	content: "";
	position: absolute;
	left: 0;
	top: -2000px;
	bottom: 0;
	width: 3px;
	background: #fff;
}
.t101-app .t101-h2--white { text-align: left; margin-bottom: 36px; }
.t101-app__timeline {
	list-style: none;
	margin: 0 0 36px;
	padding: 0;
	position: relative;
}
.t101-app__item { position: relative; padding: 0 0 30px 44px; }
.t101-app__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--t101-teal);
	border: 4px solid #fff;
}
.t101-app__item:first-child::before { background: #fff; }
.t101-app__item::after {
	content: "";
	position: absolute;
	left: 11px;
	top: 28px;
	bottom: 2px;
	width: 2px;
	background: rgba(255, 255, 255, 0.7);
}
.t101-app__item:last-child::after { display: none; }
.t101-app__item-title {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 28px;
	color: #fff;
	margin: 0 0 8px;
}
.t101-app__item-text {
	font-size: 16px;
	line-height: 23px;
	color: #fff;
	margin: 0;
	max-width: 520px;
}

/* ---- interactive checklist ------------------------------------------------ */

.t101-check {
	background-color: var(--t101-band-blue);
	background-image: url("../visuals/css-assets/circles-2up-bg-pattern.svg");
	background-size: cover;
	padding: 90px 0;
}
.t101-check__card {
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	max-width: 960px;
	margin: 0 auto;
	padding: 64px 72px;
	text-align: center;
}
.t101-check__sub {
	font-size: 18px;
	line-height: 24px;
	color: #000;
	margin: 0 0 32px;
}
.t101-check__list {
	list-style: none !important;
	margin: 0 0 32px;
	padding: 0 !important;
	text-align: left;
}
.t101-check__item {
	margin-bottom: 16px;
	list-style: none !important;
}
.t101-check__item::marker { content: none; }
/* opt out of the theme's global ul>li:before "●" bullet inside this component */
ul.t101-check__list > li.t101-check__item::before { content: none !important; }
.t101-check__toggle {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	background: #F5FAFE;
	border: 2px solid #CACACA;
	border-radius: 12px;
	padding: 16px 22px;
	cursor: pointer;
	text-align: left;
	transition: background-color 0.15s ease;
}

.t101-check__toggle[aria-pressed="true"], .t101-check__toggle:hover, .t101-check__toggle:active, .t101-check__toggle:focus { 
	border-color: #0085AD;
	background: #EAF4FB; 
}
.t101-check__circle {
	flex: 0 0 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid var(--t101-blue);
	background: #fff;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
}
.t101-check__label {
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #000;
}
.t101-check__toggle:focus{
	box-shadow: none;
}
.t101-check__toggle[aria-pressed="true"] .t101-check__circle {
	background: var(--t101-teal);
}
.t101-check__toggle[aria-pressed="true"] .t101-check__label {
	text-decoration: line-through;
	color: var(--t101-teal);
}
.t101-check__progress {
	background: var(--t101-progress-bg);
	border-radius: 12px;
	padding: 24px 32px;
}
.t101-check__progress-label {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--t101-teal);
	margin: 0 0 14px;
}
.t101-check__bar {
	height: 12px;
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}
.t101-check__bar-fill {
	display: block;
	height: 100%;
	border-radius: 6px;
	background: var(--t101-teal);
	transition: width 0.3s ease;
}

/* ---- color link cards ----------------------------------------------------- */

.t101-colorcards { padding: 40px 0 72px; }
.t101-colorcards__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.t101-colorcard {
	display: block;
	border-radius: 16px;
	padding: 32px 30px;
	color: #fff;
	text-decoration: none;
	transition: box-shadow 0.15s ease;
}
a.t101-colorcard:hover,
a.t101-colorcard:focus,
a.t101-colorcard:active,
button.t101-colorcard:hover,
button.t101-colorcard:focus,
button.t101-colorcard:active {
	text-decoration: none;
	/* green border is the ONLY hover/active decoration */
	box-shadow: 0 0 0 4px var(--t101-green) !important;
}
/* Keep each card's own background/text color in every state — the theme's
   generic link/button hover would otherwise repaint them magenta. */
.t101-colorcard--blue, .t101-colorcard--blue:hover, .t101-colorcard--blue:focus, .t101-colorcard--blue:active {
	background: var(--t101-blue) !important;
	color: #fff !important;
}
.t101-colorcard--navy, .t101-colorcard--navy:hover, .t101-colorcard--navy:focus, .t101-colorcard--navy:active {
	background: var(--t101-navy) !important;
	color: #fff !important;
}
.t101-colorcard--purple, .t101-colorcard--purple:hover, .t101-colorcard--purple:focus, .t101-colorcard--purple:active {
	background: var(--t101-purple) !important;
	color: #fff !important;
}
.t101-colorcard--teal, .t101-colorcard--teal:hover, .t101-colorcard--teal:focus, .t101-colorcard--teal:active {
	background: var(--t101-teal) !important;
	color: #fff !important;
}
.t101-colorcard--green, .t101-colorcard--green:hover, .t101-colorcard--green:focus, .t101-colorcard--green:active {
	background: var(--t101-green) !important;
	color: var(--t101-navy) !important;
}
.t101-colorcard__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fff; /* white circle, blue icon per design */
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
.t101-colorcard__icon img { max-width: 28px; max-height: 28px; }
.t101-colorcard__title {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 24px;
	color: inherit;
	margin: 0 0 12px;
}
.t101-colorcard__subline {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 22px;
	margin: 0 0 14px;
}
.t101-colorcard__text {
	font-size: 15px;
	line-height: 22px;
	margin: 0 0 22px;
}
.t101-colorcard__more {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---- photo tiles ----------------------------------------------------------- */

.t101-tiles { padding: 40px 0 80px; }
.t101-tiles__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
}
.t101-tiles--cols-4 .t101-tiles__grid { grid-template-columns: repeat(4, 1fr); }
.t101-tile {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 47 / 30;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
}
.t101-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.t101-tile__overlay {
	position: absolute;
	inset: 0;
	background: #004B87B2;
	transition: background-color 0.15s ease;
}
.t101-tile:nth-child(2n) .t101-tile__overlay { background: #5F249FB2; }
.t101-tile:hover .t101-tile__overlay { background: #004B8780; }
.t101-tile:nth-child(2n):hover .t101-tile__overlay { background: #5F249F80; }
.t101-tile__label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 8px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ---- agency list ----------------------------------------------------------- */

.t101-agencies {
	background: linear-gradient(118deg, var(--t101-navy) 0%, #173A8F 45%, var(--t101-teal) 100%);
	padding: 90px 0 150px;
	position: relative;
	overflow: hidden;
}
.t101-agencies::after {
	/*
	 * Dot band from Figma Group 48: 23px grid, r3.43 white dots at 30%,
	 * with a second stacked dot every 9th column starting at column 5
	 * (30% over 30% = 51%), 3 rows visible.
	 * Width snaps down to a whole number of 23px columns so no dot is
	 * ever chopped; the ≤22px slack is centered (±11px, imperceptible).
	 */
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 313px);
	height: 69px; /* exactly 3 rows */
	background-image:
		radial-gradient(circle at 103.5px 11.5px, rgba(255, 255, 255, 0.3) 3.2px, rgba(255, 255, 255, 0) 3.7px),
		radial-gradient(circle at 11.5px 11.5px, rgba(255, 255, 255, 0.3) 3.2px, rgba(255, 255, 255, 0) 3.7px);
	background-size: 207px 23px, 23px 23px;
	background-repeat: repeat;
	pointer-events: none;
}
@supports (width: round(down, 100px, 23px)) {
	.t101-agencies::after { width: round(down, calc(100% - 313px), 23px); }
}
@media (max-width: 767px) {
	.t101-agencies::after { width: calc(100% - 71px); }
	@supports (width: round(down, 100px, 23px)) {
		.t101-agencies::after { width: round(down, calc(100% - 71px), 23px); }
	}
}
.t101-agencies__sub {
	font-size: 18px;
	line-height: 26px;
	color: #fff;
	text-align: center;
	max-width: 760px;
	margin: 0 auto 48px;
}
.t101-agencies__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.t101-agency {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border-radius: 12px;
	padding: 16px 22px;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.t101-agency:hover,
a.t101-agency:focus {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.t101-agency__pin {
	flex: 0 0 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--t101-circle);
	color: var(--t101-blue);
	display: flex;
	align-items: center;
	justify-content: center;
}
.t101-agency__name {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 23px;
	color: var(--t101-blue);
}
.t101-agency__arrow {
	margin-left: auto;
	color: var(--t101-navy);
	font-weight: 700;
	font-size: 20px;
}
.t101-agencies__note,
.t101-agencies__note p {
	text-align: center;
	color: #fff;
	font-style: italic;
	font-size: 16px;
	line-height: 24px;
}
.t101-agencies__note { margin: 44px 0 0; }
.t101-agencies__note p { margin: 0; }
.t101-agencies__note a { color: #fff; text-decoration: underline; }
.t101-agencies__note a:hover { color: #fff; }

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

.t101-faq { padding: 24px 0 64px; }
.t101-faq .container { max-width: 1040px; }
.t101-faq__group-label {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--t101-teal);
	margin: 40px 0 20px;
}
.t101-faq__item {
	background: #fff;
	border-radius: 10px;
	border-left: 7px solid var(--t101-green);
	box-shadow: 0 2px 7px rgba(0, 0, 0, 0.14);
	margin-bottom: 22px;
}
.t101-faq__q { margin: 0; }
.t101-faq__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	background: none;
	border: 0;
	padding: 22px 28px;
	cursor: pointer;
	text-align: left;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--t101-blue);
}
.t101-faq .t101-faq__btn,
.t101-faq .t101-faq__btn:hover,
.t101-faq .t101-faq__btn:focus,
.t101-faq .t101-faq__btn:active,
.t101-faq .t101-faq__btn.focus {
	background: transparent !important;
	color: var(--t101-blue) !important;
	box-shadow: none !important;
	outline: 0;
	text-decoration: none;
}
.t101-faq .t101-faq__btn:focus-visible {
	outline: 2px solid var(--t101-teal);
	outline-offset: -2px;
}
.t101-faq .t101-faq__btn[aria-expanded="true"],
.t101-faq .t101-faq__btn[aria-expanded="true"]:hover,
.t101-faq .t101-faq__btn[aria-expanded="true"]:focus,
.t101-faq .t101-faq__btn[aria-expanded="true"]:active {
	color: #000 !important;
}
.t101-faq__chevron {
	color: var(--t101-navy);
	transition: transform 0.2s ease;
	display: inline-flex;
}
.t101-faq__btn[aria-expanded="true"] .t101-faq__chevron { transform: rotate(180deg); }
.t101-faq__a-inner {
	padding: 0 28px 24px;
	font-size: 16px;
	line-height: 24px;
	color: #000;
}
.t101-faq__a-inner p { margin: 0 0 12px; }
.t101-faq__a-inner p:last-child { margin-bottom: 0; }

/* ---- photo CTA --------------------------------------------------------------- */

.t101-photocta {
	background-size: cover;
	background-position: center;
	padding: 110px 0;
}
.t101-photocta__card {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	max-width: 620px;
	margin: 0 auto;
	padding: 64px 56px;
	text-align: center;
}
.t101-photocta__title {
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: clamp(32px, 3.6vw, 48px);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--t101-navy);
	margin: 0 0 16px;
}
.t101-photocta__text {
	font-size: 18px;
	color: #000;
	margin: 0 0 32px;
}
.t101-photocta__buttons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
}
.t101-photocta__buttons .t101-btn {
	padding: 14px 30px;
	white-space: nowrap;
}

/* ---- modal ------------------------------------------------------------------- */

button.t101-colorcard {
	border: 0;
	text-align: left;
	width: 100%;
	cursor: pointer;
	font-family: inherit;
}
button.t101-colorcard:hover,
button.t101-colorcard:focus {
	color: #fff;
	transform: translateY(-4px);
	box-shadow: 0 0 0 4px var(--t101-green), 0 10px 22px rgba(0, 0, 0, 0.25);
}
.t101-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.t101-modal[hidden] { display: none; }
.t101-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(22, 17, 84, 0.72);
}
.t101-modal__box {
	position: relative;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
	max-width: 760px;
	width: 100%;
	max-height: 84vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
}
.t101-modal__close,
.t101-modal__close:focus {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 40px;
	height: 40px;
	border: 0 !important;
	/* plain white X — the theme's generic button style would otherwise paint it magenta */
	background: transparent !important;
	color: #fff !important;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none !important;
	text-shadow: none !important;
	padding: 0;
	min-height: 0;
}
.t101-modal__close:hover,
.t101-modal__close:active {
	color: #ccc !important;
	background: transparent !important;
}
/* Fixed colored header: leading h3 + intro paragraph (split out in the template),
   with a green rule below. The white body below it is the scroll area. */
.t101-modal__head {
	flex: 0 0 auto;
	background: var(--t101-navy);
	color: #fff;
	padding: 30px 56px 26px 48px;
	border-bottom: 7px solid var(--t101-green);
}
.t101-modal__box--blue .t101-modal__head { background: var(--t101-blue); }
.t101-modal__box--purple .t101-modal__head { background: var(--t101-purple); }
.t101-modal__box--teal .t101-modal__head { background: var(--t101-teal); }
.t101-modal__head h2,
.t101-modal__head h3 {
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 12px;
}
.t101-modal__head p {
	font-size: 16px;
	line-height: 24px;
	color: #fff;
	margin: 0;
}
.t101-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	counter-reset: t101step;
	padding: 28px 48px 40px;
}
/* All modals: plain teal step headings. */
.t101-modal__body h4 {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--t101-teal);
	margin: 0;
}
/* Numbered teal timeline — ONLY the blue (ADA Paratransit) modal (per Figma). */
.t101-modal__box--steps .t101-modal__body h4 {
	counter-increment: t101step;
	position: relative;
	padding-left: 46px;
}
/* Connector from the colored header down to the first numbered circle. */
.t101-modal__box--steps .t101-modal__body h4:first-of-type::after {
	content: "";
	position: absolute;
	left: 14px;
	top: -28px;   /* reaches up through the body's top padding to the header */
	height: 24px; /* ends at the circle's top edge */
	width: 2px;
	background: var(--t101-teal);
}
.t101-modal__box--steps .t101-modal__body h4::before {
	content: counter(t101step);
	position: absolute;
	left: 0;
	top: -4px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--t101-teal);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Everything after the first step heading belongs to a step: indent it onto the
   timeline. Padding (not margin) keeps the connector line continuous across
   paragraphs AND bullet lists within a step. */
.t101-modal__box--steps .t101-modal__body h4 ~ p,
.t101-modal__box--steps .t101-modal__body h4 ~ ul {
	margin: 14px;
	margin-top: 0;
	margin-bottom: 0;
	border-left: 2px solid var(--t101-teal);
	padding-left: 30px;
	padding-bottom: 14px;
	padding-top: 14px;
}

.t101-modal__body p:has(+ h4) {
	padding-bottom: 28px;
}
/* The theme's bullets hang .75rem left of the list text; add that back so the
   bullet dots align exactly with the step's paragraph text, not stick out. */
.t101-modal__box--steps .t101-modal__body h4 ~ ul { padding-left: calc(30px + 0.75rem); }
.t101-modal__box--steps .t101-modal__body h4 ~ p:last-child,
.t101-modal__box--steps .t101-modal__body h4 ~ ul:last-child { border-left-color: transparent; }
.t101-modal__body p {
	font-size: 16px;
	line-height: 24px;
	margin: 0 0 14px;
	padding: 14px;
}
.t101-modal__body ul {
	margin: 0 0 14px;
	padding-left: 22px;
}
.t101-modal__body ul li {
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 6px;
}
/* Lists tagged t101-checks in the popup content use green checkmarks (per Figma). */
.t101-modal__body ul.t101-checks {
	text-indent: 0;
	margin-left: 0;
	list-style: none !important;
	margin-bottom: 0;
}
.t101-modal__body ul:not(.t101-checks){
	padding-left: calc(40px + 0.75rem);
}
.t101-modal__body h4 ~ ul.t101-checks { 
	margin-left: 14px;
	margin-top: 0;
	padding-left: 30px; 
}
.t101-modal__body ul.t101-checks li {
	position: relative;
	padding-left: 28px;
	list-style: none !important;
	top: 14px;
}
.t101-modal__body ul.t101-checks li::marker { content: none; }
.t101-modal__body ul.t101-checks li::before {
	content: "" !important;
	position: absolute;
	left: 0;
	top: 7px;
	width: 14px;
	height: 8px;
	border-left: 3px solid var(--t101-green);
	border-bottom: 3px solid var(--t101-green);
	transform: rotate(-45deg);
	display: block;
	margin: 0;
	width: 14px !important;
}
.t101-modal__body ul.t101-checks li:last-child { margin-bottom: 28px; }
body.t101-modal-open { overflow: hidden; }

/* ---- utilities (used via core blocks around t101 blocks) ---------------------- */

.t101-center { text-align: center; padding: 12px 0 40px; }
.t101-buttonwrap { padding: 12px 15px 40px; }
.t101-buttonwrap--center { text-align: center; }
.t101-buttonwrap--left { text-align: left; }
.t101-buttonwrap--right { text-align: right; }
.t101-btn--navy { background: var(--t101-navy); color: #fff; }
.t101-btn--navy:hover, .t101-btn--navy:focus { background: #171059; color: #fff; }

.t101-section-heading--left,
.t101-section-heading--left .t101-eyebrow,
.t101-section-heading--left .t101-h2 { text-align: left; }
.t101-section-heading--left .t101-section-heading__text { margin: 0; max-width: none; }
.t101-section-heading--left { padding: 0 0 24px; }

.t101-rounded img { border-radius: 16px; }

.t101-access-cta { margin: 32px 0 0; }
.t101-buttonwrap.t101-access-cta { padding: 0; margin: 32px 0 0; }

.t101-band .wp-block-columns,
.t101-sec-why-try .wp-block-columns {
	gap: 48px;
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

/* Dot-grid decoration at the top-left of the "Need Additional Support?" section
   (exact Figma asset; grid hangs off the viewport's left edge per design). */
.t101-nas-heading { position: relative; }
.t101-nas-heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: -367px;
	width: 336px;
	height: 375px;
	background: url(../visuals/css-assets/t101-nas-dots.svg) no-repeat 0 0 / 336px 375px;
	pointer-events: none;
	/* paint beneath the caregiver cards it reaches up into */
	z-index: -1;
}
/* Robust against ancestor stacking contexts: the caregiver content always
   paints above the dots no matter where the ::before ends up. */
.t101-sec-caregiver .wp-block-columns { position: relative; z-index: 1; }
@media (max-width: 1200px) {
	.t101-nas-heading::before { display: none; }
}

/* Accessibility section photos: fixed Figma proportions. */
.t101-sec-accessibility .t101-rounded img {
	aspect-ratio: 526 / 492;
	width: 100%;
	object-fit: cover;
}

/* ---- responsive --------------------------------------------------------------- */

@media (max-width: 960px) {
	/* Accessibility + caregiver two-column layouts stack (core columns only stack at 781px). */
	/* core forces flex-wrap:nowrap!important on columns at >=782px, so !important is required */
	.t101-sec-accessibility .wp-block-columns,
	.t101-sec-caregiver .wp-block-columns { flex-wrap: wrap !important; }
	.t101-sec-accessibility .wp-block-column,
	.t101-sec-caregiver .wp-block-column { flex-basis: 100% !important; }

	/* Caregiver photo + checklist stack full-width, photo on top. */
	.t101-sec-caregiver .wp-block-columns > .wp-block-column:last-child {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
	.t101-sec-caregiver .wp-block-columns > .wp-block-column:last-child > * { margin: 0; max-width: none; }
	.t101-sec-caregiver .wp-block-columns > .wp-block-column:last-child > .t101-rounded { order: -1; }
}

@media (min-width: 500px) and (max-width: 960px) {
	/* While the columns are stacked, the two accessibility photos sit side by side.
	   The photos + button live in a .container group (t101-access-media); WP may or
	   may not add an __inner-container wrapper, so cover both. */
	.t101-access-media,
	.t101-access-media > .wp-block-group__inner-container {
		display: flex;
		flex-wrap: wrap;
		gap: 24px;
	}
	.t101-access-media > *,
	.t101-access-media > .wp-block-group__inner-container > * { flex: 0 0 100%; }
	.t101-access-media .t101-rounded {
		flex: 1 1 calc(50% - 12px);
		margin: 0;
	}
}

@media (max-width: 991px) {
	.t101-cards__grid,
	.t101-cards--cols-3 .t101-cards__grid { grid-template-columns: repeat(2, 1fr); }
	.t101-tiles__grid { grid-template-columns: repeat(3, 1fr); }
	.t101-colorcards__grid { grid-template-columns: 1fr; }
	.t101-agencies__grid { grid-template-columns: repeat(2, 1fr); }
	.t101-tabs__cards { grid-template-columns: 1fr; }
	.t101-app__container { flex-direction: column; }
	.t101-app__media { flex-basis: auto; }
	/* Cap the phone image but let it shrink to fit smaller screens. */
	.t101-app__media img { max-width: min(450px, 100%); }
	.t101-app__content { padding-left: 0; }
	.t101-app__content::before { display: none; }
	.t101-rides__viewport { margin: 0 72px; }
	.t101-ride-card { flex-direction: column; align-items: flex-start; padding: 32px; }
	.t101-ride-card__photo { border-right: 0; border-bottom: 7px solid var(--t101-green); padding: 0 0 24px; flex-basis: auto; width: 100%; }
	.t101-check__card { padding: 44px 32px; }
	.t101-hero__media { width: 100%; }
	.t101-hero__scrim { background: rgba(31, 24, 125, 0.82); }
}

/* ==========================================================================
   Block editor canvas hardening.
   ACF metaboxes force the non-iframed editor, so wp-admin styles leak into
   the canvas and trample buttons/lists. These rules restore the real look
   inside .editor-styles-wrapper only — zero effect on the front end.
   ========================================================================== */

.editor-styles-wrapper .t101-tabs__pill {
	display: inline-block !important;
	background: #fff !important;
	color: #004B87 !important;
	border: 2px solid #004B87 !important;
	border-radius: 50px !important;
	padding: 14px 28px !important;
	font-family: Montserrat, sans-serif !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	line-height: 1.2 !important;
	text-shadow: none !important;
	box-shadow: none !important;
	min-height: 0 !important;
}
.editor-styles-wrapper .t101-tabs__pill.is-active {
	background: #004B87 !important;
	color: #fff !important;
}
.editor-styles-wrapper .t101-rides__arrow {
	width: 64px !important;
	height: 64px !important;
	min-height: 0 !important;
	border-radius: 50% !important;
	background: #A3E00A !important;
	color: #fff !important;
	border: 0 !important;
	padding: 0 !important;
	font-size: 26px !important;
	line-height: 1 !important;
}
.editor-styles-wrapper .t101-check__toggle {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	width: 100% !important;
	background: #F5FAFE !important;
	border: 2px solid #0085AD !important;
	border-radius: 12px !important;
	padding: 16px 22px !important;
	color: #000 !important;
	text-align: left !important;
	box-shadow: none !important;
	min-height: 0 !important;
}
.editor-styles-wrapper .t101-check__circle {
	flex: 0 0 30px !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 50% !important;
	border: 2px solid #0085AD !important;
	background: #fff !important;
	color: #fff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.editor-styles-wrapper .t101-check__label {
	color: #000 !important;
	font-family: Montserrat, sans-serif !important;
	font-weight: 500 !important;
	font-size: 18px !important;
}
.editor-styles-wrapper .t101-colorcard {
	border-radius: 16px !important;
	padding: 32px 30px !important;
	text-align: left !important;
	color: #fff !important;
	border: 0 !important;
	width: 100% !important;
	min-height: 0 !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
.editor-styles-wrapper .t101-colorcard--blue { background: #004B87 !important; }
.editor-styles-wrapper .t101-colorcard--navy { background: #1F187D !important; }
.editor-styles-wrapper .t101-colorcard--purple { background: #9940D1 !important; }
.editor-styles-wrapper .t101-colorcard--teal { background: #0085AD !important; }
.editor-styles-wrapper .t101-colorcard--green { background: #A3E00A !important; color: #1F187D !important; }
.editor-styles-wrapper .t101-colorcard__title,
.editor-styles-wrapper .t101-colorcard__subline,
.editor-styles-wrapper .t101-colorcard__text,
.editor-styles-wrapper .t101-colorcard__more { color: inherit !important; }
.editor-styles-wrapper .t101-btn {
	display: inline-flex !important;
	align-items: center !important;
	border-radius: 50px !important;
	padding: 14px 40px !important;
	font-family: Montserrat, sans-serif !important;
	font-weight: 700 !important;
	font-size: 20px !important;
	line-height: 1 !important;
	text-decoration: none !important;
	border: 0 !important;
	min-height: 0 !important;
}
.editor-styles-wrapper .t101-btn--purple { background: #9940D1 !important; color: #FAFAFA !important; }
.editor-styles-wrapper .t101-btn--white { background: #fff !important; color: #1F187D !important; }
.editor-styles-wrapper .t101-btn--green { background: #A3E00A !important; color: #1F187D !important; }
.editor-styles-wrapper .t101-btn--navy { background: #1F187D !important; color: #fff !important; }
.editor-styles-wrapper .t101-btn--outline { background: #fff !important; color: #9940D1 !important; box-shadow: inset 0 0 0 2px #9940D1 !important; }
.editor-styles-wrapper .t101-faq__btn {
	display: flex !important;
	width: 100% !important;
	background: transparent !important;
	color: #004B87 !important;
	border: 0 !important;
	box-shadow: none !important;
	text-align: left !important;
}
.editor-styles-wrapper .t101-modal__close { display: none !important; }
.editor-styles-wrapper .t101-modal { display: none !important; }
.editor-styles-wrapper .t101-app__item::before {
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	box-sizing: border-box !important;
}
.editor-styles-wrapper .t101-check__list,
.editor-styles-wrapper .t101-app__timeline,
.editor-styles-wrapper .t101-callout__content ul,
.editor-styles-wrapper .t101-tabs__extra ul {
	list-style: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}
.editor-styles-wrapper .t101-check__item::marker,
.editor-styles-wrapper .t101-app__item::marker,
.editor-styles-wrapper .t101-callout__content li::marker,
.editor-styles-wrapper .t101-tabs__extra li::marker { content: none !important; }
.editor-styles-wrapper .t101-check__item,
.editor-styles-wrapper .t101-app__item,
.editor-styles-wrapper .t101-callout__content li,
.editor-styles-wrapper .t101-tabs__extra li { list-style: none !important; }

/* Reclaim ::before from the theme's global "●" bullet rule (.acf-block-preview ul>li:before) */
.editor-styles-wrapper ul.t101-check__list > li.t101-check__item::before { content: none !important; }
.editor-styles-wrapper ul.t101-app__timeline > li.t101-app__item::before {
	content: "" !important;
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	background: #0085AD !important;
	border: 4px solid #fff !important;
	position: absolute !important;
	left: 0 !important;
	top: 2px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	font-size: 0 !important;
}
.editor-styles-wrapper ul.t101-app__timeline > li.t101-app__item:first-child::before { background: #fff !important; }
.editor-styles-wrapper .t101-callout__content ul > li::before,
.editor-styles-wrapper .t101-tabs__extra ul > li::before {
	content: "" !important;
	position: absolute !important;
	left: 2px !important;
	top: 9px !important;
	width: 16px !important;
	height: 9px !important;
	border-left: 3px solid #A3E00A !important;
	border-bottom: 3px solid #A3E00A !important;
	border-top: 0 !important;
	border-right: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	transform: rotate(-45deg) !important;
	margin: 0 !important;
	font-size: 0 !important;
	display: block !important;
}
.editor-styles-wrapper .t101-callout__content ul > li,
.editor-styles-wrapper .t101-tabs__extra ul > li { position: relative !important; }

/* Headings keep their intended colors inside the canvas */
.editor-styles-wrapper .t101-h2 { color: #1F187D !important; }
.editor-styles-wrapper .t101-h2--white { color: #fff !important; }
.editor-styles-wrapper .t101-h2__accent { color: #9940D1 !important; }
.editor-styles-wrapper .t101-app__item-title { color: #fff !important; }
.editor-styles-wrapper .t101-app__item-text { color: #fff !important; }
.editor-styles-wrapper .t101-hero__title,
.editor-styles-wrapper .t101-hero__text,
.editor-styles-wrapper .t101-hero__text p { color: #fff !important; }

/* Photo tiles: images must cover their card in the canvas */
.editor-styles-wrapper .t101-tile {
	position: relative !important;
	overflow: hidden !important;
	aspect-ratio: 47 / 30 !important;
	min-height: 120px !important;
}
.editor-styles-wrapper .t101-tile__img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	margin: 0 !important;
}
.editor-styles-wrapper .t101-tile__overlay { position: absolute !important; inset: 0 !important; }
.editor-styles-wrapper .t101-tile__label { position: absolute !important; inset: 0 !important; }

/* Agency cards: all white with blue text, linked or not */
.editor-styles-wrapper .t101-agency {
	background: #fff !important;
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	border-radius: 12px !important;
	padding: 16px 22px !important;
	text-decoration: none !important;
	opacity: 1 !important;
}
.editor-styles-wrapper .t101-agency__name { color: #004B87 !important; }
.editor-styles-wrapper .t101-agency__pin { color: #004B87 !important; background: rgba(202, 202, 202, 0.31) !important; }
.editor-styles-wrapper .t101-agency__arrow { color: #1F187D !important; }

/* Why-try dot patch: z-index:-1 hides it behind the canvas background in the editor */
.editor-styles-wrapper .t101-sec-why-try::before {
	z-index: 0 !important;
	top: 0 !important; /* no nav bar above it in the canvas */
}
.editor-styles-wrapper .t101-sec-why-try > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 575px) {
	.t101-cards__grid,
	.t101-cards--cols-2 .t101-cards__grid,
	.t101-cards--cols-3 .t101-cards__grid { grid-template-columns: 1fr; }
	.t101-tiles__grid,
	.t101-tiles--cols-4 .t101-tiles__grid { grid-template-columns: repeat(2, 1fr); }
	.t101-agencies__grid { grid-template-columns: 1fr; }
	.t101-callout--tip .t101-callout__content ul { columns: 1; }
	.t101-rides__viewport { margin: 0 8px; }
	.t101-rides__arrow { display: none; }
	.t101-hero__buttons .t101-btn { width: 100%; }
	.t101-band { padding: 56px 0; }
	.t101-app { padding: 56px 0; }
	.t101-agencies { padding: 56px 0; }
	.t101-check { padding: 56px 0; }
}