/*
 * /apply/ landing styles.
 *
 * Every color, spacing, radius, shadow and font value below is declared once as
 * a custom property mirroring .ai/agent-runtime/design_tokens.json (pinned
 * SHA256 1ca4d3e66e97aa0959cde212054b461d247e7406a8b6f07929ecfb2616320dfd) and
 * then referenced by variable. No ad-hoc hex value and no arbitrary spacing
 * number appears anywhere past this block.
 */

.dayche-apply {
	/* color.brand */
	--dayche-brand-primary: #394762;
	--dayche-brand-primary-tint: #6d747f;

	/* color.campaign -- deliberately used for bold, high-contrast accents */
	--dayche-campaign-purple: #5c1b52;
	--dayche-campaign-gold: #f6c511;
	--dayche-campaign-ink: #0e1a2b;
	--dayche-campaign-green: #1b7f5c;

	/* color.semantic */
	--dayche-success: #16a34a;
	--dayche-warning: #ea580c;
	--dayche-danger: #ef4444;
	--dayche-info: #0284c7;

	/* color.neutral */
	--dayche-neutral-0: #ffffff;
	--dayche-neutral-50: #f8fafc;
	--dayche-neutral-100: #f1f5f9;
	--dayche-neutral-200: #e2e8f0;
	--dayche-neutral-300: #cbd5e1;
	--dayche-neutral-400: #94a3b8;
	--dayche-neutral-500: #64748b;
	--dayche-neutral-700: #334155;
	--dayche-neutral-800: #1e293b;
	--dayche-neutral-900: #0f172a;

	/* color.text / border / background */
	--dayche-text-primary: var(--dayche-neutral-800);
	--dayche-text-secondary: var(--dayche-neutral-500);
	--dayche-text-on-brand: var(--dayche-neutral-0);
	--dayche-border: var(--dayche-neutral-200);
	--dayche-surface: var(--dayche-neutral-0);
	--dayche-surface-subtle: var(--dayche-neutral-50);

	/* typography */
	--dayche-font: IRANSans, Vazirmatn, Tahoma, sans-serif;
	--dayche-size-sm: 0.875rem;
	--dayche-size-base: 1rem;
	--dayche-size-lg: 1.125rem;
	--dayche-size-xl: 1.5rem;
	--dayche-size-2xl: 2rem;

	/* spacing */
	--dayche-space-1: 0.25rem;
	--dayche-space-2: 0.5rem;
	--dayche-space-3: 0.75rem;
	--dayche-space-4: 1rem;
	--dayche-space-6: 1.5rem;
	--dayche-space-8: 2rem;

	/* radius + shadow */
	--dayche-radius-sm: 0.375rem;
	--dayche-radius-md: 0.5rem;
	--dayche-radius-lg: 0.75rem;
	--dayche-shadow-card: 0 10px 30px rgba(85, 109, 245, 0.08);

	font-family: var(--dayche-font);
	color: var(--dayche-text-primary);
	background: var(--dayche-surface);
	font-size: var(--dayche-size-base);
	line-height: 1.9;
}

.dayche-apply *,
.dayche-apply *::before,
.dayche-apply *::after {
	box-sizing: border-box;
}

/* The theme's own global stylesheet does not reset [hidden], so the plain
   HTML `hidden` attribute (used by the wizard's JS state machine to hide
   e.g. the back button on question 1) has no effect on its own and the
   theme's default `display` wins -- elements marked hidden stayed visible. */
[hidden] {
	display: none !important;
}

/* The single <main> landmark added in the template is a plain block wrapper
   around the existing content flow -- it adds no spacing of its own and must
   not become an unexpected flex/grid item if the theme's reset ever touches
   the bare `main` element. */
.dayche-apply__main {
	display: block;
}

/* --------------------------------------------------------------- banner */

.dayche-banner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dayche-space-3);
	align-items: center;
	justify-content: center;
	padding: var(--dayche-space-3) var(--dayche-space-4);
	background: var(--dayche-campaign-purple);
	color: var(--dayche-text-on-brand);
	font-size: var(--dayche-size-sm);
}

.dayche-banner__text {
	font-weight: 700;
}

.dayche-banner__countdown {
	padding: var(--dayche-space-1) var(--dayche-space-3);
	border-radius: var(--dayche-radius-sm);
	background: var(--dayche-campaign-gold);
	color: var(--dayche-campaign-ink);
	font-weight: 700;
}

.dayche-banner__link {
	color: inherit;
	text-decoration: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--dayche-space-3);
	align-items: center;
	justify-content: center;
	width: 100%;
}

.dayche-banner__link:hover,
.dayche-banner__link:focus {
	color: inherit;
	text-decoration: none;
}

/* ------------------------------------------------------------------ nav */

/* Wizard focus-mode's own "back to the main page" link, shown above the
 * nav only while the wizard is open -- verified directly against all 4
 * wizard design exports. */
.dayche-back-home {
	display: block;
	padding: var(--dayche-space-3) var(--dayche-space-4);
	color: var(--dayche-text-primary);
	font-size: var(--dayche-size-sm);
	text-decoration: none;
}

.dayche-back-home:hover,
.dayche-back-home:focus {
	text-decoration: underline;
}

/* DMH-APPLY-LANDING-ARTIFACT-PARITY-001 (P2): the approved Claude Design
 * Canvas artifact declares `.site-header{background:var(--dayche-neutral-0);
 * border-bottom:1px solid var(--dayche-border)}` (Main.dc.html line 68) -- the
 * nav is a LIGHT bar. The dark background this rule previously carried was
 * read off the superseded PNG set and is void. Sticky positioning and the
 * z-index the float button already documents against are unchanged. */
.dayche-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--dayche-neutral-0);
	border-bottom: 1px solid var(--dayche-border);
}

/* One flex row -- brand, links, actions -- inside the page's standard
   max-width-72rem inner, matching the artifact's `.site-header .wrap`. */
.dayche-nav__inner {
	display: flex;
	gap: var(--dayche-space-6);
	align-items: center;
	margin: 0 auto;
	padding: var(--dayche-space-3) var(--dayche-space-4);
	max-width: 72rem;
}

/* The bar is light and the site's own logo artwork is dark, so the logo needs
   no panel of its own and never a CSS filter. */
.dayche-nav__brand {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	text-decoration: none;
}

.dayche-nav__brand--text {
	color: var(--dayche-brand-primary);
	font-size: var(--dayche-size-lg);
	font-weight: 800;
}

/* DMH-APPLY-LANDING-ARTIFACT-PARITY-002 (F2): the template no longer filters
   the configured logo by filename, so this rule now has to survive artwork of
   any aspect ratio. The rendered height is pinned, so a tall logo can never
   stretch the nav bar; max-width caps a very wide one so it cannot crowd the
   links out of the row; and object-fit keeps whatever is left undistorted
   instead of squashed. The image carries its own intrinsic width/height
   attributes when the attachment reports them, and `height: auto` is
   deliberately NOT used -- the pinned height is the whole point. */
.dayche-nav__logo {
	display: block;
	width: auto;
	height: 2.125rem;
	max-width: 11rem;
	object-fit: contain;
	object-position: center;
}

.dayche-nav__list {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: var(--dayche-space-6);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--dayche-size-sm);
}

.dayche-nav__link {
	color: var(--dayche-text-primary);
	font-weight: 700;
	text-decoration: none;
}

.dayche-nav__link:hover,
.dayche-nav__link:focus {
	color: var(--dayche-brand-primary);
	text-decoration: underline;
}

/* The artifact keeps this CTA hard against the far edge of the bar, past the
   section links. */
.dayche-nav__item--offer {
	margin-inline-start: auto;
}

.dayche-nav__offer {
	display: inline-block;
	padding: var(--dayche-space-2) var(--dayche-space-4);
	border-radius: var(--dayche-radius-md);
	/* Design uses purple for this campaign button, not gold -- gold stays
	   only on the top announcement bar's own countdown chip (untouched,
	   per this task's non-goals). */
	background: var(--dayche-campaign-purple);
	color: var(--dayche-text-on-brand);
	font-size: var(--dayche-size-sm);
	font-weight: 700;
	text-decoration: none;
}

.dayche-nav__offer:hover,
.dayche-nav__offer:focus {
	color: var(--dayche-text-on-brand);
	text-decoration: none;
	filter: brightness(1.15);
}

.dayche-nav__actions {
	display: flex;
	gap: var(--dayche-space-2);
	align-items: center;
	margin-inline-start: auto;
}

/* DMH-APPLY-LANDING-ARTIFACT-PARITY-002 (F2): the cart and account entries.
   They share the hamburger's 44px square so the three controls read as one
   group and every one of them clears the minimum comfortable touch target --
   they sit in the bar at every width, including mobile, where the links
   themselves have moved into the drawer. `position: relative` is the cart
   badge's containing block. */
.dayche-nav__action {
	position: relative;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-sm);
	background: var(--dayche-neutral-0);
	color: var(--dayche-text-primary);
	text-decoration: none;
}

.dayche-nav__action:hover,
.dayche-nav__action:focus {
	border-color: var(--dayche-brand-primary);
	color: var(--dayche-brand-primary);
	text-decoration: none;
}

/* The count badge is decorative only -- the number is already part of the
   link's accessible name, so this is hidden from assistive technology in the
   markup and exists here purely as the sighted cue. */
.dayche-nav__action-count {
	position: absolute;
	inset-block-start: -7px;
	inset-inline-end: -7px;
	min-width: 20px;
	height: 20px;
	padding: 0 var(--dayche-space-1);
	border-radius: 999px;
	background: var(--dayche-campaign-purple);
	color: var(--dayche-text-on-brand);
	font-size: var(--dayche-size-sm);
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

/* Hamburger: hidden above this file's existing 767px mobile breakpoint,
   exactly as the artifact hides it above 768px. */
.dayche-nav__toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-sm);
	background: var(--dayche-neutral-0);
	cursor: pointer;
}

.dayche-nav__toggle-bar {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--dayche-text-primary);
	transition: transform 0.15s, opacity 0.15s;
}

/* The page's only other scripted motion already honours this preference
   (scrollIntoViewSafely in apply-landing.js); the hamburger's morph does too. */
@media (prefers-reduced-motion: reduce) {
	.dayche-nav__toggle-bar {
		transition: none;
	}
}

/* The artifact's open state turns the three bars into a close (X) glyph. */
.dayche-nav__toggle[aria-expanded="true"] .dayche-nav__toggle-bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.dayche-nav__toggle[aria-expanded="true"] .dayche-nav__toggle-bar:nth-child(2) {
	opacity: 0;
}

