/**
 * Homepage sections.
 *
 * Measurements ported from design-references/TutorAddons Theme.dc.html lines
 * 82–312. Shared pieces (cards, badges, accordion, segmented control) live in
 * main.css; this file only covers layout that is unique to the homepage.
 */

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

.ta-hero {
	border-bottom: 1px solid var(--ta-border);
	background: linear-gradient(180deg, #f7fafd 0%, #fff 100%);
}

.ta-hero__inner {
	display: grid;
	align-items: center;
	gap: clamp(32px, 4vw, 56px);
	padding-block: clamp(44px, 6vw, 84px) clamp(40px, 5vw, 72px);
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.ta-hero__title {
	margin-top: 18px;
	font-size: clamp(34px, 4.4vw, 56px);
	font-weight: 700;
	line-height: 1.06;
}

.ta-hero__title span {
	color: var(--ta-brand);
}

.ta-hero__lede {
	max-width: 520px;
	margin-top: 20px;
	color: #4c5c74;
	font-size: clamp(15px, 1.4vw, 17.5px);
	line-height: 1.65;
}

.ta-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.ta-btn--hero {
	padding: 15px 26px;
	border-radius: 12px;
	font-size: 15px;
}

.ta-btn--hero.ta-btn--primary {
	box-shadow: var(--ta-shadow-cta);
}

.ta-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin: 32px 0 0;
	padding: 0;
	color: var(--ta-text-muted);
	font-size: 13px;
	list-style: none;
}

.ta-hero__facts li::before {
	content: '✓ ';
}

.ta-hero__media {
	aspect-ratio: 4/3;
	border: 1px solid var(--ta-border-button);
	border-radius: var(--ta-radius-panel);
	box-shadow: var(--ta-shadow-image);
}

.ta-hero__media .ta-placeholder__label {
	font-size: 11.5px;
	color: #7a8aa0;
}

/* -------------------------------------------------------------------------
 * Works with
 * ---------------------------------------------------------------------- */

.ta-trust {
	border-bottom: 1px solid var(--ta-border);
	background: var(--ta-surface);
}

.ta-trust__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(18px, 3vw, 40px);
	padding-block: 22px;
}

