/*
Theme Name: True Nature Asia
Theme URI: https://truenature.asia
Author: True Nature Asia
Author URI: https://truenature.asia
Description: Organic-Transparency block theme for True Nature Asia — hypoallergenic Black Soldier Fly dog food. Earthy forest-green and bone-cream palette, DM Sans + Manrope, built from the Stitch landing page design. WooCommerce-ready.
Version: 3.2.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: true-nature-asia
*/

:root {
	--tna-primary: #395135;
	--tna-deep-forest: #3B4D36;
	--tna-sapling-lime: #E6FF84;
	--tna-bone-cream: #F8F7F3;
	--tna-wood-bark: #322F20;
	--tna-secondary: #615e53;
	--tna-linen: #e4dfd0;
	--tna-surface-low: #f5f4ef;
	--tna-surface: #efeee9;
	--tna-outline: #c3c8be;
	--tna-ink: #1b1c19;
}

html { scroll-behavior: smooth; }
body { overflow-x: clip; }

.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	display: inline-block;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	direction: ltr;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	-webkit-font-smoothing: antialiased;
}
.material-symbols-outlined.is-filled { font-variation-settings: 'FILL' 1; }

/* Gutenberg wraps images in <figure class="wp-block-image">. Neutralise its
   default margins inside our custom layout containers so block-editor content
   matches the original hand-written markup. */
.tna-discovery-media .wp-block-image,
.tna-vision-media .wp-block-image,
.tna-zero-media .wp-block-image,
.tna-protein-media .wp-block-image,
.tna-founder-photo .wp-block-image,
.tna-impact-photo .wp-block-image,
.tna-bsf-split .wp-block-image,
.tna-case-photo .wp-block-image,
.tna-hc-card .wp-block-image,
.tna-result-head .wp-block-image,
.tna-case-author .wp-block-image {
	margin: 0;
}
/* Containers whose image must fill a fixed-height/aspect frame: the figure
   wrapper needs the height too, or the image collapses to its natural size. */
.tna-founder-photo .wp-block-image,
.tna-impact-photo .wp-block-image,
.tna-zero-media .wp-block-image,
.tna-discovery-media .wp-block-image {
	height: 100%;
}

/* ---------- Shared ---------- */
.tna-container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}
.tna-kicker {
	display: inline-block;
	background: rgba(230, 255, 132, 0.35);
	color: var(--tna-deep-forest);
	padding: 6px 16px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 24px;
}
.tna-underline {
	width: 96px;
	height: 4px;
	background: var(--tna-sapling-lime);
	margin: 16px auto 0;
	border-radius: 2px;
}
.tna-btn,
.tna-btn-outline,
.tna-btn-dark {
	display: inline-block;
	padding: 16px 32px;
	border-radius: 0.5rem;
	font-family: "Manrope", sans-serif;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
}
.tna-btn {
	background: var(--tna-primary);
	color: #fff !important;
	box-shadow: 0 10px 25px -5px rgba(57, 81, 53, 0.25);
}
.tna-btn:hover { background: var(--tna-deep-forest); }
.tna-btn-outline {
	border: 1px solid var(--tna-primary);
	color: var(--tna-primary) !important;
}
.tna-btn-outline:hover { background: rgba(57, 81, 53, 0.05); }
.tna-btn-dark {
	background: var(--tna-deep-forest);
	color: #fff !important;
	padding: 20px 48px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}
.tna-btn-dark:hover { transform: scale(1.05); }

h1, h2, h3, h4 { letter-spacing: -0.02em; }

.fade-up {
	animation: tna-fade-up 0.7s ease both;
}
@keyframes tna-fade-up {
	from { opacity: 0; transform: translateY(1.5rem); }
	to   { opacity: 1; transform: translateY(0); }
}
/* Bulletproof fallback: always visible even if animations are disabled. */
.fade-up.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.fade-up { animation: none; opacity: 1; transform: none; }
}

/* ---------- Nav ---------- */
.tna-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 50;
	background: rgba(248, 247, 243, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--tna-outline);
}
body.admin-bar .tna-nav { top: 32px; }
.tna-nav-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 16px;
	padding-bottom: 16px;
}
.tna-nav-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
.tna-nav-brand img { height: 40px; width: auto; }
.tna-nav-brand span {
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--tna-deep-forest);
}
.tna-nav-links {
	display: flex;
	align-items: center;
	gap: 32px;
}
.tna-nav-links a {
	color: var(--tna-secondary);
	text-decoration: none;
	font-size: 16px;
	transition: color 0.2s;
}
.tna-nav-links a:hover { color: var(--tna-primary); }
.tna-nav-cta {
	background: var(--tna-primary);
	color: #fff !important;
	padding: 10px 24px;
	border-radius: 0.5rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s;
}
.tna-nav-cta:hover { background: var(--tna-deep-forest); }
@media (max-width: 900px) {
	.tna-nav-links { display: none; }
	.tna-nav-brand span { display: none; }
}