.dayche-nav__toggle[aria-expanded="true"] .dayche-nav__toggle-bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.dayche-nav__backdrop {
	position: fixed;
	inset: 0;
	z-index: 1;
	background: rgba(15, 23, 42, 0.35);
}

/* ----------------------------------------------------------------- hero */

.dayche-hero {
	/* Base gradient unchanged; a low-contrast repeating diagonal-line overlay
	   is layered on top (first background layer paints over the second) to
	   match the design's subtle texture without replacing the gradient --
	   restrained on purpose (4% white lines, 12px apart, "نه خیلی چشم‌آزار"). */
	background:
		repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.05) 0,
			rgba(255, 255, 255, 0.05) 1px,
			transparent 1px,
			transparent 12px
		),
		linear-gradient(180deg, var(--dayche-brand-primary), var(--dayche-campaign-ink));
	color: var(--dayche-text-on-brand);
}

.dayche-hero__inner {
	margin: 0 auto;
	padding: var(--dayche-space-8) var(--dayche-space-4);
	max-width: 72rem;
	/* Verified directly against LandingHero@1x.png: every hero element
	   (badge, title, lead, CTAs) is center-aligned, not start-aligned. */
	text-align: center;
}

.dayche-hero__badge {
	display: inline-block;
	margin: 0 0 var(--dayche-space-4);
	padding: var(--dayche-space-1) var(--dayche-space-4);
	border: 1px solid var(--dayche-brand-primary-tint);
	border-radius: 999px;
	font-size: var(--dayche-size-sm);
	color: var(--dayche-neutral-200);
}

.dayche-hero__title {
	/* No color was ever set here -- the theme's own h1 color (specificity 0
	   inheritance loses) rendered near-invisible on this dark gradient
	   (measured contrast ratio 1.35:1, live). Match .dayche-hero's own token. */
	color: var(--dayche-text-on-brand);
	margin: 0 auto var(--dayche-space-4);
	max-width: 44rem;
	font-size: var(--dayche-size-2xl);
	line-height: 1.4;
}

.dayche-hero__lead {
	margin: 0 auto var(--dayche-space-4);
	max-width: 48rem;
	font-size: var(--dayche-size-lg);
	color: var(--dayche-neutral-200);
}

/* The artifact's `.hero-trust-line`: the founding-year sentence as its own
   quiet line between the subtitle and the CTAs, one step down in contrast
   from the lead above it. */
.dayche-hero__trust {
	margin: 0 auto var(--dayche-space-6);
	max-width: 48rem;
	font-size: var(--dayche-size-sm);
	color: var(--dayche-neutral-300);
}

/* DMH-APPLY-LANDING-ARTIFACT-PARITY-002 (F2): human-reported live -- "the
   wizard button and the whole-catalogue button are not aligned with each
   other". The cause is here, not in the markup: the primary CTA is a two-row
   column (button + helper line) while the secondary CTA is a lone button, and
   `align-items: center` centred that lone button against the taller column,
   dropping it roughly half a helper-line below the primary button.
   `flex-start` puts both items' top edges on one line instead, and since both
   buttons are the same .dayche-btn (identical padding, border, font-size and
   line-height) their baselines then coincide too. The helper text is kept --
   it just no longer decides where the secondary button sits. */
.dayche-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: var(--dayche-space-3);
}

/* The primary CTA and its helper line form one column, so the helper stays
   tied to the button it describes (artifact `.hero-cta-primary-wrap`). */
.dayche-hero__cta-primary {
	display: flex;
	flex-direction: column;
	gap: var(--dayche-space-1);
	align-items: center;
}

/* The helper line is the only thing making the primary column taller than the
   row's other item, so the row above reserves no vertical space for it and the
   line simply hangs below the shared button baseline. */
.dayche-hero__cta-helper {
	font-size: var(--dayche-size-sm);
	line-height: 1.5;
	color: var(--dayche-neutral-300);
}

/* ----------------------------------------------------------- trust bar */
/* DMH-APPLY-LANDING-ARTIFACT-PARITY-001 (P1): the artifact's quick trust bar
 * (Main.dc.html .trust-bar/.trust-item, lines 91-96) replaces the older dark
 * three-column facts strip. Per the artifact it is a LIGHT band on the subtle
 * surface with a hairline bottom border -- a quiet separator between the dark
 * hero and the wizard below it, not a second dark block. Full-bleed outer +
 * max-width-72rem inner, the same pattern as .dayche-hero/.dayche-hero__inner
 * and .dayche-level-path elsewhere in this file. */

.dayche-trustbar {
	background: var(--dayche-surface-subtle);
	border-bottom: 1px solid var(--dayche-border);
}

.dayche-trustbar__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--dayche-space-6);
	margin: 0 auto;
	padding: var(--dayche-space-6) var(--dayche-space-4);
	max-width: 72rem;
}

.dayche-trustbar__item {
	display: flex;
	gap: var(--dayche-space-3);
	align-items: center;
	text-align: start;
}

.dayche-trustbar__icon {
	flex-shrink: 0;
	color: var(--dayche-brand-primary);
}

.dayche-trustbar__title {
	display: block;
	font-size: var(--dayche-size-sm);
	font-weight: 700;
	line-height: 1.6;
}

.dayche-trustbar__desc {
	display: block;
	font-size: var(--dayche-size-sm);
	line-height: 1.6;
	color: var(--dayche-text-secondary);
}

/* --------------------------------------------------------------- button */

.dayche-btn {
	display: inline-block;
	padding: var(--dayche-space-3) var(--dayche-space-6);
	border: 2px solid transparent;
	border-radius: var(--dayche-radius-md);
	font-family: inherit;
	font-size: var(--dayche-size-base);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.dayche-btn--primary {
	/* Design uses purple for the campaign primary CTA, not gold -- this is
	   the site's only "primary" button color (no separate hero-only class
	   exists), so the change applies everywhere .dayche-btn--primary is
	   used (hero, wizard, consult, result), matching the design's
	   consistent purple primary-button language. */
	background: var(--dayche-campaign-purple);
	color: var(--dayche-text-on-brand);
}

.dayche-btn--secondary {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.dayche-btn--ghost {
	background: var(--dayche-surface-subtle);
	border-color: var(--dayche-border);
	color: var(--dayche-brand-primary);
	font-size: var(--dayche-size-sm);
	padding: var(--dayche-space-2) var(--dayche-space-4);
}

/* The wizard's own بعدی/مشاهدهٔ‌نتیجه button stays disabled until the
 * current question has a real selection -- no more auto-advance. */
.dayche-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.dayche-btn:focus-visible,
.dayche-chip:focus-visible,
.dayche-nav__link:focus-visible,
.dayche-nav__offer:focus-visible,
.dayche-nav__action:focus-visible,
.dayche-nav__toggle:focus-visible,
.dayche-actionbar__icon:focus-visible,
.dayche-link:focus-visible,
.dayche-wizard__answer:focus-visible {
	outline: 3px solid var(--dayche-info);
	outline-offset: 2px;
}

/* DMH-APPLY-WIZARD-BUTTON-CONTRAST-FIX-001: this class is applied to both
 * real <a> tags (FAQ/outlook/testimonials links) and real <button>
 * elements (the wizard's back/skip/exit/restart controls, apply-landing.js).
 * An <a> has no native chrome, so color+font-weight alone was always
 * enough there -- but a real <button>, unlike an <a>, keeps its native
 * browser/OS background/border/padding unless explicitly reset, so those
 * wizard buttons rendered as a native gray button face with forced blue
 * bold text inside, human-reported live as "font color inconsistent with
 * the button, doesn't display well". This reset is a no-op for every
 * existing <a class="dayche-link"> usage (anchors never had this chrome
 * to begin with). */
.dayche-link {
	border: none;
	padding: 0;
	background: none;
	font: inherit;
	cursor: pointer;
	color: var(--dayche-info);
	font-weight: 700;
}

/* -------------------------------------------------------------- section */

.dayche-section {
	margin: 0 auto;
	padding: var(--dayche-space-8) var(--dayche-space-4);
	max-width: 72rem;
}

.dayche-section__title {
	margin: 0 0 var(--dayche-space-6);
	font-size: var(--dayche-size-xl);
	color: var(--dayche-brand-primary);
	text-align: center;
}

.dayche-section__kicker {
	margin: 0 0 var(--dayche-space-2);
	font-size: var(--dayche-size-sm);
	font-weight: 700;
	color: var(--dayche-campaign-purple);
	text-align: center;
}

.dayche-section__title + .dayche-section__subtitle {
	margin: calc(-1 * var(--dayche-space-4)) 0 var(--dayche-space-6);
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
	text-align: center;
}

.dayche-section--degraded {
	text-align: center;
}

/* ------------------------------------------------------------ explainer */
/* The three-tier "مسیر، گام یا کورس" explainer at the top of #catalog --
 * verified directly against LandingCatalog@1x.png: a centered heading above
 * 3 plain, equal-width white cards, no photos/badges/prices. */

.dayche-explainer__title {
	margin: 0 0 var(--dayche-space-6);
	text-align: center;
	font-size: var(--dayche-size-xl);
	color: var(--dayche-text-primary);
}

.dayche-explainer {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dayche-space-4);
}

.dayche-explainer__card {
	padding: var(--dayche-space-6);
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-lg);
	background: var(--dayche-surface);
}

.dayche-explainer__label {
	margin: 0 0 var(--dayche-space-2);
	font-weight: 700;
	color: var(--dayche-brand-primary);
}

.dayche-explainer__text {
	margin: 0;
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
}

/* Mobile single-column boundary is max-width:767px, NOT 768px -- at exactly
   768px every card grid on the page must still render multi-column (per the
   redesign's per-breakpoint acceptance table). max-width:48rem resolves to
   768px and wrongly caught that exact width. */