.ta-trust__label {
	color: var(--ta-text-meta);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Placeholder tiles until real partner logos are supplied. */
.ta-trust__logo {
	display: grid;
	height: 30px;
	min-width: 96px;
	place-items: center;
	border-radius: 7px;
	background: repeating-linear-gradient(135deg, #f4f7fb 0 8px, #ebf0f7 8px 16px);
	color: var(--ta-text-meta);
	font: 10.5px/1 var(--ta-font-mono);
}

/* -------------------------------------------------------------------------
 * Why choose
 * ---------------------------------------------------------------------- */

.ta-benefits {
	background: var(--ta-surface);
	padding-block: clamp(48px, 6vw, 84px);
}

.ta-benefits__grid {
	display: grid;
	gap: 16px;
	margin-top: 40px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.ta-benefit {
	padding: 22px;
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius-card);
	background: #fcfdfe;
}

.ta-benefit__tag {
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border-radius: 11px;
	background: var(--ta-brand-tint);
	color: var(--ta-brand-hover);
	font: 600 15px/1 var(--ta-font-heading);
}

.ta-benefit__title {
	margin: 16px 0 7px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.ta-benefit__body {
	color: var(--ta-text-muted);
	font-size: 13.5px;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Native commerce (dark)
 * ---------------------------------------------------------------------- */

.ta-compare {
	background: var(--ta-dark);
	color: #fff;
	padding-block: clamp(48px, 6vw, 88px);
}

.ta-compare__head {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.ta-compare__head .ta-h2 {
	margin-top: 14px;
	color: #fff;
	font-size: clamp(26px, 3.2vw, 40px);
}

.ta-compare__head .ta-lede {
	margin-top: 14px;
	color: var(--ta-text-on-dark);
}

.ta-compare__grid {
	display: grid;
	gap: 18px;
	margin-top: 44px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ta-compare__card {
	padding: 24px;
	border: 1px solid var(--ta-dark-border);
	border-radius: 16px;
	background: var(--ta-dark-card);
}

.ta-compare__kicker {
	color: var(--ta-accent-soft);
	font: 11px/1 var(--ta-font-mono);
	letter-spacing: 0.06em;
}

.ta-compare__title {
	margin: 12px 0 10px;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

.ta-compare__body {
	color: var(--ta-text-on-dark);
	font-size: 13.5px;
	line-height: 1.7;
}

.ta-compare__bars {
	display: grid;
	gap: 10px;
	margin-top: 20px;
	grid-template-columns: 1fr 1fr;
}

.ta-bar {
	height: 8px;
	margin-bottom: 7px;
	border-radius: var(--ta-radius-pill);
	background: var(--ta-dark-border-strong);
	overflow: hidden;
}

.ta-bar__fill {
	display: block;
	height: 100%;
	border-radius: var(--ta-radius-pill);
}

.ta-bar__fill--woo {
	background: var(--ta-pink);
}

.ta-bar__fill--native {
	background: var(--ta-accent);
}

.ta-bar__label {
	color: var(--ta-text-on-dark-muted);
	font-size: 11px;
}

/* -------------------------------------------------------------------------
 * Featured addons
 * ---------------------------------------------------------------------- */

.ta-featured {
	border-bottom: 1px solid var(--ta-border);
	background: var(--ta-surface-soft);
	padding-block: clamp(48px, 6vw, 84px);
}

.ta-btn--pill {
	padding: 12px 20px;
	border-radius: 10px;
	font-size: 14px;
}

/* -------------------------------------------------------------------------
 * Pricing
 * ---------------------------------------------------------------------- */

.ta-pricing {
	background: var(--ta-surface);
	padding-block: clamp(48px, 6vw, 84px);
}

.ta-container--pricing {
	max-width: 1100px;
}

.ta-pricing .ta-lede--center {
	max-width: 520px;
}

.ta-toggles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
}

.ta-plans {
	display: grid;
	gap: 20px;
	margin-top: 32px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ta-plans[hidden] {
	display: none;
}

.ta-plan {
	position: relative;
	padding: 28px;
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius-panel);
	background: var(--ta-surface);
}

.ta-plan.is-featured {
	border: 2px solid var(--ta-brand);
	background: #f9fcff;
}

.ta-plan__flag {
	position: absolute;
	top: -11px;
	right: 22px;
	padding: 5px 11px;
	border-radius: 7px;
	background: var(--ta-pink);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.ta-plan__name {
	font-size: 22px;
	font-weight: 600;
}

.ta-plan__sites {
	margin-top: 6px;
	color: var(--ta-text-muted);
	font-size: 13.5px;
}

.ta-plan__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 20px 0 4px;
}

.ta-plan__amount {
	font-family: var(--ta-font-heading);
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.ta-plan__period,
.ta-plan__was {
	color: var(--ta-text-meta);
	font-size: 13.5px;
}

.ta-plan__was {
	font-size: 12.5px;
}

.ta-plan__rule {
	height: 1px;
	margin: 20px 0;
	border: 0;
	background: var(--ta-border);
}

.ta-plan__items {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-plan__items li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	color: var(--ta-text-secondary);
	font-size: 13.5px;
}

.ta-plan__items svg {
	flex: none;
	margin-top: 3px;
	color: var(--ta-brand);
}

.ta-btn--plan {
	padding: 14px;
	border-radius: 11px;
	font-size: 14.5px;
}

/* The purchase link is EDD's own markup; keep its wrapper from adding spacing
 * that the design does not have. */
.ta-plan .edd_download_purchase_form,
.ta-plan .edd_purchase_submit_wrapper {
	margin: 24px 0 0;
}

.ta-plan .edd_purchase_submit_wrapper a.ta-btn {
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Testimonials
 * ---------------------------------------------------------------------- */

.ta-testimonials {
	border-block: 1px solid var(--ta-border);
	background: var(--ta-surface-soft);
	padding-block: clamp(44px, 5vw, 72px);
}

.ta-testimonials__grid {
	display: grid;
	gap: 18px;
	margin-top: 34px;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.ta-quote {
	margin: 0;
	padding: 24px;
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius-card);
	background: var(--ta-surface);
}

.ta-quote__stars {
	display: flex;
	gap: 3px;
	margin-bottom: 14px;
	color: var(--ta-star);
	font-size: 14px;
}

.ta-quote__text {
	margin: 0;
	color: var(--ta-text-secondary);
	font-size: 14.5px;
	line-height: 1.7;
}

.ta-quote__author {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 20px;
}

.ta-quote__avatar {
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: 50%;
	background: repeating-linear-gradient(135deg, #f2f6fb 0 6px, #e9eff7 6px 12px);
}

.ta-quote__name,
.ta-quote__role {
	display: block;
}

.ta-quote__name {
	font-size: 13.5px;
	font-weight: 600;
}

.ta-quote__role {
	color: var(--ta-text-meta);
	font-size: 12px;
}

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

.ta-faq {
	background: var(--ta-surface);
	padding-block: clamp(48px, 6vw, 80px);
}

/* -------------------------------------------------------------------------
 * From the blog
 * ---------------------------------------------------------------------- */

.ta-blog {
	border-top: 1px solid var(--ta-border);
	background: var(--ta-surface-soft);
	padding-block: clamp(44px, 5vw, 76px);
}

/* -------------------------------------------------------------------------
 * Newsletter
 * ---------------------------------------------------------------------- */

.ta-newsletter {
	background: var(--ta-dark);
	padding-block: clamp(46px, 5vw, 76px);
	text-align: center;
}

.ta-newsletter .ta-h2 {
	color: #fff;
}

.ta-newsletter .ta-lede {
	max-width: 520px;
	margin-top: 14px;
	color: var(--ta-text-on-dark);
	font-size: 15px;
	line-height: 1.65;
}

.ta-newsletter .ta-lede strong {
	color: #fff;
}

.ta-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 26px;
}

.ta-newsletter__form input[type='email'] {
	flex: 1 1 260px;
	max-width: 340px;
	padding: 14px 16px;
	border: 1px solid #2a3b53;
	border-radius: 11px;
	background: var(--ta-dark-card);
	color: #fff;
	font-family: inherit;
	font-size: 14.5px;
}

.ta-newsletter__form input[type='email']::placeholder {
	color: var(--ta-text-on-dark-muted);
}

.ta-newsletter__form .ta-btn {
	padding: 14px 26px;
}