/* ---------- Hero ---------- */
.tna-hero {
	position: relative;
	padding: 180px 0 128px;
	overflow: hidden;
}
.tna-hero::after {
	content: "";
	position: absolute;
	top: 0; right: 0;
	width: 50%;
	height: 100%;
	background: rgba(57, 81, 53, 0.05);
	border-radius: 100px 0 0 100px;
	z-index: 0;
}
.tna-hero .tna-container { position: relative; z-index: 1; }
.tna-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: center;
}
.tna-hero h1 {
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--tna-deep-forest);
	margin: 0 0 24px;
}
.tna-hero-sub {
	font-size: 18px;
	line-height: 28px;
	color: var(--tna-secondary);
	max-width: 32rem;
	margin-bottom: 40px;
}
.tna-hero-buttons { display: flex; flex-wrap: wrap; gap: 16px; }
.tna-hero-media { position: relative; }
.tna-hero-media > .wp-block-image { margin: 0; }
.tna-hero-media > .wp-block-image img,
.tna-hero-media > img {
	width: 100%;
	height: 500px;
	object-fit: cover;
	border-radius: 2rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	transform: rotate(2deg);
	display: block;
}
.tna-hero-badge {
	position: absolute;
	bottom: -24px;
	left: -24px;
	background: #fff;
	padding: 24px;
	border-radius: 1rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--tna-outline);
	max-width: 200px;
}
.tna-hero-badge-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--tna-deep-forest);
	margin-bottom: 8px;
}
.tna-hero-badge-title .material-symbols-outlined { color: var(--tna-primary); }
.tna-hero-badge p { font-size: 14px; line-height: 20px; color: var(--tna-secondary); margin: 0; }
@media (max-width: 900px) {
	.tna-hero { padding: 130px 0 80px; }
	.tna-hero-grid { grid-template-columns: 1fr; }
	.tna-hero h1 { font-size: 34px; }
	.tna-hero-media > img,
	.tna-hero-media > .wp-block-image img { height: 380px; }
	.tna-hero-badge { left: 8px; }
}

/* ---------- Section headings ---------- */
.tna-section-title {
	font-family: "DM Sans", sans-serif;
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
	color: var(--tna-deep-forest);
	text-align: center;
	margin: 0;
}
.tna-display-title {
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	line-height: 56px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--tna-deep-forest);
	margin: 0 0 32px;
}
@media (max-width: 900px) {
	.tna-display-title { font-size: 32px; line-height: 40px; }
}