@media (max-width: 767px) {
	.dayche-explainer {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------- chip (wizard answer choices) */
/* NOTE: schema v4 removed the catalog's delivery-mode filter chips entirely
 * (the approved design has no such control) -- .dayche-chip below is still
 * live, used only by the wizard's own answer-option buttons. */

.dayche-chip {
	padding: var(--dayche-space-2) var(--dayche-space-4);
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-lg);
	background: var(--dayche-surface);
	color: var(--dayche-text-secondary);
	font-family: inherit;
	font-size: var(--dayche-size-sm);
	cursor: pointer;
}

.dayche-chip.is-active {
	background: var(--dayche-brand-primary);
	border-color: var(--dayche-brand-primary);
	color: var(--dayche-text-on-brand);
	font-weight: 700;
}

/* --------------------------------------------------------------- levels */

.dayche-level {
	margin-bottom: var(--dayche-space-8);
	scroll-margin-top: var(--dayche-space-8);
}

.dayche-level__kicker {
	margin: 0 0 var(--dayche-space-2);
	font-size: var(--dayche-size-sm);
	font-weight: 700;
	color: var(--dayche-campaign-purple);
}

.dayche-level__title {
	margin: 0 0 var(--dayche-space-1);
	font-size: var(--dayche-size-xl);
	color: var(--dayche-text-primary);
}

.dayche-level__subtitle {
	margin: 0 0 var(--dayche-space-6);
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
}

.dayche-level__empty {
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
}

/* On-dark variants, used only inside .dayche-level-path (see below). */
.dayche-level__kicker--on-dark {
	color: var(--dayche-campaign-gold);
}

.dayche-level__title--on-dark,
.dayche-level__subtitle--on-dark,
.dayche-level__empty--on-dark {
	color: var(--dayche-text-on-brand);
}

.dayche-level__subtitle--on-dark {
	color: var(--dayche-neutral-300);
}

/* ---------------------------------------------------------- level: path */
/* مسیر is its own top-level, full-bleed dark section -- distinct from
 * گام/کورس -- per the approved design. Follows the same outer-full-bleed +
 * inner-max-width-72rem pattern already established by .dayche-hero and
 * .dayche-trustbar elsewhere in this file. */

.dayche-level-path {
	background: linear-gradient(180deg, var(--dayche-brand-primary), var(--dayche-campaign-ink));
}

.dayche-level-path__inner {
	margin: 0 auto;
	padding: var(--dayche-space-8) var(--dayche-space-4);
	max-width: 72rem;
}

.dayche-grid {
	display: grid;
	gap: var(--dayche-space-6);
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

/* مسیر renders as its own explicit 2-column grid (not the shared auto-fill
 * grid used by گام/کورس), so its cards sit side-by-side, compact, per the
 * approved design (LandingCatalog@1x.png) -- collapses to 1 column on
 * narrow viewports, matching the responsive breakpoint pattern already used
 * elsewhere in this stylesheet (.dayche-explainer, .dayche-fallback__cards,
 * .dayche-outlook__cards, .dayche-footer__grid). */
[data-grid="path"] {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
	[data-grid="path"] {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------- pre-wizard picks */
/* DMH-APPLY-LANDING-ARTIFACT-PARITY-001 (P5): the artifact's default,
 * pre-wizard picks block (Main.dc.html .results-grid, line 104) -- a band on
 * the subtle surface holding one row of the SAME card component the catalog
 * uses, so it follows the same full-bleed outer + max-width-72rem inner
 * pattern as .dayche-section--instructors. F3 moved the block itself to below
 * the catalog; the reasoning is recorded at the section in the template. The
 * band keeps the neighbours it had under the wizard, mirrored: one plain
 * section on one side (گام/کورس now, the catalog explainer before) and one
 * subtle band on the other (benefits now, the wizard before), so the page's
 * subtle/plain alternation reads exactly as it did.
 *
 * An explicit column count rather than the shared grid's auto-fill: the
 * artifact draws its picks in one row, whereas auto-fill at this container
 * width would fit four tracks and leave the cards narrower than the design.
 * The artifact weights its first column 2fr; that is not carried over, because
 * P3 deliberately gave all three levels ONE card anatomy with no per-card
 * emphasis variant, and a wider first track would reintroduce exactly that.
 * Collapses to a single column at the artifact's own 1024px step (line 211),
 * before the page's card breakpoint.
 *
 * DMH-APPLY-LANDING-ARTIFACT-PARITY-002 (F3): the count is no longer fixed at
 * the artifact's three. popular_picks() returns as many products as actually
 * carry review evidence and no more -- today two, because only two products in
 * the whole catalogue have a single published review between them -- so a
 * hardcoded three-track row reserved a track with nothing in it, and the empty
 * third column read as a rendering fault. The track count now follows the
 * number of cards the template really printed (its [data-picks-count]), capped
 * at the artifact's three so a fuller catalogue still wraps into the designed
 * row instead of squeezing. Nothing about which products are chosen changed
 * here: the grid adapts to the evidence, never the other way round. */

.dayche-section--picks {
	background: var(--dayche-surface-subtle);
	max-width: none;
}

.dayche-picks {
	margin: 0 auto;
	max-width: 72rem;
}

.dayche-picks__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dayche-picks__grid[data-picks-count="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dayche-picks__grid[data-picks-count="1"] {
	grid-template-columns: minmax(0, 1fr);
}

/* One column below the artifact's 1024px step, whatever the count -- the
   count-driven rules above are more specific than a bare class, so they have to
   be named here too or they would keep their desktop tracks at mobile widths.
   Same single-column end state every other card grid in this file collapses to. */
@media (max-width: 1024px) {
	.dayche-picks__grid,
	.dayche-picks__grid[data-picks-count] {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------- cards
 *
 * DMH-APPLY-LANDING-ARTIFACT-PARITY-001 (P3): one compact text card for all
 * three levels, matching Main.dc.html's `.product-card` -- bordered, rounded,
 * a subtle shadow, a column flex with the artifact's own gap, the badge row on
 * top and the footer pinned to the bottom. The photo block, its aspect-ratio
 * hotfix, the overlay badge, the review line and the گام two-column row layout
 * are all gone with the PNG-derived design they belonged to; the artifact
 * carries no image and no rating inside any product card.
 */

.dayche-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-lg);
	background: var(--dayche-surface);
	box-shadow: var(--dayche-shadow-card);
}

/* مسیر keeps only its heavier brand border and larger title -- the one
 * emphasis the artifact still gives the top of the hierarchy. Its cards sit in
 * the compact 2-column [data-grid="path"] grid above. */
.dayche-card--path {
	border-color: var(--dayche-brand-primary);
	border-width: 2px;
}

.dayche-card--path .dayche-card__title {
	font-size: var(--dayche-size-xl);
}

/* پروژه (DMH-APPLY-CONTENT-TAXONOMY-CATALOG-001) shares the course grid's
 * shared `.product-card` anatomy with no extra emphasis of its own -- only a
 * subtle accent border so it reads as its own distinct unit inside a grid it
 * otherwise shares with کورس. */
.dayche-card--project {
	border-color: var(--dayche-campaign-gold);
}

.dayche-card__badge--sm {
	padding: var(--dayche-space-1) var(--dayche-space-2);
	font-size: 0.75rem;
}

.dayche-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--dayche-space-2);
	padding: var(--dayche-space-4);
}

.dayche-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dayche-space-2);
	margin: 0;
	font-size: var(--dayche-size-sm);
}

.dayche-card__level {
	padding: var(--dayche-space-1) var(--dayche-space-3);
	border-radius: var(--dayche-radius-sm);
	background: var(--dayche-brand-primary);
	color: var(--dayche-text-on-brand);
	font-weight: 700;
}

.dayche-card__chip {
	padding: var(--dayche-space-1) var(--dayche-space-3);
	border-radius: var(--dayche-radius-sm);
	background: var(--dayche-neutral-100);
	color: var(--dayche-neutral-700);
}

.dayche-card__badge {
	padding: var(--dayche-space-1) var(--dayche-space-3);
	border-radius: var(--dayche-radius-sm);
	/* Design uses purple for the catalog discount badge, not gold (also
	   covers .dayche-card__badge--sm, a plain size modifier of this base
	   rule with no color of its own). */
	background: var(--dayche-campaign-purple);
	color: var(--dayche-text-on-brand);
	font-weight: 700;
}

.dayche-card__title {
	margin: 0;
	font-size: var(--dayche-size-lg);
	line-height: 1.6;
}

.dayche-card__title a {
	color: var(--dayche-text-primary);
	text-decoration: none;
}

.dayche-card__title a:hover,
.dayche-card__title a:focus {
	text-decoration: underline;
}

/* The artifact's `.pos` role: one curated positioning line, resolved from the
 * product's own short description. The clamp is an overflow guard for a long
 * source sentence at narrow widths -- the card never renders a machine-trimmed
 * excerpt in its place. */
.dayche-card__pos {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* The artifact's `.for-whom` role: "مناسب: ..." / "پیش‌نیاز: ...", one size
 * smaller than the positioning line above it, exactly as Main.dc.html sets
 * .pos at .8125rem and .for-whom at .75rem. */
.dayche-card__audience {
	margin: 0;
	color: var(--dayche-text-secondary);
	font-size: 0.75rem;
}

.dayche-card__footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dayche-space-3);
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--dayche-space-3);
	border-top: 1px solid var(--dayche-border);
}

.dayche-card__price {
	margin: 0;
	font-weight: 700;
	color: var(--dayche-campaign-green);
}

/* The artifact's two-part price block: a muted "شروع از" on its own line,
 * then the amount beneath it. */
.dayche-card__price-from {
	display: block;
	color: var(--dayche-text-secondary);
	font-size: 0.75rem;
	font-weight: 400;
}

.dayche-card__price-value {
	display: block;
	font-size: var(--dayche-size-base);
}

.dayche-card__price del {
	margin-inline-end: var(--dayche-space-2);
	color: var(--dayche-text-secondary);
	font-weight: 400;
}

.dayche-card__cta {
	color: var(--dayche-brand-primary);
	font-size: var(--dayche-size-sm);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.dayche-card__cta:hover,
.dayche-card__cta:focus {
	text-decoration: underline;
}

/* Below the file's 767px breakpoint the footer left-aligns and lets the CTA
 * wrap under the price block: spreading the two apart leaves neither enough
 * room on a 360px-wide card. */
@media (max-width: 767px) {
	.dayche-card__footer {
		align-items: flex-start;
		justify-content: flex-start;
		gap: var(--dayche-space-2);
	}
}

/* --------------------------------------------------------------- pager */

.dayche-pager {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dayche-space-2);
	margin-top: var(--dayche-space-6);
}

.dayche-pager__btn {
	min-width: 2.5rem;
	padding: var(--dayche-space-2) var(--dayche-space-3);
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-sm);
	background: var(--dayche-surface);
	color: var(--dayche-brand-primary);
	font-family: inherit;
	cursor: pointer;
}

.dayche-pager__btn.is-active {
	background: var(--dayche-brand-primary);
	border-color: var(--dayche-brand-primary);
	color: var(--dayche-text-on-brand);
	font-weight: 700;
}

