/* Directo — deferred styles: everything below the hero. Tokens live in critical.css. */

/* Section furniture */
.directo-section__title { text-align: center; margin-bottom: 0.75rem; }
.directo-section__lead { text-align: center; color: var(--directo-muted-fg); font-size: 1.05rem; max-width: 40rem; margin-inline: auto; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.directo-section__foot { color: var(--directo-muted-fg); font-size: 0.9rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.directo-features, .directo-pricing { background: var(--directo-muted); }
.directo-features { border-block: 1px solid var(--directo-border); }

.directo-card {
	background: var(--directo-card);
	border: 1px solid var(--directo-border);
	border-radius: var(--directo-radius-2xl);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	box-shadow: var(--directo-shadow-sm);
}

.directo-tint--violet { background: var(--directo-tint-violet); color: var(--directo-tint-violet-fg); }
.directo-tint--coral { background: var(--directo-tint-coral); color: var(--directo-tint-coral-fg); }
.directo-tint--mint { background: var(--directo-tint-mint); color: var(--directo-tint-mint-fg); }
.directo-tint--sky { background: var(--directo-tint-sky); color: var(--directo-tint-sky-fg); }
.directo-tint--amber { background: var(--directo-tint-amber); color: var(--directo-tint-amber-fg); }

.directo-badge {
	display: inline-block; padding: 0.15rem 0.7rem; border-radius: 999px;
	background: var(--directo-tint-amber); color: var(--directo-tint-amber-fg);
	font-size: 0.75rem; font-weight: 700;
}
.directo-badge--brand { background: var(--directo-gradient); color: #fff; }

/* How it works */
.directo-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .directo-steps__list { grid-template-columns: repeat(3, 1fr); } }
.directo-steps__item {
	position: relative; padding: 1.5rem;
	background: var(--directo-card); border: 1px solid var(--directo-border);
	border-radius: var(--directo-radius-2xl); box-shadow: var(--directo-shadow-sm);
}
.directo-steps__number {
	position: absolute; inset-inline-end: 1.25rem; top: 1.25rem;
	font-size: 2.5rem; font-weight: 900; line-height: 1; color: var(--directo-tint-violet);
}
.directo-steps__icon {
	display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem;
	border-radius: 1rem; background: var(--directo-gradient); color: #fff;
}
.directo-steps__title { font-size: 1.15rem; margin-bottom: 0.4rem; }
.directo-steps__item p { margin: 0; color: var(--directo-muted-fg); }

/* Features */
.directo-features__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .directo-features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .directo-features__grid { grid-template-columns: repeat(3, 1fr); } }
.directo-feature__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem; margin-bottom: 1rem; }
.directo-feature__title { font-size: 1.1rem; margin-bottom: 0.35rem; }
.directo-feature p { margin: 0; color: var(--directo-muted-fg); }