/* ---------- Bento (Why TNA) ---------- */
.tna-bento-section { background: var(--tna-surface-low); padding: 96px 0; }
.tna-bento-head { text-align: center; margin-bottom: 64px; }
.tna-bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.tna-bento-card {
	background: #fff;
	padding: 32px;
	border-radius: 1rem;
	border: 1px solid var(--tna-outline);
	transition: border-color 0.2s;
}
.tna-bento-card:hover { border-color: var(--tna-primary); }
.tna-bento-wide { grid-column: span 2; }
.tna-bento-split { display: flex; gap: 32px; align-items: center; }
.tna-bento-split img {
	width: 192px;
	height: 192px;
	object-fit: cover;
	border-radius: 0.75rem;
	filter: grayscale(1);
	transition: filter 0.3s;
	flex-shrink: 0;
}
.tna-bento-card:hover .tna-bento-split img { filter: grayscale(0); }
.tna-bento-card .material-symbols-outlined { font-size: 36px; color: var(--tna-primary); margin-bottom: 16px; }
.tna-bento-card h3 {
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--tna-deep-forest);
	margin: 0 0 12px;
}
.tna-bento-card p { color: var(--tna-secondary); margin: 0; }
.tna-bento-dark {
	background: var(--tna-primary);
	border: none;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.tna-bento-dark .material-symbols-outlined { color: var(--tna-sapling-lime); }
.tna-bento-dark h3 { color: #fff; }
.tna-bento-dark p { color: rgba(255, 255, 255, 0.9); }
.tna-bento-linen { background: var(--tna-linen); }
.tna-bento-linen p { color: #656357; }
.tna-checklist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	width: 100%;
}
.tna-checklist div { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.tna-checklist .material-symbols-outlined { color: var(--tna-primary); margin: 0; font-size: 24px; }
@media (max-width: 900px) {
	.tna-bento-section { padding: 64px 0; }
	.tna-bento { grid-template-columns: 1fr; }
	.tna-bento-wide { grid-column: span 1; }
	.tna-bento-split { flex-direction: column; }
	.tna-checklist { grid-template-columns: 1fr; }
}

/* ---------- Protein ---------- */
.tna-protein { padding: 96px 0; }
.tna-protein-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.tna-protein-media { position: relative; }
.tna-protein-media::before {
	content: "";
	position: absolute;
	inset: -16px;
	background: var(--tna-sapling-lime);
	filter: blur(40px);
	opacity: 0.3;
	border-radius: 2rem;
}
.tna-protein-media img {
	position: relative;
	width: 100%;
	border-radius: 1.5rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	display: block;
}
.tna-feature { display: flex; gap: 16px; margin-bottom: 32px; }
.tna-feature-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	background: rgba(57, 81, 53, 0.1);
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tna-feature-icon .material-symbols-outlined { color: var(--tna-primary); }
.tna-feature h4 {
	font-family: "DM Sans", sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: var(--tna-deep-forest);
	margin: 0 0 4px;
}
.tna-feature p { color: var(--tna-secondary); margin: 0; }
@media (max-width: 900px) {
	.tna-protein { padding: 64px 0; }
	.tna-protein-grid { grid-template-columns: 1fr; gap: 40px; }
	.tna-protein-media { order: 2; }
}

/* ---------- Founder ---------- */
.tna-founder {
	background: var(--tna-deep-forest);
	color: #fff;
	padding: 96px 0;
}
.tna-founder-grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 48px;
	align-items: center;
}
.tna-founder-photo {
	aspect-ratio: 4 / 5;
	border-radius: 3rem;
	overflow: hidden;
	border: 8px solid rgba(255, 255, 255, 0.1);
}
.tna-founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tna-founder h2 { color: var(--tna-sapling-lime); margin-bottom: 24px; }
.tna-founder-copy p {
	font-size: 18px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.8);
	margin: 0 0 24px;
}
.tna-founder-quote {
	font-style: italic;
	font-weight: 500;
	color: var(--tna-sapling-lime) !important;
}
.tna-founder-sig { padding-top: 8px; }
.tna-founder-sig strong { display: block; color: #fff; }
.tna-founder-sig span { font-size: 14px; color: var(--tna-sapling-lime); }
@media (max-width: 900px) {
	.tna-founder { padding: 64px 0; }
	.tna-founder-grid { grid-template-columns: 1fr; }
}

/* ---------- Case study ---------- */
.tna-case { padding: 96px 0; }
.tna-case-card {
	background: #fff;
	border-radius: 2.5rem;
	padding: 64px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08);
	border: 1px solid var(--tna-outline);
}
.tna-case-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.tna-case h2 { text-align: left; margin-bottom: 24px; }
.tna-case-intro { font-size: 18px; line-height: 28px; color: var(--tna-secondary); margin-bottom: 24px; }
.tna-case-quote {
	background: rgba(228, 223, 208, 0.3);
	padding: 24px;
	border-radius: 0.75rem;
	border-left: 4px solid var(--tna-primary);
	margin-bottom: 32px;
}
.tna-case-quote p { color: var(--tna-deep-forest); font-style: italic; margin: 0; }
.tna-case-author { display: flex; align-items: center; gap: 16px; }
.tna-case-author img {
	width: 48px;
	height: 48px;
	border-radius: 9999px;
	object-fit: cover;
}
.tna-case-author strong { display: block; color: var(--tna-deep-forest); }
.tna-case-author span { font-size: 14px; color: var(--tna-secondary); }
.tna-case-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tna-case-photo { border-radius: 1rem; overflow: hidden; }
.tna-case-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.tna-case-photo figcaption {
	text-align: center;
	padding: 8px 0;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
}
.tna-case-photos .wp-block-image { margin: 0; }
.tna-case-photo.is-before { border: 2px solid rgba(186, 26, 26, 0.2); }
.tna-case-photo.is-before figcaption { background: #ba1a1a; }
.tna-case-photo.is-after { border: 2px solid rgba(57, 81, 53, 0.2); }
.tna-case-photo.is-after figcaption { background: var(--tna-primary); }
@media (max-width: 900px) {
	.tna-case { padding: 64px 0; }
	.tna-case-card { padding: 32px 24px; border-radius: 1.5rem; }
	.tna-case-grid { grid-template-columns: 1fr; }
}

/* ---------- Feeding transition ---------- */
.tna-transition {
	background: var(--tna-surface);
	padding: 96px 0;
	text-align: center;
}
.tna-transition-sub {
	font-size: 18px;
	color: var(--tna-secondary);
	max-width: 42rem;
	margin: 16px auto 48px;
}
.tna-transition-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.tna-ring-wrap { transition: transform 0.3s; }
.tna-ring-wrap:hover { transform: scale(1.08); }
.tna-ring {
	position: relative;
	width: 128px;
	height: 128px;
	margin: 0 auto 16px;
}
.tna-ring svg { width: 100%; height: 100%; }
.tna-ring circle { fill: none; stroke-width: 3; }
.tna-ring .ring-bg { stroke: var(--tna-secondary); }
.tna-ring .ring-fg { stroke: var(--tna-primary); }
.tna-ring-label {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.tna-ring-label b { font-size: 13px; color: var(--tna-deep-forest); }
.tna-ring-label small { font-size: 10px; color: var(--tna-primary); }
.tna-ring-day { font-weight: 700; color: var(--tna-deep-forest); }
@media (max-width: 900px) {
	.tna-transition { padding: 64px 0; }
	.tna-transition-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Trial CTA ---------- */
.tna-cta {
	background: var(--tna-sapling-lime);
	padding: 96px 0;
	text-align: center;
}
.tna-cta h2 { margin-bottom: 24px; }
.tna-cta-sub {
	font-size: 18px;
	color: rgba(59, 77, 54, 0.8);
	max-width: 36rem;
	margin: 0 auto 40px;
}
.tna-cta-note {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tna-deep-forest);
	margin-top: 16px;
}

/* ---------- Footer ---------- */
.tna-footer {
	background: var(--tna-wood-bark);
	color: #fff;
	padding: 80px 0 40px;
}
.tna-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 48px;
	margin-bottom: 64px;
}
.tna-footer-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}
.tna-footer-brand img { height: 48px; width: auto; filter: brightness(0) invert(1); }
.tna-footer-brand span {
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--tna-sapling-lime);
}
.tna-footer-about { opacity: 0.7; max-width: 24rem; margin-bottom: 32px; }
.tna-footer h5 {
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--tna-sapling-lime);
	margin: 0 0 24px;
}
.tna-footer ul { list-style: none; margin: 0; padding: 0; }
.tna-footer li { margin-bottom: 16px; font-size: 14px; opacity: 0.85; display: flex; align-items: center; gap: 8px; }
.tna-footer li .material-symbols-outlined { color: var(--tna-sapling-lime); font-size: 20px; }
.tna-footer a { color: inherit; text-decoration: none; transition: color 0.2s; }
.tna-footer a:hover { color: var(--tna-sapling-lime); }
.tna-footer-bottom {
	padding-top: 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 14px;
	opacity: 0.6;
}
@media (max-width: 900px) {
	.tna-footer-grid { grid-template-columns: 1fr; }
}

/* ---------- WooCommerce basics ---------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: "DM Sans", sans-serif;
	color: var(--tna-deep-forest);
}
.woocommerce ul.products li.product a img { border-radius: 1rem; }
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var(--tna-primary);
	color: #fff;
	border-radius: 0.5rem;
	font-family: "Manrope", sans-serif;
	font-weight: 700;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--tna-deep-forest);
	color: #fff;
}
.woocommerce span.onsale {
	background-color: var(--tna-sapling-lime);
	color: var(--tna-deep-forest);
}

/* Content pages (non-landing) */
.tna-page-content { padding: 160px 0 80px; }