/* گام's "نمایش بیشتر"/"نمایش کمتر" reveal-more toggle -- reuses the same
 * .dayche-pager slot as the numbered pager above, one level at a time. */
.dayche-pager__toggle {
	padding: var(--dayche-space-2) var(--dayche-space-4);
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-sm);
	background: var(--dayche-surface);
	color: var(--dayche-brand-primary);
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
}

.dayche-pager__toggle:hover,
.dayche-pager__toggle:focus-visible {
	border-color: var(--dayche-brand-primary);
}

/* کورس's prev/next row-page arrows, flanking the numbered buttons. */
.dayche-pager__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: var(--dayche-space-2) var(--dayche-space-3);
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-sm);
	background: var(--dayche-surface);
	color: var(--dayche-brand-primary);
	font-family: inherit;
	font-size: var(--dayche-size-lg);
	line-height: 1;
	cursor: pointer;
}

.dayche-pager__arrow:hover:not(:disabled),
.dayche-pager__arrow:focus-visible {
	border-color: var(--dayche-brand-primary);
}

.dayche-pager__arrow:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ------------------------------------------------------------ cat-tabs */
/* DMH-APPLY-CONTENT-TAXONOMY-CATALOG-001: the 6-category topic taxonomy's
 * tabs, sitting directly above the کورس/پروژه shared grid. Reuses the same
 * tokens the numbered pager buttons already use (.dayche-pager__btn), so an
 * active tab and an active page button read as the same kind of control. */

.cat-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dayche-space-2);
	margin-bottom: var(--dayche-space-6);
}

.cat-tab {
	display: inline-flex;
	align-items: center;
	gap: var(--dayche-space-2);
	padding: var(--dayche-space-2) var(--dayche-space-4);
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-sm);
	background: var(--dayche-surface);
	color: var(--dayche-brand-primary);
	font-family: inherit;
	font-size: var(--dayche-size-sm);
	cursor: pointer;
}

.cat-tab:hover,
.cat-tab:focus-visible {
	border-color: var(--dayche-brand-primary);
}

.cat-tab.is-active {
	background: var(--dayche-brand-primary);
	border-color: var(--dayche-brand-primary);
	color: var(--dayche-text-on-brand);
	font-weight: 700;
}

.cat-tab__count {
	padding: 0 var(--dayche-space-2);
	border-radius: var(--dayche-radius-sm);
	background: var(--dayche-neutral-100);
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
}

.cat-tab.is-active .cat-tab__count {
	background: rgba(255, 255, 255, 0.2);
	color: var(--dayche-text-on-brand);
}

/* -------------------------------------------------------------- wizard */

.dayche-section--wizard {
	background: var(--dayche-surface-subtle);
	max-width: none;
}

.dayche-wizard-entry,
.dayche-wizard {
	margin: 0 auto;
	max-width: 44rem;
	padding: var(--dayche-space-6);
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-lg);
	background: var(--dayche-surface);
}

.dayche-wizard-entry__title {
	margin: 0 0 var(--dayche-space-2);
	font-size: var(--dayche-size-lg);
	color: var(--dayche-brand-primary);
}

.dayche-wizard-entry__lead {
	margin: 0 0 var(--dayche-space-4);
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
}

.dayche-wizard {
	margin-top: var(--dayche-space-6);
}

/* DMH-APPLY-LANDING-ARTIFACT-PARITY-002 (F6): the wizard's expand-downward
 * reveal, and the exact reverse on close.
 *
 * Only apply-landing.js's own open/close path adds these two classes, and it
 * removes them again the moment the motion is over -- so the panel spends its
 * whole normal life on the plain .dayche-wizard geometry above, with no
 * transition attached and nothing clipped by overflow.
 *
 * The panel's own padding and top margin collapse WITH the height. Animating
 * height alone would leave a ~48px band of padding behind at the end of the
 * collapse (height is border-box here, so it cannot shrink past the padding),
 * which reads as a stall rather than a close.
 *
 * The 260ms below is duplicated as WIZARD_MOTION_MS in apply-landing.js; the
 * two must stay in step. */
.dayche-wizard.is-animating {
	overflow: hidden;
	transition:
		height 260ms cubic-bezier(0.2, 0, 0.2, 1),
		margin-top 260ms cubic-bezier(0.2, 0, 0.2, 1),
		padding-top 260ms cubic-bezier(0.2, 0, 0.2, 1),
		padding-bottom 260ms cubic-bezier(0.2, 0, 0.2, 1),
		opacity 200ms ease;
}

.dayche-wizard.is-collapsed {
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
}

/* A visitor who asked for reduced motion gets the state change with no motion
 * at all. The JS declines to animate for them too, so this is belt and braces
 * -- it also covers the preference being switched on mid-transition. */
@media (prefers-reduced-motion: reduce) {
	.dayche-wizard.is-animating {
		transition: none;
	}
}

.dayche-wizard__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dayche-space-3);
	align-items: center;
	justify-content: space-between;
}

.dayche-wizard__progress {
	margin: 0;
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
}

/* Progress dots: the current question's dot is a wide filled pill, every
 * other question is a small circle -- verified directly against all 4
 * wizard design exports (Main/WizardQ2-4). */
.dayche-wizard__dots {
	display: flex;
	gap: var(--dayche-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dayche-wizard__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--dayche-radius-sm);
	background: var(--dayche-neutral-200);
	transition: width 200ms ease, background-color 200ms ease;
}

.dayche-wizard__dot.is-active {
	width: 1.5rem;
	background: var(--dayche-brand-primary);
}

/* F6: an answered question is now told apart from one still ahead. The design
 * exports only ever showed a first run (nothing behind the visitor yet), so
 * this adds the missing third state rather than contradicting them: brand
 * colour, so progress reads as a filled-up run, but still the small dot, so the
 * wide pill stays unambiguously "you are here". */
.dayche-wizard__dot.is-done {
	background: var(--dayche-brand-primary);
	opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
	.dayche-wizard__dot {
		transition: none;
	}
}

.dayche-wizard__question {
	margin: var(--dayche-space-4) 0 var(--dayche-space-1);
	font-size: var(--dayche-size-xl);
	color: var(--dayche-text-primary);
}

.dayche-wizard__subtitle {
	margin: 0 0 var(--dayche-space-6);
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
}

.dayche-wizard__answers-label {
	margin: 0 0 var(--dayche-space-2);
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
	font-weight: 700;
}

.dayche-wizard__answers {
	display: flex;
	flex-direction: column;
	gap: var(--dayche-space-3);
	margin: 0 0 var(--dayche-space-4);
	padding: 0;
	list-style: none;
}

/* Q4's answers render as horizontal chips (title only, no description),
 * distinct from Q1-Q3's stacked full-width rows -- verified directly
 * against WizardQ4@1x.png. */
.dayche-wizard__answers--chips {
	flex-direction: row;
	flex-wrap: wrap;
}

.dayche-wizard__answer {
	display: flex;
	align-items: center;
	gap: var(--dayche-space-3);
	width: 100%;
	padding: var(--dayche-space-4);
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-md);
	background: var(--dayche-surface);
	color: var(--dayche-text-primary);
	font-family: inherit;
	font-size: var(--dayche-size-base);
	text-align: start;
	cursor: pointer;
}

.dayche-wizard__answer:hover,
.dayche-wizard__answer:focus-within {
	border-color: var(--dayche-brand-primary);
	background: var(--dayche-neutral-50);
}

.dayche-wizard__answer.is-checked {
	border-color: var(--dayche-brand-primary);
	border-width: 2px;
}

/* The radio input itself is real (keyboard/screen-reader operable), just
 * visually replaced by the circle span next to it -- never display:none,
 * which would break keyboard access; visually hidden instead. */
.dayche-wizard__answer input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.dayche-wizard__answer-radio {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid var(--dayche-border);
	border-radius: 50%;
	background: var(--dayche-surface);
}

.dayche-wizard__answer.is-checked .dayche-wizard__answer-radio {
	border-color: var(--dayche-brand-primary);
	background: var(--dayche-brand-primary);
}

.dayche-wizard__answer-copy {
	display: flex;
	flex-direction: column;
	gap: var(--dayche-space-1);
}

.dayche-wizard__answer-title {
	font-weight: 700;
}

.dayche-wizard__answer-desc {
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
}

/* Chip variant (Q4): no radio circle, no description -- a plain bordered
 * pill that highlights on selection, per the design. */
.dayche-wizard__answer--chip {
	width: auto;
	justify-content: center;
}

.dayche-wizard__answer--chip .dayche-wizard__answer-radio {
	display: none;
}

.dayche-wizard__answer--chip.is-checked .dayche-wizard__answer-title {
	color: var(--dayche-brand-primary);
}

/* Wizard "calculating" state (apply-landing.js submit()): one visually
 * hidden role=status line for screen readers, one visible decorative
 * rotating message, and a decorative spinner. The JS already skips the
 * spinner/rotation under prefers-reduced-motion; the reduced-motion block
 * below is the CSS-side guarantee (per the redesign technical checklist:
 * prefers-reduced-motion for the calculating spinner and any other
 * animation). Only transform/opacity animate. */
.dayche-wizard__sr-status {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.dayche-wizard__calculating-message {
	margin: var(--dayche-space-4) 0 0;
	text-align: center;
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
}

.dayche-wizard__spinner {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	margin: var(--dayche-space-4) auto 0;
	border: 3px solid var(--dayche-border);
	border-top-color: var(--dayche-brand-primary);
	border-radius: 50%;
	animation: dayche-wizard-spin 0.9s linear infinite;
}

@keyframes dayche-wizard-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dayche-wizard__spinner {
		display: none;
		animation: none;
	}
}

.dayche-wizard__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dayche-space-3);
	align-items: center;
	justify-content: space-between;
}

.dayche-wizard__actions-start {
	display: flex;
	gap: var(--dayche-space-4);
	align-items: center;
}

.dayche-result {
	display: flex;
	flex-direction: column;
	gap: var(--dayche-space-6);
}

.dayche-result__badge {
	display: inline-block;
	margin: 0 0 var(--dayche-space-2);
	padding: var(--dayche-space-1) var(--dayche-space-3);
	border-radius: var(--dayche-radius-lg);
	background: var(--dayche-surface-subtle);
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
}

.dayche-result__heading-title {
	margin: 0 0 var(--dayche-space-6);
	font-size: var(--dayche-size-xl);
	color: var(--dayche-text-primary);
}