/* Example flow */
.directo-example__flow { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 60rem) { .directo-example__flow { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.directo-mock {
	margin: 0; background: var(--directo-card); border: 1px solid var(--directo-border);
	border-radius: var(--directo-radius-2xl); box-shadow: var(--directo-shadow-sm); overflow: hidden;
}
.directo-mock__caption { padding: 0.6rem 1rem; font-size: 0.8rem; font-weight: 700; color: var(--directo-muted-fg); background: var(--directo-muted); border-bottom: 1px solid var(--directo-border); }
.directo-mock__post-head, .directo-mock__dm-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; font-size: 0.9rem; }
.directo-mock__post-image {
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(circle at 30% 30%, oklch(1 0 0 / 35%), transparent 40%),
		linear-gradient(135deg, var(--directo-tint-coral), var(--directo-tint-violet) 60%, var(--directo-tint-sky));
}
.directo-mock__post-text { margin: 0; padding: 0.75rem 1rem; font-size: 0.9rem; line-height: 1.6; }
.directo-mock__post-text b, .directo-mock__comments b { font-weight: 800; margin-inline-end: 0.35rem; }
.directo-mock__comments { list-style: none; margin: 0; padding: 0.5rem 1rem 1rem; display: grid; gap: 0.6rem; border-top: 1px solid var(--directo-border); }
.directo-mock__comments li { display: flex; gap: 0.6rem; align-items: center; font-size: 0.88rem; }
.directo-mock__comments p { margin: 0; }
.directo-mock__comment--reply { padding-inline-start: 1.5rem; color: var(--directo-muted-fg); }
.directo-mock__comment--reply .directo-avatar { width: 1.4rem; height: 1.4rem; }
.directo-mock--dm .directo-dm { padding: 0.25rem 1rem 1rem; }
.directo-mock__dm-note { margin: 0; padding: 0.6rem 1rem; font-size: 0.8rem; color: var(--directo-muted-fg); border-top: 1px solid var(--directo-border); }
.directo-example__connector { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.directo-example__rule {
	display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border-radius: 999px;
	background: var(--directo-tint-violet); color: var(--directo-tint-violet-fg); font-size: 0.85rem; font-weight: 700; white-space: nowrap;
}
.directo-example__rule .directo-icon { width: 1.1rem; height: 1.1rem; }
.directo-example__line { width: 2px; height: 2rem; background: linear-gradient(to bottom, var(--directo-primary), var(--directo-coral)); border-radius: 2px; }
@media (min-width: 60rem) { .directo-example__line { height: 3rem; } }

/* Testimonials */
.directo-testimonials__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .directo-testimonials__grid { grid-template-columns: repeat(3, 1fr); } }
.directo-testimonial { display: flex; flex-direction: column; gap: 1rem; }
.directo-testimonial .directo-badge { align-self: flex-start; }
.directo-testimonial__quote { margin: 0; flex: 1; }
.directo-testimonial__quote p { margin: 0; font-size: 1rem; }
.directo-testimonial__quote p::before { content: '«'; }
.directo-testimonial__quote p::after { content: '»'; }
.directo-testimonial__author { display: flex; align-items: center; gap: 0.6rem; }
.directo-testimonial__author span:last-child { display: grid; line-height: 1.4; }
.directo-testimonial__author small { color: var(--directo-muted-fg); font-size: 0.8rem; }

/* Pricing (single free plan) */
.directo-pricing__body { text-align: center; }
.directo-pricing__grid { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 1.25rem; text-align: start; max-width: 40rem; }
.directo-plan { position: relative; display: flex; flex-direction: column; padding-top: clamp(2rem, 4vw, 2.5rem); }
.directo-plan--featured { border-color: transparent; box-shadow: 0 0 0 2px var(--directo-primary), var(--directo-shadow-brand); }
.directo-plan .directo-badge--brand { position: absolute; top: -0.8rem; inset-inline-start: 50%; transform: translateX(50%); white-space: nowrap; font-size: 0.85rem; padding: 0.3rem 1rem; }
.directo-plan__name { font-size: 1.5rem; margin-bottom: 0.15rem; text-align: center; }
.directo-plan__tagline { margin: 0 0 1.25rem; color: var(--directo-muted-fg); font-size: 0.95rem; text-align: center; }
.directo-plan__price { margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.4rem; }
.directo-plan__amount { font-size: clamp(2.25rem, 5vw, 2.75rem); font-weight: 900; line-height: 1; letter-spacing: -0.01em; color: var(--directo-primary); }
.directo-plan__period { color: var(--directo-primary); font-size: 1.35rem; font-weight: 800; }
.directo-plan__features { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.6rem; flex: 1; }
@media (min-width: 36rem) { .directo-plan__features { grid-template-columns: repeat(2, 1fr); column-gap: 1.25rem; } }
.directo-plan__features li { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; }
.directo-plan__features .directo-icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--directo-success); }
.directo-plan__cta { width: 100%; }
.directo-plan__note {
	margin: 1rem 0 0; padding: 0.75rem 1rem; border-radius: var(--directo-radius-lg);
	background: var(--directo-tint-violet); color: var(--directo-tint-violet-fg);
	font-size: 0.85rem; text-align: center; line-height: 1.7;
}