/* ==================================================
   Sub-pages (Our Story / Ingredients / Science / FAQs)
   ================================================== */
.tna-subpage { padding-top: 73px; }
/* The homepage hero supplies its own top spacing. */
.home .tna-subpage { padding-top: 0; }
/* Headings that sit left-aligned inside split layouts. */
.tna-section-title.is-left { text-align: left; }
.tna-bowl-title {
	font-family: "DM Sans", sans-serif;
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
	color: var(--tna-deep-forest);
	margin: 0 0 16px;
}
/* Name/role line inside testimonial cards (block editor renders <p>, not <span>). */
.tna-result-head .tna-result-role {
	font-size: 14px;
	color: var(--tna-primary);
	margin: 0;
}
.tna-container-narrow {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 24px;
}
.tna-section { padding: 72px 0 24px; }
.tna-section-sub {
	text-align: center;
	color: var(--tna-secondary);
	max-width: 42rem;
	margin: 16px auto 48px;
}
.tna-sub-lead {
	font-size: 18px;
	line-height: 28px;
	color: var(--tna-secondary);
	margin: 16px 0 32px;
}

/* Sub-page hero */
.tna-sub-hero { padding: 80px 0 40px; }
.tna-sub-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.tna-sub-hero h1 { margin-bottom: 0; }
.tna-sub-hero-media { position: relative; }
.tna-sub-hero-media > .wp-block-image { margin: 0; }
.tna-sub-hero-media > img,
.tna-sub-hero-media > .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1.5rem;
	border: 1px solid var(--tna-outline);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	display: block;
}
.tna-sub-hero-media > img.tna-story-hero-img,
.tna-sub-hero-media > .tna-story-hero-img img { aspect-ratio: 4 / 5; }
.tna-trust-row { display: flex; flex-wrap: wrap; gap: 24px; }
.tna-trust-row > span {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--tna-primary);
	font-weight: 700;
}
.tna-glass-note {
	position: absolute;
	bottom: -24px;
	left: -24px;
	max-width: 240px;
	background: rgba(248, 247, 243, 0.85);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(57, 81, 53, 0.1);
	padding: 24px;
	border-radius: 1rem;
	font-size: 14px;
	color: var(--tna-deep-forest);
}
.tna-lime-note {
	position: absolute;
	bottom: -32px;
	left: -32px;
	max-width: 240px;
	background: var(--tna-sapling-lime);
	padding: 32px;
	border-radius: 0.75rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.tna-lime-quote {
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-style: italic;
	font-weight: 600;
	color: var(--tna-deep-forest);
	margin: 0 0 8px;
}
.tna-lime-note p:last-child { font-size: 14px; color: rgba(59, 77, 54, 0.8); margin: 0; }
@media (max-width: 900px) {
	.tna-sub-hero-grid { grid-template-columns: 1fr; }
	.tna-glass-note, .tna-lime-note { left: 8px; }
}

/* BSF bento (ingredients) */
.tna-bsf-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 24px;
	margin-top: 48px;
}
.tna-bsf-card {
	padding: 32px;
	border-radius: 1.5rem;
	transition: transform 0.3s;
}
.tna-bsf-card:hover { transform: scale(1.02); }
.tna-bsf-card > span.material-symbols-outlined,
.tna-bsf-card > div > span.material-symbols-outlined {
	font-size: 36px;
	color: var(--tna-primary);
	margin-bottom: 16px;
	display: inline-block;
}
.tna-bsf-card h3 {
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--tna-deep-forest);
	margin: 0 0 8px;
}
.tna-bsf-card p { color: var(--tna-secondary); margin: 0; }
.tna-bsf-card.is-linen { background: var(--tna-linen); }
.tna-bsf-card.is-mint { background: #ceebc5; }
.tna-bsf-card.is-white { background: #fff; border: 1px solid var(--tna-outline); }
.tna-bsf-card.is-bark { background: var(--tna-wood-bark); }
.tna-bsf-card.is-bark h3 { color: var(--tna-sapling-lime); }
.tna-bsf-card.is-bark p { color: rgba(230, 255, 132, 0.9); }
.tna-bsf-split { display: flex; gap: 32px; align-items: center; }
.tna-bsf-split > div:first-child { flex: 1; }
.tna-bsf-split img {
	width: 33%;
	height: 192px;
	object-fit: cover;
	border-radius: 0.75rem;
	flex-shrink: 0;
}
.tna-bsf-split > .wp-block-image { width: 33%; flex-shrink: 0; margin: 0; }
.tna-bsf-split > .wp-block-image img { width: 100%; }
.tna-impact-badge { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.tna-impact-circle {
	width: 96px;
	height: 96px;
	border-radius: 9999px;
	border: 2px solid var(--tna-sapling-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--tna-sapling-lime);
}
.tna-impact-badge > span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tna-sapling-lime);
}
@media (max-width: 900px) {
	.tna-bsf-grid { grid-template-columns: 1fr; }
	.tna-bsf-split { flex-direction: column; align-items: flex-start; }
	.tna-bsf-split img { width: 100%; }
}

/* What's in the bowl */
.tna-bowl-panel {
	background: var(--tna-surface);
	border: 1px solid var(--tna-outline);
	border-radius: 2.5rem;
	padding: 64px;
}
.tna-bowl-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
.tna-bowl-intro > p { color: var(--tna-secondary); margin: 16px 0 32px; }
.tna-bowl-point { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.tna-bowl-point .material-symbols-outlined { color: var(--tna-primary); }
.tna-bowl-point strong { color: var(--tna-deep-forest); display: block; }
.tna-bowl-point p { font-size: 14px; color: var(--tna-secondary); margin: 4px 0 0; }
.tna-ingredient-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.tna-ingredient-card {
	background: #fff;
	padding: 24px;
	border-radius: 1rem;
	border: 1px solid rgba(195, 200, 190, 0.3);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tna-ingredient-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.tna-pct {
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--tna-deep-forest);
}
.tna-tag {
	background: var(--tna-linen);
	color: #656357;
	padding: 4px 12px;
	border-radius: 9999px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.tna-tag.is-lime { background: var(--tna-sapling-lime); color: var(--tna-primary); }
.tna-tag.is-mint { background: #ceebc5; color: #354d31; }
.tna-ingredient-card h4 { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--tna-ink); }
.tna-ingredient-card p { font-size: 14px; color: var(--tna-secondary); margin: 0; }
.tna-analysis-row {
	margin-top: 48px;
	padding-top: 48px;
	border-top: 1px solid var(--tna-outline);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.tna-analysis-row span { display: block; font-size: 14px; color: var(--tna-secondary); margin-bottom: 4px; }
.tna-analysis-row strong {
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--tna-deep-forest);
}
.tna-analysis-row strong.is-primary { color: var(--tna-primary); }
@media (max-width: 900px) {
	.tna-bowl-panel { padding: 32px 24px; border-radius: 1.5rem; }
	.tna-bowl-grid { grid-template-columns: 1fr; gap: 32px; }
	.tna-ingredient-grid { grid-template-columns: 1fr; }
	.tna-analysis-row { grid-template-columns: 1fr 1fr; }
}

/* Zero trace / certifications */
.tna-zero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.tna-zero-media img {
	width: 100%;
	height: 500px;
	object-fit: cover;
	border-radius: 2.5rem;
	display: block;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
}
.tna-zero-item {
	display: flex;
	align-items: center;
	gap: 16px;
	background: rgba(255, 218, 214, 0.25);
	padding: 16px;
	border-radius: 0.75rem;
	font-weight: 700;
	color: #93000a;
	margin-bottom: 16px;
}
.tna-zero-item .material-symbols-outlined { color: #ba1a1a; }
.tna-zero-quote { margin-top: 32px; font-size: 14px; font-style: italic; color: var(--tna-secondary); }
.tna-cert-item {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--tna-outline);
	padding: 16px;
	border-radius: 0.75rem;
	margin-bottom: 16px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tna-cert-item > .material-symbols-outlined {
	background: rgba(230, 255, 132, 0.25);
	color: var(--tna-primary);
	padding: 8px;
	border-radius: 9999px;
	font-size: 24px;
}
.tna-cert-item strong { color: var(--tna-deep-forest); display: block; }
.tna-cert-item p { font-size: 12px; color: var(--tna-secondary); margin: 2px 0 0; }
@media (max-width: 900px) {
	.tna-zero-grid { grid-template-columns: 1fr; }
	.tna-zero-media img { height: 320px; }
}

/* Digestibility panel */
.tna-digest-panel {
	background: var(--tna-primary);
	color: #fff;
	text-align: center;
	padding: 80px 48px;
	border-radius: 2.5rem;
}
.tna-digest-icon { font-size: 60px !important; color: var(--tna-sapling-lime); margin-bottom: 24px; }
.tna-digest-panel h2 {
	font-family: "DM Sans", sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 24px;
}
.tna-digest-panel > p {
	font-size: 18px;
	line-height: 28px;
	opacity: 0.9;
	max-width: 48rem;
	margin: 0 auto 40px;
}
.tna-mini-transition {
	background: var(--tna-deep-forest);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1.5rem;
	padding: 32px;
	max-width: 36rem;
	margin: 0 auto;
	text-align: left;
}
.tna-mini-transition h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-family: "Manrope", sans-serif;
	font-weight: 700;
	margin: 0 0 16px;
}
.tna-mini-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tna-mini-bars i { display: block; height: 4px; background: var(--tna-sapling-lime); margin-bottom: 8px; border-radius: 2px; }
.tna-mini-bars span {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	opacity: 0.7;
}
@media (max-width: 900px) {
	.tna-digest-panel { padding: 48px 24px; border-radius: 1.5rem; }
}

/* Cost of protein */
.tna-cost-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.tna-compare-row {
	display: flex;
	justify-content: space-between;
	font-weight: 700;
	margin: 24px 0 8px;
}
.tna-compare-row.is-primary { color: var(--tna-primary); }
.tna-compare-bar {
	width: 100%;
	height: 12px;
	background: var(--tna-surface);
	border-radius: 9999px;
	overflow: hidden;
}
.tna-compare-bar i { display: block; height: 100%; border-radius: 9999px; }
.tna-compare-bar i.is-grey { background: var(--tna-outline); }
.tna-compare-bar i.is-lime { background: var(--tna-sapling-lime); box-shadow: 0 0 8px rgba(230, 255, 132, 0.8); }
.tna-impact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tna-impact-stat {
	background: var(--tna-bone-cream);
	border: 1px solid var(--tna-outline);
	border-radius: 1.5rem;
	padding: 24px;
	text-align: center;
}
.tna-impact-stat strong {
	display: block;
	font-family: "DM Sans", sans-serif;
	font-size: 48px;
	font-weight: 700;
	color: var(--tna-deep-forest);
}
.tna-impact-stat span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tna-secondary);
}
.tna-impact-photo { grid-column: span 2; border-radius: 1.5rem; overflow: hidden; height: 160px; }
.tna-impact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
	.tna-cost-grid { grid-template-columns: 1fr; }
}