.dayche-result__card {
	padding: var(--dayche-space-6);
	border: 2px solid var(--dayche-brand-primary);
	border-radius: var(--dayche-radius-lg);
}

.dayche-result__card--upgrade {
	border-color: var(--dayche-border);
	border-width: 1px;
}

.dayche-result__label {
	display: inline-block;
	margin: 0 0 var(--dayche-space-2);
	padding: var(--dayche-space-1) var(--dayche-space-3);
	border-radius: var(--dayche-radius-lg);
	background: var(--dayche-surface-subtle);
	font-size: var(--dayche-size-sm);
	font-weight: 700;
	color: var(--dayche-campaign-purple);
}

.dayche-result__payment {
	margin: var(--dayche-space-1) 0 0;
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
}

.dayche-result__title {
	margin: 0 0 var(--dayche-space-2);
	font-size: var(--dayche-size-lg);
}

.dayche-result__facts {
	margin: 0 0 var(--dayche-space-4);
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
}

.dayche-result__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dayche-space-3);
}

.dayche-result__mismatch {
	padding: var(--dayche-space-4);
	border: 1px solid var(--dayche-warning);
	border-radius: var(--dayche-radius-md);
	background: var(--dayche-neutral-50);
}

.dayche-result__mismatch-title {
	margin: 0 0 var(--dayche-space-2);
	font-weight: 700;
	color: var(--dayche-warning);
}

.dayche-result__why {
	color: var(--dayche-neutral-700);
	font-size: var(--dayche-size-sm);
}

.dayche-result__toggle {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dayche-space-4);
	align-items: center;
	padding: var(--dayche-space-4);
	border-radius: var(--dayche-radius-md);
	background: var(--dayche-neutral-100);
	font-size: var(--dayche-size-sm);
}

/* ------------------------------------------------------------ fallback */
/* The no-real-match screen -- verified directly against Fallback@1x.png:
 * a centered icon+headline+body, then 2 equal-width cards. */

.dayche-fallback {
	text-align: center;
}

.dayche-fallback__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto var(--dayche-space-4);
	border-radius: 50%;
	background: var(--dayche-surface-subtle);
	font-size: var(--dayche-size-xl);
}

.dayche-fallback__title {
	margin: 0 0 var(--dayche-space-2);
	font-size: var(--dayche-size-xl);
	color: var(--dayche-text-primary);
}

.dayche-fallback__body {
	margin: 0 auto var(--dayche-space-6);
	max-width: 36rem;
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
}

.dayche-fallback__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--dayche-space-4);
	margin-bottom: var(--dayche-space-4);
	text-align: start;
}

.dayche-fallback__card {
	padding: var(--dayche-space-6);
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-lg);
	background: var(--dayche-surface);
}

.dayche-fallback__card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 0 var(--dayche-space-3);
	border-radius: 50%;
	background: var(--dayche-surface-subtle);
	font-size: var(--dayche-size-lg);
}

.dayche-fallback__card-title {
	margin: 0 0 var(--dayche-space-2);
	font-weight: 700;
	color: var(--dayche-text-primary);
}

.dayche-fallback__card-body {
	margin: 0 0 var(--dayche-space-3);
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
}

@media (max-width: 767px) {
	.dayche-fallback__cards {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------------- faq */

.dayche-faq__item {
	margin-bottom: var(--dayche-space-3);
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-md);
	background: var(--dayche-surface);
}

.dayche-faq__question {
	padding: var(--dayche-space-4);
	font-weight: 700;
	color: var(--dayche-brand-primary);
	cursor: pointer;
}

.dayche-faq__answer {
	padding: 0 var(--dayche-space-4) var(--dayche-space-4);
}

.dayche-faq__source {
	margin: var(--dayche-space-2) 0 0;
	font-size: var(--dayche-size-sm);
	color: var(--dayche-text-secondary);
}

/* --------------------------------------------------------------- trust */

/* DMH-APPLY-TRUST-TESTIMONIALS-VISUAL-FIX-001: both blocks below are
 * width-capped narrower than #trust's own 72rem, but had no inline margin
 * to actually center them within that extra space -- they sat flush
 * against the RTL-start edge, human-reported live as "not centered, a
 * visual glitch". margin-inline:auto centers the BOX only; body copy text
 * itself is intentionally left start-aligned (not text-align:center),
 * which would hurt paragraph readability. */
.dayche-trust__body {
	max-width: 52rem;
	margin-inline: auto;
	color: var(--dayche-neutral-700);
}

/* DMH-APPLY-LANDING-ARTIFACT-PARITY-002 (F6): the "ادامهٔ داستان دایکه" link.
 * It follows start-aligned body copy that is itself capped at 52rem and
 * centred as a box, so an inline link inherited that start edge and hung off
 * the corner of the paragraph above it. Centring the paragraph it now sits in
 * centres the link without stretching its hit area across the section, which
 * is what making the <a> itself display:block would have done. */
.dayche-trust__more {
	margin: var(--dayche-space-4) 0 0;
	text-align: center;
}

/* The featured real-testimonial quote inside "پیشینه" -- reuses the same
 * data as the dedicated #testimonials section (its first entry), never a
 * separate/invented quote. */
.dayche-trust__quote {
	max-width: 52rem;
	margin: var(--dayche-space-6) auto 0;
	padding: var(--dayche-space-6);
	border-radius: var(--dayche-radius-lg);
	background: var(--dayche-campaign-ink);
	color: var(--dayche-text-on-brand);
}

.dayche-trust__quote-text {
	margin: 0 0 var(--dayche-space-3);
	font-size: var(--dayche-size-lg);
}

.dayche-trust__quote-meta {
	color: var(--dayche-neutral-300);
	font-size: var(--dayche-size-sm);
}

/* --------------------------------------------------------------- outlook */

.dayche-outlook {
	margin-top: var(--dayche-space-8);
}

.dayche-outlook__cards {
	display: grid;
	gap: var(--dayche-space-6);
	grid-template-columns: repeat(2, 1fr);
}

.dayche-outlook__card {
	padding: var(--dayche-space-6);
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-lg);
	background: var(--dayche-surface);
}

.dayche-outlook__title {
	margin: 0 0 var(--dayche-space-3);
	font-size: var(--dayche-size-lg);
	color: var(--dayche-brand-primary);
}

.dayche-outlook__body {
	margin: 0 0 var(--dayche-space-4);
	color: var(--dayche-text-secondary);
}

@media (max-width: 767px) {
	.dayche-outlook__cards {
		grid-template-columns: 1fr;
	}
}

/* #testimonials gets the same full-section dark treatment as the other
   dark bands on the page (.dayche-final-cta/.dayche-footer) -- previously
   only .dayche-testimonial--featured was dark and the rest of the section
   (kicker/title/subtitle + non-featured cards) sat on the plain white
   section background. Non-featured cards stay light so they read as cards
   against the now-dark section, not the reverse.

   .dayche-final-cta/.dayche-footer get their full-bleed dark background
   "for free" because they are their own unconstrained block (no max-width),
   unlike #testimonials, which IS a .dayche-section (max-width: 72rem;
   margin: 0 auto per that shared rule) -- coloring it directly would only
   paint the centered 72rem content box, leaving the real page background
   visible on both sides at wide viewports (confirmed via code_review
   CR-001). box-shadow with a 100vmax spread reliably paints past the
   element's own box on both inline sides regardless of its real content
   width; clip-path keeps that oversized shadow from ever triggering
   horizontal overflow/scroll.

   DMH-APPLY-TRUST-TESTIMONIALS-VISUAL-FIX-001: this section sits directly
   above .dayche-footer in page flow, and both originally painted the exact
   same var(--dayche-campaign-ink) -- with no border/gap between two
   full-bleed same-color blocks, they read as one continuous dark area,
   human-reported live as "backgrounds merge together, not beautiful".
   var(--dayche-brand-primary) is a distinct, still-dark, already-used-
   elsewhere-on-this-page brand tone (nav/hero), giving a real visible seam
   at the section boundary while .dayche-footer keeps its own darker ink
   tone as the page's final anchor color. Confirmed with a real rendered
   screenshot (headless Chrome against the live install), not just a
   computed contrast-ratio check -- see this task's own handoff.json. */
#testimonials {
	background: var(--dayche-brand-primary);
	box-shadow: 0 0 0 100vmax var(--dayche-brand-primary);
	clip-path: inset(0 -100vmax);
	color: var(--dayche-text-on-brand);
}

#testimonials .dayche-section__kicker {
	color: var(--dayche-campaign-gold);
}

#testimonials .dayche-section__title {
	color: var(--dayche-text-on-brand);
}

#testimonials .dayche-section__title + .dayche-section__subtitle {
	color: var(--dayche-neutral-300);
}

.dayche-testimonials__list {
	display: grid;
	gap: var(--dayche-space-6);
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	margin: var(--dayche-space-6) 0 0;
	padding: 0;
	list-style: none;
}

.dayche-testimonial {
	padding: var(--dayche-space-6);
	border-inline-start: 4px solid var(--dayche-campaign-gold);
	border-radius: var(--dayche-radius-md);
	background: var(--dayche-surface-subtle);
	/* Explicit light-card text color so cards stay readable on a dark
	   section ambient color (see #testimonials above) without relying on
	   inheritance from the page's default (light-section) context. */
	color: var(--dayche-text-primary);
}

.dayche-testimonial--featured {
	margin: var(--dayche-space-6) 0 0;
	padding: var(--dayche-space-8);
	border-inline-start-width: 6px;
	background: var(--dayche-campaign-ink);
	color: var(--dayche-text-on-brand);
}

.dayche-testimonial--featured .dayche-testimonial__quote {
	color: var(--dayche-text-on-brand);
	font-size: var(--dayche-size-lg);
}

.dayche-testimonial--featured .dayche-testimonial__author {
	color: var(--dayche-text-on-brand);
}

.dayche-testimonial--featured .dayche-testimonial__product {
	color: var(--dayche-campaign-gold);
}

.dayche-testimonial__quote {
	margin: 0 0 var(--dayche-space-3);
	color: var(--dayche-neutral-700);
}

.dayche-testimonial__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dayche-space-2);
	margin: 0;
	font-size: var(--dayche-size-sm);
}

.dayche-testimonial__author {
	font-weight: 700;
}

/* --------------------------------------------------------- consultation */

.dayche-consult {
	margin-top: var(--dayche-space-8);
	padding: var(--dayche-space-6);
	border: 1px dashed var(--dayche-brand-primary-tint);
	border-radius: var(--dayche-radius-lg);
	background: var(--dayche-surface-subtle);
}