/* FAQ */
.directo-faq__list { max-width: 44rem; margin-inline: auto; display: grid; gap: 0.75rem; }
.directo .directo-faq__item {
	background: var(--directo-card); border: 1px solid var(--directo-border);
	border-radius: var(--directo-radius-lg); padding: 0; margin: 0; overflow: hidden;
}
.directo-faq__item summary {
	cursor: pointer; padding: 1rem 1.25rem; font-weight: 700; list-style: none;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.directo-faq__item summary::-webkit-details-marker { display: none; }
.directo-faq__item summary::after {
	content: ''; flex: none; width: 0.6rem; height: 0.6rem; margin-inline-end: 0.25rem;
	border-right: 2px solid var(--directo-muted-fg); border-bottom: 2px solid var(--directo-muted-fg);
	transform: rotate(45deg); transition: transform 0.2s ease;
}
.directo-faq__item[open] summary::after { transform: rotate(-135deg); }
.directo-faq__item[open] summary { color: var(--directo-primary); }
.directo-faq__item > :not(summary) { padding: 0 1.25rem; }
.directo-faq__item > p:last-child { padding-bottom: 1.25rem; margin: 0; color: var(--directo-muted-fg); }

/* Final CTA */
.directo-cta__card {
	background: var(--directo-gradient); color: #fff; text-align: center;
	border-radius: var(--directo-radius-3xl); padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);
	box-shadow: var(--directo-shadow-brand);
}
.directo-cta__title { color: #fff; }
.directo-cta__lead { color: oklch(1 0 0 / 88%); font-size: 1.05rem; max-width: 36rem; margin-inline: auto; margin-bottom: 1.5rem; }
.directo-cta__note { color: oklch(1 0 0 / 82%); font-size: 0.9rem; max-width: 32rem; margin: 1.25rem auto 0; line-height: 1.8; }
.directo-cta__note b { color: #fff; }

/* Footer */
.directo-footer { border-top: 1px solid var(--directo-border); background: var(--directo-card); margin-top: var(--wp--preset--spacing--50, 2rem); }
.directo-footer__inner { max-width: var(--directo-container); margin-inline: auto; padding: clamp(2rem, 5vw, 3.5rem) 1rem 1.5rem; display: grid; gap: 2rem; }
@media (min-width: 48rem) { .directo-footer__inner { grid-template-columns: 1.2fr 2fr; } }
.directo-footer__tagline { color: var(--directo-muted-fg); max-width: 22rem; margin-top: 1rem; font-size: 0.95rem; }
.directo-footer__nav { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.directo-footer__heading { font-size: 0.95rem; margin-bottom: 0.75rem; }
.directo-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.directo-footer__col a { color: var(--directo-muted-fg); text-decoration: none; font-size: 0.95rem; }
.directo-footer__col a:hover { color: var(--directo-primary); }
.directo-footer__bottom {
	max-width: var(--directo-container); margin-inline: auto; padding: 1rem 1rem 1.5rem;
	border-top: 1px solid var(--directo-border);
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem;
	font-size: 0.85rem; color: var(--directo-muted-fg);
}
.directo-footer__bottom p { margin: 0; }

/* Inner pages */
.directo-page { padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 6vw, 4rem); }
.directo-page__title { margin-bottom: 1rem; }
.directo-page__meta { color: var(--directo-muted-fg); font-size: 0.9rem; }
.directo-page__cover img { border-radius: var(--directo-radius-2xl); }
.directo-lead { font-size: 1.15rem; color: var(--directo-muted-fg); }
.directo-page .wp-block-list { padding-inline-start: 1.25rem; }
.directo-page .wp-block-list li { margin-bottom: 0.5rem; }
.directo-page .wp-block-heading { margin-top: 1.5em; }
.directo-page .directo-pricing, .directo-page .directo-faq { padding-block: 0; background: transparent; }
.directo-posts__item + .directo-posts__item { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--directo-border); }
.directo-404 .wp-block-buttons { margin-bottom: 2rem; }
.directo-search .wp-block-search__inside-wrapper { border-radius: 999px; border: 1px solid var(--directo-border); background: var(--directo-card); padding: 0.25rem; }
.directo-search .wp-block-search__input { border: 0; background: transparent; padding-inline: 1rem; font: inherit; color: inherit; }
.directo-search .wp-block-search__button { border-radius: 999px; }

.directo-contact { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .directo-contact { grid-template-columns: 1fr 1fr; } }
.directo-contact h2 { font-size: 1.15rem; margin-top: 0; }
.directo-contact p { color: var(--directo-muted-fg); }

/* Core block polish */
.wp-block-buttons .wp-block-button__link { text-decoration: none; }
.wp-block-search__button.wp-element-button { padding: 0.5rem 1.25rem; }

@media print {
	.directo-header, .directo-footer, .directo-cta { display: none; }
}