/* Our Story */
.tna-story-truth { background: #fff; padding: 96px 0; margin-top: 48px; text-align: center; }
.tna-story-truth p { font-size: 18px; line-height: 28px; color: var(--tna-secondary); margin: 24px 0 0; }
.tna-story-truth .tna-truth-quote {
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	line-height: 1.4;
	font-style: italic;
	color: var(--tna-deep-forest);
	padding: 16px 0;
}
.tna-discovery { background: var(--tna-deep-forest); color: #fff; padding: 96px 0; }
.tna-discovery-grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 48px;
	align-items: center;
}
.tna-discovery h2 {
	font-family: "DM Sans", sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: var(--tna-sapling-lime);
	margin: 0 0 16px;
}
.tna-discovery-lead { font-size: 18px; line-height: 28px; opacity: 0.9; margin-bottom: 32px; }
.tna-discovery-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tna-discovery-cards > div {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 0.5rem;
	padding: 16px;
}
.tna-discovery-cards .material-symbols-outlined { color: var(--tna-sapling-lime); margin-bottom: 8px; }
.tna-discovery-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tna-sapling-lime);
	margin: 0 0 4px;
}
.tna-discovery-cards p:last-child { font-size: 14px; margin: 0; }
.tna-discovery-media { position: relative; }
.tna-discovery-media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 1rem;
	display: block;
	filter: grayscale(1);
	transition: filter 0.7s;
}
.tna-discovery-media:hover img { filter: grayscale(0); }
.tna-discovery-badge {
	position: absolute;
	top: 16px;
	right: 16px;
	background: var(--tna-sapling-lime);
	color: var(--tna-deep-forest);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 4px;
}
@media (max-width: 900px) {
	.tna-discovery-grid { grid-template-columns: 1fr; }
}
.tna-values-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	margin-top: 48px;
}
.tna-value-card {
	background: #fff;
	padding: 32px;
	border-radius: 0.75rem;
	border: 1px solid var(--tna-outline);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.2s;
}
.tna-value-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.tna-value-card .material-symbols-outlined { font-size: 36px; color: var(--tna-primary); margin-bottom: 16px; }
.tna-value-card h3 {
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--tna-deep-forest);
	margin: 0 0 8px;
}
.tna-value-card p { color: var(--tna-secondary); margin: 0; }
@media (max-width: 900px) {
	.tna-values-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.tna-values-grid { grid-template-columns: 1fr; }
}
.tna-vision-panel {
	background: var(--tna-linen);
	border-radius: 1.5rem;
	padding: 80px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.tna-vision-panel p:last-child { color: var(--tna-secondary); margin: 0; }
.tna-vision-panel .tna-section-title { text-align: left; }
.tna-vision-media { position: relative; }
.tna-vision-media img { width: 100%; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); display: block; }
.tna-vision-badge {
	position: absolute;
	top: -16px;
	right: -16px;
	background: #fff;
	border: 1px solid var(--tna-outline);
	border-radius: 9999px;
	padding: 16px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.tna-vision-badge .material-symbols-outlined { font-size: 36px; color: var(--tna-primary); }
@media (max-width: 900px) {
	.tna-vision-panel { grid-template-columns: 1fr; padding: 32px 24px; }
}
.tna-story-cta {
	background: #fff;
	border-top: 1px solid var(--tna-outline);
	padding: 112px 0;
	margin-top: 72px;
	text-align: center;
}

/* Science page */
.tna-science-hero {
	position: relative;
	min-height: min(70vh, 620px);
	display: flex;
	align-items: center;
	padding: 96px 0 64px;
	overflow: hidden;
}
.tna-science-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tna-science-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, var(--tna-bone-cream) 30%, rgba(248, 247, 243, 0.85) 55%, rgba(248, 247, 243, 0.2));
}
.tna-science-hero-inner { position: relative; z-index: 2; }
.tna-science-hero-inner > * { max-width: 42rem; }
.tna-method-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 16px;
	margin-top: 48px;
}
.tna-method-main {
	background: var(--tna-linen);
	border-radius: 0.75rem;
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.tna-method-main h3 {
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--tna-ink);
	margin: 0 0 8px;
}
.tna-method-main p { color: #49473c; max-width: 28rem; margin: 0; }
.tna-method-foot { display: flex; align-items: center; gap: 16px; margin-top: 32px; color: var(--tna-primary); }
.tna-method-foot .material-symbols-outlined { font-size: 36px; }
.tna-method-foot i { flex-grow: 1; height: 1px; background: var(--tna-outline); }
.tna-method-iso {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.tna-method-side {
	background: var(--tna-wood-bark);
	color: var(--tna-bone-cream);
	border-radius: 0.75rem;
	padding: 32px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.tna-method-side .material-symbols-outlined { font-size: 60px; color: var(--tna-sapling-lime); margin-bottom: 16px; }
.tna-method-side h3 {
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 8px;
}
.tna-method-side p { font-size: 14px; opacity: 0.8; margin: 0; }
@media (max-width: 900px) {
	.tna-method-grid { grid-template-columns: 1fr; }
}
.tna-studies-panel {
	background: var(--tna-surface-low);
	border-radius: 1.5rem;
	padding: 48px;
}
.tna-studies-sub { color: var(--tna-secondary); margin: 8px 0 32px; }
.tna-studies-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tna-study-card {
	background: rgba(248, 247, 243, 0.7);
	border: 1px solid var(--tna-outline);
	border-radius: 0.75rem;
	padding: 24px;
	transition: border-color 0.2s, transform 0.2s;
}
.tna-study-card:hover { border-color: var(--tna-primary); transform: translateY(-4px); }
.tna-study-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.tna-study-date {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tna-secondary);
}
.tna-study-card h3 {
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--tna-deep-forest);
	margin: 0 0 8px;
}
.tna-study-card > p { font-size: 14px; line-height: 1.6; color: var(--tna-secondary); margin: 0 0 24px; }
.tna-study-stats { display: flex; align-items: center; gap: 16px; }
.tna-study-stats > div { text-align: center; }
.tna-study-stats > div + div { border-left: 1px solid var(--tna-outline); padding-left: 16px; }
.tna-study-stats strong { display: block; font-size: 20px; color: var(--tna-primary); }
.tna-study-stats span {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	color: #747970;
}
@media (max-width: 900px) {
	.tna-studies-panel { padding: 24px; }
	.tna-studies-grid { grid-template-columns: 1fr; }
}
.tna-experts {
	background: var(--tna-deep-forest);
	color: var(--tna-bone-cream);
	padding: 96px 0;
	margin-top: 48px;
	text-align: center;
}
.tna-experts h2 {
	font-family: "DM Sans", sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 8px;
}
.tna-experts-sub { color: #b2ceaa; max-width: 36rem; margin: 0 auto 48px; }
.tna-experts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.tna-expert img {
	width: 192px;
	height: 192px;
	object-fit: cover;
	border-radius: 9999px;
	border: 4px solid rgba(230, 255, 132, 0.2);
	margin-bottom: 24px;
	transition: border-color 0.3s;
}
.tna-expert:hover img { border-color: var(--tna-sapling-lime); }
.tna-expert h3 {
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 4px;
}
.tna-expert-role {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tna-sapling-lime);
	margin: 0 0 16px;
}
.tna-expert > p:last-child { font-size: 14px; line-height: 1.6; opacity: 0.8; padding: 0 16px; margin: 0; }
@media (max-width: 900px) {
	.tna-experts-grid { grid-template-columns: 1fr; }
}
.tna-results-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	text-align: left;
}
.tna-result-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 1.5rem;
	padding: 32px;
}
.tna-result-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}
.tna-result-head img {
	width: 64px;
	height: 64px;
	border-radius: 9999px;
	object-fit: cover;
	border: 2px solid var(--tna-sapling-lime);
	flex-shrink: 0;
}
.tna-result-head h3 {
	font-family: "DM Sans", sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 2px;
}
.tna-result-head span { font-size: 14px; color: var(--tna-sapling-lime); }
.tna-result-card > p {
	font-size: 15px;
	line-height: 1.7;
	opacity: 0.9;
	margin: 0;
}
@media (max-width: 900px) {
	.tna-results-grid { grid-template-columns: 1fr; }
}

