/* Phase 0: opt-in only. All selectors stay within .tt-inner.
 * TOP tokens, 1180px container, mint, rounded cards and green CTA are the baseline.
 * The original post_content remains in WordPress. Forms keep their own styles.
 */
.tt-inner {
	color: var(--tt-ink);
	font-feature-settings: "palt";
	overflow-wrap: anywhere;
}
main.wp-block-group.tt-inner { padding: 0; }
main.wp-block-group.tt-inner > * + * { margin-block-start: 0; }
.tt-inner .tt-inner__container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.tt-inner .tt-inner__hero {
	position: relative;
	padding-block: 28px 72px;
	border-bottom: 1px solid var(--tt-line);
	background: radial-gradient(ellipse at 85% 20%, var(--tt-mint), transparent 65%), var(--tt-mint-pale);
}
.tt-inner .tt-inner__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(#13756108 1px, transparent 1px), linear-gradient(90deg, #13756108 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: linear-gradient(90deg, transparent, #000);
	pointer-events: none;
}
.tt-inner .tt-inner__hero > * { position: relative; }
.tt-inner .tt-inner__breadcrumbs { margin-bottom: 48px; color: var(--tt-ink-muted); font-size: .8125rem; }
.tt-inner .tt-inner__breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px 12px; list-style: none; margin: 0; padding: 0; }
.tt-inner .tt-inner__breadcrumbs li + li::before { content: "/"; margin-right: 12px; color: var(--tt-ink-muted); }
.tt-inner .tt-inner__breadcrumbs a { color: var(--tt-green-deep); text-underline-offset: 4px; }
.tt-inner .tt-inner__eyebrow { margin: 0 0 16px; color: var(--tt-green); font-size: .75rem; font-weight: 800; letter-spacing: .16em; }
.tt-inner .tt-inner__title { margin: 0; color: var(--tt-ink); font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); line-height: 1.4; font-weight: 800; }
.tt-inner .tt-inner__body { padding-block: 72px 96px; }
.tt-inner .tt-inner__content { max-width: 960px; margin-inline: auto; font-size: 1rem; line-height: 2; }
/* Immediate content children only: do not reach into Zoho, embeds or custom widgets. */
.tt-inner .tt-inner__content > :where(p, ul, ol, figure) { margin-block: 24px; }
.tt-inner .tt-inner__content > :where(h2, h3, h4, h5, h6) {
	color: var(--tt-ink);
	margin-block: 48px 20px;
	line-height: 1.6;
}
.tt-inner .tt-inner__content > h2:first-child {
	margin-top: 0;
	padding: 28px 32px;
	border-left: 4px solid var(--tt-green);
	border-radius: 0 var(--tt-radius-sm) var(--tt-radius-sm) 0;
	/* Legacy about headline has inline pink/white; override presentation only. */
	background: var(--tt-mint-pale) !important;
	color: var(--tt-ink) !important;
	text-align: left;
	font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem);
}
.tt-inner .tt-inner__content > :where(h3, h4) { padding-bottom: 12px; border-bottom: 1px solid var(--tt-line); font-size: 1.375rem; }
.tt-inner .tt-inner__content > h5 { color: var(--tt-green-deep); font-size: 1.125rem; }
.tt-inner .tt-inner__content > :where(ul, ol) { padding-left: 1.5em; }
.tt-inner .tt-inner__content > :where(ul, ol) > li + li { margin-top: 12px; }
.tt-inner .tt-inner__section { margin-block: 72px; }
.tt-inner .tt-inner__heading { margin: 0 0 24px; color: var(--tt-ink); font-size: clamp(1.5rem, 1.1rem + 1vw, 2.25rem); line-height: 1.5; }
.tt-inner .tt-inner__lead { color: var(--tt-ink-muted); font-size: 1.125rem; line-height: 1.9; }
.tt-inner .tt-inner__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tt-inner .tt-inner__card { min-width: 0; margin: 0; padding: 28px; border: 1px solid var(--tt-line); border-radius: var(--tt-radius-md); background: #fff; box-shadow: var(--tt-shadow-card); }
.tt-inner .tt-inner__card h3 { margin: 0 0 12px; color: var(--tt-green-deep); font-size: 1.25rem; }
.tt-inner .tt-inner__card p { margin: 0; color: var(--tt-ink-muted); font-size: .9375rem; line-height: 1.9; }
.tt-inner .tt-inner__card img { width: 100%; height: auto; border-radius: var(--tt-radius-sm); }
.tt-inner .tt-inner__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 40px; }
.tt-inner .tt-inner__diagram { margin: 0; padding: 32px; border: 1px solid var(--tt-line); border-radius: var(--tt-radius-lg); background: var(--tt-mint-pale); }
.tt-inner .tt-inner__diagram img { max-width: 100%; height: auto; }
.tt-inner .tt-inner__diagram figcaption { margin-top: 16px; color: var(--tt-ink-muted); font-size: .8125rem; }
.tt-inner .tt-inner__steps { display: grid; gap: 12px; padding: 0; list-style-position: inside; }
.tt-inner .tt-inner__steps li { padding: 16px 20px; border: 1px solid var(--tt-line); border-radius: var(--tt-radius-sm); background: #fff; color: var(--tt-green-deep); font-weight: 700; }
.tt-inner .tt-inner__table-wrap { overflow-x: auto; border: 1px solid var(--tt-line); border-radius: var(--tt-radius-md); }
.tt-inner .tt-inner__table-wrap table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9375rem; }
.tt-inner .tt-inner__table-wrap caption { padding: 16px; text-align: left; font-weight: 700; }
.tt-inner .tt-inner__table-wrap :where(th, td) { padding: 18px; border: 1px solid var(--tt-line); text-align: left; white-space: normal; word-break: normal; }
.tt-inner .tt-inner__table-wrap thead { background: var(--tt-mint); color: var(--tt-green-deep); }
.tt-inner .tt-inner__table-wrap tbody th { background: var(--tt-mint-pale); }
.tt-inner .tt-inner__cta { padding: 40px; border-radius: var(--tt-radius-lg); background: var(--tt-green-deep); color: #fff; }
.tt-inner .tt-inner__cta :where(h2, p) { color: #fff; margin-top: 0; }
.tt-inner .tt-inner__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.tt-inner .tt-inner__button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border: 1px solid var(--tt-line); border-radius: 999px; background: #fff; color: var(--tt-green-deep); font-weight: 700; text-decoration: none; }
.tt-inner .tt-inner__button:hover { background: var(--tt-mint); color: var(--tt-green-deep); }
.tt-inner :where(a, [tabindex]):focus-visible { outline: 3px solid var(--tt-green-teal); outline-offset: 4px; }
.tt-inner .tt-inner__cta a:focus-visible { outline-color: #fff; }
@media (max-width: 900px) {
	.tt-inner .tt-inner__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tt-inner .tt-inner__split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
	.tt-inner .tt-inner__container { width: calc(100% - 40px); }
	.tt-inner .tt-inner__hero { padding-block: 20px 44px; }
	.tt-inner .tt-inner__breadcrumbs { margin-bottom: 32px; }
	.tt-inner .tt-inner__body { padding-block: 40px 56px; }
	.tt-inner .tt-inner__content > h2:first-child { padding: 20px; }
	.tt-inner .tt-inner__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.tt-inner .tt-inner__section { margin-block: 48px; }
	.tt-inner :where(.tt-inner__card, .tt-inner__diagram, .tt-inner__cta) { padding: 24px; }
	.tt-inner .tt-inner__actions { flex-direction: column; }
	.tt-inner .tt-inner__button { text-align: center; }
}