/* When this is the ONLY thing inside a .dayche-section (the "paths"
 * placement, standing in for the old full-bleed .dayche-cta-bar), the
 * section's own top padding already provides the spacing -- no extra gap
 * stacked on top. */
.dayche-section > .dayche-consult:first-child {
	margin-top: 0;
}

.dayche-consult__title {
	margin: 0 0 var(--dayche-space-4);
	font-weight: 700;
	color: var(--dayche-brand-primary);
}

/* Optional supporting line (only the "paths" placement passes $subtitle) --
 * mirrors .dayche-section__title + .dayche-section__subtitle's own
 * margin-collapse pattern elsewhere in this file. */
.dayche-consult__title + .dayche-consult__subtitle {
	margin: calc(-1 * var(--dayche-space-2)) 0 var(--dayche-space-4);
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
}

.dayche-consult__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dayche-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dayche-consult__link {
	display: flex;
	gap: var(--dayche-space-2);
	align-items: center;
	padding: var(--dayche-space-3) var(--dayche-space-4);
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-md);
	background: var(--dayche-surface);
	color: var(--dayche-text-primary);
	text-decoration: none;
}

.dayche-consult__link:hover,
.dayche-consult__link:focus {
	border-color: var(--dayche-brand-primary);
}

.dayche-consult__value {
	color: var(--dayche-text-secondary);
	font-size: var(--dayche-size-sm);
}

/* DMH-APPLY-LANDING-ARTIFACT-PARITY-002 (F1): the .dayche-float* rules that
   sat here styled this page's OWN floating consultation pill, which duplicated
   the site's own floating consultation button (.dayche-call-btn, printed
   sitewide by dayche-call-center.php). The pill and its markup are gone, so
   these rules went with them -- the site's button is now the page's one
   floating consultation entry point. The only thing this file still says about
   it is the mobile-action-bar clearance at the bottom of this file. */

/* -------------------------------------------------------------- benefits */
/* DMH-APPLY-LANDING-ARTIFACT-PARITY-001 (P4): the artifact's "با ثبت‌نام چه
 * چیزی می‌گیری؟" row (Main.dc.html .benefit-row/.benefit-item, lines 143-145).
 * A five-across strip of icon-above-label items on the subtle surface, so the
 * section is a full-bleed band with a max-width-72rem inner -- the same
 * outer/inner pattern .dayche-section--wizard and .dayche-trustbar already
 * use. */

.dayche-section--benefits {
	background: var(--dayche-surface-subtle);
	max-width: none;
}

.dayche-benefits {
	margin: 0 auto;
	max-width: 72rem;
}

.dayche-benefits__row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--dayche-space-4);
	text-align: center;
}

.dayche-benefits__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dayche-space-2);
}

.dayche-benefits__icon {
	color: var(--dayche-brand-primary);
}

.dayche-benefits__label {
	font-size: var(--dayche-size-sm);
	line-height: 1.7;
	color: var(--dayche-text-secondary);
}

/* --------------------------------------------------------- payment plans */
/* DMH-APPLY-LANDING-ARTIFACT-PARITY-001 (P4): the artifact's plan grid
 * (Main.dc.html .plan-grid/.plan-card/.plan-tag, lines 148-154). The cards
 * themselves are admin-curated copy -- this file styles them and states no
 * figure of its own. */

.dayche-plans__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--dayche-space-4);
}

.dayche-plan {
	padding: var(--dayche-space-4);
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-md);
	background: var(--dayche-surface);
}

.dayche-plan__title {
	margin: 0 0 var(--dayche-space-1);
	font-size: var(--dayche-size-base);
	line-height: 1.8;
	color: var(--dayche-text-primary);
}

.dayche-plan__desc {
	margin: 0;
	font-size: var(--dayche-size-sm);
	line-height: 1.7;
	color: var(--dayche-text-secondary);
}

/* The artifact's two tag kinds -- a discount and a surcharge -- must stay
   visually distinct from each other (Main.dc.html .plan-tag.disc/.plan-tag.inc).
   The artifact tints each pill's background with a raw hex this design system
   has no token for, so both are drawn instead as an outlined pill on the subtle
   surface, keeping the distinction in hue while every color stays a token. The
   surcharge kind takes campaign-purple rather than the artifact's rose: it is
   the nearest token hue AND, unlike the warning/danger tokens, it clears 4.5:1
   against this background at the pill's small type size. */

.dayche-plan__tag {
	display: inline-block;
	margin-inline-start: var(--dayche-space-2);
	padding: 0 var(--dayche-space-2);
	border: 1px solid currentColor;
	border-radius: 999px;
	background: var(--dayche-surface-subtle);
	font-size: var(--dayche-size-sm);
	font-weight: 700;
	line-height: 1.9;
	vertical-align: middle;
}

.dayche-plan__tag--discount {
	color: var(--dayche-campaign-green);
}

.dayche-plan__tag--increase {
	color: var(--dayche-campaign-purple);
}

/* ------------------------------------------------------------ instructors */
/* DMH-APPLY-LANDING-ARTIFACT-PARITY-001 (P4): the artifact's instructor grid
 * (Main.dc.html .instructor-grid/.instructor-card/.instructor-ph, lines
 * 157-161) -- centered cards, each a neutral round silhouette above a real
 * name. On the subtle surface, so it follows the same full-bleed outer +
 * max-width inner pattern as the benefits band above. */

.dayche-section--instructors {
	background: var(--dayche-surface-subtle);
	max-width: none;
}

.dayche-instructors {
	margin: 0 auto;
	max-width: 72rem;
}

.dayche-instructors__carousel-wrap {
	display: flex;
	align-items: center;
	gap: var(--dayche-space-3);
	position: relative;
	width: 100%;
}

.dayche-instructors__nav {
	display: none;
}

.dayche-instructors.is-carousel-ready .dayche-instructors__nav {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--dayche-border);
	border-radius: 50%;
	background: var(--dayche-surface);
	color: var(--dayche-text-primary);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease, opacity 150ms ease;
	z-index: 2;
}

.dayche-instructors.is-carousel-ready .dayche-instructors__nav:hover:not(:disabled) {
	border-color: var(--dayche-brand-primary);
	color: var(--dayche-brand-primary);
	transform: scale(1.05);
}

.dayche-instructors.is-carousel-ready .dayche-instructors__nav:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

.dayche-instructors__viewport {
	flex: 1 1 0;
	min-width: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: var(--dayche-space-2) 0;
}

.dayche-instructors__viewport::-webkit-scrollbar {
	display: none;
}

.dayche-instructors__track {
	display: flex;
	align-items: stretch;
	gap: var(--dayche-space-4);
	margin: 0;
	padding: 0;
	width: max-content;
}

