/* Shared base for the 2026 theme rollout. Scoped under .t26 so it can't leak
   into site-header/site-footer or any page still on the old theme. Load this
   before any page-specific stylesheet (page-home.css, page-contact-us.css, ...). */
.t26 {
	--mah: #774543;
	--sky: #A1BEC5;
	--skd: #4f717a;
	--ash: #EDEBE3;
	--char: #171F21;
	/* Sky tint for text on --mah backgrounds: --sky is only 3.93:1 there, this is 4.96:1 (WCAG AA) */
	--sky-on-mah: #BDD3D8;
	font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--char);
	line-height: 1.6;
}

/* Nav is now styled light sitewide by default via site-chrome-2026.css
   (loaded unconditionally in site-header.php), so no per-page override is
   needed here anymore. */

.t26 .wrap { max-width: 1100px; margin: 0 auto; padding: 0 36px; }
.t26 .sec { padding: 76px 0; }
.t26 .sec-white { background: #fff; }
.t26 .btn {
	display: inline-block;
	padding: 14px 26px;
	/* style.min.css has a sitewide `.btn{border-radius:0!important}` reset from the old theme; !important is required to clear it within .t26 */
	border-radius: 9px !important;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border: 1.6px solid transparent;
	cursor: pointer;
}
.t26 .b-mah { background: var(--mah); color: #fff; }
.t26 .b-mah:hover { background: var(--skd); color: #fff; }
.t26 .b-sky { background: var(--sky); color: var(--char); }
.t26 .b-sky:hover { background: #8ba9b1; color: var(--char); }
.t26 .b-ow { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.t26 .b-ow:hover { border-color: #fff; }
.t26 .b-mo { background: transparent; color: var(--mah); border-color: var(--mah); }
.t26 .b-mo:hover { background: var(--mah); color: #fff; }

/* Bootstrap input-group buttons (e.g. signup "Promo Code" -> Check) sit inside a form row,
   so they keep form-control sizing instead of the big CTA .btn above. */
.t26 .input-group-btn > .btn {
	height: 34px;
	padding: 6px 16px;
	font-size: 14px;
	line-height: 1.42857143;
	color: var(--mah);
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 0 4px 4px 0 !important;
}
.t26 .input-group-btn > .btn:hover,
.t26 .input-group-btn > .btn:focus {
	background: var(--mah);
	border-color: var(--mah);
	color: #fff;
}

.t26 .eb { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.t26 h1 { font-size: 48px; font-weight: 700; line-height: 1.06; letter-spacing: -.015em; margin: 0; color: inherit; }
.t26 h2 { font-size: 30px; font-weight: 700; margin: 0; color: inherit; }
.t26 .mut { color: #5f5a54; }
.t26 .lead { font-size: 19px; }
.t26 .lbl { font-size: 13px; font-weight: 600; margin-bottom: 6px; display: block; }
.t26 .inp {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid rgba(23,31,33,.2);
	border-radius: 9px;
	font-family: inherit;
	font-size: 15px;
	background: #fff;
	color: var(--char);
}
.t26 .card { background: #fff; border: 1px solid rgba(23,31,33,.12); border-radius: 14px; padding: 20px; }
.t26 .ic {
	width: 42px;
	height: 42px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	font-size: 22px;
	background: #e7eef0;
	color: var(--mah);
	flex: none;
}
/* Fill the square so the glyph centres with flex, not font metrics alone. */
.t26 .ic > i,
.t26 .ic > [class^="ti-"],
.t26 .ic > [class*=" ti-"] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 0;
	speak: never;
}
.t26 .ic > i:before,
.t26 .ic > [class^="ti-"]:before,
.t26 .ic > [class*=" ti-"]:before {
	display: block;
	line-height: 1;
}
.t26 .opt { display: flex; gap: 14px; align-items: flex-start; }
.t26 .center { text-align: center; }
.t26 .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Centre icons in stacked feature card grids (Flow / Hub / Studio / Features hub pattern) */
.t26 .feature-grid3 > .card,
.t26 .feature-grid3 > a.card {
	text-align: center;
}
.t26 .feature-grid3 > .card > .ic,
.t26 .feature-grid3 > a.card > .ic {
	margin-left: auto;
	margin-right: auto;
}
/* Keep horizontal “beyond” cards left-aligned (icon beside copy) */
.t26 .beyond-card { text-align: left; }

.t26 .hero {
	background-color: var(--mah);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cpath d='M18 56 V31 L35 15 L52 31 V56' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1.6'/%3E%3C/svg%3E");
	color: #fff;
}
/* top padding clears the fixed navbar-fixed-top nav (~80px) from site-header.php */
.t26 .hero .wrap { padding: 130px 36px 76px; }
.t26 .hero .eb { color: var(--sky-on-mah); }
.t26 .hero p { color: #f1e7e6; }

.t26 .cta-band { background: var(--mah); color: #fff; }
.t26 .cta-band h2 { color: #fff; }
.t26 .cta-band p { margin-top: 10px; color: var(--sky-on-mah); font-weight: 600; font-size: 19px; }

/* Stack 3-up cards from tablet down — 216px columns at 768 looked cramped */
@media (max-width: 900px) {
	.t26 .grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.t26 h1 { font-size: 32px; line-height: 1.15; }
	.t26 h2 { font-size: 24px; }
	.t26 .lead { font-size: 17px; }
	.t26 .wrap { padding: 0 20px; }
	.t26 .hero .wrap { padding: 110px 20px 56px; }
	.t26 .sec { padding: 52px 0; }
}
@media (max-width: 560px) {
	.t26 .hero a.btn,
	.t26 .cta-band a.btn {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
}