.tna-science-cta {
	background: #50694b;
	color: #cbe7c2;
	border-radius: 2rem;
	padding: 48px;
	text-align: center;
}
.tna-science-cta h2 {
	font-family: "DM Sans", sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 16px;
}
.tna-science-cta > p { max-width: 42rem; margin: 0 auto 32px; }
.tna-btn-lime {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--tna-sapling-lime);
	color: var(--tna-deep-forest) !important;
	padding: 16px 32px;
	border-radius: 0.5rem;
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
	transition: opacity 0.2s;
}
.tna-btn-lime:hover { opacity: 0.9; }
.tna-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid #fff;
	color: #fff !important;
	padding: 16px 32px;
	border-radius: 0.5rem;
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
	transition: background 0.2s;
}
.tna-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* FAQs */
.tna-faq-hero { padding: 80px 0 24px; text-align: center; }
.tna-faq-search { position: relative; max-width: 28rem; margin: 0 auto; }
.tna-faq-search .material-symbols-outlined {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #747970;
}
.tna-faq-search input {
	width: 100%;
	padding: 16px 16px 16px 52px;
	background: #fff;
	border: 1px solid var(--tna-outline);
	border-radius: 0.75rem;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.tna-faq-search input:focus {
	border-color: var(--tna-primary);
	box-shadow: 0 0 0 2px rgba(57, 81, 53, 0.2);
}
.tna-faq-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 64px; }
.tna-faq-cat {
	display: block;
	background: var(--tna-surface);
	padding: 32px;
	border-radius: 1rem;
	border: 1px solid transparent;
	text-decoration: none;
	transition: border-color 0.3s;
}
.tna-faq-cat.is-linen { background: var(--tna-linen); }
.tna-faq-cat:hover { border-color: var(--tna-primary); }
.tna-faq-cat-icon {
	width: 48px;
	height: 48px;
	background: var(--tna-primary);
	color: #fff;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}
.tna-faq-cat h3 {
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--tna-deep-forest);
	margin: 0 0 8px;
}
.tna-faq-cat p { font-size: 14px; color: var(--tna-secondary); margin: 0; }
@media (max-width: 900px) {
	.tna-faq-cats { grid-template-columns: 1fr; }
}
.tna-faq-group { margin-bottom: 48px; scroll-margin-top: 96px; }
.tna-faq-group-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.tna-faq-group-head h2 {
	font-family: "DM Sans", sans-serif;
	font-size: 32px;
	font-weight: 600;
	color: var(--tna-deep-forest);
	margin: 0;
	white-space: nowrap;
}
.tna-faq-group-head i { flex-grow: 1; height: 1px; background: var(--tna-outline); }
.tna-faq {
	background: #fff;
	border: 1px solid var(--tna-outline);
	border-radius: 0.75rem;
	margin-bottom: 16px;
	overflow: hidden;
}
.tna-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 24px;
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	color: var(--tna-deep-forest);
	transition: background 0.2s;
}
.tna-faq summary::-webkit-details-marker { display: none; }
.tna-faq summary:hover { background: var(--tna-bone-cream); }
.tna-faq summary .material-symbols-outlined {
	color: var(--tna-primary);
	transition: transform 0.3s;
	flex-shrink: 0;
}
.tna-faq[open] summary .material-symbols-outlined { transform: rotate(180deg); }
.tna-faq-body { padding: 0 24px 24px; color: var(--tna-secondary); }
.tna-faq-body p { margin: 0 0 16px; }
.tna-faq-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.tna-faq-days > div { background: var(--tna-bone-cream); border-radius: 0.5rem; padding: 12px; }
.tna-faq-days strong { display: block; color: var(--tna-primary); }
.tna-faq-days span { font-size: 12px; }
.tna-faq-days > div.is-full { background: var(--tna-primary); }
.tna-faq-days > div.is-full strong, .tna-faq-days > div.is-full span { color: #fff; }
@media (max-width: 600px) {
	.tna-faq-days { grid-template-columns: 1fr 1fr; }
}
.tna-support-cta {
	background: var(--tna-deep-forest);
	color: #fff;
	border-radius: 1.5rem;
	padding: 48px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	position: relative;
	overflow: hidden;
	margin-top: 32px;
}
.tna-support-cta::after {
	content: "";
	position: absolute;
	right: -80px;
	bottom: -80px;
	width: 256px;
	height: 256px;
	background: var(--tna-primary);
	border-radius: 9999px;
	opacity: 0.3;
}
.tna-support-cta h2 {
	font-family: "DM Sans", sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 12px;
}
.tna-support-cta > div:first-child { max-width: 36rem; }
.tna-support-cta p { opacity: 0.9; margin: 0; }
.tna-support-buttons { display: flex; flex-wrap: wrap; gap: 16px; position: relative; z-index: 1; }

/* Testimonials page */
.tna-featured-grid { margin-top: 48px; }
.tna-result-card.is-light {
	background: #fff;
	border: 1px solid var(--tna-outline);
}
.tna-result-card.is-light .tna-result-head h3 { color: var(--tna-deep-forest); }
.tna-result-card.is-light .tna-result-head span { color: var(--tna-primary); }
.tna-result-card.is-light > p { color: var(--tna-secondary); opacity: 1; }
.tna-result-card.is-light .tna-result-head img { border-color: var(--tna-primary); }
.tna-hc-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}
.tna-hc-card {
	margin: 0;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
	background: var(--tna-bone-cream);
}
.tna-hc-card img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.tna-hc-card:hover img { transform: scale(1.04); }
@media (max-width: 900px) {
	.tna-hc-gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.tna-hc-gallery { grid-template-columns: 1fr; }
}