.dayche-instructor {
	display: flex;
	flex-direction: column;
	text-align: center;
	width: 17rem;
	flex: 0 0 17rem;
	padding: var(--dayche-space-5) var(--dayche-space-4);
	border: 1px solid var(--dayche-border);
	border-radius: var(--dayche-radius-lg);
	background: var(--dayche-surface);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
	scroll-snap-align: start;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.dayche-instructor:hover {
	border-color: var(--dayche-brand-primary);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.dayche-instructor__photo {
	display: block;
	flex: none;
	width: 4.75rem;
	height: 4.75rem;
	margin: 0 auto var(--dayche-space-3);
	border-radius: 50%;
	background: var(--dayche-neutral-200);
	object-fit: cover;
}

.dayche-instructor__avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 4.75rem;
	height: 4.75rem;
	margin: 0 auto var(--dayche-space-3);
	border-radius: 50%;
	background: var(--dayche-neutral-200);
	color: var(--dayche-neutral-500);
}

.dayche-instructor__name {
	margin: 0 0 var(--dayche-space-1);
	font-size: var(--dayche-size-base);
	font-weight: 700;
	line-height: 1.6;
	color: var(--dayche-text-primary);
}

.dayche-instructor__role {
	margin: 0 0 var(--dayche-space-2);
	font-size: var(--dayche-size-sm);
	line-height: 1.6;
	color: var(--dayche-text-secondary);
}

.dayche-instructor__bio {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	font-size: var(--dayche-size-xs);
	line-height: 1.8;
	color: var(--dayche-text-secondary);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

/* The artifact steps the benefits row down to two columns below 1024px
   (Main.dc.html line 212) before collapsing it to one at the page's own mobile
   breakpoint -- five labels side by side are unreadable on a tablet. The plan
   and instructor grids need no tier of their own: both are auto-fit grids in
   the artifact too, so they reflow on their own. */

@media (max-width: 1024px) {
	.dayche-benefits__row {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.dayche-benefits__row {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------- client strip */
/* DMH-APPLY-LANDING-ARTIFACT-PARITY-001 (P5): the artifact's organisation
 * logo strip (Main.dc.html .client-strip/.client-track/.client-more, lines
 * 164-167). Styled here unconditionally; whether it is ever published is the
 * admin toggle's business, and while that is off the template emits no markup
 * for any of these selectors to match.
 *
 * Two departures from the artifact, both because it draws a static mockup of
 * a strip that is really wider than the page:
 *
 *  - It sets overflow:hidden on a max-content track, which simply CLIPS the
 *    last organisations off the page. This scrolls instead, so every logo is
 *    reachable at every width -- the row never overflows the page, and it
 *    never silently drops an organisation either.
 *  - Its decorative edge mask (a fade over the outer 6% of each side) is not
 *    carried over: on a track that can rest at a scroll extreme, that fade
 *    lands ON the first or last logo rather than on empty space beyond it.
 *
 * DMH-APPLY-LANDING-SETTINGS-004 (H3) turns that scrolling row into a real
 * carousel, against two live complaints: the marks were small relative to
 * everything else on the page, and the browser's raw scrollbar sat under them.
 *
 * The scroll container SURVIVES -- it is still what moves, and it is still
 * focusable -- because it is the whole no-JS story. What changed is that its
 * scrollbar chrome is hidden and real buttons drive it instead -- previous,
 * next, and the stop/start control WCAG 2.2.2 asks for -- so the affordance is
 * now the page's own 44px icon button rather than a system scrollbar. All
 * three share one .dayche-clients__nav rule and need nothing of their own
 * beyond it. Those buttons are display:none until apply-landing.js adds
 * .is-carousel-ready to the root, exactly as .dayche-nav does for its toggle:
 * a control that cannot act must not be painted. */

/* A plain flex row, so the previous control (first in source order) takes the
   inline-start edge and the next control the inline-end one -- which follows
   the writing direction by itself, with no left/right written anywhere. */
.dayche-clients {
	display: flex;
	align-items: center;
	gap: var(--dayche-space-3);
}

.dayche-clients__nav {
	display: none;
}

/* Deliberately the same circle as .dayche-actionbar__icon -- 44px, hairline
   border, surface fill -- so the controls this section introduces read as
   the icon buttons this page already has rather than as a new widget. */
.dayche-clients.is-carousel-ready .dayche-clients__nav {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--dayche-border);
	border-radius: 50%;
	background: var(--dayche-surface);
	color: var(--dayche-text-primary);
	cursor: pointer;
}

.dayche-clients__nav:hover:not([disabled]) {
	border-color: var(--dayche-brand-primary);
	color: var(--dayche-brand-primary);
}

.dayche-clients__nav:focus-visible {
	outline: 3px solid var(--dayche-info);
	outline-offset: 2px;
}

/* A track that fits its box entirely has nothing to advance to, so the
   controls say so instead of clicking into nothing (apply-landing.js sets
   this, and rechecks it on resize). */
.dayche-clients__nav[disabled] {
	opacity: 0.4;
	cursor: default;
}

.dayche-clients__viewport {
	/* min-width:0 or this flex item refuses to shrink below its max-content
	   track and pushes the next control off the page. */
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
	/* Deliberately NOT scroll-snapped. Mandatory snapping can refuse to rest at
	   the scroll extreme, which would mean the end of the track never becomes
	   flush with the end of the box -- and that flush state is exactly the
	   signal apply-landing.js uses to decide it has reached the last
	   organisation and should wrap round to the first. The controls compute
	   their own alignment from real box positions, so they land on a logo
	   edge with or without snapping. */
	/* The reported eyesore. The region stays a real, scrollable, focusable
	   scroll container -- only the chrome goes. scroll-behavior is left alone
	   on purpose: apply-landing.js passes it per call, because a smooth
	   declared here would also smooth the jumps it makes for a visitor who
	   asked for reduced motion. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.dayche-clients__viewport::-webkit-scrollbar {
	display: none;
}

.dayche-clients__track {
	display: flex;
	align-items: center;
	gap: var(--dayche-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
	width: max-content;
	min-width: 100%;
}

.dayche-clients__item {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}

/* Nearly double the previous 34px, which is what "too small next to the rest
   of the page" asked for. height + width:auto keeps every mark's own aspect
   ratio; the max-width only caps the widest wordmarks, and object-fit:contain
   makes that cap scale them down instead of squashing them. */
.dayche-clients__logo {
	display: block;
	height: 64px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
	filter: grayscale(1) opacity(0.7);
}

.dayche-clients__more {
	white-space: nowrap;
	font-size: var(--dayche-size-sm);
	color: var(--dayche-text-secondary);
}

/* The viewport is focusable so it can still be scrolled from the keyboard, so
   that focus has to be visible -- the row carries no link of its own to
   inherit a focus style from. */
.dayche-clients__viewport:focus-visible {
	outline: 2px solid var(--dayche-brand-primary);
	outline-offset: var(--dayche-space-1);
}

/* Narrower gap and shorter marks below the page's mobile breakpoint, so the
   strip needs materially less horizontal travel on a phone. The marks stay
   well above the 28px they used to shrink to here. */
@media (max-width: 767px) {
	.dayche-clients {
		gap: var(--dayche-space-2);
	}

	.dayche-clients__track {
		gap: var(--dayche-space-6);
	}

	.dayche-clients__logo {
		height: 46px;
		max-width: 120px;
	}
}

/* ------------------------------------------------------------ final CTA */
/* DMH-APPLY-LANDING-ARTIFACT-PARITY-001 (P1): the artifact's closing call to
 * action (Main.dc.html .final-cta, lines 195-197) -- a full-bleed dark band
 * between the FAQ and the footer, centered, on the same brand->ink gradient
 * the hero already uses. Same outer-full-bleed + max-width-72rem inner
 * pattern as .dayche-hero/.dayche-level-path.
 *
 * It sits directly above .dayche-footer, which paints flat
 * var(--dayche-campaign-ink); the gradient's own ink end would merge into it
 * with no visible seam (the exact problem
 * DMH-APPLY-TRUST-TESTIMONIALS-VISUAL-FIX-001 fixed for #testimonials), so
 * this band keeps the same hairline top/bottom borders that separate it from
 * the light FAQ above and the dark footer below. */

.dayche-final-cta {
	background: linear-gradient(180deg, var(--dayche-brand-primary), var(--dayche-campaign-ink));
	border-top: 1px solid var(--dayche-brand-primary-tint);
	border-bottom: 1px solid var(--dayche-brand-primary-tint);
	color: var(--dayche-text-on-brand);
}

.dayche-final-cta__inner {
	margin: 0 auto;
	padding: var(--dayche-space-8) var(--dayche-space-4);
	max-width: 72rem;
	text-align: center;
}

.dayche-final-cta__title {
	/* The theme's own h2 color wins over inheritance here (specificity 0), so
	   this band's text color is set explicitly, exactly as .dayche-hero__title
	   already has to do on the same gradient. */
	margin: 0 0 var(--dayche-space-2);
	font-size: var(--dayche-size-xl);
	line-height: 1.4;
	color: var(--dayche-text-on-brand);
}

.dayche-final-cta__lead {
	margin: 0 auto var(--dayche-space-6);
	max-width: 44rem;
	color: var(--dayche-neutral-200);
}

.dayche-final-cta__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--dayche-space-3);
}

/* ---------------------------------------------------------------- footer */

/* New: verified directly against 7 separate design exports (Main/Q1,
   LandingTrust, Result, WizardQ2-4, Fallback) -- a real, consistent 4-column
   dark footer appears on every page. The old .dayche-escape (a single
   "دیدن فروشگاه کامل دایکه" link) it replaces is gone from the template. */

.dayche-footer {
	background: var(--dayche-campaign-ink);
	color: var(--dayche-neutral-300);
}

.dayche-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--dayche-space-8);
	margin: 0 auto;
	padding: var(--dayche-space-8) var(--dayche-space-4);
	max-width: 72rem;
}

.dayche-footer__brand {
	display: flex;
	align-items: center;
	gap: var(--dayche-space-2);
	margin: 0 0 var(--dayche-space-3);
	color: var(--dayche-text-on-brand);
	font-size: var(--dayche-size-lg);
	font-weight: 700;
}

/* The footer logo is the site's own configured logo <img>. The footer is dark,
   the logo artwork is dark -- so it sits on its own small light panel here
   (the same fix accepted for the header nav logo). CSS filter manipulation
   of the logo (brightness/invert) is forbidden and must never be added.
   DMH-APPLY-LANDING-ARTIFACT-PARITY-002 (F2): the panel's height is pinned and
   the artwork is contained inside it, so a logo of any aspect ratio keeps this
   column's rhythm instead of stretching the panel. */
.dayche-footer__logo {
	display: block;
	width: auto;
	height: 2rem;
	max-width: 11rem;
	padding: var(--dayche-space-2) var(--dayche-space-3);
	border-radius: var(--dayche-radius-md);
	background: var(--dayche-neutral-0);
	object-fit: contain;
	object-position: center;
}

.dayche-footer__tagline {
	margin: 0;
	font-size: var(--dayche-size-sm);
	line-height: 1.8;
}

.dayche-footer__heading {
	margin: 0 0 var(--dayche-space-3);
	color: var(--dayche-text-on-brand);
	font-weight: 700;
}

.dayche-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--dayche-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--dayche-size-sm);
}

.dayche-footer__list a {
	color: inherit;
	text-decoration: none;
}

.dayche-footer__list a:hover,
.dayche-footer__list a:focus-visible {
	text-decoration: underline;
}

.dayche-footer__list--channels li {
	display: flex;
}

.dayche-footer__list--channels a {
	display: flex;
	gap: var(--dayche-space-2);
	align-items: center;
}

.dayche-footer__bottom {
	border-top: 1px solid var(--dayche-brand-primary-tint);
	padding: var(--dayche-space-4);
	text-align: center;
	font-size: var(--dayche-size-sm);
}

.dayche-footer__bottom p {
	margin: 0;
}

/* DMH-APPLY-LANDING-ARTIFACT-PARITY-001 (P6, responsive review). The artifact
   steps this grid to two columns below 1024px (Main.dc.html line 212) before
   collapsing it to one at the mobile tier; only the collapse to one was in
   place. Four tracks separated by a 2rem gap leave roughly 160px per column at
   768px, which is narrower than the contact column's own email address -- the
   one place on this page where a track's min-content can exceed its share and
   push the row wider than the viewport. */