/* Second testimonial (homepage) */
.tna-testimonial-section { padding: 0 0 24px; }
.tna-testimonial {
	display: flex;
	gap: 24px;
	align-items: center;
	background: var(--tna-secondary-container, #e4dfd0);
	border-radius: 1.5rem;
	padding: 40px;
	max-width: 900px;
	margin: 0 auto;
}
.tna-testimonial img {
	width: 88px;
	height: 88px;
	border-radius: 9999px;
	object-fit: cover;
	flex-shrink: 0;
	border: 3px solid #fff;
}
.tna-testimonial p {
	font-style: italic;
	color: var(--tna-deep-forest);
	margin: 0 0 16px;
	line-height: 1.7;
}
.tna-testimonial-by strong { color: var(--tna-deep-forest); display: block; }
.tna-testimonial-by span { font-size: 14px; color: var(--tna-secondary); }
@media (max-width: 700px) {
	.tna-testimonial { flex-direction: column; text-align: center; padding: 28px 24px; }
}

/* Cross-links between sections and pages */
.tna-more-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
	font-weight: 700;
	color: var(--tna-primary) !important;
	text-decoration: none;
	transition: gap 0.2s;
}
.tna-more-link:hover { gap: 14px; }
.tna-more-link .material-symbols-outlined { font-size: 20px; }
.tna-more-link.is-lime { color: var(--tna-sapling-lime) !important; }
.tna-more-link.is-center { display: flex; justify-content: center; margin-top: 48px; }