@media (max-width: 1024px) {
	.dayche-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* -------------------------------------------------------------- mobile */

@media (max-width: 767px) {
	.dayche-footer__grid {
		grid-template-columns: 1fr;
	}

	.dayche-hero__inner {
		padding: var(--dayche-space-6) var(--dayche-space-4);
	}

	.dayche-hero__title {
		font-size: var(--dayche-size-xl);
	}

	/* The artifact drops the trust bar to two columns below 768px
	   (Main.dc.html line 217) rather than to a single stacked column. */
	.dayche-trustbar__inner {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--dayche-space-4);
	}

	.dayche-hero__cta-primary,
	.dayche-hero__ctas .dayche-btn,
	.dayche-final-cta__ctas .dayche-btn,
	.dayche-result__ctas .dayche-btn {
		flex: 1 1 100%;
	}

	/* --- mobile header + drawer (artifact: Mobile-Header-States.dc.html) --- */

	.dayche-nav__inner {
		gap: var(--dayche-space-3);
	}

	/* No-JS fallback: without the drawer script the links simply wrap inside
	   the bar, exactly as they did before this phase. */
	.dayche-nav__list {
		gap: var(--dayche-space-3);
	}

	/* DMH-APPLY-LANDING-ARTIFACT-PARITY-002 (F2): with the links in the drawer
	   the bar still has to hold the brand plus three 44px controls (cart,
	   account, hamburger). On a 360px screen the padded inner is 328px wide and
	   those three controls, their two 8px gaps and the 12px gap before the brand
	   claim 160px of it -- so the brand gets 168px, and the desktop 11rem cap
	   would overrun it. The tighter cap here keeps the hamburger on screen; the
	   desktop cap stays where it is. */
	.dayche-nav__logo {
		max-width: 8.5rem;
	}

	/* The same budget applies to the text fallback, which -- unlike the image --
	   has no width of its own to cap: a long site name is truncated instead of
	   crowding the controls out of the bar. */
	.dayche-nav__brand--text {
		flex-shrink: 1;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* The hamburger only appears once apply-landing.js has wired it -- a
	   button that cannot open anything must not be shown. */
	.dayche-nav.is-menu-ready .dayche-nav__toggle {
		display: flex;
	}

	/* While the drawer is open the nav must sit above everything this page
	   itself paints below it -- the sticky mobile action bar included. That
	   relationship is now expressed as a token pair rather than as two loose
	   numbers, because F3 had to lift the action bar past the site-wide bottom
	   navigation's 9999 to make it reachable at all; both tokens are defined,
	   with the reasoning, in the mobile action bar block at the end of this
	   file. */
	.dayche-nav.is-menu-open {
		z-index: var(--dayche-layer-nav-drawer);
	}

	/* The default list becomes the artifact's side drawer: a real panel
	   anchored to the same edge the hamburger sits on, holding the same four
	   links plus the same CTA. apply-landing.js keeps it `hidden` until the
	   hamburger opens it, so nothing here is visible on load. */
	.dayche-nav.is-menu-ready .dayche-nav__list[data-nav-default] {
		position: fixed;
		inset-block: 0;
		inset-inline-end: 0;
		z-index: 2;
		flex: none;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		align-items: stretch;
		width: 78%;
		max-width: 300px;
		padding: var(--dayche-space-6) var(--dayche-space-4);
		overflow-y: auto;
		background: var(--dayche-surface);
		box-shadow: -10px 0 30px rgba(15, 23, 42, 0.15);
	}

	.dayche-nav.is-menu-ready .dayche-nav__list[data-nav-default] .dayche-nav__item {
		border-bottom: 1px solid var(--dayche-border);
	}

	.dayche-nav.is-menu-ready .dayche-nav__list[data-nav-default] .dayche-nav__link {
		display: flex;
		align-items: center;
		padding: var(--dayche-space-3) var(--dayche-space-2);
		min-height: 44px;
	}

	.dayche-nav.is-menu-ready .dayche-nav__list[data-nav-default] .dayche-nav__item--offer {
		margin-inline-start: 0;
		margin-block-start: var(--dayche-space-3);
		border-bottom: none;
	}

	.dayche-nav.is-menu-ready .dayche-nav__list[data-nav-default] .dayche-nav__offer {
		display: block;
		padding: var(--dayche-space-3);
		text-align: center;
	}
}

/* ------------------------------------------------- mobile action bar */
/* DMH-APPLY-LANDING-ARTIFACT-PARITY-001 (P6): the artifact's sticky bottom
 * action bar (Main.dc.html .mobile-action-bar / .icon-btn, lines 207-229;
 * behavioural states in Mobile-ActionBar-States.dc.html).
 *
 * The artifact shows it inside its own max-width:768px tier. This file's
 * mobile tier is 767px and the contract keeps that convention, so the bar
 * appears at 767px and below -- which also means every rule that has to make
 * room for it belongs in this 767px block: at exactly 768px there is no bar
 * to clear.
 *
 * The bar is absent from the box above 767px rather than merely invisible:
 * a fixed element that cannot be seen must not still be reachable by keyboard. */

.dayche-actionbar {
	display: none;
}

@media (max-width: 767px) {
	body {
		/* DMH-APPLY-LANDING-ARTIFACT-PARITY-002 (F3). This page's bar is NOT
		   the only fixed bar on the bottom edge at these widths: the site-wide
		   mobile bottom navigation (#mobile-bottom-nav, printed on wp_footer by
		   dayche-mobile-nav) is there too, on every page of the site. That
		   plugin is a forbidden path in this contract, so nothing about it can
		   be changed and nothing can be exported from its side -- this page has
		   to place itself around it.
		   The height is admin-configurable there (dayche_mbn_settings.nav_height),
		   so no number for it is written here: the landing template resolves
		   exactly the same setting that plugin renders from and republishes it
		   as an inline --dayche-sitenav-height on <body>, which overrides the
		   fallback below and keeps this page correct when that height changes.
		   The fallback is 0 on purpose -- it is the honest value for a page
		   where that bar does not exist at all (plugin inactive), and it must
		   never guess a height for a bar that IS there. */
		--dayche-sitenav-height: 0px;

		/* The device's own bottom inset belongs to whichever bar actually
		   touches the screen edge. When the site-wide bar is present, that bar
		   is the one touching it and it already pads itself for the inset, so
		   the template republishes this as 0 and this page stops reserving the
		   same strip a second time. */
		--dayche-safe-bottom: env(safe-area-inset-bottom, 0px);

		/* The bar's real height. Its tallest child is the primary button, not
		   the 44px icons: .dayche-btn is 2px border + space-3 padding + a
		   1.5 line-height on .875rem + space-3 + 2px = 49px. Add the bar's own
		   block padding (2 x space-3) and its 1px top border for 74px, plus
		   whatever the device reserves below it. Within a couple of pixels of
		   the artifact's own 76px allowance (Main.dc.html line 229).
		   Declared on body, not on .dayche-apply, because the site's own
		   floating consultation widget below is outside this page's wrapper and
		   reads it too -- and on body rather than :root because that is the
		   element the template publishes --dayche-safe-bottom on, and a custom
		   property substitutes the value that is in force on its OWN element. */
		--dayche-actionbar-height: calc(74px + var(--dayche-safe-bottom));

		/* Stacking floor this page's bottom bar has to clear. #mobile-bottom-nav
		   is painted at z-index 9999 by dayche-mobile-nav's own stylesheet, full
		   width, over the same strip. At the artifact's original z-index of 30
		   the action bar was completely buried by it: a hit test at the centre
		   of the bar returned that plugin's element, so every control delivered
		   with the bar was unreachable. Anything below 9999 re-buries it -- do
		   not lower this without checking that element first.
		   The drawer stays a step above the bar, which is the relationship the
		   nav's own is-menu-open rule already relied on when both numbers were
		   small: an open drawer covers the bar rather than the bar punching a
		   hole through it. */
		--dayche-layer-actionbar: 10000;
		--dayche-layer-nav-drawer: 10010;
	}

	.dayche-actionbar {
		position: fixed;
		inset-inline: 0;
		/* Stacked directly on top of the site-wide bottom navigation instead of
		   underneath it, so both bars stay fully visible and neither covers the
		   other's controls. Raising the layer alone would have hidden that bar;
		   offsetting alone would still leave this one buried if that bar ever
		   grows past the reserved strip. Both together are what make the bar
		   reachable. */
		inset-block-end: var(--dayche-sitenav-height);
		z-index: var(--dayche-layer-actionbar);
		display: flex;
		align-items: center;
		gap: var(--dayche-space-3);
		padding: var(--dayche-space-3) var(--dayche-space-4);
		padding-block-end: calc(var(--dayche-space-3) + var(--dayche-safe-bottom));
		border-block-start: 1px solid var(--dayche-border);
		background: var(--dayche-surface);
		box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
	}

	/* Both bars are fixed over the page, so the page has to end above BOTH --
	   otherwise the footer's last rows stay permanently covered (the artifact
	   solves this the same way, with body{padding-bottom:76px}, but it had only
	   one bar to clear). */
	.dayche-apply {
		padding-block-end: calc(var(--dayche-sitenav-height) + var(--dayche-actionbar-height));
	}

	/* dayche-mobile-nav also reserves its own bar's height on `body` at these
	   widths (body{padding-bottom:<nav_height>}), which is where the page's
	   entire bottom allowance used to come from -- one bar's worth, for two
	   bars. The line above now reserves both, so keeping that one as well would
	   strand a whole extra bar's height of empty page under the footer. The
	   class is this template's own (body_class( 'dayche-apply-page' )), so this
	   only takes the reservation over on this page; every other page of the site
	   keeps that plugin's spacing untouched, and no file of it is edited. */
	body.dayche-apply-page {
		padding-block-end: 0;
	}

	.dayche-actionbar__icon {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		/* The artifact's own 44px circle -- already the minimum comfortable
		   touch target, so it is not reduced any further at narrow widths. */
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--dayche-border);
		border-radius: 50%;
		background: var(--dayche-surface);
		color: var(--dayche-text-primary);
		cursor: pointer;
	}

	.dayche-actionbar__icon--consult {
		border-color: transparent;
		background: var(--dayche-campaign-gold);
		color: var(--dayche-campaign-ink);
	}

	.dayche-actionbar__primary {
		flex: 1;
		/* .dayche-btn is an inline-block with its own padding; this only
		   guarantees it never falls under the 44px the two icons hold. */
		min-height: 44px;
		/* The artifact's own action-bar button type -- .875rem, and tighter
		   inline padding than .dayche-btn's default. Both matter at 360px,
		   where the two 44px icons and the gaps leave this control about
		   216px: at the base 1rem the label wraps to a second line, which
		   would push the bar taller than the page padding reserves for it. */
		padding-inline: var(--dayche-space-4);
		font-size: var(--dayche-size-sm);
	}

	/* Two bars now own the bottom edge, so the ONE floating control that still
	   sits there has to clear both: the site's own consultation button
	   (.dayche-call-btn, 50px tall at this width) is lifted to a 20px visible
	   gap above the upper one. Since F1 removed this page's duplicate pill, this
	   is the only floating control left to place.
	   .dayche-call-btn belongs to dayche-call-center.php, which prints its
	   styles on wp_head at priority 10 -- i.e. AFTER this enqueued stylesheet --
	   so an equally specific selector would lose. `body` is prepended only to
	   out-specify it; nothing else about the widget is touched, and no file of
	   that plugin is edited. */
	body .dayche-call-btn {
		bottom: calc(var(--dayche-sitenav-height) + var(--dayche-actionbar-height) + 20px);
	}
}

/* The artifact's own narrowest tier (Main.dc.html line 232): the hero headline
   steps down below 390px, where 1.5rem wraps to four lines on a 360px screen.
   The campaign-bar rule that shares that tier in the artifact has no
   counterpart here -- that bar is not built by this task. */
@media (max-width: 389px) {
	.dayche-hero__title {
		font-size: 1.375rem;
	}
}

/* DMH-APPLY-COHORT-REMEDIATION-001: Typographic PhD Badge */
.dayche-badge-phd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.15em 0.45em;
	margin: 0 0.25rem;
	vertical-align: middle;
	border-radius: 4px;
	color: #0f172a;
	background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
	border: 1px solid #94a3b8;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	letter-spacing: 0.03em;
}