/* Trial page */
.tna-trial-note { margin-top: 16px; font-size: 14px; color: var(--tna-secondary); }
.tna-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 48px;
}
.tna-step {
	background: #fff;
	border: 1px solid var(--tna-outline);
	border-radius: 1rem;
	padding: 32px;
	position: relative;
}
.tna-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 9999px;
	background: var(--tna-primary);
	color: #fff;
	font-family: "DM Sans", sans-serif;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 24px;
}
.tna-step h3 {
	font-family: "DM Sans", sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: var(--tna-deep-forest);
	margin: 0 0 8px;
}
.tna-step p { color: var(--tna-secondary); font-size: 15px; margin: 0; }
@media (max-width: 900px) {
	.tna-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.tna-steps { grid-template-columns: 1fr; }
}
.tna-trial-offers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	scroll-margin-top: 96px;
}
.tna-offer-card {
	background: #fff;
	border: 1px solid var(--tna-outline);
	border-radius: 1.5rem;
	padding: 40px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.tna-offer-card.is-featured {
	border: 2px solid var(--tna-primary);
	box-shadow: 0 20px 25px -5px rgba(57, 81, 53, 0.15);
}
.tna-offer-card h3 {
	font-family: "DM Sans", sans-serif;
	font-size: 28px;
	font-weight: 700;
	color: var(--tna-deep-forest);
	margin: 16px 0 4px;
}
.tna-offer-price { color: var(--tna-secondary); margin: 0 0 24px; }
.tna-offer-price strong { color: var(--tna-primary); }
.tna-offer-card ul { list-style: none; margin: 0 0 32px; padding: 0; flex-grow: 1; }
.tna-offer-card li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
	color: var(--tna-ink);
}
.tna-offer-card li .material-symbols-outlined { color: var(--tna-primary); font-size: 22px; }
.tna-offer-note { font-size: 13px; color: var(--tna-secondary); margin: 12px 0 0; }
@media (max-width: 900px) {
	.tna-trial-offers { grid-template-columns: 1fr; }
	.tna-offer-card { padding: 24px; }
}