/* Dopabit theme bundle — generated by dev/build.py; edit the source files instead. */

/* ---- assets/css/src/00-base.css ---- */
/* ==========================================================================
   Dopabit — base: fonts, tokens, reset, typography
   ========================================================================== */

@font-face {
	font-family: "Vazirmatn";
	src: url("../fonts/Vazirmatn-wght.woff2") format("woff2-variations"), url("../fonts/Vazirmatn-wght.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Outfit";
	src: url("../fonts/Outfit-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF;
}

:root {
	/* Surfaces */
	--dpb-bg: #0D0A22;
	--dpb-bg-alt: #15113A;
	--dpb-surface: #15113A;
	--dpb-surface-2: #1B1547;
	--dpb-surface-3: #201A52;
	--dpb-surface-active: #2C2470;
	--dpb-art: #151131;

	/* Text */
	--dpb-text: #F4F2FF;
	--dpb-white: #FFFFFF;
	--dpb-text-2: #E4E0FF;
	--dpb-text-nav: #D9D4FF;
	--dpb-muted: #B9B4D9;
	--dpb-muted-2: #9E97CC;
	--dpb-faint: #8F89B5;

	/* Brand */
	--dpb-primary: #6A57FF;
	--dpb-primary-hover: #7B6AFF;
	--dpb-accent: #A99BFF;
	--dpb-accent-2: #C7BCFF;
	--dpb-pink: #FF6FA5;
	--dpb-pink-2: #FFB3CF;

	/* Lines */
	--dpb-line: rgba(169, 155, 255, 0.18);
	--dpb-line-2: rgba(169, 155, 255, 0.26);
	--dpb-line-strong: #2A2366;
	--dpb-line-dark: #221D47;
	--dpb-line-dim: #3E3966;
	--dpb-ghost-line: rgba(255, 255, 255, 0.22);

	/* Type */
	--dpb-font: "Vazirmatn", Tahoma, system-ui, sans-serif;
	--dpb-font-logo: "Outfit", system-ui, sans-serif;
	--dpb-h1: clamp(40px, 5vw, 72px);
	--dpb-h2: clamp(32px, 4vw, 54px);
	--dpb-h2-sm: clamp(30px, 3.6vw, 48px);

	/* Layout */
	--dpb-gutter: clamp(20px, 4vw, 64px);
	--dpb-max: 1240px;
	--dpb-max-wide: 1360px;
	--dpb-max-narrow: 760px;
	--dpb-section-y: clamp(72px, 9vw, 120px);
	--dpb-section-y-lg: clamp(80px, 10vw, 136px);

	/* Radius & shadow */
	--dpb-r-pill: 999px;
	--dpb-r-card: 28px;
	--dpb-r-lg: 32px;
	--dpb-r-xl: 40px;
	--dpb-shadow-primary: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 14px 40px rgba(106, 87, 255, 0.45);
	--dpb-shadow-deep: 0 40px 100px rgba(0, 0, 0, 0.55);

	--dpb-header-h: 96px;
	color-scheme: dark;
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--dpb-bg);
	color: var(--dpb-text);
	font-family: var(--dpb-font);
	font-size: 16px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg,
video {
	max-width: 100%;
}

img,
video {
	height: auto;
}

a {
	color: var(--dpb-accent-2);
	transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

a:hover {
	color: var(--dpb-white);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote {
	margin: 0;
}

h1,
h2,
h3,
h4 {
	font-weight: 900;
	line-height: 1.4;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--dpb-accent);
	outline-offset: 3px;
}

.hl {
	color: var(--dpb-accent);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dpb-skip {
	position: absolute;
	top: -100px;
	right: 16px;
	z-index: 1000;
	padding: 10px 18px;
	border-radius: var(--dpb-r-pill);
	background: var(--dpb-white);
	color: var(--dpb-bg);
	font-weight: 700;
	text-decoration: none;
}

.dpb-skip:focus {
	top: 16px;
}

/* Honeypot for public forms. Clipped in place: an off-screen offset would widen
   the scrollable area of an RTL page. */
.dpb-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	opacity: 0;
}

.dpb-hide-desktop {
	display: none !important;
}

@media (max-width: 720px) {
	.dpb-hide-mobile {
		display: none !important;
	}
	.dpb-hide-desktop {
		display: revert !important;
	}
}

/* ---- assets/css/src/05-design.css ---- */
/* Design base: tokens, type, buttons, chips — from the home page design (dopabit_hero_E_logo_align.html), scoped by dev conversion. */
:root{--a:#0D0A22; --b:#15113A; --panel:#141033; --card:#1F1951; --line:rgba(169,155,255,.16);
  --text:#F4F2FF; --muted:#B9B4D9; --soft:#D9D4FF; --acc:#A99BFF; --pri:#6A57FF; --pri-h:#7B6BFF; --pink:#FF6FA5;
  --r-lg:32px; --r-md:22px; --r-sm:14px;
  --pad:clamp(20px,4vw,64px);
  --sec:clamp(72px,9vw,128px);
  --safe-b:env(safe-area-inset-bottom,0px);}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{margin:0;background:var(--a);color:var(--text);font-family:'Vazirmatn',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;font-size:16px;line-height:1.9;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html.menu-open body{overflow:hidden}
:where(.dpx,.editor-styles-wrapper) img{max-width:100%;display:block}
:where(.dpx,.editor-styles-wrapper) a{color:inherit}
:where(.dpx,.editor-styles-wrapper) button{font-family:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:10px}
:where(.dpx,.editor-styles-wrapper) .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:where(.dpx,.editor-styles-wrapper) .skip{position:fixed;top:-60px;right:16px;z-index:100;background:var(--pri);color:#fff;padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:700}
:where(.dpx,.editor-styles-wrapper) .skip:focus{top:12px}
:where(.dpx,.editor-styles-wrapper) .ic{width:1em;height:1em;flex:none;display:inline-block;vertical-align:middle}
:where(.dpx,.editor-styles-wrapper) .wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--pad)}
:where(.dpx,.editor-styles-wrapper) .bg-a{background:var(--a)}
:where(.dpx,.editor-styles-wrapper) .bg-b{background:var(--b)}
:where(.dpx,.editor-styles-wrapper) section{position:relative}
:where(.dpx,.editor-styles-wrapper) .sec{padding-block:var(--sec)}
:where(.dpx,.editor-styles-wrapper) h1,:where(.dpx,.editor-styles-wrapper) h2,:where(.dpx,.editor-styles-wrapper) h3{margin:0;font-weight:900;letter-spacing:-.005em}
:where(.dpx,.editor-styles-wrapper) h2{font-size:clamp(28px,3.7vw,50px);line-height:1.42}
:where(.dpx,.editor-styles-wrapper) p{margin:0}
:where(.dpx,.editor-styles-wrapper) .lead{font-size:clamp(16px,1.35vw,18px);line-height:1.95;color:var(--muted);max-width:36em}
:where(.dpx,.editor-styles-wrapper) .ph{color:#9E97CC}
/* buttons */
:where(.dpx,.editor-styles-wrapper) .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:0;cursor:pointer;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease,border-color .2s ease;white-space:nowrap}
:where(.dpx,.editor-styles-wrapper) .btn .ic{font-size:19px}
:where(.dpx,.editor-styles-wrapper) .btn-pri{background:var(--pri);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 14px 36px rgba(106,87,255,.38)}
:where(.dpx,.editor-styles-wrapper) .btn-pri:hover{background:var(--pri-h);box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,0 16px 44px rgba(106,87,255,.55),0 0 0 6px rgba(106,87,255,.14)}
:where(.dpx,.editor-styles-wrapper) .btn-ghost{background:rgba(255,255,255,.04);color:var(--text);border:1.5px solid rgba(255,255,255,.22)}
:where(.dpx,.editor-styles-wrapper) .btn-ghost:hover{border-color:rgba(169,155,255,.7);background:rgba(169,155,255,.08)}
:where(.dpx,.editor-styles-wrapper) .btn-white{background:#fff;color:#120E30;font-weight:900}
:where(.dpx,.editor-styles-wrapper) .btn-white:hover{box-shadow:0 0 0 6px rgba(255,255,255,.12)}
:where(.dpx,.editor-styles-wrapper) .btn-row{display:flex;flex-wrap:wrap;gap:12px}
:where(.dpx,.editor-styles-wrapper) .hero-copy .btn-row,:where(.dpx,.editor-styles-wrapper) .quiz-copy > .btn{max-width:100%}
@media (max-width:640px){
  :where(.dpx,.editor-styles-wrapper) .btn-row{flex-direction:column;width:100%}
  :where(.dpx,.editor-styles-wrapper) .btn-row .btn{width:100%}
  :where(.dpx,.editor-styles-wrapper) .btn{white-space:normal;text-align:center;line-height:1.5;padding-block:10px}
}
:where(.dpx,.editor-styles-wrapper) .chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(169,155,255,.10);border:1px solid rgba(169,155,255,.26);color:var(--soft);font-size:14px;font-weight:500;line-height:1.6}
:where(.dpx,.editor-styles-wrapper) .chip .ic{color:var(--acc);font-size:15px}
:where(.dpx,.editor-styles-wrapper) .quiz-grid > *,:where(.dpx,.editor-styles-wrapper) .focus-grid > *,:where(.dpx,.editor-styles-wrapper) .coach-grid > *,:where(.dpx,.editor-styles-wrapper) .product-panel > *,:where(.dpx,.editor-styles-wrapper) .calc > *{min-width:0}

/* The theme's base sets h1–h4 line-height 1.4; in the design, headings without their own
   line-height inherit the body's 1.9. Restore that inside the home-design sections. */
:where(.dpx,.editor-styles-wrapper) :where(.sec,.hero,.final) :where(h3,h4){line-height:inherit}
/* The theme base gives form controls font:inherit (line-height 1.9); the design keeps the
   browser's normal line-height for buttons. */
:where(.dpx,.editor-styles-wrapper) :where(.sec,.hero,.final,.site-header,.mmenu,.footer,.sticky-cta) button{line-height:normal}

/* Button hover (2026-10-19, owner: the old lift + magnet «jolt» didn't fit). The button does not move:
   its glow deepens, a soft light follows the pointer inside it, and a trailing arrow slides a little. */
:where(.dpx,.editor-styles-wrapper) .btn{position:relative;isolation:isolate;transition:background-color .35s ease,box-shadow .35s ease,border-color .35s ease,color .35s ease}
:where(.dpx,.editor-styles-wrapper) .btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(140px circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.26),rgba(255,255,255,0) 70%)}
:where(.dpx,.editor-styles-wrapper) .btn-ghost::before{background:radial-gradient(140px circle at var(--bx,50%) var(--by,50%),rgba(169,155,255,.22),rgba(169,155,255,0) 70%)}
:where(.dpx,.editor-styles-wrapper) .btn-white::before{background:radial-gradient(140px circle at var(--bx,50%) var(--by,50%),rgba(106,87,255,.16),rgba(106,87,255,0) 70%)}
:where(.dpx,.editor-styles-wrapper) .btn:hover::before,:where(.dpx,.editor-styles-wrapper) .btn:focus-visible::before{opacity:1}
:where(.dpx,.editor-styles-wrapper) .btn-ghost:hover{color:#fff;box-shadow:0 0 0 4px rgba(169,155,255,.10)}
:where(.dpx,.editor-styles-wrapper) .btn:active{filter:brightness(.94);transition-duration:.08s}
:where(.dpx,.editor-styles-wrapper) .btn > svg:last-child,:where(.dpx,.editor-styles-wrapper) .btn > .ic:last-child{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
:where(.dpx,.editor-styles-wrapper) .btn:hover > svg:last-child,:where(.dpx,.editor-styles-wrapper) .btn:hover > .ic:last-child{transform:translateX(-3px)}
@media (prefers-reduced-motion:reduce){:where(.dpx,.editor-styles-wrapper) .btn:hover > svg:last-child,:where(.dpx,.editor-styles-wrapper) .btn:hover > .ic:last-child{transform:none}}

/* ---- assets/css/src/07-motion.css ---- */
/* Motion layer: progress bar, reveals, tilt, spotlight — from the home page design (dopabit_hero_E_logo_align.html), scoped by dev conversion. */
:where(.dpx,.editor-styles-wrapper) .progress{position:fixed;top:0;right:0;left:0;height:2px;z-index:60;pointer-events:none}
:where(.dpx,.editor-styles-wrapper) .progress i{display:block;height:100%;background:linear-gradient(to left,#6A57FF,#A99BFF,#FF6FA5);transform:scaleX(0);transform-origin:right center}
.js :where(.dpx,.editor-styles-wrapper) [data-reveal]{opacity:0;transform:translate3d(0,30px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 90ms)}
.js :where(.dpx,.editor-styles-wrapper) [data-reveal].in{opacity:1;transform:none}
:where(.dpx,.editor-styles-wrapper) .hero-copy > *{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d,0) * 110ms + 100ms)}
.js :where(.dpx,.editor-styles-wrapper) .hero-copy > *{animation-play-state:paused}
.hero-go :where(.dpx,.editor-styles-wrapper) .hero-copy > *{animation-play-state:running}
@keyframes rise{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
:where(.dpx,.editor-styles-wrapper) .mystery li{animation:bob 4.8s ease-in-out infinite;animation-delay:calc(var(--k) * -0.9s);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
:where(.dpx,.editor-styles-wrapper) .mystery li:hover{transform:rotate(0deg) translateY(-8px) scale(1.06);box-shadow:0 0 36px rgba(106,87,255,.6);animation-play-state:paused}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
:where(.dpx,.editor-styles-wrapper) [data-tilt]{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
:where(.dpx,.editor-styles-wrapper) .spot{position:relative;isolation:isolate}
:where(.dpx,.editor-styles-wrapper) .spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(169,155,255,.16),transparent 70%)}
:where(.dpx,.editor-styles-wrapper) .spot:hover::before{opacity:1}
:where(.dpx,.editor-styles-wrapper) .spot > *{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .js :where(.dpx,.editor-styles-wrapper) .tl-card,.js :where(.dpx,.editor-styles-wrapper) .timeline li{opacity:1!important;translate:0 0!important;animation:none!important}
  .js :where(.dpx,.editor-styles-wrapper) [data-reveal]{opacity:1;transform:none;transition:none}
  :where(.dpx,.editor-styles-wrapper) .hero-copy > *,:where(.dpx,.editor-styles-wrapper) .mystery li{animation:none}
}

/* ---- assets/css/src/08-motion-extras.css ---- */
/* Reusable motion utilities in the home page's language (see assets/js/src/10-motion-extras.js).
   Timing and curves are the home design's: cubic-bezier(.2,.7,.2,1), ~0.9s, 90–110ms stagger. */

/* Staggered children: <div data-stagger data-reveal> … children fade up one by one. */
.js :where(.dpx) [data-stagger] > * {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	/* The reveal is delayed per child; hover properties (translate, border, shadow) answer at once. */
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, box-shadow 0.35s, background-color 0.35s;
	transition-delay: calc(var(--i, 0) * 95ms + 80ms), calc(var(--i, 0) * 95ms + 80ms), 0s, 0s, 0s, 0s;
}
.js :where(.dpx) [data-stagger].in > * {
	opacity: 1;
	transform: none;
}
/* A staggered parent should not also fade as a whole. */
.js :where(.dpx) [data-stagger][data-reveal] {
	opacity: 1;
	transform: none;
}

/* Gentle floating (decorative cards, badges). Add --k for phase offset. */
:where(.dpx) .float {
	animation: bob 4.8s ease-in-out infinite;
	animation-delay: calc(var(--k, 0) * -0.9s);
}

/* Glow pulse for "live" dots and highlighted items. */
:where(.dpx) .pulse-dot {
	animation: pulse 2.2s ease-in-out infinite;
}

/* Lines that draw on scroll: set transform from --draw (0..1). */
:where(.dpx) .draw-x {
	transform: scaleX(var(--draw, 0));
	transform-origin: right center;
}
:where(.dpx) .draw-y {
	transform: scaleY(var(--draw, 0));
	transform-origin: center top;
}

/* Hover lift for cards (pair with .spot for the cursor spotlight). Uses the independent
   `translate` property so it combines with reveal transforms (data-reveal / data-stagger). */
:where(.dpx) .lift {
	transition: translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, box-shadow 0.35s, background-color 0.35s;
}
:where(.dpx) .lift:hover {
	translate: 0 -4px;
	border-color: rgba(169, 155, 255, 0.5);
	box-shadow: 0 22px 44px rgba(106, 87, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
	.js :where(.dpx) [data-stagger] > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
	:where(.dpx) .float,
	:where(.dpx) .pulse-dot {
		animation: none;
	}
	:where(.dpx) .draw-x,
	:where(.dpx) .draw-y {
		transform: none;
	}
}

/* Editor previews: show the final state. */
.editor-styles-wrapper [data-stagger] > * {
	opacity: 1 !important;
	transform: none !important;
}
.editor-styles-wrapper .draw-x,
.editor-styles-wrapper .draw-y {
	transform: none !important;
}

/* ---- assets/css/src/10-components.css ---- */
/* ==========================================================================
   Shared components: containers, sections, buttons, chips, cards, inputs
   ========================================================================== */

.dpb-container {
	width: 100%;
	max-width: calc(var(--dpb-max) + 2 * var(--dpb-gutter));
	margin-inline: auto;
	padding-inline: var(--dpb-gutter);
}

.dpb-container--wide {
	max-width: calc(var(--dpb-max-wide) + 2 * var(--dpb-gutter));
}

.dpb-container--narrow {
	max-width: calc(var(--dpb-max-narrow) + 2 * var(--dpb-gutter));
}

/* Sections ------------------------------------------------------------ */

.dpb-section {
	position: relative;
	background: var(--dpb-bg);
	color: var(--dpb-text);
	padding: var(--dpb-section-y) var(--dpb-gutter);
}

.dpb-section--lg {
	padding-block: var(--dpb-section-y-lg);
}

.dpb-section--alt {
	background: var(--dpb-bg-alt);
}

.dpb-section--clip {
	overflow: hidden;
}

.dpb-section__inner {
	position: relative;
	max-width: var(--dpb-max);
	margin-inline: auto;
}

.dpb-section__inner--wide {
	max-width: var(--dpb-max-wide);
}

.dpb-section__inner--narrow {
	max-width: 960px;
}

.dpb-h1 {
	font-size: var(--dpb-h1);
	line-height: 1.3;
	font-weight: 900;
}

.dpb-h2 {
	font-size: var(--dpb-h2);
	line-height: 1.4;
	font-weight: 900;
}

.dpb-h2--sm {
	font-size: var(--dpb-h2-sm);
}

.dpb-lead {
	font-size: 18px;
	line-height: 1.9;
	color: var(--dpb-muted);
	max-width: 32em;
}

.dpb-muted {
	color: var(--dpb-muted);
}

.dpb-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dpb-head--center {
	align-items: center;
	text-align: center;
}

.dpb-head--center .dpb-lead {
	margin-inline: auto;
}

/* Buttons ------------------------------------------------------------- */

.dpb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
	border: 0;
	border-radius: var(--dpb-r-pill);
	font-family: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s, color 0.2s;
}

.dpb-btn:active {
	transform: translateY(1px);
}

.dpb-btn__icon {
	flex: none;
}

.dpb-btn--lg {
	min-height: 54px;
	padding: 0 26px;
	font-size: 16px;
	gap: 10px;
}

.dpb-btn--md {
	min-height: 48px;
	padding: 0 22px;
	font-size: 15px;
	gap: 10px;
}

.dpb-btn--sm {
	min-height: 44px;
	padding: 0 20px;
	font-size: 14px;
	gap: 8px;
}

.dpb-btn--block {
	display: flex;
	width: 100%;
}

.dpb-btn--primary {
	background: var(--dpb-primary);
	color: var(--dpb-white);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 14px 36px rgba(106, 87, 255, 0.38);
}

.dpb-btn--primary:hover {
	background: var(--dpb-primary-hover);
	color: var(--dpb-white);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset, 0 16px 44px rgba(106, 87, 255, 0.55), 0 0 0 6px rgba(106, 87, 255, 0.14);
}

.dpb-btn--ghost {
	background: rgba(255, 255, 255, 0.04);
	color: var(--dpb-text);
	border: 1.5px solid var(--dpb-ghost-line);
}

.dpb-btn--ghost:hover {
	color: var(--dpb-white);
	border-color: rgba(169, 155, 255, 0.7);
	background: rgba(169, 155, 255, 0.08);
}

.dpb-btn--light {
	background: var(--dpb-white);
	color: var(--dpb-bg);
}

.dpb-btn--light:hover {
	background: #FFFFFF;
	color: var(--dpb-bg);
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12);
}

.dpb-btn--dark {
	background: rgba(13, 10, 34, 0.6);
	color: var(--dpb-text);
	border: 1.5px solid var(--dpb-ghost-line);
}

.dpb-btn--dark:hover {
	color: var(--dpb-white);
	border-color: rgba(255, 255, 255, 0.45);
}

.dpb-btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.dpb-link {
	font-size: 16px;
	font-weight: 700;
	color: var(--dpb-accent-2);
	text-underline-offset: 6px;
}

/* Chips & badges ------------------------------------------------------ */

.dpb-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: var(--dpb-r-pill);
	background: rgba(169, 155, 255, 0.1);
	border: 1px solid var(--dpb-line-2);
	color: var(--dpb-text-nav);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
}

.dpb-chip .dpb-icon {
	color: var(--dpb-accent);
	flex: none;
}

.dpb-tag {
	display: inline-flex;
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: var(--dpb-r-pill);
	background: rgba(169, 155, 255, 0.12);
	color: var(--dpb-accent-2);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.7;
	text-decoration: none;
}

.dpb-tag--pink {
	background: rgba(255, 111, 165, 0.12);
	color: var(--dpb-pink-2);
}

.dpb-badge-white {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: var(--dpb-r-pill);
	background: var(--dpb-white);
	color: var(--dpb-bg);
	font-size: 13px;
	font-weight: 900;
}

/* Cards --------------------------------------------------------------- */

.dpb-card {
	border-radius: var(--dpb-r-card);
	background: var(--dpb-surface);
	border: 1px solid var(--dpb-line-strong);
}

.dpb-icon-circle {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(169, 155, 255, 0.14);
	border: 1px solid rgba(169, 155, 255, 0.25);
	color: var(--dpb-accent);
}

.dpb-num-circle {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(169, 155, 255, 0.14);
	color: var(--dpb-accent-2);
	font-weight: 900;
}

.dpb-card-art,
.dpb-card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Inputs -------------------------------------------------------------- */

.dpb-input,
.dpb-textarea,
.dpb-select {
	width: 100%;
	min-height: 54px;
	padding: 0 20px;
	border-radius: 18px;
	background: var(--dpb-bg);
	border: 1.5px solid rgba(255, 255, 255, 0.18);
	color: var(--dpb-text);
	font-family: inherit;
	font-size: 16px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.dpb-input::placeholder,
.dpb-textarea::placeholder {
	color: var(--dpb-faint);
}

.dpb-input:focus,
.dpb-textarea:focus,
.dpb-select:focus {
	outline: none;
	border-color: var(--dpb-accent);
	box-shadow: 0 0 0 4px rgba(169, 155, 255, 0.16);
}

.dpb-input[dir="ltr"] {
	text-align: right;
}

.dpb-input[dir="ltr"]:not(:placeholder-shown) {
	text-align: left;
}

.dpb-textarea {
	min-height: 140px;
	padding: 16px 20px;
	resize: vertical;
	line-height: 1.9;
}

.dpb-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B9B4D9' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 18px center;
	padding-left: 44px;
}

.dpb-label {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--dpb-text-2);
}

.dpb-form-notice {
	margin: 0;
	padding: 12px 18px;
	border-radius: 16px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.8;
}

.dpb-form-notice--ok {
	background: rgba(77, 214, 160, 0.12);
	border: 1px solid rgba(77, 214, 160, 0.35);
	color: #9DF0CB;
}

.dpb-form-notice--error {
	background: rgba(255, 111, 165, 0.12);
	border: 1px solid rgba(255, 111, 165, 0.35);
	color: var(--dpb-pink-2);
}

/* Editor-only notice inside a section preview */
.dpb-editor-notice {
	margin: 24px auto;
	max-width: 720px;
	padding: 18px 22px;
	border-radius: 18px;
	border: 1.5px dashed var(--dpb-accent);
	background: rgba(169, 155, 255, 0.08);
	color: var(--dpb-text-nav);
	font-size: 15px;
	text-align: center;
}

@media (max-width: 720px) {
	.dpb-lead {
		font-size: 16px;
	}
	.dpb-btn--lg {
		min-height: 54px;
		padding: 0 22px;
		font-size: 16px;
	}
}

/* Editors only: how many «[…]» gaps the placeholder guard hid on this page. */
.dpb-ph-note { position: fixed; inset-inline-start: 16px; bottom: 16px; z-index: 9999; max-width: min(360px, calc(100vw - 32px)); display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #2a1f00; border: 1px solid #6b5414; color: #ffe6a6; font-size: 13px; line-height: 1.8; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.dpb-ph-note b { color: #f2c14e; font-size: 14px; }
.dpb-ph-note a { color: #fff; text-decoration: underline; margin-inline-end: 12px; }

/* Eyebrow line above a section title (same look as «آشناست؟»). */
.dpb-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--dpb-accent-2); }
.dpb-eyebrow::before { content: ""; flex: none; width: 28px; height: 2px; border-radius: 2px; background: var(--dpb-accent); }
.dpb-sec-title { margin: 0; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.45; font-weight: 900; color: var(--dpb-text); text-wrap: balance; }
.dpb-sec-title em, .dpb-sec-title mark { font-style: normal; background: none; color: var(--dpb-accent); }
.dpb-sec-lead { margin: 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 2; color: var(--dpb-muted); max-width: 62ch; }
.dpb-sec-head { display: flex; flex-direction: column; gap: 12px; }
.dpb-sec-head--center { align-items: center; text-align: center; }
.dpb-sec-head--center .dpb-sec-lead { margin-inline: auto; }
.dpb-source { margin: 0; font-size: 13px; line-height: 1.8; color: var(--dpb-faint); }

/* ---- assets/css/src/20-header.css ---- */
/* Header and mobile menu — from the home page design (dopabit_hero_E_logo_align.html), scoped by dev conversion. */
:where(.dpx,.editor-styles-wrapper) .site-header{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;border-bottom:1px solid transparent}
:where(.dpx,.editor-styles-wrapper) .site-header.is-scrolled{background:rgba(13,10,34,.86);border-color:var(--line);box-shadow:0 10px 40px rgba(0,0,0,.35)}
@supports (backdrop-filter:blur(10px)){
  @media (min-width:900px){
    :where(.dpx,.editor-styles-wrapper) .site-header.is-scrolled{background:rgba(13,10,34,.72);backdrop-filter:blur(14px) saturate(140%)}
  }
}
:where(.dpx,.editor-styles-wrapper) .hdr{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px;transition:height .3s ease}
:where(.dpx,.editor-styles-wrapper) .site-header.is-scrolled .hdr{height:64px}
:where(.dpx,.editor-styles-wrapper) .logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--text)}
:where(.dpx,.editor-styles-wrapper) .logo .logo-svg{display:block;height:32px;width:auto}
:where(.dpx,.editor-styles-wrapper) .logo .logo-mark,:where(.dpx,.editor-styles-wrapper) .logo .logo-word{fill:#fff}
:where(.dpx,.editor-styles-wrapper) .nav{display:none;align-items:center;gap:30px;font-size:15px}
:where(.dpx,.editor-styles-wrapper) .nav a{position:relative;text-decoration:none;color:var(--soft);padding:6px 0;transition:color .25s ease}
/* Menu hover: a violet line draws in from the right under the item; the current page keeps it. */
:where(.dpx,.editor-styles-wrapper) .nav a::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;border-radius:2px;background:linear-gradient(to left,var(--acc),var(--pri));transform:scaleX(0);transform-origin:right center;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
:where(.dpx,.editor-styles-wrapper) .nav a:hover::after,:where(.dpx,.editor-styles-wrapper) .nav a:focus-visible::after{transform:scaleX(1)}
:where(.dpx,.editor-styles-wrapper) .nav a:hover{color:#fff}
:where(.dpx,.editor-styles-wrapper) .nav a[aria-current]{color:#fff;font-weight:700}
:where(.dpx,.editor-styles-wrapper) .nav a[aria-current]::after{transform:scaleX(1);background:var(--acc)}
:where(.dpx,.editor-styles-wrapper) .hdr-cta{display:none}
:where(.dpx,.editor-styles-wrapper) .hdr-cta .btn{min-height:46px;padding:0 20px;font-size:15px}
:where(.dpx,.editor-styles-wrapper) .menu-btn{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px}
@media (min-width:1000px){
  :where(.dpx,.editor-styles-wrapper) .nav{display:flex}
  :where(.dpx,.editor-styles-wrapper) .hdr-cta{display:block}
  :where(.dpx,.editor-styles-wrapper) .menu-btn{display:none}
}
:where(.dpx,.editor-styles-wrapper) .mmenu{position:fixed;inset:0;z-index:80;background:var(--a);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 14px) 20px calc(var(--safe-b) + 24px);opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease;overflow-y:auto}
:where(.dpx,.editor-styles-wrapper) .mmenu.is-open{opacity:1;transform:none}
:where(.dpx,.editor-styles-wrapper) .mmenu::before{content:"";position:absolute;inset:auto -20% -30% -20%;height:70%;background:radial-gradient(closest-side,rgba(106,87,255,.28),rgba(106,87,255,0));pointer-events:none}
:where(.dpx,.editor-styles-wrapper) .mmenu-top{display:flex;align-items:center;justify-content:space-between;height:48px}
:where(.dpx,.editor-styles-wrapper) .mmenu ul{list-style:none;margin:20px 0 0;padding:0;position:relative}
:where(.dpx,.editor-styles-wrapper) .mmenu li a{display:flex;align-items:center;justify-content:space-between;padding:17px 0;border-bottom:1px solid var(--line);font-size:21px;font-weight:700;text-decoration:none;color:var(--soft)}
:where(.dpx,.editor-styles-wrapper) .mmenu li a[aria-current]{color:#fff;font-weight:900}
:where(.dpx,.editor-styles-wrapper) .mmenu li .ic{color:#6E6896;font-size:18px}
:where(.dpx,.editor-styles-wrapper) .mmenu-foot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:10px;position:relative}
:where(.dpx,.editor-styles-wrapper) .mmenu-foot .btn{width:100%}
:where(.dpx,.editor-styles-wrapper) .mmenu-social{display:flex;justify-content:center;gap:22px;padding-top:8px;font-size:14px}
:where(.dpx,.editor-styles-wrapper) .mmenu-social a{color:var(--soft);text-decoration:none;display:inline-flex;align-items:center;gap:6px}

/* ---- WordPress integration of the design header ---- */
/* Room reserved under the fixed header by the inner pages (their canvas designs were drawn with
   this spacing); the header bar itself is 76px. */
:root {
	--dpb-header-h: 96px;
}
@media (max-width: 960px) {
	:root {
		--dpb-header-h: 76px;
	}
}
.admin-bar .site-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}
:where(.dpx) .logo--image img {
	display: block;
	max-height: 40px;
	width: auto;
}
/* The header is fixed over the page: give ordinary pages room for it. */
.site-main {
	padding-top: var(--dpb-header-h);
}
.dpb-sections-page .site-main,
.home .site-main {
	padding-top: 0;
}
.dpb-sections-page .dpb-sections > .dpb-section:first-child {
	padding-top: calc(var(--dpb-header-h) + 8px);
}

/* ---- assets/css/src/30-footer.css ---- */
/* Footer and mobile sticky bar — from the home page design (dopabit_hero_E_logo_align.html), scoped by dev conversion. */
:where(.dpx,.editor-styles-wrapper) .footer{background:var(--b);padding:16px 0 calc(32px + var(--safe-b))}
:where(.dpx,.editor-styles-wrapper) .news{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:26px 30px;border-radius:28px;background:rgba(255,255,255,.03);border:1px solid rgba(169,155,255,.18)}
:where(.dpx,.editor-styles-wrapper) .news b{display:block;font-size:20px}
:where(.dpx,.editor-styles-wrapper) .news small{display:block;font-size:15px;color:var(--muted)}
:where(.dpx,.editor-styles-wrapper) .news form{flex:1 1 360px;max-width:520px;display:flex;flex-wrap:wrap;gap:10px}
:where(.dpx,.editor-styles-wrapper) .news input{flex:1 1 220px;min-height:54px;padding:0 20px;border-radius:999px;background:var(--a);border:1.5px solid rgba(255,255,255,.18);color:var(--text);font-family:inherit;font-size:16px;direction:ltr;text-align:right}
:where(.dpx,.editor-styles-wrapper) .news input::placeholder{color:#8F89B5}
:where(.dpx,.editor-styles-wrapper) .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px 48px;margin-top:56px}
/* A menu column with no links is not printed; the rest share the row. */
:where(.dpx,.editor-styles-wrapper) .foot-grid:not(:has(> :nth-child(4))){grid-template-columns:1.6fr 1fr 1fr}
:where(.dpx,.editor-styles-wrapper) .foot-brand{display:flex;flex-direction:column;gap:16px}
:where(.dpx,.editor-styles-wrapper) .foot-brand p{font-size:15px;line-height:1.9;color:var(--muted);max-width:22em}
:where(.dpx,.editor-styles-wrapper) .badges{display:flex;gap:12px}
:where(.dpx,.editor-styles-wrapper) .badges span{width:84px;height:84px;border-radius:16px;border:1px dashed #3E3966;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:11px;line-height:1.6;color:#8F89B5;padding:6px}
:where(.dpx,.editor-styles-wrapper) .foot-col{display:flex;flex-direction:column;gap:12px;font-size:15px}
:where(.dpx,.editor-styles-wrapper) .foot-col b{font-size:15px;color:#fff;margin-bottom:4px}
:where(.dpx,.editor-styles-wrapper) .foot-col a{color:var(--soft);text-decoration:none}
:where(.dpx,.editor-styles-wrapper) .foot-col a:hover{color:#fff}
:where(.dpx,.editor-styles-wrapper) .foot-col .ic{font-size:18px}
:where(.dpx,.editor-styles-wrapper) .foot-col span{color:var(--soft)}
:where(.dpx,.editor-styles-wrapper) .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid #2A2366;font-size:13px;color:#8F89B5}
@media (max-width:860px){
  :where(.dpx,.editor-styles-wrapper) .foot-grid{grid-template-columns:1fr 1fr}
  :where(.dpx,.editor-styles-wrapper) .foot-brand{grid-column:1 / -1}
  :where(.dpx,.editor-styles-wrapper) .news{padding:22px 18px}
  :where(.dpx,.editor-styles-wrapper) .news form{flex-direction:column;flex:1 1 100%;max-width:none}
  :where(.dpx,.editor-styles-wrapper) .news input{flex:none;width:100%;min-height:54px;height:54px}
  :where(.dpx,.editor-styles-wrapper) .news .btn{width:100%}
}
:where(.dpx,.editor-styles-wrapper) .sticky-cta{position:fixed;inset:auto 0 0 0;z-index:40;display:none;gap:10px;padding:12px 14px calc(12px + var(--safe-b));background:rgba(13,10,34,.92);border-top:1px solid rgba(169,155,255,.2);box-shadow:0 -16px 40px rgba(0,0,0,.45);transform:translateY(110%);transition:transform .35s ease}
:where(.dpx,.editor-styles-wrapper) .sticky-cta.is-shown{transform:none}
:where(.dpx,.editor-styles-wrapper) .sticky-cta .btn{min-height:50px;font-size:15px;padding:0 14px}
:where(.dpx,.editor-styles-wrapper) .sticky-cta .btn-pri{flex:1.3}
:where(.dpx,.editor-styles-wrapper) .sticky-cta .btn-ghost{flex:1}
@media (max-width:999px){
  :where(.dpx,.editor-styles-wrapper) .sticky-cta{display:flex}
  :where(.dpx,.editor-styles-wrapper) .footer{padding-bottom:calc(100px + var(--safe-b))}
}
:where(.dpx,.editor-styles-wrapper) .no-gl .hero-canvas,:where(.dpx,.editor-styles-wrapper) .no-gl .cta-canvas{display:none}

/* ---- WordPress integration of the design footer ---- */
:where(.dpx) .badges span.has-code {
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.04);
	overflow: hidden;
}
:where(.dpx) .badges span.has-code img {
	max-width: 84px;
	height: auto;
}
:where(.dpx) .news .dpb-form-notice {
	margin-top: 10px;
}
:where(.dpx) .news-form {
	flex: 1 1 360px;
	max-width: 520px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
:where(.dpx) .news-form input[type="email"] {
	flex: 1 1 220px;
	min-height: 54px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--a);
	border: 1.5px solid rgba(255, 255, 255, 0.18);
	color: var(--text);
	font-family: inherit;
	font-size: 16px;
	direction: ltr;
	text-align: right;
}
:where(.dpx) .news-form input::placeholder {
	color: #8F89B5;
}
@media (max-width: 860px) {
	:where(.dpx) .news-form {
		flex-direction: column;
		flex: 1 1 100%;
		max-width: none;
	}
	:where(.dpx) .news-form input[type="email"] {
		flex: none;
		width: 100%;
		height: 54px;
	}
	:where(.dpx) .news-form .btn {
		width: 100%;
	}
}
/* Images inside the design wrapper are blocks; inline ones in checkout and text stay inline. */
:where(.dpx) #payment img,
:where(.dpx) img.emoji,
:where(.dpx) .dpb-prose p img {
	display: inline-block;
}

/* ---- assets/css/src/40-pages.css ---- */
/* ==========================================================================
   Ordinary pages, reading column (prose), plugin pages
   ========================================================================== */

.dpb-page {
	position: relative;
	isolation: isolate;
	padding-bottom: var(--dpb-section-y);
}

.dpb-page__head {
	padding: clamp(32px, 5vw, 64px) 0 clamp(24px, 4vw, 40px);
}

/* The title glow (same gradient as before, centred on the top of the title band). It is drawn
   behind the fixed header too and fades out on its own, so the band has no hard edges. */
.dpb-page::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(-1 * var(--dpb-header-h));
	right: 0;
	left: 0;
	height: calc(var(--dpb-header-h) + 360px);
	pointer-events: none;
	background: radial-gradient(700px 360px at 50% var(--dpb-header-h), rgba(106, 87, 255, 0.22), rgba(106, 87, 255, 0)) no-repeat;
	animation: dpb-page-glow 1.4s ease both;
}

.dpb-page__title {
	font-size: clamp(34px, 4.4vw, 56px);
	line-height: 1.35;
	font-weight: 900;
	animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s backwards;
}

@keyframes dpb-page-glow {
	from {
		opacity: 0;
	}
}

/* Gentle reveal for headings, quotes and figures of a reading column. The class is added by
   assets/js/src/50-article.js only to elements below the first screen (never without JS or
   with reduced motion). */
.dpb-soft {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dpb-soft.in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.dpb-page::before,
	.dpb-page__title {
		animation: none;
	}
	.dpb-soft {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Section pages may also contain normal blocks (paragraphs, images) between sections. */
.dpb-sections > :not(section):not(.dpb-section):not(.alignfull) {
	max-width: calc(var(--dpb-max-narrow) + 2 * var(--dpb-gutter));
	margin-inline: auto;
	padding-inline: var(--dpb-gutter);
}

.dpb-fullwidth {
	min-height: 50vh;
}

/* Reading column ------------------------------------------------------ */

.dpb-prose {
	font-size: 18px;
	line-height: 2.1;
	color: var(--dpb-text-nav);
	overflow-wrap: break-word;
}

.dpb-prose > * + * {
	margin-top: 1.15em;
}

.dpb-prose h2,
.dpb-prose h3,
.dpb-prose h4 {
	color: var(--dpb-white);
	line-height: 1.6;
	margin-top: 1.9em;
}

.dpb-prose h2 {
	font-size: clamp(24px, 2.6vw, 30px);
}

.dpb-prose h3 {
	font-size: clamp(20px, 2.1vw, 24px);
}

.dpb-prose h4 {
	font-size: 19px;
}

.dpb-prose a {
	color: var(--dpb-accent-2);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

.dpb-prose strong {
	color: var(--dpb-white);
}

.dpb-prose ul,
.dpb-prose ol {
	padding-right: 1.4em;
	padding-left: 0;
}

.dpb-prose li + li {
	margin-top: 0.45em;
}

.dpb-prose li::marker {
	color: var(--dpb-accent);
}

.dpb-prose blockquote {
	padding: 20px 26px;
	border-right: 3px solid var(--dpb-primary);
	border-radius: 18px 0 0 18px;
	background: rgba(169, 155, 255, 0.06);
	color: var(--dpb-text-2);
	font-size: 19px;
}

.dpb-prose blockquote cite {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	font-style: normal;
	color: var(--dpb-muted-2);
}

.dpb-prose img,
.dpb-prose figure img {
	border-radius: 22px;
}

.dpb-prose figcaption {
	margin-top: 10px;
	font-size: 14px;
	color: var(--dpb-muted-2);
	text-align: center;
}

.dpb-prose hr {
	border: 0;
	border-top: 1px solid var(--dpb-line);
	margin: 2.4em 0;
}

.dpb-prose code {
	padding: 2px 8px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	font-size: 0.9em;
}

.dpb-prose pre {
	padding: 18px 22px;
	border-radius: 18px;
	background: var(--dpb-surface);
	overflow-x: auto;
	direction: ltr;
	text-align: left;
}

.dpb-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.dpb-prose th,
.dpb-prose td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--dpb-line);
	text-align: right;
}

.dpb-prose th {
	color: var(--dpb-white);
}

.dpb-prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 54px;
	padding: 0 26px;
	border-radius: var(--dpb-r-pill);
	background: var(--dpb-primary);
	color: var(--dpb-white);
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 14px 36px rgba(106, 87, 255, 0.38);
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.dpb-prose .wp-block-button__link:hover {
	background: var(--dpb-primary-hover);
	color: var(--dpb-white);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset, 0 16px 44px rgba(106, 87, 255, 0.55), 0 0 0 6px rgba(106, 87, 255, 0.14);
}

.dpb-prose a:not([class]) {
	transition: color 0.2s, text-decoration-color 0.2s;
}

.dpb-prose a:not([class]):hover {
	color: var(--dpb-white);
	text-decoration-color: var(--dpb-accent);
}

.alignwide {
	max-width: var(--dpb-max);
}

.alignfull {
	max-width: none;
}

.aligncenter {
	margin-inline: auto;
	text-align: center;
}

.wp-block-image.aligncenter img {
	margin-inline: auto;
}

.navigation.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(169, 155, 255, 0.22);
	color: var(--dpb-text-nav);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.page-numbers.current {
	background: var(--dpb-primary);
	border-color: var(--dpb-primary);
	color: var(--dpb-white);
	box-shadow: 0 10px 26px rgba(106, 87, 255, 0.35);
}

.page-numbers.dots {
	background: none;
	border: 0;
}

@media (max-width: 720px) {
	.dpb-prose {
		font-size: 17px;
		line-height: 2.05;
	}
}

/* ---- assets/css/src/45-challenges.css ---- */
/* Shared pieces of the free-challenge sections (home, course page, /challenges/, a challenge page).
   Design: canvas «چالش‌های سینا» (2026-10-19). Every class starts with .dch- so it never touches other sections. */
:where(.dpx) .dch-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--acc);font-size:14px;font-weight:600;line-height:1.6;margin:0}
:where(.dpx) .dch-eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
:where(.dpx) .dch-h{margin:0;font-weight:900;line-height:1.32;letter-spacing:-.005em;text-wrap:balance}
:where(.dpx) .dch-h em{font-style:normal;color:var(--acc)}
:where(.dpx) .dch-lead{margin:0;font-size:clamp(16px,1.35vw,18px);line-height:1.95;color:var(--muted);max-width:36em}
:where(.dpx) .dch-src{font-size:12px;color:#9E97CC;line-height:1.8}
:where(.dpx) .dch-num{font-variant-numeric:tabular-nums}
:where(.dpx) .dch-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--soft);padding:2px 10px;border-radius:999px;border:1px solid rgba(169,155,255,.30);white-space:nowrap;line-height:1.9}
:where(.dpx) .dch-seal{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 12px;border-radius:999px;background:rgba(242,193,78,.12);border:1px solid rgba(242,193,78,.42);color:#F2C14E;font-size:12px;font-weight:800;white-space:nowrap;line-height:1.7}
:where(.dpx) .dch-seal svg{width:14px;height:14px;flex:none}
:where(.dpx) .dch-quote{margin:0;font-size:17px;line-height:2.05;color:var(--text)}
:where(.dpx) .dch-quote::before{content:"«"}
:where(.dpx) .dch-quote::after{content:"»"}
:where(.dpx) .dch-mark{background:linear-gradient(transparent 58%,rgba(255,111,165,.42) 58%);padding:0 2px}
:where(.dpx) .dch-ph{color:#9E97CC;border-bottom:1px dashed #6b62a8}
:where(.dpx) .dch-phone{border-radius:44px;padding:9px;background:linear-gradient(160deg,#4a43a0,#16123a 45%,#2b2470);box-shadow:0 40px 80px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08) inset}
:where(.dpx) .dch-phone > video,:where(.dpx) .dch-phone > img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:36px;background:#000}
:where(.dpx) .dch-card{background:#141033;border:1px solid rgba(169,155,255,.16);border-radius:22px}
:where(.dpx) .dch-input{min-height:52px;border-radius:14px;border:1px solid rgba(169,155,255,.30);background:rgba(13,10,34,.6);color:var(--text);font:inherit;padding:0 16px;direction:ltr;text-align:right;width:100%;box-sizing:border-box}
:where(.dpx) .dch-input:focus{outline:2px solid var(--acc);outline-offset:1px}
@media (prefers-reduced-motion:reduce){:where(.dpx) .dch-anim{animation:none!important}}
:where(.dpx) .dch-h .hl,:where(.dpx) .dch-lead .hl{color:var(--acc)}
:where(.dpx) .dch-form{display:flex;flex-direction:column;gap:10px;margin:0}
:where(.dpx) .dch-form__row{display:flex;gap:8px}
:where(.dpx) .dch-form__row .dch-input{flex:1;min-width:0}
:where(.dpx) .dch-form__row .btn{flex:none}
:where(.dpx) .dch-form__label{font-size:14px;color:var(--soft)}
@media (max-width:640px){:where(.dpx) .dch-form__row{flex-direction:column}:where(.dpx) .dch-form__row .btn{width:100%}}
:where(.dpx) .btn > svg{width:19px;height:19px;flex:none}

/* ---- assets/css/src/50-blog.css ---- */
/* ==========================================================================
   Blog: posts index, category/date archives, search results, post cards
   (home.php, archive.php, search.php, template-parts/blog-index.php, card-post.php)
   ========================================================================== */

/* The layout draws its own top area (purple glow behind the header). */
.dpb-blog-page .site-main,
.dpb-article-page .site-main,
.dpb-404-page .site-main {
	padding-top: 0;
}

.dpb-blog {
	position: relative;
	overflow-x: clip;
}

.dpb-blog__glow {
	position: absolute;
	left: 50%;
	top: 260px;
	width: 700px;
	height: 700px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(106, 87, 255, 0.26), rgba(106, 87, 255, 0));
	pointer-events: none;
}

.dpb-blog__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding-top: calc(var(--dpb-header-h) + 24px);
	padding-bottom: 56px;
}

/* Heading row ---------------------------------------------------------- */

.dpb-blog__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.dpb-blog__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.dpb-blog__eyebrow .dpb-icon {
	color: var(--dpb-accent);
}

.dpb-blog__title {
	font-size: clamp(44px, 5vw, 64px);
	line-height: 1.3;
	font-weight: 900;
	overflow-wrap: anywhere;
}

.search .dpb-blog__title {
	font-size: clamp(34px, 4vw, 52px);
}

.dpb-blog__intro {
	font-size: 18px;
	line-height: 1.9;
	color: var(--dpb-muted);
	max-width: 30em;
}

/* Search form (searchform.php) ----------------------------------------- */

.dpb-search {
	position: relative;
	display: flex;
	align-items: center;
	width: 320px;
	max-width: 100%;
	margin: 0;
}

.dpb-search__input {
	width: 100%;
	height: 54px;
	padding: 0 50px 0 20px;
	border-radius: var(--dpb-r-pill);
	background: rgba(255, 255, 255, 0.04);
	border: 1.5px solid rgba(255, 255, 255, 0.18);
	color: var(--dpb-text);
	font-family: inherit;
	font-size: 15px;
	text-align: right;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.dpb-search__input::placeholder {
	color: var(--dpb-faint);
}

.dpb-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.dpb-search__input:focus {
	outline: none;
	border-color: var(--dpb-accent);
	box-shadow: 0 0 0 4px rgba(169, 155, 255, 0.16);
}

.dpb-search__btn {
	position: absolute;
	top: 50%;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--dpb-muted-2);
	cursor: pointer;
}

.dpb-search__btn:hover {
	color: var(--dpb-white);
}

/* Category chips --------------------------------------------------------- */

.dpb-blog__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.dpb-blog__cat {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 20px;
	border-radius: var(--dpb-r-pill);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(169, 155, 255, 0.25);
	color: var(--dpb-text-nav);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
}

.dpb-blog__cat:hover {
	color: var(--dpb-white);
	border-color: rgba(169, 155, 255, 0.55);
}

.dpb-blog__cat.is-current {
	background: var(--dpb-white);
	border: 1.5px solid var(--dpb-white);
	color: var(--dpb-bg);
}

/* Category tag on cards --------------------------------------------------- */

.dpb-ptag {
	display: inline-flex;
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: var(--dpb-r-pill);
	background: rgba(169, 155, 255, 0.18);
	border: 1px solid rgba(169, 155, 255, 0.22);
	color: var(--dpb-accent-2);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.7;
	text-decoration: none;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.dpb-ptag--pink {
	background: rgba(255, 111, 165, 0.18);
	color: var(--dpb-pink-2);
}

a.dpb-ptag:hover {
	color: var(--dpb-white);
}

/* Byline + meta (date • reading time) ------------------------------------ */

.dpb-byline {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dpb-avatar {
	flex: none;
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 25%;
	border: 1.5px solid rgba(169, 155, 255, 0.4);
}

.dpb-byline__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dpb-byline__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-text);
}

.dpb-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--dpb-muted-2);
}

.dpb-meta__time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.dpb-meta .dpb-icon {
	flex: none;
}

/* Featured card -------------------------------------------------------- */

.dpb-fcard {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	border-radius: var(--dpb-r-lg);
	overflow: hidden;
	background: var(--dpb-surface);
	border: 1px solid var(--dpb-line-strong);
	color: var(--dpb-text);
	text-decoration: none;
}

.dpb-fcard:hover {
	color: var(--dpb-text);
	border-color: rgba(169, 155, 255, 0.55);
	box-shadow: 0 30px 70px rgba(106, 87, 255, 0.24);
}

.dpb-fcard__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 20px;
	padding: 44px;
	min-width: 0;
}

.dpb-fcard__title {
	font-size: clamp(26px, 2.8vw, 38px);
	line-height: 1.6;
	font-weight: 900;
	color: var(--dpb-text);
}

.dpb-fcard__excerpt {
	font-size: 17px;
	line-height: 1.95;
	color: var(--dpb-muted);
}

.dpb-fcard__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 24px;
	border-radius: var(--dpb-r-pill);
	background: var(--dpb-primary);
	color: var(--dpb-white);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 14px 36px rgba(106, 87, 255, 0.38);
	transition: background-color 0.2s;
}

.dpb-fcard:hover .dpb-fcard__btn {
	background: var(--dpb-primary-hover);
}

.dpb-fcard__media {
	position: relative;
	min-height: 400px;
	background: var(--dpb-art);
}

.dpb-fcard__media > .dpb-card-art,
.dpb-fcard__media > .dpb-card-img {
	position: absolute;
	inset: 0;
}

/* Grid cards ----------------------------------------------------------- */

.dpb-post-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.dpb-post-grid__item {
	display: flex;
}

.dpb-pcard {
	flex: 1;
	display: flex;
	flex-direction: column;
	border-radius: var(--dpb-r-card);
	overflow: hidden;
	background: var(--dpb-surface);
	border: 1px solid var(--dpb-line-strong);
	color: var(--dpb-text);
	text-decoration: none;
}

.dpb-pcard:hover {
	color: var(--dpb-text);
	border-color: rgba(169, 155, 255, 0.5);
	transform: translateY(-4px);
	box-shadow: 0 22px 44px rgba(106, 87, 255, 0.22);
}

.dpb-pcard__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--dpb-art);
}

.dpb-pcard__media > .dpb-card-art,
.dpb-pcard__media > .dpb-card-img {
	position: absolute;
	inset: 0;
}

.dpb-pcard__media > .dpb-ptag {
	position: absolute;
	top: 14px;
	right: 14px;
}

.dpb-pcard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 12px;
	padding: 22px 24px 26px;
}

.dpb-pcard__title {
	font-size: 20px;
	font-weight: 900;
	line-height: 1.7;
	color: var(--dpb-text);
}

.dpb-pcard__excerpt {
	font-size: 15px;
	line-height: 1.9;
	color: var(--dpb-muted);
}

.dpb-pcard__foot {
	margin-top: auto;
	padding-top: 6px;
}

/* Empty state + pagination ------------------------------------------------ */

.dpb-blog__empty {
	padding: 40px 0;
	text-align: center;
	font-size: 16px;
	color: var(--dpb-muted);
}

.dpb-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.dpb-pagination .page-numbers {
	box-sizing: border-box;
}

.dpb-pagination a.page-numbers:hover {
	color: var(--dpb-white);
	border-color: rgba(169, 155, 255, 0.55);
	background: rgba(169, 155, 255, 0.1);
}

/* Motion (the home page's language, dev/MOTION.md) ------------------------
   Load: eyebrow → title → intro/search → chips → featured card rise in sequence.
   Scroll: grid cards reveal by column ([data-reveal] on the <li>, delays below; cards on
   screen at load wait for the heading — 50-article.js). Pointer: featured card tilts
   ([data-tilt]) with a spotlight; grid cards lift with a spotlight; chips and pages lift.
   `backwards` fill: once risen, tilt/hover transforms take over again. */

.dpb-blog__head > *,
.dpb-blog__search,
.dpb-blog__cat,
.dpb-blog__inner > .dpb-fcard,
.dpb-blog__empty {
	animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	animation-delay: calc(var(--d, 0) * 110ms + 100ms);
}

.dpb-blog__head > :nth-child(2) {
	--d: 1;
}

.dpb-blog__head > :nth-child(3),
.dpb-blog__search {
	--d: 2;
}

.dpb-blog__cat {
	--d: 3;
	animation-delay: calc(var(--d) * 110ms + 100ms + var(--c, 0) * 45ms);
}

.dpb-blog__cat:nth-child(2) { --c: 1; }
.dpb-blog__cat:nth-child(3) { --c: 2; }
.dpb-blog__cat:nth-child(4) { --c: 3; }
.dpb-blog__cat:nth-child(5) { --c: 4; }
.dpb-blog__cat:nth-child(6) { --c: 5; }
.dpb-blog__cat:nth-child(n + 7) { --c: 6; }

.dpb-blog__inner > .dpb-fcard,
.dpb-blog__empty {
	--d: 4;
}

/* Soft breathing glow behind the heading. */
.dpb-blog__glow {
	animation: dpb-glow-breathe 9s ease-in-out infinite;
}

@keyframes dpb-glow-breathe {
	0%,
	100% {
		opacity: 0.88;
		scale: 1;
	}
	50% {
		opacity: 1;
		scale: 1.05;
	}
}

/* Search: focus glow like the design's fields. */
.dpb-search__input {
	transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}

.dpb-search__input:hover:not(:focus) {
	border-color: rgba(255, 255, 255, 0.28);
}

.dpb-search__input:focus {
	background: rgba(169, 155, 255, 0.06);
	box-shadow: 0 0 0 4px rgba(169, 155, 255, 0.16), 0 12px 32px rgba(106, 87, 255, 0.18);
}

.dpb-search__btn {
	transition: color 0.2s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dpb-search:focus-within .dpb-search__btn {
	color: var(--dpb-accent);
}

.dpb-search__btn:hover {
	transform: translateY(-50%) scale(1.08);
}

/* Category chips */
.dpb-blog__cat {
	transition: color 0.25s, background-color 0.25s, border-color 0.25s, box-shadow 0.3s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dpb-blog__cat:active {
	transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
	.dpb-blog__cat:hover {
		background: rgba(169, 155, 255, 0.1);
		box-shadow: 0 10px 24px rgba(106, 87, 255, 0.2);
		transform: translateY(-2px);
	}
	.dpb-blog__cat.is-current:hover {
		background: var(--dpb-white);
		box-shadow: 0 10px 28px rgba(255, 255, 255, 0.14);
	}
}

/* Featured card: [data-tilt] drives transform; keep its transition here. */
.dpb-fcard {
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, box-shadow 0.35s;
}

.dpb-fcard__media,
.dpb-pcard__media {
	overflow: hidden;
}

.dpb-fcard__media > .dpb-card-art,
.dpb-fcard__media > .dpb-card-img,
.dpb-pcard__media > .dpb-card-art,
.dpb-pcard__media > .dpb-card-img {
	transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dpb-fcard:hover .dpb-fcard__media > .dpb-card-art,
.dpb-fcard:hover .dpb-fcard__media > .dpb-card-img,
.dpb-pcard:hover .dpb-pcard__media > .dpb-card-art,
.dpb-pcard:hover .dpb-pcard__media > .dpb-card-img {
	transform: scale(1.04);
}

.dpb-fcard__btn {
	transition: background-color 0.2s, box-shadow 0.3s;
}

.dpb-fcard:hover .dpb-fcard__btn {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 18px 44px rgba(106, 87, 255, 0.5);
}

.dpb-fcard__btn .dpb-icon,
.dpb-related__all .dpb-icon {
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dpb-fcard:hover .dpb-fcard__btn .dpb-icon,
.dpb-related__all:hover .dpb-icon {
	transform: translateX(-4px);
}

/* Grid cards (also «مقاله‌های مرتبط» on a post) */
.dpb-pcard {
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, box-shadow 0.35s;
}

.dpb-pcard__title {
	transition: color 0.25s;
}

.dpb-pcard:hover .dpb-pcard__title {
	color: var(--dpb-white);
}

/* Column delays for the card reveal (3 → 2 → 1 columns). */
.dpb-post-grid > :nth-child(3n + 2) {
	--d: 1;
}

.dpb-post-grid > :nth-child(3n) {
	--d: 2;
}

/* Pagination */
.dpb-pagination .page-numbers {
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.25s, background-color 0.25s, border-color 0.25s, box-shadow 0.3s;
}

.dpb-pagination a.page-numbers:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(106, 87, 255, 0.2);
}

.dpb-pagination a.page-numbers:active {
	transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
	.dpb-blog__head > *,
	.dpb-blog__search,
	.dpb-blog__cat,
	.dpb-blog__inner > .dpb-fcard,
	.dpb-blog__empty,
	.dpb-blog__glow {
		animation: none;
	}
}

/* Tablet ------------------------------------------------------------------ */

@media (max-width: 960px) {
	.dpb-post-grid > :nth-child(n) {
		--d: 0;
	}
	.dpb-post-grid > :nth-child(2n) {
		--d: 1;
	}
	.dpb-fcard__body {
		padding: 32px;
	}
	.dpb-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile (M-BlogPage) ------------------------------------------------------ */

@media (max-width: 720px) {
	.dpb-blog__glow {
		width: 520px;
		height: 520px;
	}
	.dpb-blog__inner {
		gap: 28px;
		padding-top: calc(var(--dpb-header-h) + 14px);
		padding-bottom: 40px;
	}
	.dpb-blog__top {
		flex-direction: column;
		align-items: stretch;
	}
	.dpb-blog__head {
		gap: 14px;
	}
	.dpb-blog__title {
		font-size: 40px;
	}
	.search .dpb-blog__title {
		font-size: 30px;
	}
	.dpb-blog__intro {
		font-size: 16px;
	}
	.dpb-search {
		width: 100%;
	}
	.dpb-blog__cats {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 6px;
		margin-inline: calc(-1 * var(--dpb-gutter));
		padding-inline: var(--dpb-gutter);
		scrollbar-width: none;
	}
	.dpb-blog__cats::-webkit-scrollbar {
		display: none;
	}
	.dpb-fcard {
		grid-template-columns: 1fr;
	}
	.dpb-fcard__media {
		order: -1;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}
	.dpb-fcard__body {
		gap: 16px;
		padding: 24px;
	}
	.dpb-fcard__title {
		font-size: 24px;
	}
	.dpb-post-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.dpb-post-grid > :nth-child(n) {
		--d: 0;
	}
}

/* ---- assets/css/src/55-article.css ---- */
/* ==========================================================================
   Single post (single.php, comments.php, template-parts/article-*.php)
   ========================================================================== */

.dpb-article {
	position: relative;
	overflow-x: clip;
}

.dpb-article__glow {
	position: absolute;
	left: 50%;
	top: 300px;
	width: 700px;
	height: 700px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(106, 87, 255, 0.26), rgba(106, 87, 255, 0));
	pointer-events: none;
}

.dpb-article__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding-top: calc(var(--dpb-header-h) + 16px);
	padding-bottom: 64px;
}

/* Header ---------------------------------------------------------------- */

.dpb-article__head {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.dpb-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--dpb-muted-2);
}

.dpb-crumbs a {
	color: var(--dpb-muted);
	text-decoration: none;
}

.dpb-crumbs a:hover {
	color: var(--dpb-white);
}

.dpb-crumbs__sep {
	color: #6E6896;
}

.dpb-crumbs .dpb-crumbs__last {
	color: var(--dpb-text-nav);
}

.dpb-article__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.dpb-article__title {
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.55;
	font-weight: 900;
	max-width: 20em;
	overflow-wrap: break-word;
}

.dpb-byline--lg {
	gap: 14px;
}

.dpb-byline--lg .dpb-avatar {
	width: 52px;
	height: 52px;
}

.dpb-byline--lg .dpb-byline__text {
	gap: 4px;
}

.dpb-byline--lg .dpb-byline__name {
	font-size: 16px;
}

/* Share menu ------------------------------------------------------------ */

.dpb-share {
	position: relative;
	flex: none;
}

.dpb-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--dpb-r-pill);
	border: 1.5px solid var(--dpb-ghost-line);
	background: rgba(255, 255, 255, 0.04);
	color: var(--dpb-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	list-style: none;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.2s, background-color 0.2s, box-shadow 0.3s;
}

.dpb-share__btn::-webkit-details-marker {
	display: none;
}

.dpb-share__btn:hover,
.dpb-share[open] .dpb-share__btn {
	border-color: rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.08);
}

.dpb-share__menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	min-width: 200px;
	padding: 8px;
	border-radius: 18px;
	background: var(--dpb-surface-2);
	border: 1px solid rgba(169, 155, 255, 0.28);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.dpb-share__item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: 12px;
	background: none;
	color: var(--dpb-text-nav);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	text-align: right;
	text-decoration: none;
	cursor: pointer;
}

.dpb-share__item:hover,
.dpb-share__item:focus-visible {
	background: rgba(169, 155, 255, 0.1);
	color: var(--dpb-white);
}

.dpb-share__item .dpb-icon {
	flex: none;
	color: var(--dpb-accent);
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.25, 1.15);
}

.dpb-share__item:hover .dpb-icon {
	transform: scale(1.12);
}

.dpb-share__copy.is-done {
	color: #9DF0CB;
}

/* Featured image ---------------------------------------------------------- */

.dpb-article__hero {
	position: relative;
	height: 440px;
	border-radius: var(--dpb-r-lg);
	overflow: hidden;
	background: var(--dpb-art);
	border: 1px solid var(--dpb-line-strong);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.dpb-article__hero > .dpb-card-art,
.dpb-article__hero > .dpb-card-img {
	position: absolute;
	inset: 0;
}

/* Content + sidebar ------------------------------------------------------- */

.dpb-article__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 72px;
	align-items: start;
}

.dpb-article__main {
	max-width: 720px;
	min-width: 0;
}

.dpb-article__aside {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* «در این مقاله» */
.dpb-toc--box {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px;
	border-radius: 26px;
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.2);
}

.dpb-toc__title {
	font-size: 17px;
	font-weight: 900;
	line-height: 1.6;
}

.dpb-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dpb-toc__link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 6px 10px;
	border-radius: 12px;
	color: var(--dpb-text-nav);
	font-size: 15px;
	line-height: 1.7;
	text-decoration: none;
}

.dpb-toc__link:hover {
	background: rgba(169, 155, 255, 0.08);
	color: var(--dpb-white);
}

.dpb-toc__num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(169, 155, 255, 0.14);
	color: var(--dpb-accent-2);
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
}

.dpb-toc--details {
	display: none;
	padding: 0 16px;
	border-radius: 20px;
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.2);
}

.dpb-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	font-size: 16px;
	font-weight: 900;
	list-style: none;
	cursor: pointer;
}

.dpb-toc__summary::-webkit-details-marker {
	display: none;
}

.dpb-toc__chev {
	flex: none;
	color: var(--dpb-accent);
	transition: transform 0.2s;
}

.dpb-toc--details[open] .dpb-toc__chev {
	transform: rotate(180deg);
}

.dpb-toc__body {
	padding: 0 0 12px;
}

/* Sidebar card */
.dpb-promo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 22px;
	border-radius: 26px;
	background: rgba(106, 87, 255, 0.12);
	border: 1px solid rgba(169, 155, 255, 0.3);
}

.dpb-promo__title {
	font-size: 18px;
	line-height: 1.6;
	font-weight: 900;
}

.dpb-promo__text {
	font-size: 15px;
	line-height: 1.9;
	color: var(--dpb-text-nav);
}

.dpb-promo .dpb-btn {
	min-height: 50px;
}

/* Buttons sized like the design (48–50px, 16px text). */
.dpb-btn.dpb-btn--soft {
	min-height: 48px;
	padding: 0 26px;
	font-size: 16px;
}

.dpb-btn--primary.dpb-btn--soft,
.dpb-btn--primary.dpb-btn--cta {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 14px 36px rgba(106, 87, 255, 0.38);
}

.dpb-btn.dpb-btn--cta {
	min-height: 56px;
	padding: 0 26px;
	font-size: 16px;
}

/* Article text (extends .dpb-prose from 40-pages.css) --------------------- */

.dpb-prose--article {
	font-size: 18px;
	line-height: 2.1;
	color: var(--dpb-text-nav);
}

.dpb-prose--article > * + * {
	margin-top: 24px;
}

.dpb-prose--article > p:first-child {
	font-size: 22px;
	line-height: 2;
	font-weight: 500;
	color: var(--dpb-text);
}

.dpb-prose--article h2,
.dpb-prose--article h3,
.dpb-prose--article h4 {
	color: var(--dpb-text);
	font-weight: 900;
	scroll-margin-top: 100px;
}

.dpb-prose--article > h2 {
	margin-top: 40px;
	font-size: 30px;
	line-height: 1.5;
}

.dpb-prose--article > h3 {
	margin-top: 36px;
	font-size: 24px;
	line-height: 1.6;
}

.dpb-prose--article > h4 {
	margin-top: 32px;
	font-size: 20px;
	line-height: 1.6;
}

.dpb-prose--article > :first-child {
	margin-top: 0;
}

/* Quote */
.dpb-prose--article blockquote {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 32px;
	border: 1px solid rgba(169, 155, 255, 0.3);
	border-radius: 24px;
	background: rgba(106, 87, 255, 0.12);
	color: var(--dpb-text);
	font-size: 26px;
	line-height: 1.8;
	font-weight: 900;
}

.dpb-prose--article blockquote::before {
	content: "";
	display: block;
	width: 36px;
	height: 28px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 36'%3E%3Cpath fill='%23A99BFF' d='M0 36V22C0 10 6 3 18 0l2 5c-6 2-8 6-8 10h8v21H0zm26 0V22c0-12 6-19 18-22l2 5c-6 2-8 6-8 10h8v21H26z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.dpb-prose--article blockquote p {
	margin: 0;
}

.dpb-prose--article blockquote cite,
.dpb-prose--article blockquote footer {
	display: block;
	margin: 0;
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.8;
	color: var(--dpb-muted-2);
}

.dpb-prose--article > blockquote,
.dpb-prose--article > figure,
.dpb-prose--article > blockquote + *,
.dpb-prose--article > figure + * {
	margin-top: 32px;
}

.dpb-prose--article .wp-block-pullquote {
	padding: 0;
	border: 0;
	text-align: right;
}

/* Bullet list with check circles */
.dpb-prose--article ul.wp-block-list,
.dpb-prose--article ul:not([class]) {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dpb-prose--article ul.wp-block-list > li,
.dpb-prose--article ul:not([class]) > li {
	position: relative;
	margin: 0;
	padding-right: 30px;
	font-size: 17px;
	line-height: 1.9;
}

.dpb-prose--article ul.wp-block-list > li::before,
.dpb-prose--article ul:not([class]) > li::before {
	content: "";
	position: absolute;
	top: 0.32em;
	right: 0;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23A99BFF' d='M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88'/%3E%3C/svg%3E") no-repeat center / contain;
}

.dpb-prose--article li > ul,
.dpb-prose--article li > ol {
	margin-top: 12px;
}

.dpb-prose--article ol {
	list-style-type: persian;
}

.dpb-prose--article ol > li {
	font-size: 17px;
	line-height: 1.9;
	padding-right: 4px;
}

.dpb-prose--article ol > li::marker {
	color: var(--dpb-accent);
	font-weight: 900;
}

/* «نکته» callout: paragraph or group with the block style «نکته» (or the class dpb-callout).
   Start it with a bold word, e.g. **نکته** — it becomes the small title. */
.dpb-prose--article .is-style-dpb-callout,
.dpb-prose--article .dpb-callout,
.editor-styles-wrapper .is-style-dpb-callout {
	position: relative;
	min-height: 84px;
	padding: 22px 78px 22px 24px;
	border-radius: 22px;
	background: var(--dpb-surface-2);
	border: 1px solid rgba(169, 155, 255, 0.28);
	font-size: 16px;
	line-height: 1.95;
	color: var(--dpb-text-nav);
}

.dpb-prose--article .is-style-dpb-callout::before,
.dpb-prose--article .dpb-callout::before,
.editor-styles-wrapper .is-style-dpb-callout::before {
	content: "";
	position: absolute;
	top: 22px;
	right: 24px;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: rgba(169, 155, 255, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23C7BCFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}

.dpb-prose--article .is-style-dpb-callout > strong:first-child,
.dpb-prose--article .dpb-callout > strong:first-child,
.dpb-prose--article .is-style-dpb-callout > :first-child > strong:first-child,
.dpb-prose--article .dpb-callout > :first-child > strong:first-child,
.editor-styles-wrapper .is-style-dpb-callout > strong:first-child,
.editor-styles-wrapper .is-style-dpb-callout > :first-child > strong:first-child {
	display: block;
	margin-bottom: 4px;
	color: var(--dpb-accent-2);
	font-size: 16px;
}

.dpb-prose--article .is-style-dpb-callout > *,
.dpb-prose--article .dpb-callout > * {
	margin: 0;
}

.editor-styles-wrapper .is-style-dpb-callout {
	box-sizing: border-box;
}

.dpb-prose--article .is-style-dpb-callout > * + *,
.dpb-prose--article .dpb-callout > * + * {
	margin-top: 8px;
}

/* Images */
.dpb-prose--article figure img,
.dpb-prose--article > p > img {
	display: block;
	border-radius: 24px;
	border: 1px solid var(--dpb-line-strong);
}

.dpb-prose--article figcaption,
.dpb-prose--article .wp-element-caption {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--dpb-muted-2);
	text-align: right;
}

.dpb-prose--article .wp-block-image.aligncenter figcaption,
.dpb-prose--article .has-text-align-center {
	text-align: center;
}

.dpb-article__pages {
	margin-top: 32px;
	justify-content: flex-start;
}

.dpb-article__pages .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(169, 155, 255, 0.22);
	color: var(--dpb-text-nav);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.dpb-article__pages .post-page-numbers.current {
	background: var(--dpb-primary);
	border-color: var(--dpb-primary);
	color: var(--dpb-white);
}

/* Author box -------------------------------------------------------------- */

.dpb-author-box {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 32px;
	border-radius: var(--dpb-r-card);
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.22);
}

.dpb-author-box .dpb-author-box__photo {
	width: 88px;
	height: 88px;
}

.dpb-author-box__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.dpb-author-box__label {
	font-size: 13px;
	line-height: 1.7;
	color: var(--dpb-muted-2);
}

.dpb-author-box__name {
	font-size: 22px;
	line-height: 1.5;
	font-weight: 900;
}

.dpb-author-box__bio {
	font-size: 16px;
	line-height: 1.95;
	color: var(--dpb-muted);
	max-width: 40em;
}

.dpb-author-box__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 6px;
}

/* Comments ---------------------------------------------------------------- */

.dpb-comments {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
}

.dpb-comments__head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dpb-comments__title-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dpb-comments .comments-title {
	font-size: 32px;
	line-height: 1.4;
	font-weight: 900;
}

.dpb-comments__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border-radius: var(--dpb-r-pill);
	background: rgba(169, 155, 255, 0.16);
	color: var(--dpb-accent-2);
	font-size: 15px;
	font-weight: 900;
}

.dpb-comments__sub {
	font-size: 15px;
	line-height: 1.9;
	color: var(--dpb-muted);
}

.dpb-comments .comment-list,
.dpb-comments .children {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dpb-comments .children {
	margin: 14px 28px 0 0;
	padding: 0 20px 0 0;
	border-right: 2px solid rgba(169, 155, 255, 0.22);
}

.dpb-comment {
	list-style: none;
}

.dpb-comment__body {
	display: flex;
	gap: 16px;
	padding: 20px 22px;
	border-radius: 22px;
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.18);
}

.dpb-comment.bypostauthor > .dpb-comment__body,
.dpb-comment.is-author > .dpb-comment__body {
	background: rgba(106, 87, 255, 0.12);
	border-color: rgba(169, 155, 255, 0.38);
}

.dpb-comment.is-pending > .dpb-comment__body {
	border: 1px dashed rgba(255, 111, 165, 0.5);
}

.dpb-comment__avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #2E2670;
	color: var(--dpb-accent);
}

.dpb-comment__main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.dpb-comment__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.dpb-comment__meta .fn {
	font-size: 16px;
	font-weight: 900;
	line-height: 1.6;
	color: var(--dpb-text);
}

.dpb-comment__badge {
	display: inline-flex;
	padding: 2px 10px;
	border-radius: var(--dpb-r-pill);
	background: var(--dpb-primary);
	color: var(--dpb-white);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.7;
}

.dpb-comment__badge--pending {
	background: rgba(255, 111, 165, 0.16);
	border: 1px solid rgba(255, 111, 165, 0.4);
	color: var(--dpb-pink-2);
}

.dpb-comment__meta .comment-date {
	font-size: 13px;
	color: var(--dpb-muted-2);
	text-decoration: none;
}

.dpb-comment__meta .comment-date:hover {
	color: var(--dpb-white);
}

.dpb-comment__replyto {
	font-size: 13px;
	color: var(--dpb-muted-2);
}

.dpb-comment .comment-content {
	align-self: stretch;
	font-size: 16px;
	line-height: 2;
	color: var(--dpb-text-nav);
	overflow-wrap: break-word;
}

.dpb-comment .comment-content > * + * {
	margin-top: 10px;
}

.dpb-comment .comment-content a {
	color: var(--dpb-accent-2);
}

.dpb-comment .comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	margin-right: -14px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--dpb-accent-2);
	text-decoration: none;
}

.dpb-comment .comment-reply-link:hover {
	background: rgba(169, 155, 255, 0.1);
	color: var(--dpb-white);
}

.dpb-comment .comment-respond {
	margin-top: 14px;
}

.dpb-comments .comment-navigation .nav-links {
	justify-content: space-between;
	gap: 12px;
}

.dpb-comments .comment-navigation .nav-next {
	margin-right: auto;
}

.dpb-comments .comment-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--dpb-r-pill);
	border: 1px solid rgba(169, 155, 255, 0.22);
	background: rgba(255, 255, 255, 0.04);
	color: var(--dpb-text-nav);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.dpb-comments .comment-navigation a:hover {
	color: var(--dpb-white);
	border-color: rgba(169, 155, 255, 0.5);
}

/* Comment form */
.dpb-respond {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 36px;
	border-radius: var(--dpb-r-card);
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.24);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.dpb-respond .comment-reply-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 22px;
	line-height: 1.5;
	font-weight: 900;
}

.dpb-respond .comment-reply-title small {
	font-size: 14px;
	font-weight: 700;
}

.dpb-respond #cancel-comment-reply-link {
	color: var(--dpb-pink-2);
	text-decoration: none;
}

.dpb-respond #cancel-comment-reply-link:hover {
	color: var(--dpb-white);
}

.dpb-cform {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.dpb-cform p {
	margin: 0;
}

.dpb-cform .comment-notes,
.dpb-cform .logged-in-as,
.dpb-respond .must-log-in {
	font-size: 14px;
	line-height: 1.9;
	color: var(--dpb-muted);
}

.dpb-cform .logged-in-as a,
.dpb-respond .must-log-in a {
	color: var(--dpb-accent-2);
}

.dpb-cform .required {
	color: var(--dpb-pink-2);
}

.dpb-cform__notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	border-radius: 18px;
	background: rgba(169, 155, 255, 0.12);
	border: 1px solid rgba(169, 155, 255, 0.3);
	font-size: 15px;
	line-height: 1.9;
	color: var(--dpb-text-nav);
}

.dpb-cform__notice .dpb-icon {
	flex: none;
	margin-top: 3px;
	color: var(--dpb-accent-2);
}

.dpb-cform .comment-form-comment,
.dpb-cform .comment-form-author,
.dpb-cform .comment-form-email,
.dpb-cform .comment-form-url {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dpb-cform label {
	font-size: 14px;
	line-height: 1.8;
	color: var(--dpb-text-nav);
}

.dpb-cform input[type="text"],
.dpb-cform input[type="email"],
.dpb-cform input[type="url"],
.dpb-cform textarea {
	width: 100%;
	min-height: 50px;
	padding: 0 16px;
	border-radius: 14px;
	background: var(--dpb-bg);
	border: 1.5px solid rgba(169, 155, 255, 0.22);
	color: var(--dpb-text);
	font-family: inherit;
	font-size: 15px;
	text-align: right;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.dpb-cform textarea {
	display: block;
	padding: 14px 16px;
	line-height: 1.9;
	resize: vertical;
}

.dpb-cform input::placeholder,
.dpb-cform textarea::placeholder {
	color: var(--dpb-faint);
}

.dpb-cform input[dir="ltr"]:not(:placeholder-shown) {
	text-align: left;
}

.dpb-cform input:focus,
.dpb-cform textarea:focus {
	outline: none;
	border-color: var(--dpb-accent);
	box-shadow: 0 0 0 4px rgba(169, 155, 255, 0.16);
}

.dpb-cform [aria-invalid="true"] {
	border-color: rgba(255, 111, 165, 0.7);
}

.dpb-cform__error {
	font-size: 13px;
	line-height: 1.7;
	color: var(--dpb-pink-2);
}

.dpb-cform__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.dpb-cform .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.dpb-cform .comment-form-cookies-consent input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: var(--dpb-primary);
}

.dpb-cform .comment-form-cookies-consent label {
	line-height: 1.9;
	color: var(--dpb-muted);
}

.dpb-cform .dpb-cform__submit {
	min-height: 56px;
	padding: 0 28px;
	font-size: 16px;
	box-shadow: 0 14px 36px rgba(106, 87, 255, 0.38);
}

/* Related posts ------------------------------------------------------------ */

.dpb-related {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.dpb-related__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.dpb-related__title {
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.4;
	font-weight: 900;
}

.dpb-related__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--dpb-accent-2);
	text-decoration: none;
	white-space: nowrap;
}

/* Closing band ----------------------------------------------------------- */

.dpb-article-cta {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 64px 32px;
	border-radius: var(--dpb-r-lg);
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.24);
	text-align: center;
}

.dpb-article-cta__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 600px;
	height: 600px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(106, 87, 255, 0.28), rgba(106, 87, 255, 0));
	pointer-events: none;
}

.dpb-article-cta__title,
.dpb-article-cta__text,
.dpb-article-cta__btns {
	position: relative;
}

.dpb-article-cta__title {
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.5;
	font-weight: 900;
}

.dpb-article-cta__text {
	font-size: 17px;
	line-height: 1.9;
	color: var(--dpb-muted);
	max-width: 28em;
}

.dpb-article-cta__btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* Motion (the home page's language, dev/MOTION.md) ------------------------
   Load: breadcrumb → category/share → title → byline → image rise in sequence; the image
   then drifts inside its frame ([data-photo]). Reading: the contents box stays in view when it
   fits (.is-sticky) and marks the current section (.is-current, 50-article.js); headings,
   quotes and figures fade up gently (.dpb-soft, 40-pages.css). Closing band: flow lines. */

.dpb-article__head > *,
.dpb-article__hero {
	animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	animation-delay: calc(var(--d, 0) * 110ms + 100ms);
}

.dpb-article__head > :nth-child(2) {
	--d: 1;
}

.dpb-article__head > :nth-child(3) {
	--d: 2;
}

.dpb-article__head > :nth-child(4) {
	--d: 3;
}

.dpb-article__hero {
	--d: 4;
}

.dpb-article__glow {
	animation: dpb-glow-breathe 9s ease-in-out infinite;
}

/* Featured image drift: oversized inside the frame, moved by 00-site.js. */
.dpb-article__hero > [data-photo] {
	inset: -7% 0;
	height: 114%;
	will-change: transform;
}

/* Share: the menu drops in (springy), items follow; closes with a short fade (50-article.js). */
.dpb-share__btn .dpb-icon {
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.25, 1.15);
}

.dpb-share__btn:hover .dpb-icon,
.dpb-share[open] .dpb-share__btn .dpb-icon {
	transform: translate(-2px, -2px) rotate(-8deg);
}

.dpb-share[open] .dpb-share__btn {
	box-shadow: 0 0 0 4px rgba(169, 155, 255, 0.1);
}

.dpb-share__menu {
	transform-origin: 0 0;
}

.dpb-share[open] .dpb-share__menu {
	animation: dpb-share-in 0.34s cubic-bezier(0.2, 0.8, 0.25, 1.15) both;
}

.dpb-share.is-closing .dpb-share__menu {
	animation: dpb-share-out 0.16s ease-in both;
}

.dpb-share[open] .dpb-share__item {
	animation: dpb-share-item 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	animation-delay: calc(var(--i, 0) * 40ms + 60ms);
}

.dpb-share__item:nth-child(2) { --i: 1; }
.dpb-share__item:nth-child(3) { --i: 2; }
.dpb-share__item:nth-child(4) { --i: 3; }

@keyframes dpb-share-in {
	from {
		opacity: 0;
		transform: translateY(-8px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes dpb-share-out {
	from {
		opacity: 1;
		transform: none;
	}
	to {
		opacity: 0;
		transform: translateY(-6px) scale(0.97);
	}
}

@keyframes dpb-share-item {
	from {
		opacity: 0;
		transform: translateX(10px);
	}
}

/* «در این مقاله»: current section */
.dpb-article__aside.is-sticky {
	position: sticky;
	top: calc(var(--dpb-header-h) + 24px);
}

.dpb-toc__link {
	transition: background-color 0.3s, color 0.3s;
}

.dpb-toc__num {
	transition: background-color 0.35s, color 0.35s, box-shadow 0.35s, transform 0.4s cubic-bezier(0.2, 0.8, 0.25, 1.15);
}

.dpb-toc__link.is-current {
	background: rgba(169, 155, 255, 0.1);
	color: var(--dpb-white);
}

.dpb-toc__link.is-current .dpb-toc__num {
	background: var(--dpb-primary);
	color: var(--dpb-white);
	box-shadow: 0 0 0 4px rgba(106, 87, 255, 0.18), 0 6px 18px rgba(106, 87, 255, 0.45);
	transform: scale(1.08);
}

.dpb-toc--details[open] .dpb-toc__body {
	animation: dpb-toc-open 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes dpb-toc-open {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Sidebar card and author box */
.dpb-promo,
.dpb-author-box,
.dpb-comment__body {
	transition: border-color 0.35s, box-shadow 0.35s;
}

.dpb-promo:hover,
.dpb-author-box:hover {
	border-color: rgba(169, 155, 255, 0.45);
	box-shadow: 0 22px 44px rgba(106, 87, 255, 0.16);
}

.dpb-comment__body:hover {
	border-color: rgba(169, 155, 255, 0.32);
}

.dpb-author-box .dpb-author-box__photo {
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.25, 1.15), box-shadow 0.5s;
}

.dpb-author-box:hover .dpb-author-box__photo {
	transform: scale(1.05) rotate(-3deg);
	box-shadow: 0 0 0 4px rgba(169, 155, 255, 0.16), 0 12px 30px rgba(106, 87, 255, 0.35);
}

/* Comment form fields: the design's focus glow */
.dpb-cform input[type="text"]:hover:not(:focus),
.dpb-cform input[type="email"]:hover:not(:focus),
.dpb-cform input[type="url"]:hover:not(:focus),
.dpb-cform textarea:hover:not(:focus) {
	border-color: rgba(169, 155, 255, 0.38);
}

.dpb-cform input:focus,
.dpb-cform textarea:focus {
	box-shadow: 0 0 0 4px rgba(169, 155, 255, 0.16), 0 12px 32px rgba(106, 87, 255, 0.16);
}

.dpb-cform__error {
	animation: dpb-share-item 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.dpb-article__pages .post-page-numbers {
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.25s, border-color 0.25s, background-color 0.25s;
}

.dpb-article__pages a.post-page-numbers:hover {
	transform: translateY(-2px);
	color: var(--dpb-white);
	border-color: rgba(169, 155, 255, 0.55);
}

/* Closing band: flow lines behind the copy (like the home page's last section). The
   canvas fades in on .gl-ready; a soft veil keeps the text readable; without WebGL the
   band keeps its glow. The scene settles its lines into one bright line at 35% of the canvas
   height (29% when portrait), so the canvas is taller than the band and shifted up: the line
   lands in the top padding, above the title (lines above, copy below — as on the home page). */
.dpb-article-cta {
	isolation: isolate;
}

.dpb-article-cta__glow {
	z-index: 0;
}

.dpb-article-cta > .flow-canvas {
	position: absolute;
	top: -168px;
	right: 0;
	left: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 560px;
	opacity: 0;
	transition: opacity 1.4s ease;
	touch-action: pan-y;
}

.dpb-article-cta.gl-ready > .flow-canvas {
	opacity: 1;
}

.dpb-article-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.4s ease;
	background:
		radial-gradient(46% 52% at 50% 62%, rgba(20, 16, 51, 0.88), rgba(20, 16, 51, 0.55) 60%, rgba(20, 16, 51, 0) 100%),
		linear-gradient(to top, rgba(20, 16, 51, 0.75), rgba(20, 16, 51, 0) 70%);
}

.dpb-article-cta.gl-ready::after {
	opacity: 1;
}

.dpb-article-cta__title,
.dpb-article-cta__text,
.dpb-article-cta__btns {
	z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
	.dpb-article__head > *,
	.dpb-article__hero,
	.dpb-article__glow,
	.dpb-share[open] .dpb-share__menu,
	.dpb-share.is-closing .dpb-share__menu,
	.dpb-share[open] .dpb-share__item,
	.dpb-toc--details[open] .dpb-toc__body,
	.dpb-cform__error {
		animation: none;
	}
}

/* Tablet: one column, sidebar card after the text ------------------------ */

@media (max-width: 960px) {
	.dpb-article__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.dpb-article__main {
		display: flex;
		flex-direction: column;
		gap: 28px;
		max-width: none;
	}
	.dpb-toc--details {
		display: block;
	}
	.dpb-toc--box {
		display: none;
	}
}

/* Mobile (M-ArticlePage) --------------------------------------------------- */

@media (max-width: 720px) {
	.dpb-article__glow {
		width: 520px;
		height: 520px;
	}
	.dpb-article__inner {
		gap: 32px;
		padding-top: calc(var(--dpb-header-h) + 14px);
		padding-bottom: 40px;
	}
	.dpb-article__head {
		gap: 18px;
	}
	.dpb-article__title {
		font-size: 30px;
	}
	.dpb-article__hero {
		height: auto;
		aspect-ratio: 16 / 10;
		border-radius: 24px;
	}
	.dpb-article__hero > [data-photo] {
		inset: -12% 0;
		height: 124%;
	}
	.dpb-article-cta > .flow-canvas {
		top: -185px;
		height: 700px;
	}
	.dpb-prose--article {
		font-size: 17px;
		line-height: 2.1;
	}
	.dpb-prose--article > p:first-child {
		font-size: 19px;
	}
	.dpb-prose--article > h2 {
		font-size: 24px;
	}
	.dpb-prose--article > h3 {
		font-size: 21px;
	}
	.dpb-prose--article blockquote {
		padding: 22px;
		font-size: 20px;
	}
	.dpb-prose--article .is-style-dpb-callout,
	.dpb-prose--article .dpb-callout {
		padding: 18px 72px 18px 18px;
	}
	.dpb-prose--article .is-style-dpb-callout::before,
	.dpb-prose--article .dpb-callout::before {
		top: 18px;
		right: 18px;
	}
	.dpb-author-box {
		flex-direction: column;
		align-items: flex-start;
		padding: 22px;
	}
	.dpb-author-box .dpb-author-box__photo {
		width: 72px;
		height: 72px;
	}
	.dpb-comments {
		gap: 24px;
	}
	.dpb-comments .comments-title {
		font-size: 26px;
	}
	.dpb-comments .children {
		margin: 14px 12px 0 0;
		padding: 0 12px 0 0;
	}
	.dpb-comment__body {
		gap: 12px;
		padding: 16px;
	}
	.dpb-respond {
		padding: 22px;
	}
	.dpb-cform__row {
		grid-template-columns: 1fr;
	}
	.dpb-cform .dpb-cform__submit {
		width: 100%;
	}
	.dpb-related {
		gap: 20px;
	}
	.dpb-related__title {
		font-size: 26px;
	}
	.dpb-article-cta {
		padding: 36px 20px;
	}
	.dpb-article-cta__title {
		font-size: 24px;
	}
	.dpb-article-cta__btns {
		flex-direction: column;
		width: 100%;
	}
	.dpb-article-cta__btns .dpb-btn {
		width: 100%;
	}
}

/* ---- assets/css/src/60-notfound.css ---- */
/* ==========================================================================
   404 — page not found (404.php)
   Motion: the page rises in sequence on load; while «distracted» the zero bobs, its dashed
   ring wobbles, the squiggle jitters and the glow breathes. «کمک کن تمرکز کند» (.is-focused,
   50-article.js) settles everything smoothly: the amplitudes ease to zero (registered custom
   properties), the ring straightens and turns solid, the squiggle flattens into a line that
   draws out from the centre, the texts cross-fade. Reduced motion: final states, no loops.
   ========================================================================== */

@property --dpb-nf-amp {
	syntax: "<length>";
	inherits: true;
	initial-value: 14px;
}

@property --dpb-nf-wob {
	syntax: "<angle>";
	inherits: true;
	initial-value: 7deg;
}

.dpb-404 {
	--dpb-nf-amp: 14px;
	--dpb-nf-wob: 7deg;
	position: relative;
	overflow: hidden;
	transition: --dpb-nf-amp 1s cubic-bezier(0.2, 0.7, 0.2, 1), --dpb-nf-wob 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dpb-404.is-focused {
	--dpb-nf-amp: 0px;
	--dpb-nf-wob: 0deg;
}

/* Load sequence */
.dpb-404__inner > * {
	animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	animation-delay: calc(var(--d, 0) * 110ms + 100ms);
}

.dpb-404__inner > :nth-child(2) { --d: 1; }
.dpb-404__inner > :nth-child(3) { --d: 2; }
.dpb-404__inner > :nth-child(4) { --d: 3; }
.dpb-404__inner > :nth-child(5) { --d: 4; }
.dpb-404__inner > :nth-child(6) { --d: 5; }
.dpb-404__inner > :nth-child(n + 7) { --d: 6; }

.dpb-404__glow {
	position: absolute;
	left: 50%;
	top: 330px;
	width: 900px;
	height: 900px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(106, 87, 255, 0.3), rgba(106, 87, 255, 0));
	pointer-events: none;
	animation: dpb-glow-breathe 8s ease-in-out infinite;
}

/* A brighter core gathers when the page «focuses». */
.dpb-404__glow::after {
	content: "";
	position: absolute;
	inset: 24%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(140, 123, 255, 0.34), rgba(140, 123, 255, 0));
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 1.2s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dpb-404.is-focused .dpb-404__glow::after {
	opacity: 1;
	transform: none;
}

.dpb-404__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	padding: calc(var(--dpb-header-h) + 24px) var(--dpb-gutter) 96px;
	text-align: center;
}

/* «4 ◯ 4» */
.dpb-404__num {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.04em;
	font-family: var(--dpb-font-logo);
	font-weight: 700;
	font-size: 280px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--dpb-text);
}

.dpb-404__zero {
	display: block;
	animation: dpb-nf-float 4s ease-in-out infinite;
}

/* The ring drops in, then wobbles while distracted (rotate composes with the ring's own transform). */
.dpb-404__ring-box {
	position: relative;
	display: block;
	width: 0.66em;
	height: 0.72em;
	animation: dpb-nf-drop 1s cubic-bezier(0.2, 0.8, 0.25, 1.15) 0.25s backwards, dpb-nf-wobble 5.2s ease-in-out 1.2s infinite;
}

.dpb-404__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 0.1em dashed var(--dpb-accent);
	transform: translate(-0.1em, -0.32em) rotate(-24deg) scale(0.86);
	transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1.15), box-shadow 0.9s, border-color 0.5s;
}

/* Solid ring cross-fades over the dashed one (border-style itself cannot animate). */
.dpb-404__ring::before {
	content: "";
	position: absolute;
	inset: -0.1em;
	border-radius: 50%;
	border: 0.1em solid var(--dpb-accent);
	opacity: 0;
	transition: opacity 0.6s ease 0.15s;
}

/* One soft ping when the ring locks in place. */
.dpb-404__ring-box::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--dpb-accent);
	opacity: 0;
	pointer-events: none;
}

.dpb-404.is-focused .dpb-404__ring {
	border-color: transparent;
	transform: none;
	box-shadow: 0 0 0.22em rgba(106, 87, 255, 0.75), inset 0 0 0.16em rgba(106, 87, 255, 0.45);
}

.dpb-404.is-focused .dpb-404__ring::before {
	opacity: 1;
}

.dpb-404.is-focused .dpb-404__ring-box::after {
	animation: dpb-nf-ping 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both;
}

@keyframes dpb-nf-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(calc(-1 * var(--dpb-nf-amp, 14px)));
	}
}

@keyframes dpb-nf-wobble {
	0%,
	100% {
		rotate: 0deg;
	}
	25% {
		rotate: calc(-1 * var(--dpb-nf-wob, 7deg));
	}
	75% {
		rotate: var(--dpb-nf-wob, 7deg);
	}
}

@keyframes dpb-nf-drop {
	from {
		opacity: 0;
		scale: 0.4;
	}
	to {
		opacity: 1;
		scale: 1;
	}
}

@keyframes dpb-nf-ping {
	from {
		opacity: 0.8;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(1.55);
	}
}

/* Squiggle → straight line */
.dpb-404__line {
	position: relative;
	width: 100%;
	max-width: 560px;
	height: 80px;
	margin: 8px auto 0;
}

.dpb-404__line svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.6s;
}

.dpb-404__straight {
	overflow: visible;
	opacity: 0;
}

.dpb-404.is-focused .dpb-404__squiggle {
	opacity: 0;
}

.dpb-404.is-focused .dpb-404__straight {
	opacity: 1;
}

/* Restless squiggle; it flattens into the straight line, which draws out from the centre. */
.dpb-404__squiggle {
	transform-origin: center;
	transition: opacity 0.6s, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dpb-404.is-focused .dpb-404__squiggle {
	transform: scaleY(0.12);
}

.dpb-404__squiggle path {
	animation: dpb-nf-jitter 2.8s ease-in-out infinite alternate;
}

.dpb-404__squiggle path + path {
	animation-duration: 3.6s;
	animation-direction: alternate-reverse;
}

.dpb-404__straight path {
	transform-box: fill-box;
	transform-origin: center;
	transform: scaleX(0.15);
	transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s;
}

.dpb-404.is-focused .dpb-404__straight path {
	transform: none;
}

@keyframes dpb-nf-jitter {
	from {
		translate: -8px 3px;
	}
	to {
		translate: 8px -3px;
	}
}

.dpb-404__chip {
	display: inline-flex;
	padding: 6px 14px;
	border-radius: var(--dpb-r-pill);
	background: rgba(169, 155, 255, 0.1);
	border: 1px solid var(--dpb-line-2);
	color: var(--dpb-text-nav);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
}

.dpb-404__title {
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.4;
	font-weight: 900;
	max-width: 18em;
}

.dpb-404__text {
	font-size: 18px;
	line-height: 1.95;
	color: var(--dpb-muted);
	max-width: 30em;
}

/* Text swap (50-article.js): out, change, back in. */
.dpb-404__title,
.dpb-404__text {
	transition: opacity 0.22s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dpb-404__title.is-out,
.dpb-404__text.is-out {
	opacity: 0;
	transform: translateY(10px);
}

/* The toggle shows its state. */
.dpb-404__toggle[aria-pressed="true"] {
	border-color: rgba(169, 155, 255, 0.75);
	background: rgba(106, 87, 255, 0.16);
	box-shadow: 0 0 0 4px rgba(169, 155, 255, 0.1), 0 14px 36px rgba(106, 87, 255, 0.28);
}

.dpb-404__btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.dpb-404__toggle[hidden] {
	display: none;
}

.dpb-404__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding-top: 12px;
}

.dpb-404__more-label {
	font-size: 14px;
	color: var(--dpb-muted);
}

.dpb-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.dpb-404__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--dpb-r-pill);
	background: rgba(169, 155, 255, 0.08);
	border: 1px solid rgba(169, 155, 255, 0.22);
	color: var(--dpb-text-nav);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.25s, background-color 0.25s, border-color 0.25s, box-shadow 0.3s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dpb-404__link:hover {
	color: var(--dpb-white);
	border-color: rgba(169, 155, 255, 0.55);
	background: rgba(169, 155, 255, 0.12);
	box-shadow: 0 10px 24px rgba(106, 87, 255, 0.2);
	transform: translateY(-2px);
}

.dpb-404__link .dpb-icon {
	flex: none;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dpb-404__link:hover .dpb-icon {
	transform: translateX(-4px);
}

@media (prefers-reduced-motion: reduce) {
	.dpb-404__inner > *,
	.dpb-404__glow,
	.dpb-404__zero,
	.dpb-404__ring-box,
	.dpb-404__squiggle path,
	.dpb-404.is-focused .dpb-404__ring-box::after {
		animation: none;
	}
	.dpb-404__straight path {
		transform: none;
	}
}

/* Mobile (M-NotFound) ---------------------------------------------------- */

@media (max-width: 720px) {
	.dpb-404__glow {
		top: 260px;
		width: 520px;
		height: 520px;
	}
	.dpb-404__inner {
		gap: 22px;
		padding: calc(var(--dpb-header-h) + 14px) 20px 56px;
	}
	.dpb-404__num {
		font-size: 150px;
	}
	.dpb-404__line {
		max-width: 100%;
		margin-top: 4px;
	}
	.dpb-404__title {
		font-size: 28px;
	}
	.dpb-404__text {
		font-size: 16px;
	}
	.dpb-404__btns {
		flex-direction: column;
		width: 100%;
	}
	.dpb-404__btns .dpb-btn {
		width: 100%;
	}
}

/* ---- assets/css/src/80-woocommerce.css ---- */
/* ==========================================================================
   WooCommerce (cart, checkout, my account) in the Dopabit dark style.
   WooCommerce's own light stylesheet is switched off in inc/woocommerce.php.
   Motion is light here (checkout must stay fast): the page title rises (40-pages.css), the
   main boxes fade up once on load — only containers WooCommerce never re-renders by AJAX,
   so nothing replays while the visitor types — plus the design's focus glow and hovers.
   ========================================================================== */

.dpb-woo .dpb-page,
.dpb-woo-wrap {
	padding-bottom: var(--dpb-section-y);
}

.dpb-woo-wrap {
	padding-top: 32px;
}

.woocommerce,
.woocommerce-page .dpb-prose {
	font-size: 16px;
	line-height: 1.9;
	color: var(--dpb-text-nav);
}

.dpb-woo .dpb-container--narrow {
	max-width: calc(1080px + 2 * var(--dpb-gutter));
}

.woocommerce h2,
.woocommerce h3 {
	color: var(--dpb-white);
	font-size: 22px;
	margin: 0 0 16px;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	list-style: none;
	margin: 0 0 24px;
	padding: 16px 20px;
	border-radius: 18px;
	background: rgba(169, 155, 255, 0.08);
	border: 1px solid var(--dpb-line-2);
	color: var(--dpb-text-2);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.woocommerce-error {
	background: rgba(255, 111, 165, 0.1);
	border-color: rgba(255, 111, 165, 0.35);
	color: var(--dpb-pink-2);
	flex-direction: column;
	align-items: flex-start;
}

.woocommerce-message {
	background: rgba(77, 214, 160, 0.1);
	border-color: rgba(77, 214, 160, 0.3);
}

/* Buttons */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px;
	border-radius: var(--dpb-r-pill);
	border: 1.5px solid var(--dpb-ghost-line);
	background: rgba(255, 255, 255, 0.04);
	color: var(--dpb-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Ghost buttons hover like the design's .btn-ghost. */
.woocommerce .button:hover {
	border-color: rgba(169, 155, 255, 0.7);
	background: rgba(169, 155, 255, 0.08);
	color: var(--dpb-white);
	box-shadow: 0 0 0 4px rgba(169, 155, 255, 0.1);
}

.woocommerce .button:active {
	transform: translateY(1px);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled,
.woocommerce .button:disabled:hover,
.woocommerce .button.disabled:hover {
	transform: none;
	opacity: 0.6;
	cursor: not-allowed;
}

.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce #place_order,
.woocommerce .checkout-button,
.woocommerce .single_add_to_cart_button {
	min-height: 58px;
	padding: 0 30px;
	border: 0;
	background: var(--dpb-primary);
	color: var(--dpb-white);
	font-size: 17px;
	box-shadow: var(--dpb-shadow-primary);
}

.woocommerce .button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover,
.woocommerce .single_add_to_cart_button:hover {
	background: var(--dpb-primary-hover);
	color: var(--dpb-white);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 18px 44px rgba(106, 87, 255, 0.5);
}

.woocommerce #place_order {
	width: 100%;
}

/* Forms */
.woocommerce form .form-row {
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--dpb-text-2);
}

.woocommerce form .form-row .required {
	color: var(--dpb-pink);
	text-decoration: none;
}

.woocommerce .input-text,
.woocommerce select,
.woocommerce textarea,
.woocommerce-page .select2-container .select2-selection--single {
	width: 100%;
	min-height: 54px;
	padding: 0 18px;
	border-radius: 16px;
	background: var(--dpb-bg);
	border: 1.5px solid rgba(255, 255, 255, 0.18);
	color: var(--dpb-text);
	font-family: inherit;
	font-size: 16px;
	transition: border-color 0.2s, box-shadow 0.25s;
}

.woocommerce .input-text:hover,
.woocommerce select:hover,
.woocommerce textarea:hover,
.woocommerce-page .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single:hover {
	border-color: rgba(255, 255, 255, 0.28);
}

.woocommerce textarea {
	min-height: 120px;
	padding: 14px 18px;
}

/* The design's focus glow (same as .dpb-input). */
.woocommerce .input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.woocommerce-page .select2-container--focus .select2-selection--single,
.woocommerce-page .select2-container--open .select2-selection--single {
	outline: none;
	border-color: var(--dpb-accent);
	box-shadow: 0 0 0 4px rgba(169, 155, 255, 0.16);
}

.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: rgba(255, 111, 165, 0.7);
}

.woocommerce-page .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 52px;
	color: var(--dpb-text);
	padding: 0;
}

.select2-dropdown {
	background: var(--dpb-surface);
	border-color: var(--dpb-line-2);
	color: var(--dpb-text);
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	width: calc(50% - 8px);
	float: right;
}

.woocommerce form .form-row-last {
	float: left;
}

.woocommerce form .form-row-wide,
.woocommerce .clear {
	clear: both;
}

/* Tables (cart, order review, orders) */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 22px;
	overflow: hidden;
	background: var(--dpb-surface);
	border: 1px solid var(--dpb-line-strong);
	font-size: 15px;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--dpb-line);
	text-align: right;
	vertical-align: middle;
}

.woocommerce table.shop_table tr:last-child td,
.woocommerce table.shop_table tfoot tr:last-child th {
	border-bottom: 0;
}

.woocommerce table.shop_table th {
	color: var(--dpb-white);
	font-weight: 700;
}

.woocommerce table.shop_table .order-total {
	color: var(--dpb-white);
	font-size: 17px;
}

.woocommerce .product-remove a {
	color: var(--dpb-pink-2);
	text-decoration: none;
	font-size: 22px;
}

.woocommerce .product-thumbnail img {
	width: 64px;
	border-radius: 12px;
}

.woocommerce-cart .cart-collaterals {
	margin-top: 32px;
}

.woocommerce .cart_totals {
	max-width: 480px;
	margin-right: auto;
}

/* woocommerce-layout(-rtl).css floats the totals at 48%: on phones its table spilled off the
   left edge (sideways scroll). Full width, still capped at 480px and aligned left. */
.woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
}

/* Checkout layout */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 24px 40px;
	align-items: start;
}

.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
.woocommerce-checkout form.checkout > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading {
	grid-column: 1;
}

.woocommerce-checkout #order_review_heading {
	display: none;
}

.woocommerce-checkout #order_review {
	grid-column: 2;
	grid-row: 1 / span 3;
	position: sticky;
	top: 100px;
	padding: 24px;
	border-radius: var(--dpb-r-card);
	background: var(--dpb-surface-2);
	border: 1.5px solid rgba(106, 87, 255, 0.55);
}

.woocommerce-checkout #order_review table.shop_table {
	background: transparent;
	border: 0;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: 100%;
	float: none;
}

#payment {
	margin-top: 20px;
}

#payment ul.payment_methods {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#payment ul.payment_methods li {
	padding: 14px 16px;
	border-radius: 16px;
	background: rgba(13, 10, 34, 0.6);
	border: 1px solid var(--dpb-line);
	transition: border-color 0.25s, background-color 0.25s;
}

#payment ul.payment_methods li:hover {
	border-color: rgba(169, 155, 255, 0.4);
}

#payment ul.payment_methods li:has(input:checked) {
	border-color: rgba(169, 155, 255, 0.6);
	background: rgba(106, 87, 255, 0.1);
}

#payment ul.payment_methods li img {
	max-height: 28px;
	vertical-align: middle;
	margin-inline-start: 8px;
}

#payment .payment_box {
	margin-top: 10px;
	font-size: 14px;
	color: var(--dpb-muted);
}

.woocommerce-terms-and-conditions-wrapper {
	font-size: 14px;
	color: var(--dpb-muted);
}

.woocommerce-checkout .woocommerce-privacy-policy-text p {
	font-size: 13px;
}

/* My account */
.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/* WooCommerce's own layout sheet (still loaded) floats these at 30% / 68%. Inside the theme's
   grid that 30% of a 240px column squeezed the menu to one letter per line. */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
	min-width: 0;
}

.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	content: none;
}

.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 10px;
	border-radius: 22px;
	background: var(--dpb-surface);
	border: 1px solid var(--dpb-line-strong);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 16px;
	border-radius: 14px;
	color: var(--dpb-text-nav);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.25s, color 0.25s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.woocommerce-MyAccount-navigation li:not(.is-active) a:hover {
	background: rgba(169, 155, 255, 0.08);
	color: var(--dpb-white);
	transform: translateX(-3px);
}

.woocommerce-MyAccount-navigation .is-active a {
	background: rgba(169, 155, 255, 0.14);
	color: var(--dpb-white);
	font-weight: 700;
}

.woocommerce-account:not(.logged-in) .woocommerce {
	display: block;
	max-width: 560px;
	margin-inline: auto;
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	padding: 28px;
	border-radius: var(--dpb-r-card);
	background: var(--dpb-surface);
	border: 1px solid var(--dpb-line-strong);
}

.woocommerce .woocommerce-form-login__rememberme {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-left: 16px;
}

.woocommerce .price,
.woocommerce .amount {
	color: var(--dpb-white);
	font-weight: 700;
}

.woocommerce del .amount {
	color: var(--dpb-faint);
	font-weight: 400;
}

/* Motion: boxes fade up once on load (persistent containers only). */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-cart .dpb-prose > .woocommerce,
.woocommerce-account .woocommerce > h2,
.woocommerce-account .u-column1,
.woocommerce-account .u-column2,
.woocommerce-account .woocommerce > .woocommerce-form-login,
.woocommerce-account .woocommerce > .woocommerce-ResetPassword,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content,
.woocommerce-order {
	animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	animation-delay: calc(var(--d, 0) * 90ms + 220ms);
}

.woocommerce-checkout #customer_details,
.woocommerce-account .u-column1,
.woocommerce-account .woocommerce > .woocommerce-form-login,
.woocommerce-account .woocommerce > .woocommerce-ResetPassword,
.woocommerce-MyAccount-navigation {
	--d: 1;
}

.woocommerce-checkout #order_review,
.woocommerce-account .u-column2,
.woocommerce-MyAccount-content {
	--d: 2;
}

.woocommerce-MyAccount-navigation li {
	animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	animation-delay: calc(var(--i, 0) * 50ms + 360ms);
}

.woocommerce-MyAccount-navigation li:nth-child(2) { --i: 1; }
.woocommerce-MyAccount-navigation li:nth-child(3) { --i: 2; }
.woocommerce-MyAccount-navigation li:nth-child(4) { --i: 3; }
.woocommerce-MyAccount-navigation li:nth-child(5) { --i: 4; }
.woocommerce-MyAccount-navigation li:nth-child(6) { --i: 5; }
.woocommerce-MyAccount-navigation li:nth-child(n + 7) { --i: 6; }

/* Notices slide in when they appear (also after an AJAX checkout error). */
.woocommerce-notices-wrapper > *,
.woocommerce-NoticeGroup > *,
.wc-empty-cart-message > * {
	animation: dpb-woo-notice 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

@keyframes dpb-woo-notice {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-checkout .woocommerce-form-coupon-toggle,
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review,
	.woocommerce-cart .dpb-prose > .woocommerce,
	.woocommerce-account .woocommerce > h2,
	.woocommerce-account .u-column1,
	.woocommerce-account .u-column2,
	.woocommerce-account .woocommerce > .woocommerce-form-login,
	.woocommerce-account .woocommerce > .woocommerce-ResetPassword,
	.woocommerce-MyAccount-navigation,
	.woocommerce-MyAccount-navigation li,
	.woocommerce-MyAccount-content,
	.woocommerce-order,
	.woocommerce-notices-wrapper > *,
	.woocommerce-NoticeGroup > *,
	.wc-empty-cart-message > * {
		animation: none;
	}
}

@media (max-width: 860px) {
	.woocommerce-checkout form.checkout,
	.woocommerce-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Phone: the account menu becomes one row of chips that scrolls sideways. */
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		scrollbar-width: none;
		padding: 6px;
		border-radius: 18px;
	}
	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}
	.woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
	}
	.woocommerce-MyAccount-navigation a {
		white-space: nowrap;
		padding: 8px 14px;
	}
	.woocommerce-checkout #order_review {
		grid-column: 1;
		grid-row: auto;
		position: static;
	}
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: 100%;
		float: none;
	}
	.woocommerce table.shop_table_responsive thead {
		display: none;
	}
	.woocommerce table.shop_table_responsive tr td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
	}
	.woocommerce table.shop_table_responsive tr td::before {
		content: attr(data-title);
		font-weight: 700;
		color: var(--dpb-text-2);
	}
}

/* Account dashboard (theme template woocommerce/myaccount/dashboard.php). */
.dpb-acc { display: grid; gap: 20px; }
.dpb-acc__hi { margin: 0; font-size: 20px; font-weight: 800; color: var(--dpb-text); }
.dpb-acc__app { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; padding: 20px 22px; border-radius: var(--dpb-r-card); background: linear-gradient(155deg, #2C1F7A 0%, #1B1547 70%); border: 1px solid #4B3BD0; }
.dpb-acc__app img { width: 96px; height: 96px; object-fit: contain; }
.dpb-acc__app h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: var(--dpb-text); }
.dpb-acc__app p { margin: 0 0 14px; color: var(--dpb-text-nav); line-height: 1.9; }
.dpb-acc__links { margin: 0; color: var(--dpb-muted); line-height: 2; }
@media (max-width: 560px) {
	.dpb-acc__app { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
	.dpb-acc__app img { width: 80px; height: 80px; }
}

.woocommerce-account .dpb-acc .dpb-btn,
.woocommerce-account .dpb-acc .dpb-btn:hover {
	color: #fff;
	text-decoration: none;
}

.woocommerce-account .woocommerce-EditAccountForm fieldset {
	margin: 24px 0 8px;
	padding: 18px 20px 6px;
	border: 1px solid var(--dpb-line-strong);
	border-radius: 20px;
}
.woocommerce-account .woocommerce-EditAccountForm legend {
	padding: 0 10px;
	font-weight: 700;
	color: var(--dpb-text-2);
}

/* ---- blocks/about-coach/style.css ---- */
/* About — the coach — AboutPage.dc.html / M-AboutPage.dc.html */

.s-about-coach {
	overflow: hidden;
	padding-block: 112px;
}

.s-about-coach__glow {
	position: absolute;
	left: 85%;
	top: 45%;
	width: 720px;
	height: 720px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(106, 87, 255, 0.26), rgba(106, 87, 255, 0));
	pointer-events: none;
}

.s-about-coach__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 72px;
	align-items: center;
}

/* Room for the offset frame (down and towards the page edge). */
.s-about-coach__media {
	padding: 0 24px 24px 0;
}

.s-about-coach__frame-wrap {
	position: relative;
}

.s-about-coach__frame {
	position: absolute;
	top: 24px;
	right: -24px;
	bottom: -24px;
	left: 24px;
	border-radius: 34px;
	border: 1.5px solid var(--dpb-primary);
}

.s-about-coach__photo {
	position: relative;
	margin: 0;
	border-radius: 32px;
	overflow: hidden;
	background: var(--dpb-surface);
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}

.s-about-coach__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 24%;
}

.s-about-coach__caption {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 18px;
	border-radius: 18px;
	background: rgba(13, 10, 34, 0.82);
	border: 1px solid rgba(169, 155, 255, 0.3);
	line-height: 1.6;
}

.s-about-coach__caption b {
	font-size: 18px;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-about-coach__caption span {
	font-size: 13px;
	color: var(--dpb-text-nav);
}

.s-about-coach__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
	min-width: 0;
}

.s-about-coach__kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-accent-2);
}

.s-about-coach__kicker > span {
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--dpb-accent);
}

.s-about-coach__title {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.4;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-about-coach__quote {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.s-about-coach__mark {
	flex: none;
	color: var(--dpb-accent);
}

.s-about-coach__quote p {
	font-size: 26px;
	line-height: 1.8;
	font-weight: 700;
	color: var(--dpb-text);
}

.s-about-coach__text {
	font-size: 17px;
	line-height: 2;
	color: var(--dpb-muted);
	max-width: 34em;
}

.s-about-coach__facts {
	margin: 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.s-about-coach__fact {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(169, 155, 255, 0.2);
}

.s-about-coach__fact dt {
	font-size: 13px;
	line-height: 1.6;
	color: var(--dpb-muted);
}

.s-about-coach__fact dd {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 700;
	color: var(--dpb-text);
}

.s-about-coach__btns {
	gap: 12px;
}

.s-about-coach__btns .dpb-btn {
	min-height: 56px;
	padding: 0 26px;
	font-size: 16px;
	gap: 10px;
}

@media (max-width: 1100px) {
	.s-about-coach__grid {
		gap: 48px;
	}

	.s-about-coach__fact {
		padding: 14px 16px;
	}
}

@media (max-width: 720px) {
	.s-about-coach {
		padding-block: 64px;
	}

	.s-about-coach__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.s-about-coach__media {
		padding: 0 16px 16px 0;
	}

	.s-about-coach__frame {
		top: 16px;
		right: -16px;
		bottom: -16px;
		left: 16px;
	}

	.s-about-coach__content {
		gap: 20px;
	}

	.s-about-coach__title {
		font-size: 28px;
	}

	.s-about-coach__title br,
	.s-about-coach__text br {
		display: none;
	}

	.s-about-coach__quote p {
		font-size: 20px;
	}

	.s-about-coach__facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.s-about-coach__btns {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.s-about-coach__btns .dpb-btn {
		display: flex;
		width: 100%;
	}
}

/* ---- Motion (dev/MOTION.md): the photo card rises, its offset frame slides out from behind it and
   the photo drifts inside its frame while scrolling (data-photo, assets/js/src/00-site.js); the
   caption follows; kicker (dash draws), title, quote, text, facts (stagger) and buttons rise in order. */

/* Oversized photo so it can drift; the frame keeps the design's 4:5 shape. */
.s-about-coach__photo {
	aspect-ratio: 4 / 5;
}

.s-about-coach__photo .s-about-coach__img {
	position: absolute;
	inset: -7% 0;
	width: 100%;
	height: 114%;
	max-width: none;
	aspect-ratio: auto;
	will-change: transform;
}

.s-about-coach__frame {
	transition: translate 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s, opacity 0.8s ease 0.35s;
}

.js :where(.dpx) .s-about-coach__media:not(.in) .s-about-coach__frame {
	opacity: 0;
	translate: -24px -24px;
}

.s-about-coach__caption {
	transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s, translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s;
}

.js :where(.dpx) .s-about-coach__media:not(.in) .s-about-coach__caption {
	opacity: 0;
	translate: 0 14px;
}

.s-about-coach__kicker > span {
	transform-origin: right center;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}

.js :where(.dpx) .s-about-coach__kicker:not(.in) > span {
	transform: scaleX(0);
}

@media (max-width: 720px) {
	.js :where(.dpx) .s-about-coach__media:not(.in) .s-about-coach__frame {
		translate: -16px -16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.s-about-coach__photo .s-about-coach__img {
		inset: 0;
		height: 100%;
	}

	.js :where(.dpx) .s-about-coach__media:not(.in) .s-about-coach__frame,
	.js :where(.dpx) .s-about-coach__media:not(.in) .s-about-coach__caption {
		opacity: 1;
		translate: none;
	}

	.js :where(.dpx) .s-about-coach__kicker:not(.in) > span {
		transform: none;
	}

	.s-about-coach__frame,
	.s-about-coach__caption,
	.s-about-coach__kicker > span {
		transition: none;
	}
}

.editor-styles-wrapper .s-about-coach__photo .s-about-coach__img {
	inset: 0;
	height: 100%;
}

/* ---- blocks/about-final/style.css ---- */
/* About — closing call to action — AboutPage.dc.html / M-AboutPageB.dc.html */

.s-about-final {
	overflow: hidden;
	padding-top: 112px;
	padding-bottom: 112px;
}

.s-about-final--line {
	padding-bottom: 0;
}

.s-about-final__glow {
	position: absolute;
	left: 50%;
	top: 45%;
	width: 900px;
	height: 900px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(106, 87, 255, 0.28), rgba(106, 87, 255, 0));
	pointer-events: none;
}

.s-about-final__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.s-about-final--line .s-about-final__inner {
	padding-bottom: 56px;
}

.s-about-final__title {
	max-width: 14em;
	font-size: clamp(34px, 4.4vw, 56px);
	line-height: 1.4;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-about-final__text {
	max-width: 30em;
	font-size: 18px;
	line-height: 1.9;
	color: var(--dpb-muted);
}

.s-about-final__btns {
	justify-content: center;
	gap: 12px;
}

.s-about-final__btns .dpb-btn {
	min-height: 56px;
	padding: 0 26px;
	font-size: 16px;
	gap: 10px;
}

/* Full-bleed glowing line (the section has side gutters). */
.s-about-final__art {
	position: relative;
	margin: 8px calc(-1 * var(--dpb-gutter)) 0;
}

.s-about-final__line {
	display: block;
	width: 100%;
	max-width: none;
	height: 90px;
}

@media (max-width: 720px) {
	.s-about-final {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.s-about-final--line .s-about-final__inner {
		padding-bottom: 40px;
	}

	.s-about-final__title {
		font-size: 30px;
	}

	.s-about-final__title br,
	.s-about-final__text br {
		display: none;
	}

	.s-about-final__btns {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.s-about-final__btns .dpb-btn {
		display: flex;
		width: 100%;
	}

	.s-about-final__line {
		height: 60px;
	}
}

/* ---- Motion (dev/MOTION.md): the closing section gets the home page's WebGL flow lines
   (canvas.flow-canvas + data-flow, assets/js/dopabit-gl.js). Particles swirl as chaos and settle
   into lines that converge into one bright line as the section scrolls in; the canvas is placed so
   that the bundle lands just above where the static glowing line sits, and that line stays as the fallback
   (no WebGL, editor preview, before the scene is ready). The copy rises as one block. */

.s-about-final .s-about-final__canvas {
	position: absolute;
	top: calc(65% - 80px);
	right: 0;
	left: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
	touch-action: pan-y;
	transition: opacity 1.4s ease;
}

.s-about-final:not(.s-about-final--line) .s-about-final__canvas {
	top: calc(65% - 96px);
}

.s-about-final.gl-ready .s-about-final__canvas {
	opacity: 1;
}

/* Overlay above the particles: keeps the copy area calm, the bottom band clear. */
.s-about-final::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(to bottom, var(--dpb-bg) 0%, rgba(13, 10, 34, 0.78) 28%, rgba(13, 10, 34, 0) 58%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.4s ease;
}

.s-about-final.gl-ready::after {
	opacity: 1;
}

.s-about-final .s-about-final__glow {
	z-index: 3;
}

.s-about-final .s-about-final__inner,
.s-about-final .s-about-final__art {
	z-index: 4;
}

.s-about-final .s-about-final__art {
	transition: opacity 1.2s ease;
}

.s-about-final.gl-ready .s-about-final__art {
	opacity: 0;
}

/* Like the home page: the copy lets the pointer through to the lines, the buttons stay clickable. */
.s-about-final.gl-ready .s-about-final__inner {
	pointer-events: none;
}

.s-about-final.gl-ready .s-about-final__inner a,
.s-about-final.gl-ready .s-about-final__inner button {
	pointer-events: auto;
}

@media (max-width: 720px) {
	.s-about-final .s-about-final__canvas {
		top: calc(71% - 48px);
	}

	.s-about-final:not(.s-about-final--line) .s-about-final__canvas {
		top: calc(71% - 60px);
	}
}

/* ---- blocks/about-hero/style.css ---- */
/* About hero — AboutPage.dc.html / M-AboutPage.dc.html */

.s-about-hero {
	overflow: hidden;
	padding-bottom: 96px;
}

.s-about-hero__glow {
	position: absolute;
	left: 50%;
	top: 340px;
	width: 1000px;
	height: 1000px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(106, 87, 255, 0.3), rgba(106, 87, 255, 0));
	pointer-events: none;
}

.s-about-hero__inner {
	position: relative;
	max-width: var(--dpb-max);
	margin-inline: auto;
	/* Design: content starts 56px under an 80px header. */
	padding-top: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	text-align: center;
}

.s-about-hero__title {
	font-size: clamp(48px, 6vw, 84px);
	line-height: 1.25;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-about-hero__text {
	font-size: 19px;
	line-height: 1.95;
	color: var(--dpb-muted);
	max-width: 34em;
}

.s-about-hero__btns {
	justify-content: center;
	gap: 12px;
}

.s-about-hero__btns .dpb-btn {
	min-height: 56px;
	padding: 0 26px;
	font-size: 16px;
	gap: 10px;
}

@media (max-width: 720px) {
	.s-about-hero {
		padding-bottom: 56px;
	}

	.s-about-hero__glow {
		top: 300px;
		width: 620px;
		height: 620px;
	}

	.s-about-hero__inner {
		padding-top: 14px;
		gap: 22px;
	}

	.s-about-hero__title {
		font-size: 40px;
	}

	.s-about-hero__text {
		font-size: 16px;
	}

	.s-about-hero__text br {
		display: none;
	}

	.s-about-hero__btns {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.s-about-hero__btns .dpb-btn {
		display: flex;
		width: 100%;
	}
}

/* ---- Motion (dev/MOTION.md): the copy rises in sequence on load (rise from 07-motion.css) and the
   glow behind it fades in, then breathes slowly. Site + JavaScript only; reduced motion and the
   editor show the final state. */

.js :where(.dpx) .s-about-hero__inner > * {
	animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(var(--d, 0) * 110ms + 100ms);
}

.js :where(.dpx) .s-about-hero__glow {
	animation: s-about-hero-glow-in 1.8s ease both, s-about-hero-breathe 9s ease-in-out 1.8s infinite;
}

@keyframes s-about-hero-glow-in {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.86);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes s-about-hero-breathe {
	0%,
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		opacity: 0.7;
		transform: translate(-50%, -50%) scale(1.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.js :where(.dpx) .s-about-hero__inner > *,
	.js :where(.dpx) .s-about-hero__glow {
		animation: none;
	}
}

/* ---- blocks/about-honest/style.css ---- */
/* About — honest list + ID card — AboutPage.dc.html / M-AboutPageB.dc.html */

.s-about-honest {
	padding-block: 104px;
}

.s-about-honest__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: 72px;
	align-items: start;
}

.s-about-honest--single .s-about-honest__grid {
	grid-template-columns: minmax(0, 1fr);
}

.s-about-honest__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.s-about-honest__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.s-about-honest__kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-accent-2);
}

.s-about-honest__kicker > span {
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--dpb-accent);
}

.s-about-honest__title {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.4;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-about-honest__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.s-about-honest__point {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 0;
	border-top: 1px solid rgba(169, 155, 255, 0.16);
}

.s-about-honest__point b {
	font-size: 26px;
	line-height: 1.5;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-about-honest__point span {
	font-size: 16px;
	line-height: 1.9;
	color: var(--dpb-muted);
}

.s-about-honest__card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 32px;
	border-radius: 30px;
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.28);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.s-about-honest__card-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.s-about-honest__card-icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: rgba(169, 155, 255, 0.14);
	color: var(--dpb-accent-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.s-about-honest__card-title {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-about-honest__facts {
	margin: 0;
}

.s-about-honest__fact {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px 16px;
	padding: 14px 0;
	border-top: 1px solid rgba(169, 155, 255, 0.16);
	line-height: 1.6;
}

.s-about-honest__fact dt {
	font-size: 14px;
	color: var(--dpb-muted);
}

.s-about-honest__fact dd {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--dpb-text);
	overflow-wrap: anywhere;
}

.s-about-honest__badges {
	display: flex;
	gap: 12px;
}

.s-about-honest__badge {
	flex: 1 1 0;
	min-width: 0;
	min-height: 84px;
	padding: 0 8px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px dashed var(--dpb-line-dim);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 12px;
	line-height: 1.6;
	color: var(--dpb-faint);
}

.s-about-honest__badge--code {
	padding: 8px;
	border-style: solid;
	border-color: rgba(169, 155, 255, 0.16);
}

.s-about-honest__badge--code img {
	display: block;
	max-height: 76px;
	width: auto;
}

.s-about-honest__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.s-about-honest__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border-radius: var(--dpb-r-pill);
	background: rgba(169, 155, 255, 0.12);
	border: 1px solid rgba(169, 155, 255, 0.26);
	color: var(--dpb-text-nav);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

.s-about-honest__link:hover {
	color: var(--dpb-white);
	background: rgba(169, 155, 255, 0.2);
	border-color: rgba(169, 155, 255, 0.45);
}

.s-about-honest__link .dpb-icon {
	flex: none;
}

@media (max-width: 1100px) {
	.s-about-honest__grid {
		gap: 48px;
	}

	.s-about-honest__point b {
		font-size: 23px;
	}
}

@media (max-width: 720px) {
	.s-about-honest {
		padding-block: 64px;
	}

	.s-about-honest__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.s-about-honest__content {
		gap: 16px;
	}

	.s-about-honest__title {
		font-size: 28px;
	}

	.s-about-honest__title br {
		display: none;
	}

	.s-about-honest__point {
		padding: 18px 0;
	}

	.s-about-honest__point b {
		font-size: 21px;
	}

	.s-about-honest__card {
		padding: 22px;
	}
}

/* ---- Motion (dev/MOTION.md): heading rises (dash draws); the honest points come in one after
   another while a light sweeps along each divider (it fades away, so the design's line stays);
   the ID card rises and its rows stagger in. */

.s-about-honest__point {
	position: relative;
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), translate 1s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--i, 0) * 130ms + 80ms);
}

.s-about-honest__point::before {
	content: "";
	position: absolute;
	top: -1px;
	right: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(to left, rgba(199, 188, 255, 0), #C7BCFF 30%, rgba(199, 188, 255, 0));
	transform-origin: right center;
	opacity: 0;
	pointer-events: none;
}

.js :where(.dpx) .s-about-honest__points.in .s-about-honest__point::before {
	animation: s-about-honest-sweep 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(var(--i, 0) * 130ms + 250ms);
}

@keyframes s-about-honest-sweep {
	0% {
		opacity: 1;
		transform: scaleX(0);
	}
	60% {
		opacity: 1;
		transform: scaleX(1);
	}
	100% {
		opacity: 0;
		transform: scaleX(1);
	}
}

.s-about-honest__kicker > span {
	transform-origin: right center;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}

.js :where(.dpx) .s-about-honest__head:not(.in) .s-about-honest__kicker > span {
	transform: scaleX(0);
}

/* The list only triggers the reveal; it does not fade as a whole. */
.js :where(.dpx) .s-about-honest__points[data-reveal] {
	opacity: 1;
	transform: none;
}

.js :where(.dpx) .s-about-honest__points:not(.in) .s-about-honest__point {
	opacity: 0;
	translate: 0 24px;
}

@media (prefers-reduced-motion: reduce) {
	.js :where(.dpx) .s-about-honest__points:not(.in) .s-about-honest__point {
		opacity: 1;
		translate: none;
	}

	.js :where(.dpx) .s-about-honest__head:not(.in) .s-about-honest__kicker > span {
		transform: none;
	}

	.js :where(.dpx) .s-about-honest__points.in .s-about-honest__point::before {
		animation: none;
	}

	.s-about-honest__point,
	.s-about-honest__kicker > span {
		transition: none;
	}
}

/* ---- blocks/about-story/style.css ---- */
/* About — why we built Dopabit — AboutPage.dc.html / M-AboutPage.dc.html */

.s-about-story {
	padding-block: 104px;
}

.s-about-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 64px;
	align-items: center;
}

.s-about-story--single .s-about-story__grid {
	grid-template-columns: minmax(0, 1fr);
}

.s-about-story__content {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.s-about-story__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.s-about-story__kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-accent-2);
}

.s-about-story__kicker > span {
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--dpb-accent);
}

.s-about-story__title {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.4;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-about-story__text {
	font-size: 17px;
	line-height: 2;
	color: var(--dpb-muted);
}

.s-about-story__quote {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 40px;
	border-radius: 28px;
	background: var(--dpb-surface-2);
	border: 1px solid rgba(169, 155, 255, 0.28);
}

.s-about-story__mark {
	flex: none;
	color: var(--dpb-accent);
}

.s-about-story__blockquote {
	margin: 0;
	font-size: 28px;
	line-height: 1.8;
	font-weight: 700;
	color: var(--dpb-text);
}

.s-about-story__by {
	font-size: 14px;
	color: var(--dpb-muted-2);
}

@media (max-width: 1100px) {
	.s-about-story__grid {
		gap: 48px;
	}

	.s-about-story__quote {
		padding: 32px;
	}

	.s-about-story__blockquote {
		font-size: 24px;
	}
}

@media (max-width: 720px) {
	.s-about-story {
		padding-block: 64px;
	}

	.s-about-story__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.s-about-story__title {
		font-size: 28px;
	}

	.s-about-story__title br {
		display: none;
	}

	.s-about-story__quote {
		padding: 24px;
	}

	.s-about-story__blockquote {
		font-size: 20px;
	}
}

/* ---- Motion (dev/MOTION.md): heading (with its dash), paragraphs and the quote card rise in
   sequence; the quote mark pops in once the card is up. */

.s-about-story__kicker > span {
	transform-origin: right center;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}

.js :where(.dpx) .s-about-story__head:not(.in) .s-about-story__kicker > span {
	transform: scaleX(0);
}

.s-about-story__mark {
	transform-origin: 100% 100%;
	transition: opacity 0.5s ease 0.55s, transform 0.8s cubic-bezier(0.2, 0.8, 0.25, 1.15) 0.55s;
}

.js :where(.dpx) .s-about-story__quote:not(.in) .s-about-story__mark {
	opacity: 0;
	transform: scale(0.5) rotate(-12deg);
}

@media (prefers-reduced-motion: reduce) {
	.js :where(.dpx) .s-about-story__head:not(.in) .s-about-story__kicker > span,
	.js :where(.dpx) .s-about-story__quote:not(.in) .s-about-story__mark {
		opacity: 1;
		transform: none;
	}

	.s-about-story__kicker > span,
	.s-about-story__mark {
		transition: none;
	}
}

/* ---- blocks/about-strip/style.css ---- */
/* About — mission & vision band — AboutPage.dc.html / M-AboutPage.dc.html */

.s-about-strip {
	padding-block: 96px;
}

.s-about-strip__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.s-about-strip__kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-accent-2);
}

.s-about-strip__kicker > span {
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--dpb-accent);
}

.s-about-strip__mission {
	font-size: clamp(32px, 3.8vw, 54px);
	line-height: 1.7;
	font-weight: 900;
	color: var(--dpb-text);
	max-width: 22em;
}

/* *highlight*: a violet marker stroke under the words instead of the accent colour. */
.s-about-strip__mission .hl {
	color: inherit;
	padding: 0 4px;
	background: linear-gradient(transparent 62%, rgba(106, 87, 255, 0.55) 62%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.s-about-strip__vision {
	display: grid;
	grid-template-columns: minmax(0, 0.35fr) minmax(0, 1fr);
	gap: 40px;
	/* The design has a 16px spacer between two flex gaps. */
	margin-top: 48px;
	padding-top: 36px;
	border-top: 1px solid rgba(169, 155, 255, 0.16);
}

.s-about-strip__vision-text {
	font-size: 18px;
	line-height: 2;
	color: var(--dpb-muted);
	max-width: 36em;
}

@media (max-width: 720px) {
	.s-about-strip {
		padding-block: 64px;
	}

	.s-about-strip__inner {
		gap: 24px;
	}

	.s-about-strip__mission {
		font-size: 27px;
	}

	.s-about-strip__mission br {
		display: none;
	}

	.s-about-strip__vision {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		margin-top: 32px;
		padding-top: 24px;
	}
}

/* ---- Motion (dev/MOTION.md): kicker, mission and vision rise as they scroll in; the kicker dash
   draws; the highlighted words get a marker sweep (right to left, the reading direction) once the
   mission sentence has risen. Final state = the design. */

.s-about-strip__mission .hl {
	background-repeat: no-repeat;
	background-position: 100% 0;
	background-size: 100% 100%;
	transition: background-size 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.75s;
}

.js :where(.dpx) .s-about-strip__mission:not(.in) .hl {
	background-size: 0% 100%;
}

.s-about-strip__kicker > span {
	transform-origin: right center;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}

.js :where(.dpx) .s-about-strip__kicker[data-reveal]:not(.in) > span,
.js :where(.dpx) .s-about-strip__vision:not(.in) .s-about-strip__kicker > span {
	transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
	.js :where(.dpx) .s-about-strip__mission:not(.in) .hl {
		background-size: 100% 100%;
	}

	.js :where(.dpx) .s-about-strip__kicker[data-reveal]:not(.in) > span,
	.js :where(.dpx) .s-about-strip__vision:not(.in) .s-about-strip__kicker > span {
		transform: none;
	}

	.s-about-strip__mission .hl,
	.s-about-strip__kicker > span {
		transition: none;
	}
}

/* ---- blocks/about-team/style.css ---- */
/* About — team — AboutPage.dc.html / M-AboutPageB.dc.html */

.s-about-team {
	padding-block: 104px;
}

.s-about-team__inner {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.s-about-team__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.s-about-team__kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-accent-2);
}

.s-about-team__kicker > span {
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--dpb-accent);
}

.s-about-team__title {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.4;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-about-team__text {
	max-width: 36em;
	font-size: 17px;
	line-height: 1.9;
	color: var(--dpb-muted);
}

.s-about-team__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.s-about-team__member {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 28px;
	overflow: hidden;
	background: linear-gradient(160deg, #2A2170, #4A2A6E);
	border: 1px solid rgba(169, 155, 255, 0.2);
}

.s-about-team__member:nth-child(4n + 2) {
	background: linear-gradient(160deg, #1F2A66, #2A2170);
}

.s-about-team__member:nth-child(4n + 3) {
	background: linear-gradient(160deg, #4A2A6E, #2C2260);
}

.s-about-team__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 24%;
}

.s-about-team__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(199, 188, 255, 0.45);
}

.s-about-team__tag {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--dpb-muted-2);
}

.s-about-team__caption {
	position: absolute;
	right: 14px;
	left: 14px;
	bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px;
	border-radius: 16px;
	background: rgba(13, 10, 34, 0.82);
	border: 1px solid rgba(169, 155, 255, 0.28);
	line-height: 1.6;
}

.s-about-team__caption b {
	font-size: 16px;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-about-team__caption span {
	font-size: 13px;
	color: var(--dpb-text-nav);
}

@media (max-width: 1100px) {
	.s-about-team__list {
		gap: 16px;
	}

	.s-about-team__caption {
		right: 10px;
		left: 10px;
		bottom: 10px;
		padding: 10px 12px;
	}
}

@media (max-width: 720px) {
	.s-about-team {
		padding-block: 64px;
	}

	.s-about-team__inner {
		gap: 28px;
	}

	.s-about-team__title {
		font-size: 28px;
	}

	.s-about-team__title br,
	.s-about-team__text br {
		display: none;
	}

	.s-about-team__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.s-about-team__member {
		border-radius: 22px;
	}

	.s-about-team__silhouette {
		width: 52px;
		height: 52px;
	}

	.s-about-team__caption {
		padding: 8px 12px;
	}

	.s-about-team__caption b {
		font-size: 14px;
	}

	.s-about-team__caption span {
		font-size: 12px;
	}
}

/* ---- Motion (dev/MOTION.md): heading rises (dash draws); the member cards come in one after
   another and lift on hover (.lift) while the photo zooms slightly and the caption rises. */

.s-about-team__member {
	--rd: calc(var(--i, 0) * 100ms + 80ms);
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd), translate 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd), transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, box-shadow 0.35s;
}

.s-about-team__img,
.s-about-team__silhouette {
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.s-about-team__caption {
	transition: translate 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s;
}

.s-about-team__member:hover .s-about-team__img {
	transform: scale(1.05);
}

.s-about-team__member:hover .s-about-team__silhouette {
	transform: translateY(-6px);
}

.s-about-team__member:hover .s-about-team__caption {
	translate: 0 -4px;
	border-color: rgba(169, 155, 255, 0.5);
}

.s-about-team__kicker > span {
	transform-origin: right center;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}

.js :where(.dpx) .s-about-team__head:not(.in) .s-about-team__kicker > span {
	transform: scaleX(0);
}

/* The list only triggers the reveal; it does not fade as a whole. */
.js :where(.dpx) .s-about-team__list[data-reveal] {
	opacity: 1;
	transform: none;
}

.js :where(.dpx) .s-about-team__list:not(.in) .s-about-team__member {
	opacity: 0;
	translate: 0 30px;
}

@media (prefers-reduced-motion: reduce) {
	.js :where(.dpx) .s-about-team__list:not(.in) .s-about-team__member {
		opacity: 1;
		translate: none;
	}

	.js :where(.dpx) .s-about-team__head:not(.in) .s-about-team__kicker > span {
		transform: none;
	}

	.s-about-team__member,
	.s-about-team__img,
	.s-about-team__silhouette,
	.s-about-team__caption,
	.s-about-team__kicker > span {
		transition: none;
	}

	.s-about-team__member:hover .s-about-team__img,
	.s-about-team__member:hover .s-about-team__silhouette {
		transform: none;
	}

	.s-about-team__member:hover .s-about-team__caption {
		translate: none;
	}
}

/* ---- blocks/about-testimonials/style.css ---- */
/* About — testimonials — AboutPage.dc.html / M-AboutPageB.dc.html */

.s-about-testimonials {
	padding-block: 96px;
}

.s-about-testimonials__inner {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.s-about-testimonials__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.s-about-testimonials__kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-accent-2);
}

.s-about-testimonials__kicker > span {
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--dpb-accent);
}

.s-about-testimonials__title {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.4;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-about-testimonials__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.s-about-testimonials__card {
	display: flex;
	padding: 32px;
	border-radius: 28px;
	background: #211B55;
	border: 1px solid rgba(169, 155, 255, 0.14);
}

.s-about-testimonials__figure {
	margin: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.s-about-testimonials__mark {
	flex: none;
	color: var(--dpb-accent);
}

.s-about-testimonials__quote {
	margin: 0;
	font-size: 17px;
	line-height: 2;
	color: var(--dpb-text-nav);
}

.s-about-testimonials__by {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}

.s-about-testimonials__avatar {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: #2E2670;
	color: var(--dpb-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.s-about-testimonials__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s-about-testimonials__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.6;
}

.s-about-testimonials__who b {
	font-size: 15px;
	color: var(--dpb-text);
}

.s-about-testimonials__who span {
	font-size: 13px;
	color: var(--dpb-muted-2);
}

@media (max-width: 1100px) {
	.s-about-testimonials__list {
		gap: 16px;
	}

	.s-about-testimonials__card {
		padding: 24px;
	}
}

@media (max-width: 720px) {
	.s-about-testimonials {
		padding-block: 64px;
	}

	.s-about-testimonials__inner {
		gap: 28px;
	}

	.s-about-testimonials__title {
		font-size: 28px;
	}

	.s-about-testimonials__title br {
		display: none;
	}

	.s-about-testimonials__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

/* ---- Motion (dev/MOTION.md): heading rises (dash draws); the cards come in one after another
   with their quote marks popping, and get the cursor spotlight + lift on hover. */

.s-about-testimonials__card {
	--rd: calc(var(--i, 0) * 110ms + 80ms);
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd), translate 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd), transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, box-shadow 0.35s, background-color 0.35s;
}

.s-about-testimonials__mark {
	transform-origin: 100% 100%;
	transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.25, 1.15);
	transition-delay: calc(var(--i, 0) * 110ms + 450ms);
}

.s-about-testimonials__kicker > span {
	transform-origin: right center;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}

.js :where(.dpx) .s-about-testimonials__head:not(.in) .s-about-testimonials__kicker > span {
	transform: scaleX(0);
}

/* The list only triggers the reveal; it does not fade as a whole. */
.js :where(.dpx) .s-about-testimonials__list[data-reveal] {
	opacity: 1;
	transform: none;
}

.js :where(.dpx) .s-about-testimonials__list:not(.in) .s-about-testimonials__card {
	opacity: 0;
	translate: 0 30px;
}

.js :where(.dpx) .s-about-testimonials__list:not(.in) .s-about-testimonials__mark {
	opacity: 0;
	transform: scale(0.5) rotate(-12deg);
}

@media (prefers-reduced-motion: reduce) {
	.js :where(.dpx) .s-about-testimonials__list:not(.in) .s-about-testimonials__card,
	.js :where(.dpx) .s-about-testimonials__list:not(.in) .s-about-testimonials__mark {
		opacity: 1;
		translate: none;
		transform: none;
	}

	.js :where(.dpx) .s-about-testimonials__head:not(.in) .s-about-testimonials__kicker > span {
		transform: none;
	}

	.s-about-testimonials__card,
	.s-about-testimonials__mark,
	.s-about-testimonials__kicker > span {
		transition: none;
	}
}

/* ---- blocks/about-values/style.css ---- */
/* About — values — AboutPage.dc.html / M-AboutPage.dc.html */

.s-about-values {
	padding-block: 96px;
}

.s-about-values__inner {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.s-about-values__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.s-about-values__kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-accent-2);
}

.s-about-values__kicker > span {
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--dpb-accent);
}

.s-about-values__title {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.4;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-about-values__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.s-about-values__item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 14px 14px 26px;
	border-radius: 28px;
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.2);
}

.s-about-values__art {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	border-radius: 22px;
	background: #241D5E;
	overflow: hidden;
}

.s-about-values__art svg {
	display: block;
	max-width: 100%;
	height: auto;
}

.s-about-values__art--target {
	background: #2A1E5C;
}

.s-about-values__art--steps {
	background: #1F2A66;
}

.s-about-values__art--check {
	background: #2C2260;
}

.s-about-values__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s-about-values__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 10px;
}

.s-about-values__item-title {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-about-values__text {
	font-size: 15px;
	line-height: 1.9;
	color: var(--dpb-muted);
}

@media (max-width: 1100px) {
	.s-about-values__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.s-about-values {
		padding-block: 64px;
	}

	.s-about-values__inner {
		gap: 28px;
	}

	.s-about-values__title {
		font-size: 28px;
	}

	.s-about-values__title br {
		display: none;
	}

	.s-about-values__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}

/* ---- Motion (dev/MOTION.md): heading rises and its dash draws; the four cards come in one after
   another (translate/opacity, so the hover lift keeps its transform) with the cursor spotlight and
   lift; the illustrations bob gently, out of phase, and grow a little on hover. */

.s-about-values__item {
	--rd: calc(var(--i, 0) * 100ms + 80ms);
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd), translate 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd), transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, box-shadow 0.35s, background-color 0.35s;
}

.s-about-values__art svg {
	transition: scale 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.s-about-values__item:hover .s-about-values__art svg {
	scale: 1.06;
}

.js :where(.dpx) .s-about-values__art svg {
	animation: bob 4.8s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -1.2s);
}

.s-about-values__kicker > span {
	transform-origin: right center;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}

.js :where(.dpx) .s-about-values__head:not(.in) .s-about-values__kicker > span {
	transform: scaleX(0);
}

/* The list only triggers the reveal; it does not fade as a whole. */
.js :where(.dpx) .s-about-values__list[data-reveal] {
	opacity: 1;
	transform: none;
}

.js :where(.dpx) .s-about-values__list:not(.in) .s-about-values__item {
	opacity: 0;
	translate: 0 30px;
}

@media (prefers-reduced-motion: reduce) {
	.js :where(.dpx) .s-about-values__list:not(.in) .s-about-values__item {
		opacity: 1;
		translate: none;
	}

	.js :where(.dpx) .s-about-values__head:not(.in) .s-about-values__kicker > span {
		transform: none;
	}

	.js :where(.dpx) .s-about-values__art svg {
		animation: none;
	}

	.s-about-values__item,
	.s-about-values__art svg,
	.s-about-values__kicker > span {
		transition: none;
	}
}

/* ---- blocks/challenge-hero/style.css ---- */
/* A challenge page: header (canvas: صفحه چالش · نهایی). */
.s-chh{padding-bottom:0}
.s-chh__crumb{font-size:13px;color:var(--muted);display:flex;gap:8px}
.s-chh__crumb a{color:var(--acc);text-decoration:none}
.s-chh__hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:center;padding-block:36px 80px}
.s-chh__copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.s-chh__tags{display:flex;flex-wrap:wrap;gap:8px}
.s-chh__title{font-size:clamp(46px,7vw,104px);line-height:1.1}
.s-chh__sub{margin:0;font-size:clamp(20px,2vw,28px);font-weight:700;color:var(--acc);line-height:1.6}
.s-chh__phone{position:relative;width:min(320px,100%);justify-self:center}
.s-chh__phone .dch-phone{transform:rotate(3deg)}
.s-chh__cap{position:absolute;bottom:40px;right:-60px;background:#EFEAFE;color:#1A1440;border-radius:16px;padding:10px 14px;font-size:13px;font-weight:700;line-height:1.6;transform:rotate(-4deg);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.s-chh__strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid rgba(169,155,255,.16)}
.s-chh__strip--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.s-chh__strip--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.s-chh__strip div{padding:26px 22px;display:flex;flex-direction:column;gap:2px}
.s-chh__strip div + div{border-right:1px solid rgba(169,155,255,.16)}
.s-chh__strip b{font-size:clamp(30px,3.4vw,48px);font-weight:900;line-height:1.15;color:var(--text)}
.s-chh__strip span{font-size:13px;color:var(--muted)}
.s-chh__voice{padding-block:110px 40px;display:flex;flex-direction:column;gap:18px}
.s-chh__voice blockquote{margin:0;font-size:clamp(28px,3.6vw,52px);line-height:1.6;font-weight:800;max-width:22em}
.s-chh__voice blockquote .hl{color:var(--acc)}
@media (max-width:1000px){
	.s-chh__hero{grid-template-columns:1fr}
	.s-chh__cap{right:-10px}
}
@media (max-width:640px){
	.s-chh__hero{gap:26px;padding-block:18px 44px}
	.s-chh__title{font-size:46px}
	.s-chh__sub{font-size:19px}
	.s-chh__copy .dch-lead{font-size:15px}
	.s-chh__phone{width:200px}
	.s-chh__cap{right:-40px;bottom:24px;font-size:12px}
	.s-chh__strip,.s-chh__strip--3{grid-template-columns:1fr 1fr}
	.s-chh__strip div{padding:16px 12px}
	.s-chh__strip div:nth-child(3){border-right:0}
	.s-chh__strip div:nth-child(n+3){border-top:1px solid rgba(169,155,255,.16)}
	.s-chh__strip b{font-size:28px}
	.s-chh__strip--3 div:nth-child(3){grid-column:span 2}
	.s-chh__voice{padding-block:64px 20px}
	.s-chh__voice blockquote{font-size:24px}
}

/* ---- blocks/challenge-nights/style.css ---- */
/* A challenge page: the nights (canvas: صفحه چالش · نهایی). */
.s-chn{padding-top:40px}
.s-chn__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:70px;align-items:start}
.s-chn__list{min-width:0}
.s-chn__side{position:sticky;top:110px;display:flex;flex-direction:column;gap:16px}
.s-chn__side .dch-phone{width:280px}
.s-chn__side p{margin:0;font-size:14px;color:var(--muted);max-width:280px;line-height:1.9}
.s-chn__n{display:grid;grid-template-columns:110px minmax(0,1fr);gap:26px;padding-block:34px;border-top:1px solid rgba(169,155,255,.16)}
.s-chn__n:first-child{border-top:0;padding-top:0}
.s-chn__d{font-family:'Outfit','Vazirmatn',sans-serif;font-weight:800;font-size:88px;line-height:.9;color:transparent;-webkit-text-stroke:1.5px rgba(169,155,255,.55)}
.s-chn__d small{display:block;font-family:'Vazirmatn',sans-serif;-webkit-text-stroke:0;color:var(--acc);font-size:13px;font-weight:700;margin-top:10px;line-height:1.6}
.s-chn__n.is-hot .s-chn__d{-webkit-text-stroke-color:var(--pink)}
.s-chn__body{min-width:0}
.s-chn__body h3{margin:0;font-size:clamp(22px,2.2vw,30px);line-height:1.45;font-weight:900}
.s-chn__body ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.s-chn__body li{display:flex;gap:10px;font-size:15px;color:var(--soft);line-height:1.8}
.s-chn__body li::before{content:"";flex:none;width:6px;height:6px;margin-top:11px;border-radius:50%;background:var(--acc)}
.s-chn__pin{margin-top:16px;display:inline-flex;flex-direction:column;gap:4px;background:#141033;border:1px solid rgba(169,155,255,.30);border-radius:16px 16px 16px 4px;padding:12px 16px;max-width:520px}
.s-chn__pin .dch-quote{font-size:15px}
.s-chn__sina{margin:14px 0 0;display:block;width:fit-content;max-width:520px;background:#FFE58A;color:#3b2a00;font-weight:700;font-size:14px;line-height:1.8;padding:10px 14px;border-radius:4px;transform:rotate(-1.5deg)}
@media (max-width:1000px){
	.s-chn__grid{grid-template-columns:1fr;gap:28px}
	.s-chn__side{position:static;order:-1;flex-direction:row;align-items:center}
	.s-chn__side .dch-phone{width:160px;flex:none}
}
@media (max-width:640px){
	.s-chn{padding-top:20px}
	.s-chn__grid{gap:20px}
	.s-chn__side{gap:14px;padding:12px;border-radius:20px;background:#141033;border:1px solid rgba(169,155,255,.16)}
	.s-chn__side .dch-phone{width:96px;padding:4px;border-radius:18px}
	.s-chn__side .dch-phone > video{border-radius:14px}
	.s-chn__side p{font-size:13px}
	.s-chn__n{grid-template-columns:52px minmax(0,1fr);gap:12px;padding-block:22px}
	.s-chn__d{font-size:40px}
	.s-chn__d small{font-size:11px;margin-top:6px}
	.s-chn__body h3{font-size:19px;line-height:1.6}
	.s-chn__body li{font-size:14px}
	.s-chn__pin{margin-top:12px;padding:10px 12px}
	.s-chn__pin .dch-quote{font-size:14px}
	.s-chn__sina{font-size:13px}
}

/* ---- blocks/challenge-proof/style.css ---- */
/* A challenge page: proof + messages (canvas: صفحه چالش · نهایی). */
.s-chp{padding-top:0}
.s-chp__band{background:var(--b);box-shadow:0 0 0 100vmax var(--b);clip-path:inset(0 -100vmax)}
.s-chp__proof{padding-block:100px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.s-chp__pf{border-radius:24px;background:#141033;border:1px solid rgba(169,155,255,.16);padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0}
.s-chp__pf img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:14px}
.s-chp__pf > b{font-size:16px;color:var(--text)}
.s-chp__pf > p{margin:0;font-size:14px;color:var(--muted);line-height:1.85}
.s-chp__tg{border-radius:14px;background:#17212b;padding:14px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.85;color:#e9eef3}
.s-chp__tg p{margin:0}
.s-chp__who{display:flex;align-items:center;gap:8px;font-weight:700;color:#7cc1ff;font-size:13px}
.s-chp__who i{width:26px;height:26px;border-radius:50%;background-size:cover;background-position:center 20%}
.s-chp__tg time{align-self:flex-start;font-size:11px;color:#6d7f8f}
.s-chp__pf--empty{border-style:dashed;border-color:rgba(169,155,255,.30);background:transparent}
.s-chp__box{aspect-ratio:3/4;border-radius:14px;border:1.5px dashed #6b62a8;display:grid;place-items:center;text-align:center;padding:20px;color:#9E97CC;font-size:14px;line-height:1.9}
.s-chp__voices{padding-top:100px}
.s-chp__head{display:flex;flex-direction:column;gap:14px;margin-bottom:34px}
.s-chp__title{font-size:clamp(28px,3.7vw,50px);line-height:1.42}
.s-chp__title .hl{color:var(--acc)}
.s-chp__vw{columns:3 280px;column-gap:18px}
.s-chp__vc{break-inside:avoid;margin-bottom:18px;background:#141033;border:1px solid rgba(169,155,255,.16);border-radius:22px 22px 22px 6px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.s-chp__vc.is-big{background:linear-gradient(160deg,#2a1f73,#1B1547);border-color:#4B3BD0}
.s-chp__vc .dch-quote{font-size:16px}
.s-chp__vc.is-big .dch-quote{font-size:20px}
.s-chp__meta{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.s-chp__meta em{font-style:normal;color:#F2C14E}
.s-chp__foot{margin:6px 0 0}
@media (max-width:1000px){.s-chp__proof{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
	.s-chp__proof{grid-template-columns:1fr;padding-block:60px;gap:14px}
	.s-chp__pf{display:grid;grid-template-columns:110px minmax(0,1fr);grid-template-rows:auto 1fr;gap:4px 14px;align-items:start}
	.s-chp__pf > img,.s-chp__pf > .s-chp__tg,.s-chp__pf > .s-chp__box{grid-row:span 2}
	.s-chp__tg{font-size:11.5px;padding:10px;line-height:1.7;max-height:150px;overflow:hidden}
	.s-chp__box{font-size:12px;padding:10px}
	.s-chp__pf > p{font-size:13px}
	.s-chp__voices{padding-top:60px}
	.s-chp__vw{columns:auto;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--pad, 20px));padding-inline:var(--pad, 20px);padding-bottom:8px;scrollbar-width:none}
	.s-chp__vw::-webkit-scrollbar{display:none}
	.s-chp__vc{flex:0 0 82%;scroll-snap-align:center;margin:0}
}
.s-chp__proof:not(:has(> :nth-child(3))){grid-template-columns:repeat(2,minmax(0,340px));justify-content:center}
@media (max-width:640px){.s-chp__proof:not(:has(> :nth-child(3))){grid-template-columns:1fr}}

/* ---- blocks/challenge-start/style.css ---- */
/* A challenge page: «خودت امتحانش کن» (canvas: صفحه چالش · نهایی). */
.s-chs{padding-top:40px}
.s-chs__card{border-radius:36px;padding:56px;background:radial-gradient(90% 120% at 100% 0%,#3a2db0,#1a1450 60%,#120e33);border:1px solid rgba(169,155,255,.35);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:40px;align-items:center;position:relative;overflow:hidden}
.s-chs__copy{display:flex;flex-direction:column;gap:16px;position:relative;z-index:1;min-width:0}
.s-chs__title{font-size:clamp(28px,3vw,42px);line-height:1.4}
.s-chs__title .hl{color:var(--acc)}
.s-chs__form{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.s-chs__form .dch-form__row{flex-direction:column}
.s-chs__form .dch-form__row .btn{width:100%}
.s-chs__g{position:absolute;left:30px;bottom:-10px;width:150px;height:auto;opacity:.95;pointer-events:none}
.s-chs__bar{display:none}
@media (max-width:1000px){.s-chs__card{grid-template-columns:1fr;padding:32px}.s-chs__g{display:none}}
@media (max-width:640px){
	.s-chs__card{padding:26px 20px;border-radius:26px}
	.s-chs__bar{display:flex;position:fixed;inset:auto 0 0 0;z-index:40;padding:12px var(--pad, 20px) calc(14px + env(safe-area-inset-bottom,0px));background:rgba(13,10,34,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(169,155,255,.30);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
	.s-chs__bar.is-on{transform:none}
	.s-chs__bar .btn{flex:1;white-space:nowrap}
}
/* A challenge page brings its own bottom bar; the site-wide one would sit on top of it. */
.dpx:has(.s-chs__bar) .sticky-cta{display:none!important}

/* ---- blocks/challenges-list/style.css ---- */
/* /challenges/ list (canvas: فهرست چالش‌ها · نهایی · دسکتاپ / موبایل). */
.s-chl__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.s-chl__head{display:flex;flex-direction:column;gap:16px;min-width:0}
.s-chl__title{font-size:clamp(34px,5.2vw,72px);line-height:1.3}
.s-chl__tally{display:flex;gap:28px}
.s-chl__tally div{display:flex;flex-direction:column;align-items:flex-start}
.s-chl__tally b{font-size:40px;font-weight:900;line-height:1.1;color:var(--text)}
.s-chl__tally span{font-size:13px;color:var(--muted)}
.s-chl__bar{position:sticky;top:72px;z-index:15;background:rgba(13,10,34,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);margin-top:36px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding-block:16px;border-block:1px solid rgba(169,155,255,.16)}
.s-chl__filters{display:flex;gap:8px;flex-wrap:wrap}
.s-chl__f{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--soft);font:inherit;font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s,border-color .2s}
.s-chl__f:hover{border-color:rgba(169,155,255,.6)}
.s-chl__f small{font-size:12px;opacity:.7}
.s-chl__f.is-on{background:var(--pri);border-color:var(--pri);color:#fff}
.s-chl__search{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:#141033;border:1px solid rgba(169,155,255,.16);color:var(--muted);min-width:240px}
.s-chl__search input{background:transparent;border:0;color:var(--text);font:inherit;font-size:14px;outline:0;width:100%;min-width:0}
.s-chl__search:focus-within{border-color:var(--acc)}
.s-chl__feat{margin-top:34px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);border-radius:32px;overflow:hidden;background:linear-gradient(135deg,#251c6e,#130f38);border:1px solid rgba(169,155,255,.30);text-decoration:none;color:inherit;transition:border-color .3s}
a.s-chl__feat:hover{border-color:rgba(169,155,255,.6)}
.s-chl__feat-copy{padding:44px;display:flex;flex-direction:column;gap:18px;min-width:0}
.s-chl__chips{display:flex;gap:8px;flex-wrap:wrap}
.s-chl__feat-title{font-size:clamp(32px,3.6vw,52px);line-height:1.25}
.s-chl__feat-quote{font-size:16px;color:var(--soft)}
.s-chl__feat-nums{display:flex;flex-wrap:wrap;gap:30px;padding-top:16px;border-top:1px solid rgba(169,155,255,.16)}
.s-chl__feat-nums b{display:block;font-size:30px;font-weight:900;line-height:1.2;color:var(--text)}
.s-chl__feat-nums span{font-size:12px;color:var(--muted)}
.s-chl__feat-media{position:relative;min-height:440px;background:#0b0820}
.s-chl__feat-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.s-chl__feat-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(19,15,56,.95)),linear-gradient(0deg,rgba(13,10,34,.7),transparent 40%)}
.s-chl__play{position:absolute;z-index:2;bottom:24px;left:24px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:#fff}
.s-chl__play i{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.s-chl__play svg{width:16px;height:16px}
.s-chl__grid{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.s-chl__cd{--c1:#1e1a45;--c2:#5e5980;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:#141033;border:1px solid rgba(169,155,255,.16);text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s}
a.s-chl__cd:hover{transform:translateY(-6px);border-color:rgba(169,155,255,.30)}
.s-chl__cd--t0{--c1:#2a2170;--c2:#8f7bff}
.s-chl__cd--t1{--c1:#16234f;--c2:#4f8cff}
.s-chl__cd--t2{--c1:#3a1840;--c2:#ff6fa5}
.s-chl__cd--t3{--c1:#163a33;--c2:#4fd1a5}
.s-chl__cd--t4{--c1:#3a2c12;--c2:#f2c14e}
.s-chl__cv{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--c1)}
.s-chl__art{position:absolute;inset:0;background:radial-gradient(70% 90% at 80% 10%,var(--c2) 0%,transparent 60%),radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.5px) 0 0/16px 16px}
.s-chl__no{position:absolute;bottom:-28px;left:14px;font-family:'Outfit','Vazirmatn',sans-serif;font-weight:800;font-size:130px;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35)}
.s-chl__glyph{position:absolute;top:22px;right:22px;width:54px;height:54px;border-radius:16px;background:rgba(13,10,34,.45);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:#fff}
.s-chl__glyph svg{width:26px;height:26px}
.s-chl__cat{position:absolute;bottom:14px;right:14px;background:rgba(13,10,34,.45)}
.s-chl__cb{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
.s-chl__cb h3{margin:0;font-size:22px;line-height:1.4;font-weight:900}
.s-chl__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted)}
.s-chl__q{font-size:15px;color:var(--soft)}
.s-chl__foot{margin-top:auto;padding-top:12px;border-top:1px solid rgba(169,155,255,.16);display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.s-chl__next{grid-column:span 2;border-radius:26px;border:1.5px dashed rgba(169,155,255,.30);display:flex;flex-direction:column;justify-content:center;padding:28px;gap:14px}
.s-chl__next h3{margin:0;font-size:24px;font-weight:900}
.s-chl__next-text{margin:0;color:var(--muted);font-size:15px}
.s-chl__none{margin:28px 0 0;color:var(--muted);text-align:center}
@media (max-width:1080px){.s-chl__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
	.s-chl__top{grid-template-columns:1fr}
	.s-chl__feat{grid-template-columns:1fr}
	.s-chl__feat-media{order:-1}
	.s-chl__feat-copy{padding:26px}
}
@media (max-width:640px){
	.s-chl__head .dch-lead{font-size:15px}
	.s-chl__tally{gap:0;justify-content:space-between;padding:12px 16px;border-radius:18px;background:#141033;border:1px solid rgba(169,155,255,.16)}
	.s-chl__tally b{font-size:24px}
	.s-chl__tally span{font-size:11.5px}
	.s-chl__bar{top:64px;margin-inline:calc(-1 * var(--pad, 20px));padding-inline:var(--pad, 20px);margin-top:22px;padding-block:12px}
	.s-chl__filters{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none}
	.s-chl__filters::-webkit-scrollbar{display:none}
	.s-chl__f{flex:0 0 auto;min-height:40px;padding:0 14px}
	.s-chl__search{min-width:0;width:100%;min-height:42px}
	.s-chl__feat{margin-top:20px;border-radius:24px}
	.s-chl__feat-media{min-height:0;aspect-ratio:16/10}
	.s-chl__feat-media::after{background:linear-gradient(0deg,rgba(19,15,56,.95),transparent 55%)}
	.s-chl__feat-copy{padding:20px;gap:12px}
	.s-chl__feat-title{font-size:30px}
	.s-chl__feat-copy .dch-lead{font-size:14.5px}
	.s-chl__feat-quote{display:none}
	.s-chl__feat-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
	.s-chl__feat-nums b{font-size:24px}
	.s-chl__grid{grid-template-columns:1fr;gap:12px;margin-top:16px}
	.s-chl__cd{flex-direction:row;border-radius:20px;min-height:118px}
	.s-chl__cv{aspect-ratio:auto;flex:0 0 104px}
	.s-chl__no{font-size:64px;bottom:-12px;left:8px}
	.s-chl__glyph{top:12px;right:12px;width:38px;height:38px;border-radius:12px}
	.s-chl__glyph svg{width:20px;height:20px}
	.s-chl__cat,.s-chl__q{display:none}
	.s-chl__cb{padding:14px 16px;gap:6px}
	.s-chl__cb h3{font-size:17px}
	.s-chl__meta{font-size:12px}
	.s-chl__foot{padding-top:8px;font-size:12px}
	.s-chl__next{grid-column:auto;padding:20px}
}

/* ---- blocks/coach-apply/style.css ---- */
/* Coaching — request form. CoachPage.dc.html / M-CoachPage.dc.html */

.s-capply {
	padding-block: 48px;
}

.s-capply:last-child {
	padding-bottom: 100px;
}

.s-capply__inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.s-capply__head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.s-capply__title {
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.45;
	font-weight: 900;
}

.s-capply__lead {
	max-width: 38em;
	font-size: 17px;
	line-height: 1.9;
	color: var(--dpb-muted);
}

.s-capply__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr);
	gap: 24px;
	align-items: start;
}

.s-capply__grid--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
}

/* Side card */

.s-capply__side {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 32px;
	border-radius: var(--dpb-r-card);
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.22);
	line-height: normal;
}

.s-capply__person {
	display: flex;
	align-items: center;
	gap: 12px;
}

.s-capply__avatar {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 25%;
	border: 1.5px solid rgba(169, 155, 255, 0.4);
}

.s-capply__person-name {
	font-size: 16px;
	font-weight: 900;
}

.s-capply__person-role {
	font-size: 13px;
	color: var(--dpb-muted);
}

.s-capply__side-title {
	font-size: 22px;
	line-height: normal;
	font-weight: 900;
}

.s-capply__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.s-capply__step {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.s-capply__num {
	width: 32px;
	height: 32px;
	line-height: 1;
}

.s-capply__step-title {
	font-size: 16px;
	font-weight: 700;
}

.s-capply__step-text {
	margin-top: 2px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--dpb-muted);
}

/* Form card */

.s-capply__card {
	padding: 36px;
	border-radius: var(--dpb-r-card);
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.24);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.s-capply__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.s-capply__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.s-capply__label {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	color: var(--dpb-text-nav);
}

.s-capply__input.dpb-input {
	min-height: 50px;
	padding: 0 16px;
	border-radius: 14px;
	border-color: rgba(169, 155, 255, 0.22);
	font-size: 15px;
}

.s-capply__input.dpb-textarea {
	min-height: 0;
	padding: 14px 16px;
	border-radius: 14px;
	border-color: rgba(169, 155, 255, 0.22);
	font-size: 15px;
	line-height: 1.8;
}

.s-capply__input.dpb-input:focus,
.s-capply__input.dpb-textarea:focus {
	border-color: var(--dpb-accent);
}

.s-capply__input[aria-invalid="true"] {
	border-color: rgba(255, 180, 200, 0.7);
}

.s-capply__error {
	font-size: 13px;
	line-height: normal;
	color: #FFB4C8;
}

.s-capply__error[hidden] {
	display: none;
}

/* Option buttons (radio groups) */

.s-capply__group {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.s-capply__group .s-capply__label {
	margin-bottom: 8px;
}

.s-capply__options {
	display: grid;
	grid-template-columns: repeat(var(--capply-cols, 3), minmax(0, 1fr));
	gap: 8px;
}

.s-capply__option {
	position: relative;
	display: block;
	cursor: pointer;
}

.s-capply__radio {
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.s-capply__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 56px;
	height: 100%;
	padding: 8px 10px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(169, 155, 255, 0.25);
	color: var(--dpb-text-nav);
	line-height: normal;
	text-align: center;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.s-capply__option:hover .s-capply__box {
	border-color: rgba(169, 155, 255, 0.5);
}

.s-capply__radio:checked + .s-capply__box {
	background: var(--dpb-white);
	border: 1.5px solid var(--dpb-white);
	color: var(--dpb-bg);
}

.s-capply__radio:focus-visible + .s-capply__box {
	outline: 2px solid var(--dpb-accent);
	outline-offset: 3px;
}

.s-capply__opt-label {
	font-size: 15px;
	font-weight: 700;
}

.s-capply__opt-sub {
	font-size: 12px;
	font-weight: 500;
	opacity: 0.85;
}

/* Submit */

.s-capply__submit {
	min-height: 58px;
	padding: 0 20px;
	font-size: 16px;
	white-space: normal;
	text-align: center;
	box-shadow: 0 14px 36px rgba(106, 87, 255, 0.38);
}

.s-capply__consent {
	font-size: 12px;
	line-height: 1.8;
	color: var(--dpb-muted);
}

/* Sent */

.s-capply__done {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.s-capply__done-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(169, 155, 255, 0.16);
	color: var(--dpb-accent-2);
}

.s-capply__done-title {
	font-size: 26px;
	line-height: normal;
	font-weight: 900;
}

.s-capply__done-text {
	font-size: 16px;
	line-height: 1.95;
	color: var(--dpb-muted);
}

@media (max-width: 720px) {
	.s-capply {
		padding: 28px 16px;
	}

	.s-capply:last-child {
		padding-bottom: 48px;
	}

	.s-capply__inner {
		gap: 20px;
	}

	.s-capply__title {
		font-size: 28px;
	}

	.s-capply__lead {
		font-size: 16px;
	}

	.s-capply__lead br {
		display: none;
	}

	.s-capply__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.s-capply__side,
	.s-capply__card {
		padding: 22px;
	}

	/* 16px keeps iOS from zooming into the field on focus. */
	.s-capply__input.dpb-input,
	.s-capply__input.dpb-textarea {
		font-size: 16px;
	}

	.s-capply__options--plan {
		grid-template-columns: minmax(0, 1fr);
	}

	.s-capply__options--time {
		grid-template-columns: repeat(var(--capply-cols-m, 3), minmax(0, 1fr));
	}
}

/* ---- Motion (dev/MOTION.md): heading, side card and form card rise; the side card's steps come in
   one by one and each number lights up in turn (a glow that settles back to the design colours);
   fields glow on focus and their label lifts; the option buttons press; the success panel animates in
   (icon pops with a ripple, the tick draws, texts rise). */

.s-capply__step {
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--i, 0) * 160ms + 380ms);
}

.js :where(.dpx) .s-capply__side:not(.in) .s-capply__step {
	opacity: 0;
	translate: 0 14px;
}

.s-capply__num {
	position: relative;
	isolation: isolate;
}

/* The light: a glowing primary disc behind the digit, flashed once per step. */
.s-capply__num::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--dpb-primary);
	box-shadow: 0 0 0 6px rgba(106, 87, 255, 0.18), 0 0 26px rgba(106, 87, 255, 0.6);
	opacity: 0;
	pointer-events: none;
}

.js :where(.dpx) .s-capply__side.in .s-capply__num::before {
	animation: s-capply-light 1.5s ease-in-out both;
	animation-delay: calc(var(--i, 0) * 260ms + 700ms);
}

@keyframes s-capply-light {
	0%,
	100% {
		opacity: 0;
	}
	30%,
	45% {
		opacity: 1;
	}
}

/* Fields: focus glow + label lift. */
.s-capply__label {
	transition: color 0.25s ease, translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.s-capply__field:focus-within .s-capply__label,
.s-capply__group:focus-within .s-capply__label {
	color: var(--dpb-white);
	translate: 0 -2px;
}

.s-capply__input.dpb-input,
.s-capply__input.dpb-textarea {
	transition: border-color 0.25s ease, box-shadow 0.35s ease, background-color 0.25s ease;
}

.s-capply__input.dpb-input:focus,
.s-capply__input.dpb-textarea:focus {
	box-shadow: 0 0 0 4px rgba(169, 155, 255, 0.16), 0 14px 34px -12px rgba(106, 87, 255, 0.65);
}

.s-capply__box {
	transition: background-color 0.2s, border-color 0.2s, color 0.2s, scale 0.25s cubic-bezier(0.2, 0.8, 0.25, 1.15);
}

.s-capply__option:active .s-capply__box {
	scale: 0.97;
}

.s-capply__error:not([hidden]),
.s-capply .dpb-form-notice {
	animation: s-capply-msg 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes s-capply-msg {
	from {
		opacity: 0;
		transform: translate3d(0, -4px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Success panel. */
.s-capply__done-icon {
	position: relative;
}

.s-capply__done-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--dpb-accent);
	opacity: 0;
	pointer-events: none;
}

.js :where(.dpx) .s-capply__done > * {
	animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.js :where(.dpx) .s-capply__done > :nth-child(2) {
	animation-delay: 0.3s;
}

.js :where(.dpx) .s-capply__done > :nth-child(3) {
	animation-delay: 0.42s;
}

.js :where(.dpx) .s-capply__done .s-capply__done-icon {
	animation: s-capply-pop 0.8s cubic-bezier(0.2, 0.8, 0.25, 1.15) 0.1s both;
}

.js :where(.dpx) .s-capply__done .s-capply__done-icon::after {
	animation: s-capply-ring 1.4s ease-out 0.45s both;
}

.js :where(.dpx) .s-capply__done .s-capply__done-icon path {
	stroke-dasharray: 24;
	animation: s-capply-tick 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both;
}

@keyframes s-capply-pop {
	from {
		opacity: 0;
		transform: scale(0.4) rotate(-20deg);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes s-capply-ring {
	from {
		opacity: 0.8;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(1.9);
	}
}

@keyframes s-capply-tick {
	from {
		stroke-dashoffset: 24;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js :where(.dpx) .s-capply__side:not(.in) .s-capply__step {
		opacity: 1;
		translate: none;
	}

	.s-capply__step,
	.s-capply__label,
	.s-capply__box {
		transition: none;
	}

	.s-capply__field:focus-within .s-capply__label,
	.s-capply__group:focus-within .s-capply__label {
		translate: none;
	}

	.js :where(.dpx) .s-capply__side.in .s-capply__num::before,
	.s-capply__error:not([hidden]),
	.s-capply .dpb-form-notice,
	.js :where(.dpx) .s-capply__done > *,
	.js :where(.dpx) .s-capply__done .s-capply__done-icon,
	.js :where(.dpx) .s-capply__done .s-capply__done-icon::after,
	.js :where(.dpx) .s-capply__done .s-capply__done-icon path {
		animation: none;
	}
}

/* ---- blocks/coach-audience/style.css ---- */
/* Coaching — who it is for. CoachPage.dc.html / M-CoachPage.dc.html */

.s-caud {
	padding-block: 48px;
}

.s-caud:last-child {
	padding-bottom: 100px;
}

.s-caud__inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.s-caud__title {
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.45;
	font-weight: 900;
}

.s-caud__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 20px;
}

.s-caud__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px;
	border-radius: 26px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(169, 155, 255, 0.14);
}

.s-caud__card--yes {
	background: rgba(106, 87, 255, 0.1);
	border-color: rgba(169, 155, 255, 0.35);
}

.s-caud__card-title {
	font-size: 19px;
	line-height: normal;
	font-weight: 900;
}

.s-caud__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s-caud__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--dpb-text-nav);
}

.s-caud__mark {
	flex: none;
	margin-top: 3px;
	color: var(--dpb-accent);
}

.s-caud__card--no .s-caud__mark {
	color: #6E6896;
}

@media (max-width: 720px) {
	.s-caud {
		padding: 28px 16px;
	}

	.s-caud:last-child {
		padding-bottom: 48px;
	}

	.s-caud__inner {
		gap: 16px;
	}

	.s-caud__title {
		font-size: 28px;
	}

	.s-caud__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

/* ---- Motion (dev/MOTION.md): the title rises, the two cards follow one after another
   (translate/opacity, so the hover lift keeps its own transform), list items stagger in with
   their marks popping, and the cards get the cursor spotlight + lift (.spot .lift). */

.s-caud__card {
	--rd: calc(var(--i, 0) * 110ms + 80ms);
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd), translate 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd), transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, box-shadow 0.35s, background-color 0.35s;
}

.s-caud__item {
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--i, 0) * 110ms + 380ms + var(--j, 0) * 80ms);
}

.s-caud__mark {
	transition: scale 0.6s cubic-bezier(0.2, 0.8, 0.25, 1.15), opacity 0.4s;
	transition-delay: calc(var(--i, 0) * 110ms + 500ms + var(--j, 0) * 80ms);
}

/* The grid only triggers the reveal; it does not fade as a whole. */
.js :where(.dpx) .s-caud__grid[data-reveal] {
	opacity: 1;
	transform: none;
}

.js :where(.dpx) .s-caud__grid:not(.in) .s-caud__card {
	opacity: 0;
	translate: 0 30px;
}

.js :where(.dpx) .s-caud__grid:not(.in) .s-caud__item {
	opacity: 0;
	translate: 0 12px;
}

.js :where(.dpx) .s-caud__grid:not(.in) .s-caud__mark {
	opacity: 0;
	scale: 0.4;
}

.s-caud__card--no.lift:hover {
	border-color: rgba(169, 155, 255, 0.4);
}

@media (prefers-reduced-motion: reduce) {
	.js :where(.dpx) .s-caud__grid:not(.in) .s-caud__card,
	.js :where(.dpx) .s-caud__grid:not(.in) .s-caud__item,
	.js :where(.dpx) .s-caud__grid:not(.in) .s-caud__mark {
		opacity: 1;
		translate: none;
		scale: none;
	}

	.s-caud__card,
	.s-caud__item,
	.s-caud__mark {
		transition: none;
	}
}

/* ---- blocks/coach-hero/style.css ---- */
/* Coaching hero — CoachPage.dc.html / M-CoachPage.dc.html */

.s-chero {
	overflow: hidden;
	padding-block: 48px;
}

.s-chero:last-child {
	padding-bottom: 100px;
}

.s-chero__glow {
	position: absolute;
	left: 22%;
	top: 300px;
	width: 760px;
	height: 760px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(106, 87, 255, 0.26), rgba(106, 87, 255, 0));
	pointer-events: none;
}

.s-chero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}

.s-chero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

.s-chero__title {
	font-size: clamp(40px, 5vw, 66px);
	line-height: 1.3;
	font-weight: 900;
}

.s-chero__text {
	font-size: 18px;
	line-height: 1.95;
	color: var(--dpb-muted);
	max-width: 30em;
}

.s-chero__note {
	padding-inline-start: 14px;
	border-inline-start: 2px solid var(--dpb-primary);
	font-size: 15px;
	line-height: normal;
	color: var(--dpb-muted);
}

.s-chero__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.s-chero__btns {
	gap: 12px;
}

.s-chero__btn {
	min-height: 56px;
	padding: 0 26px;
	font-size: 16px;
	gap: 10px;
}

.s-chero__btn.dpb-btn--primary {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 14px 36px rgba(106, 87, 255, 0.38);
}

.s-chero__figure {
	position: relative;
	margin: 0;
	height: 560px;
	border-radius: var(--dpb-r-lg);
	overflow: hidden;
	border: 1px solid rgba(169, 155, 255, 0.3);
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
	background: var(--dpb-art);
}

.s-chero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 26%;
}

.s-chero__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(13, 10, 34, 0.75), rgba(13, 10, 34, 0) 45%);
}

.s-chero__caption {
	position: absolute;
	right: 18px;
	left: 18px;
	bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.s-chero__quote {
	font-size: 18px;
	line-height: 1.7;
	font-weight: 700;
	color: var(--dpb-text);
}

.s-chero__name {
	font-size: 13px;
	line-height: normal;
	color: var(--dpb-text-nav);
}

@media (max-width: 720px) {
	.s-chero {
		padding: 28px 16px;
	}

	.s-chero:last-child {
		padding-bottom: 48px;
	}

	.s-chero__glow {
		left: 50%;
		top: 380px;
		width: 520px;
		height: 520px;
	}

	.s-chero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.s-chero__figure {
		order: -1;
		height: 420px;
		border-radius: var(--dpb-r-card);
	}

	.s-chero__content {
		gap: 18px;
	}

	.s-chero__title {
		font-size: 36px;
		line-height: 1.35;
	}

	.s-chero__title br,
	.s-chero__text br {
		display: none;
	}

	.s-chero__text {
		font-size: 16px;
	}

	.s-chero__btns {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.s-chero__btn {
		font-size: 16px;
	}
}

/* ---- Motion (dev/MOTION.md): copy rises in sequence on load, chips follow one by one,
   the photo frame settles in and the photo drifts inside it (data-photo, assets/js/src/00-site.js).
   Hidden states only exist on the site with JavaScript (.js + .dpx); the editor shows the final state. */

/* The photo is oversized and absolutely placed so it can drift; the frame keeps its 560/420px height. */
.s-chero__figure .s-chero__img {
	position: absolute;
	inset: -7% 0;
	width: 100%;
	height: 114%;
	max-width: none;
	will-change: transform;
}

.js :where(.dpx) .s-chero__content > * {
	animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(var(--d, 0) * 110ms + 100ms);
}

.js :where(.dpx) .s-chero__chips > li {
	animation: s-chero-chip 0.7s cubic-bezier(0.2, 0.8, 0.25, 1.15) both;
	animation-delay: calc(4 * 110ms + 380ms + var(--i, 0) * 90ms);
}

.js :where(.dpx) .s-chero__figure {
	animation: s-chero-frame 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: 0.15s;
}

.js :where(.dpx) .s-chero__caption {
	animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: 0.75s;
}

.js :where(.dpx) .s-chero__glow {
	animation: s-chero-glow 9s ease-in-out 1.2s infinite;
}

@keyframes s-chero-chip {
	from {
		opacity: 0;
		transform: translate3d(0, 10px, 0) scale(0.92);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes s-chero-frame {
	from {
		opacity: 0;
		transform: translate3d(0, 24px, 0) scale(0.97);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Slow breathing of the soft glow (starts and ends at the design state). */
@keyframes s-chero-glow {
	0%,
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		opacity: 0.72;
		transform: translate(-50%, -50%) scale(1.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.js :where(.dpx) .s-chero__content > *,
	.js :where(.dpx) .s-chero__chips > li,
	.js :where(.dpx) .s-chero__figure,
	.js :where(.dpx) .s-chero__caption,
	.js :where(.dpx) .s-chero__glow {
		animation: none;
	}

	/* No drift: show the photo exactly as framed in the design. */
	.s-chero__figure .s-chero__img {
		inset: 0;
		height: 100%;
	}
}

.editor-styles-wrapper .s-chero__figure .s-chero__img {
	inset: 0;
	height: 100%;
}

/* ---- blocks/coach-pricing/style.css ---- */
/* Coaching — pricing. CoachPage.dc.html / M-CoachPage.dc.html */

.s-cprice {
	padding-block: 48px;
}

.s-cprice:last-child {
	padding-bottom: 100px;
}

.s-cprice__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.s-cprice__head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.s-cprice__title {
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.45;
	font-weight: 900;
}

.s-cprice__lead {
	max-width: 38em;
	font-size: 17px;
	line-height: 1.9;
	color: var(--dpb-muted);
}

/* Plans */

.s-cprice__plans {
	display: grid;
	grid-template-columns: var(--cprice-cols, repeat(auto-fit, minmax(0, 1fr)));
	align-items: stretch;
	gap: 24px;
}

.s-cprice__plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 32px;
	border-radius: var(--dpb-r-lg);
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.22);
	line-height: normal;
}

.s-cprice__plan.is-featured {
	padding: 36px;
	background: var(--dpb-surface-2);
	border: 2px solid var(--dpb-primary);
	box-shadow: 0 0 0 6px rgba(106, 87, 255, 0.12), 0 40px 100px rgba(0, 0, 0, 0.45);
}

.s-cprice__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.s-cprice__badge {
	line-height: normal;
}

.s-cprice__tag {
	font-size: 13px;
	color: var(--dpb-muted);
}

.s-cprice__duration {
	margin-inline-start: auto;
	font-size: 14px;
	color: var(--dpb-text-nav);
}

.s-cprice__name {
	font-size: 22px;
	line-height: normal;
	font-weight: 900;
}

.is-featured .s-cprice__name {
	font-size: 26px;
}

.s-cprice__pricing {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.s-cprice__compare {
	font-size: 15px;
	color: var(--dpb-muted);
}

.s-cprice__compare span {
	font-size: 13px;
}

.s-cprice__compare s {
	color: var(--dpb-faint);
}

.s-cprice__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.s-cprice__price b {
	font-size: 36px;
	line-height: 1.3;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-cprice__price span {
	font-size: 16px;
	color: var(--dpb-text-nav);
}

.is-featured .s-cprice__price b {
	font-size: 52px;
}

.is-featured .s-cprice__price span {
	font-size: 17px;
}

.s-cprice__per {
	font-size: 15px;
	color: var(--dpb-muted);
}

.is-featured .s-cprice__per {
	font-size: 16px;
	font-weight: 700;
	color: var(--dpb-accent-2);
}

.s-cprice__saving-row {
	margin-top: 6px;
}

.s-cprice__saving {
	display: inline-flex;
	padding: 6px 14px;
	border-radius: var(--dpb-r-pill);
	background: rgba(169, 155, 255, 0.16);
	border: 1px solid rgba(169, 155, 255, 0.35);
	color: var(--dpb-white);
	font-size: 14px;
	font-weight: 700;
}

.s-cprice__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s-cprice__feature {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--dpb-text-nav);
}

.s-cprice__feature.is-missing {
	color: var(--dpb-faint);
}

.s-cprice__mark {
	flex: none;
	margin-top: 3px;
	color: var(--dpb-accent);
}

.is-missing .s-cprice__mark {
	color: #6E6896;
}

.s-cprice__btn {
	min-height: 56px;
	padding: 0 26px;
	font-size: 16px;
	gap: 10px;
}

.s-cprice__btn.dpb-btn--primary {
	min-height: 58px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 14px 36px rgba(106, 87, 255, 0.38);
}

/* Why yearly */

.s-cprice__reasons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 14px;
}

.s-cprice__reason {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(169, 155, 255, 0.14);
}

.s-cprice__reason-title {
	font-size: 16px;
	line-height: normal;
	font-weight: 900;
}

.s-cprice__reason-text {
	font-size: 14px;
	line-height: 1.85;
	color: var(--dpb-muted);
}

/* Payment terms */

.s-cprice__terms {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
}

.s-cprice__term {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: normal;
	color: var(--dpb-text-nav);
}

.s-cprice__term .dpb-icon {
	flex: none;
	color: var(--dpb-accent);
}

@media (max-width: 720px) {
	.s-cprice {
		padding: 28px 16px;
	}

	.s-cprice:last-child {
		padding-bottom: 48px;
	}

	.s-cprice__inner {
		gap: 24px;
	}

	.s-cprice__title {
		font-size: 28px;
	}

	.s-cprice__lead {
		font-size: 16px;
	}

	.s-cprice__lead br {
		display: none;
	}

	.s-cprice__plans {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.s-cprice__plan,
	.s-cprice__plan.is-featured {
		padding: 24px;
	}

	.s-cprice__price b {
		font-size: 30px;
	}

	.is-featured .s-cprice__price b {
		font-size: 40px;
	}

	.s-cprice__reasons {
		grid-template-columns: minmax(0, 1fr);
	}

	.s-cprice__terms {
		gap: 12px 20px;
	}
}

/* ---- Motion (dev/MOTION.md): the plans rise one after another and their features follow in a
   quick stagger; the featured plan tilts with the pointer (data-tilt), has the cursor spotlight
   and a slowly breathing glow; numeric prices count up (view.js; the server-rendered price is the
   final text); the reasons and payment terms stagger in. Reveals use translate/opacity so the
   tilt and hover lifts keep their own transform. */

.s-cprice__plan {
	--rd: calc(var(--i, 0) * 120ms + 80ms);
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd), translate 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s, box-shadow 0.4s;
}

.s-cprice__feature {
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--i, 0) * 120ms + 420ms + var(--j, 0) * 70ms);
}

.s-cprice__saving {
	transition: opacity 0.6s ease, scale 0.7s cubic-bezier(0.2, 0.8, 0.25, 1.15);
	transition-delay: calc(var(--i, 0) * 120ms + 700ms);
}

.s-cprice__plan.is-featured:hover {
	border-color: #8C7BFF;
	box-shadow: 0 0 0 6px rgba(106, 87, 255, 0.18), 0 40px 100px rgba(0, 0, 0, 0.45), 0 0 64px rgba(106, 87, 255, 0.32);
}

/* Breathing glow around the featured plan (invisible at rest, so the design state is unchanged). */
.s-cprice__plan.is-featured::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	box-shadow: 0 0 0 1px rgba(169, 155, 255, 0.3), 0 0 48px 2px rgba(106, 87, 255, 0.55);
	opacity: 0;
	pointer-events: none;
}

.js :where(.dpx) .s-cprice__plans.in .s-cprice__plan.is-featured::after {
	animation: s-cprice-glow 4.8s ease-in-out 1.6s infinite;
}

@keyframes s-cprice-glow {
	0%,
	100% {
		opacity: 0;
	}
	50% {
		opacity: 0.85;
	}
}

.s-cprice__reason {
	--rd: calc(var(--i, 0) * 100ms + 80ms);
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd), translate 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd), transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, box-shadow 0.35s, background-color 0.35s;
}

/* The grids only trigger the reveal; they do not fade as a whole. */
.js :where(.dpx) .s-cprice__plans[data-reveal],
.js :where(.dpx) .s-cprice__reasons[data-reveal] {
	opacity: 1;
	transform: none;
}

.js :where(.dpx) .s-cprice__plans:not(.in) .s-cprice__plan,
.js :where(.dpx) .s-cprice__reasons:not(.in) .s-cprice__reason {
	opacity: 0;
	translate: 0 34px;
}

.js :where(.dpx) .s-cprice__plans:not(.in) .s-cprice__feature {
	opacity: 0;
	translate: 0 10px;
}

.js :where(.dpx) .s-cprice__plans:not(.in) .s-cprice__saving {
	opacity: 0;
	scale: 0.86;
}

@media (prefers-reduced-motion: reduce) {
	.js :where(.dpx) .s-cprice__plans:not(.in) .s-cprice__plan,
	.js :where(.dpx) .s-cprice__reasons:not(.in) .s-cprice__reason,
	.js :where(.dpx) .s-cprice__plans:not(.in) .s-cprice__feature,
	.js :where(.dpx) .s-cprice__plans:not(.in) .s-cprice__saving {
		opacity: 1;
		translate: none;
		scale: none;
	}

	.s-cprice__plan,
	.s-cprice__feature,
	.s-cprice__saving,
	.s-cprice__reason {
		transition: none;
	}

	.js :where(.dpx) .s-cprice__plans.in .s-cprice__plan.is-featured::after {
		animation: none;
	}
}

/* ---- blocks/coach-process/style.css ---- */
/* Coaching — how it works. CoachPage.dc.html / M-CoachPage.dc.html */

.s-cproc {
	padding-block: 48px;
}

.s-cproc:last-child {
	padding-bottom: 100px;
}

.s-cproc__inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.s-cproc__title {
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.45;
	font-weight: 900;
}

.s-cproc__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--cproc-cols, 4), minmax(0, 1fr));
	gap: 20px;
}

.s-cproc__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border-radius: 24px;
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.16);
}

.s-cproc__ghost {
	position: absolute;
	top: 10px;
	left: 18px;
	font-size: 64px;
	font-weight: 900;
	line-height: 1;
	color: rgba(169, 155, 255, 0.1);
	pointer-events: none;
}

.s-cproc__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(169, 155, 255, 0.14);
	color: var(--dpb-white);
	font-weight: 900;
	line-height: 1;
}

.s-cproc__step.is-first .s-cproc__num {
	background: var(--dpb-primary);
}

.s-cproc__step-title {
	font-size: 19px;
	line-height: normal;
	font-weight: 900;
}

.s-cproc__text {
	font-size: 15px;
	line-height: 1.85;
	color: var(--dpb-muted);
}

@media (max-width: 1100px) {
	.s-cproc__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.s-cproc {
		padding: 28px 16px;
	}

	.s-cproc:last-child {
		padding-bottom: 48px;
	}

	.s-cproc__inner {
		gap: 16px;
	}

	.s-cproc__title {
		font-size: 28px;
	}

	.s-cproc__steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

/* ---- Motion (dev/MOTION.md), in the language of home-method: the cards rise one after another;
   on desktop a track line joins the numbers and draws as the row crosses the screen, and each step
   lights up when the line reaches it (view.js sets --a on the line parts and .lit on the steps).
   Without JavaScript, with reduced motion and in the editor every step is lit and the line is drawn. */

.s-cproc__step {
	--rd: calc(var(--i, 0) * 100ms + 80ms);
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd), translate 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd), border-color 0.6s ease;
}

.s-cproc__ghost {
	z-index: 1;
	transition: color 0.6s ease;
}

.s-cproc__num {
	position: relative;
	z-index: 1;
	transition: background-color 0.6s ease, box-shadow 0.6s ease, scale 0.6s cubic-bezier(0.2, 0.8, 0.25, 1.15);
}

/* Lit step (all steps when the scroll effect is not running). */
.s-cproc__step.lit,
.s-cproc__steps:not(.is-live) .s-cproc__step {
	border-color: rgba(169, 155, 255, 0.32);
}

.s-cproc__step.lit .s-cproc__ghost,
.s-cproc__steps:not(.is-live) .s-cproc__ghost {
	color: rgba(169, 155, 255, 0.16);
}

.s-cproc__step.lit .s-cproc__num,
.s-cproc__steps:not(.is-live) .s-cproc__num {
	background: var(--dpb-primary);
	box-shadow: 0 0 0 5px rgba(106, 87, 255, 0.16), 0 0 22px rgba(106, 87, 255, 0.5);
}

.s-cproc__steps.is-live .s-cproc__step.lit:not(.is-first) .s-cproc__num {
	animation: s-cproc-pop 0.6s cubic-bezier(0.2, 0.8, 0.25, 1.15);
}

@keyframes s-cproc-pop {
	40% {
		scale: 1.14;
	}
}

/* Track: a dim rail with a bright line that grows from right to left (RTL reading order). */
.s-cproc__link {
	display: none;
	position: absolute;
	top: 43px;
	height: 2px;
	border-radius: 2px;
	background: #2A2462;
	pointer-events: none;
}

.s-cproc__link i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: #9C8CFF;
	box-shadow: 0 0 12px rgba(169, 155, 255, 0.6);
	transform-origin: right center;
}

.s-cproc__steps.is-live .s-cproc__link i {
	transform: scaleX(var(--a, 0));
}

/* From the number to the middle of the gap, and from the gap to the next number. */
.s-cproc__link--out {
	right: 64px;
	left: -11px;
}

.s-cproc__link--in {
	right: -11px;
	width: 35px;
}

@media (min-width: 1101px) {
	.s-cproc__steps.has-track .s-cproc__link {
		display: block;
	}
}

/* Cards rise in sequence (translate/opacity; the list itself does not fade). */
.js :where(.dpx) .s-cproc__steps[data-reveal] {
	opacity: 1;
	transform: none;
}

.js :where(.dpx) .s-cproc__steps:not(.in) .s-cproc__step {
	opacity: 0;
	translate: 0 30px;
}

@media (prefers-reduced-motion: reduce) {
	.js :where(.dpx) .s-cproc__steps:not(.in) .s-cproc__step {
		opacity: 1;
		translate: none;
	}

	.s-cproc__step,
	.s-cproc__num,
	.s-cproc__ghost {
		transition: none;
	}
}

/* ---- blocks/coach-testimonials/style.css ---- */
/* Coaching — student messages + FAQ. CoachPage.dc.html / M-CoachPage.dc.html */

.s-ctesti {
	padding-block: 48px;
}

.s-ctesti:last-child {
	padding-bottom: 100px;
}

.s-ctesti__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.s-ctesti__grid--single {
	grid-template-columns: minmax(0, 1fr);
}

.s-ctesti__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.s-ctesti__title {
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.45;
	font-weight: 900;
}

/* Messages */

.s-ctesti__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s-ctesti__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border-radius: 22px;
	background: #211B55;
	border: 1px solid rgba(169, 155, 255, 0.14);
}

.s-ctesti__who {
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: normal;
}

.s-ctesti__avatar,
.s-ctesti__photo {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
}

.s-ctesti__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #2E2670;
	color: var(--dpb-accent);
}

.s-ctesti__photo {
	object-fit: cover;
}

.s-ctesti__name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--dpb-muted);
}

.s-ctesti__meta {
	font-size: 12px;
	color: var(--dpb-muted);
}

.s-ctesti__bubble {
	padding: 12px 14px;
	border-radius: 6px 18px 18px 18px;
	background: #2E2670;
	font-size: 15px;
	line-height: 1.9;
	color: var(--dpb-text-nav);
}

/* FAQ */

.s-ctesti__faqs {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.s-ctesti__faq {
	padding: 0 18px;
	border-radius: 18px;
	background: rgba(13, 10, 34, 0.5);
	border: 1px solid rgba(169, 155, 255, 0.16);
}

.s-ctesti__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 16px 0;
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
	list-style: none;
	cursor: pointer;
}

.s-ctesti__q::-webkit-details-marker {
	display: none;
}

.s-ctesti__q:focus-visible {
	outline-offset: 4px;
	border-radius: 8px;
}

.s-ctesti__plus {
	flex: none;
	color: var(--dpb-accent);
}

.s-ctesti__a {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--dpb-muted);
}

.s-ctesti__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
	color: var(--dpb-accent-2);
	text-underline-offset: 6px;
}

.s-ctesti__link .dpb-icon {
	flex: none;
}

@media (max-width: 720px) {
	.s-ctesti {
		padding: 28px 16px;
	}

	.s-ctesti:last-child {
		padding-bottom: 48px;
	}

	.s-ctesti__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.s-ctesti__col--msgs {
		gap: 14px;
	}

	.s-ctesti__col--faq {
		gap: 12px;
	}

	.s-ctesti__title {
		font-size: 28px;
	}
}

/* ---- Motion (dev/MOTION.md): titles rise; the message cards come in one after another with the
   chat bubble popping after its sender; the FAQ items stagger in, open and close smoothly
   (view.js animates the height) and the plus turns into a × (rotates 45°). */

.s-ctesti__card,
.s-ctesti__faq {
	--rd: calc(var(--i, 0) * 100ms + 80ms);
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd), translate 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd), border-color 0.3s, background-color 0.3s;
}

.s-ctesti__bubble {
	transform-origin: 100% 0;
	transition: opacity 0.6s ease, scale 0.7s cubic-bezier(0.2, 0.8, 0.25, 1.15);
	transition-delay: calc(var(--i, 0) * 100ms + 380ms);
}

.s-ctesti__faq:hover {
	border-color: rgba(169, 155, 255, 0.3);
}

.s-ctesti__plus {
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s;
}

.s-ctesti__faq[open]:not(.is-closing) .s-ctesti__plus {
	transform: rotate(45deg);
	color: var(--dpb-white);
}

/* The lists only trigger the reveal; they do not fade as a whole. */
.js :where(.dpx) .s-ctesti__list[data-reveal],
.js :where(.dpx) .s-ctesti__faqs[data-reveal] {
	opacity: 1;
	transform: none;
}

.js :where(.dpx) .s-ctesti__list:not(.in) .s-ctesti__card,
.js :where(.dpx) .s-ctesti__faqs:not(.in) .s-ctesti__faq {
	opacity: 0;
	translate: 0 26px;
}

.js :where(.dpx) .s-ctesti__list:not(.in) .s-ctesti__bubble {
	opacity: 0;
	scale: 0.92;
}

@media (prefers-reduced-motion: reduce) {
	.js :where(.dpx) .s-ctesti__list:not(.in) .s-ctesti__card,
	.js :where(.dpx) .s-ctesti__faqs:not(.in) .s-ctesti__faq,
	.js :where(.dpx) .s-ctesti__list:not(.in) .s-ctesti__bubble {
		opacity: 1;
		translate: none;
		scale: none;
	}

	.s-ctesti__card,
	.s-ctesti__faq,
	.s-ctesti__bubble,
	.s-ctesti__plus {
		transition: none;
	}
}

/* ---- blocks/contact-form/style.css ---- */
/* Contact form — ContactPage.dc.html / M-ContactPage.dc.html */

.s-contact-form {
	padding-bottom: 96px;
}

/* Directly under the contact hero the two read as one block (56px gap in the design);
   the hero's glow shows through. */
.s-contact-hero + .s-contact-form {
	padding-top: 0;
	background: transparent;
}

.s-contact-form__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
	gap: 48px;
	align-items: start;
}

.s-contact-form--single .s-contact-form__grid {
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
}

.s-contact-form__main {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.s-contact-form__title {
	font-size: 22px;
	line-height: 1.4;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-contact-form__card {
	padding: 36px;
	border-radius: 28px;
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.24);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.s-contact-form__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.s-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.s-contact-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 14px;
}

.s-contact-form .s-contact-form__label {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--dpb-text-nav);
}

.s-contact-form .s-contact-form__input,
.s-contact-form .s-contact-form__textarea {
	min-height: 50px;
	padding: 0 16px;
	border-radius: 14px;
	background: var(--dpb-bg);
	border: 1.5px solid rgba(169, 155, 255, 0.22);
	font-size: 15px;
	text-align: right;
}

.s-contact-form .s-contact-form__textarea {
	padding: 14px 16px;
	line-height: 1.8;
}

/* Persian placeholder in an LTR field: lay it out right-to-left until the visitor types. */
.s-contact-form .s-contact-form__input[dir="ltr"]:placeholder-shown {
	direction: rtl;
}

.s-contact-form .s-contact-form__input:focus,
.s-contact-form .s-contact-form__textarea:focus {
	border-color: var(--dpb-accent);
}

.s-contact-form .s-contact-form__input[aria-invalid="true"],
.s-contact-form .s-contact-form__textarea[aria-invalid="true"] {
	border-color: rgba(255, 180, 200, 0.7);
}

.s-contact-form__err {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: #FFB4C8;
}

.s-contact-form__err[hidden] {
	display: none;
}

/* Subject: radio buttons that look like the design's toggle buttons. */
.s-contact-form__subjects {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.s-contact-form__subjects legend {
	margin-bottom: 8px;
}

.s-contact-form__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.s-contact-form__option {
	position: relative;
	display: flex;
	cursor: pointer;
}

.s-contact-form__option input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.s-contact-form__option span {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 8px 10px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(169, 155, 255, 0.25);
	color: var(--dpb-text-nav);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.s-contact-form__option:hover span {
	border-color: rgba(169, 155, 255, 0.5);
}

.s-contact-form__option input:checked + span {
	background: var(--dpb-white);
	border-color: var(--dpb-white);
	box-shadow: 0 0 0 0.5px var(--dpb-white);
	color: var(--dpb-bg);
}

.s-contact-form__option input:focus-visible + span {
	outline: 2px solid var(--dpb-accent);
	outline-offset: 3px;
}

.s-contact-form .s-contact-form__submit {
	min-height: 58px;
	padding: 0 20px;
	font-size: 16px;
	box-shadow: 0 14px 36px rgba(106, 87, 255, 0.38);
}

.s-contact-form__submit[aria-busy="true"] {
	opacity: 0.7;
	pointer-events: none;
}

.s-contact-form__privacy {
	font-size: 12px;
	line-height: 1.8;
	color: var(--dpb-muted);
}

.s-contact-form__privacy a {
	color: var(--dpb-accent-2);
}

/* Sent */
.s-contact-form__done {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	outline: none;
}

.s-contact-form__done-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(169, 155, 255, 0.16);
	color: var(--dpb-accent-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.s-contact-form__done-title {
	font-size: 26px;
	line-height: 1.4;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-contact-form__done-text {
	font-size: 16px;
	line-height: 1.95;
	color: var(--dpb-muted);
}

.s-contact-form .s-contact-form__again {
	min-height: 50px;
	padding: 0 24px;
}

/* Side column */
.s-contact-form__aside {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	min-width: 0;
}

/* No channels title: line the box up with the form card (under the 22px title). */
.s-contact-form__aside--offset {
	padding-top: 45px;
}

/* Contact channels */
.s-contact-form__channel-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s-contact-form__channel-list > li {
	display: flex;
}

.s-contact-form__channel {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border-radius: 22px;
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.18);
	color: var(--dpb-text);
	text-decoration: none;
}

a.s-contact-form__channel:hover {
	color: var(--dpb-text);
	border-color: rgba(169, 155, 255, 0.4);
	background: var(--dpb-surface-2);
}

.s-contact-form__channel-icon {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 16px;
	background: rgba(169, 155, 255, 0.14);
	color: var(--dpb-accent-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.s-contact-form__channel-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.6;
}

.s-contact-form__channel-label,
.s-contact-form__channel-note {
	font-size: 13px;
	color: var(--dpb-muted);
}

.s-contact-form__channel-value {
	font-size: 17px;
	font-weight: 700;
	text-align: right;
	overflow-wrap: anywhere;
}

.s-contact-form__box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 22px;
	border-radius: 24px;
	background: rgba(106, 87, 255, 0.12);
	border: 1px solid rgba(169, 155, 255, 0.35);
}

.s-contact-form__box-title {
	font-size: 18px;
	line-height: 1.5;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-contact-form__box-text {
	font-size: 15px;
	line-height: 1.85;
	color: var(--dpb-text-nav);
}

.s-contact-form .s-contact-form__box-btn {
	min-height: 50px;
	padding: 0 26px;
	font-size: 16px;
}

.s-contact-form__faq {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-accent-2);
	text-underline-offset: 6px;
}

.s-contact-form__faq .dpb-icon {
	flex: none;
}

@media (max-width: 720px) {
	.s-contact-form {
		padding-inline: 16px;
		padding-bottom: 56px;
	}

	.s-contact-form__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.s-contact-form__card {
		padding: 22px;
	}

	.s-contact-form__row {
		grid-template-columns: minmax(0, 1fr);
	}

	/* 16px keeps iOS from zooming into the field. */
	.s-contact-form .s-contact-form__input,
	.s-contact-form .s-contact-form__textarea {
		font-size: 16px;
	}

	.s-contact-form__aside--offset {
		padding-top: 0;
	}

	.s-contact-form__box-text br {
		display: none;
	}
}

/* ---- Motion (dev/MOTION.md): title, form card and side column rise in order; the channel cards
   stagger in (data-stagger) with the cursor spotlight + lift; fields glow on focus and their label
   lifts; subject buttons press; error messages slide in; the success panel animates in (icon pops
   with a ripple, the tick draws, texts and button rise). */

/* Fields: focus glow + label lift. */
.s-contact-form .s-contact-form__label {
	transition: color 0.25s ease, translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.s-contact-form__field:focus-within .s-contact-form__label,
.s-contact-form__subjects:focus-within .s-contact-form__label {
	color: var(--dpb-white);
	translate: 0 -2px;
}

.s-contact-form .s-contact-form__input,
.s-contact-form .s-contact-form__textarea {
	transition: border-color 0.25s ease, box-shadow 0.35s ease;
}

.s-contact-form .s-contact-form__input:focus,
.s-contact-form .s-contact-form__textarea:focus {
	box-shadow: 0 0 0 4px rgba(169, 155, 255, 0.16), 0 14px 34px -12px rgba(106, 87, 255, 0.65);
}

.s-contact-form__option span {
	transition: background-color 0.2s, border-color 0.2s, color 0.2s, scale 0.25s cubic-bezier(0.2, 0.8, 0.25, 1.15);
}

.s-contact-form__option:active span {
	scale: 0.97;
}

.s-contact-form__err:not([hidden]),
.s-contact-form .dpb-form-notice {
	animation: s-contact-form-msg 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes s-contact-form-msg {
	from {
		opacity: 0;
		transform: translate3d(0, -4px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Channel cards. */
.s-contact-form__channel {
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, box-shadow 0.35s, background-color 0.35s;
}

.s-contact-form__channel-icon {
	transition: scale 0.4s cubic-bezier(0.2, 0.8, 0.25, 1.15), background-color 0.35s;
}

.s-contact-form__channel:hover .s-contact-form__channel-icon {
	scale: 1.08;
	background: rgba(169, 155, 255, 0.22);
}

/* Success panel. */
.s-contact-form__done-icon {
	position: relative;
}

.s-contact-form__done-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--dpb-accent);
	opacity: 0;
	pointer-events: none;
}

.js :where(.dpx) .s-contact-form__done > * {
	animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.js :where(.dpx) .s-contact-form__done > :nth-child(2) {
	animation-delay: 0.3s;
}

.js :where(.dpx) .s-contact-form__done > :nth-child(3) {
	animation-delay: 0.42s;
}

.js :where(.dpx) .s-contact-form__done > :nth-child(4) {
	animation-delay: 0.54s;
}

.js :where(.dpx) .s-contact-form__done .s-contact-form__done-icon {
	animation: s-contact-form-pop 0.8s cubic-bezier(0.2, 0.8, 0.25, 1.15) 0.1s both;
}

.js :where(.dpx) .s-contact-form__done .s-contact-form__done-icon::after {
	animation: s-contact-form-ring 1.4s ease-out 0.45s both;
}

.js :where(.dpx) .s-contact-form__done .s-contact-form__done-icon path {
	stroke-dasharray: 24;
	animation: s-contact-form-tick 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both;
}

@keyframes s-contact-form-pop {
	from {
		opacity: 0;
		transform: scale(0.4) rotate(-20deg);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes s-contact-form-ring {
	from {
		opacity: 0.8;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(1.9);
	}
}

@keyframes s-contact-form-tick {
	from {
		stroke-dashoffset: 24;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.s-contact-form .s-contact-form__label,
	.s-contact-form__option span {
		transition: none;
	}

	.s-contact-form__field:focus-within .s-contact-form__label,
	.s-contact-form__subjects:focus-within .s-contact-form__label {
		translate: none;
	}

	.s-contact-form__channel:hover .s-contact-form__channel-icon {
		scale: none;
	}

	.s-contact-form__err:not([hidden]),
	.s-contact-form .dpb-form-notice,
	.js :where(.dpx) .s-contact-form__done > *,
	.js :where(.dpx) .s-contact-form__done .s-contact-form__done-icon,
	.js :where(.dpx) .s-contact-form__done .s-contact-form__done-icon::after,
	.js :where(.dpx) .s-contact-form__done .s-contact-form__done-icon path {
		animation: none;
	}
}

/* ---- blocks/contact-hero/style.css ---- */
/* Contact hero (+ optional channels row) — ContactPage.dc.html / M-ContactPage.dc.html */

/* The glow is page-level in the design: clip it sideways only, so it can continue
   behind the form section below (which is transparent right after the hero). */
.s-contact-hero {
	overflow: visible;
	overflow-x: clip;
	padding-bottom: 56px;
}

.s-contact-hero__glow {
	position: absolute;
	left: 78%;
	top: 260px;
	width: 760px;
	height: 760px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(106, 87, 255, 0.26), rgba(106, 87, 255, 0));
	pointer-events: none;
}

.s-contact-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.s-contact-hero__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	/* Design: content starts 40px under an 80px header. */
	padding-top: 16px;
}

.s-contact-hero__title {
	font-size: clamp(40px, 5vw, 60px);
	line-height: 1.3;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-contact-hero__text {
	font-size: 18px;
	line-height: 1.95;
	color: var(--dpb-muted);
	max-width: 32em;
}

.s-contact-hero__channels {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.s-contact-hero__channels-title {
	font-size: 22px;
	line-height: 1.4;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-contact-hero__channel-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.s-contact-hero__channel-list > li {
	display: flex;
	flex: 1 1 calc(25% - 9px);
	min-width: 0;
}

.s-contact-hero__channel {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border-radius: 22px;
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.18);
	color: var(--dpb-text);
	text-decoration: none;
}

a.s-contact-hero__channel:hover {
	color: var(--dpb-text);
	border-color: rgba(169, 155, 255, 0.4);
	background: var(--dpb-surface-2);
}

.s-contact-hero__channel-icon {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 16px;
	background: rgba(169, 155, 255, 0.14);
	color: var(--dpb-accent-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.s-contact-hero__channel-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.6;
}

.s-contact-hero__channel-label,
.s-contact-hero__channel-note {
	font-size: 13px;
	color: var(--dpb-muted);
}

.s-contact-hero__channel-value {
	font-size: 17px;
	font-weight: 700;
	text-align: right;
	overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
	.s-contact-hero__channel-list > li {
		flex-basis: calc(50% - 6px);
	}
}

@media (max-width: 720px) {
	.s-contact-hero {
		padding-inline: 16px;
		padding-bottom: 40px;
	}

	.s-contact-hero__glow {
		left: 50%;
		width: 520px;
		height: 520px;
	}

	.s-contact-hero__inner {
		gap: 40px;
	}

	.s-contact-hero__intro {
		gap: 16px;
		padding-top: 6px;
	}

	.s-contact-hero__title {
		font-size: 36px;
	}

	.s-contact-hero__text {
		font-size: 16px;
	}

	.s-contact-hero__title br,
	.s-contact-hero__text br {
		display: none;
	}

	.s-contact-hero__channel-list > li {
		flex-basis: 100%;
	}
}

/* ---- Motion (dev/MOTION.md): the intro rises in sequence on load and the glow breathes slowly;
   the optional channel cards stagger in (data-stagger) and get the cursor spotlight + lift. */

.js :where(.dpx) .s-contact-hero__intro > * {
	animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(var(--d, 0) * 110ms + 100ms);
}

.js :where(.dpx) .s-contact-hero__glow {
	animation: s-contact-hero-glow 9s ease-in-out 1.2s infinite;
}

@keyframes s-contact-hero-glow {
	0%,
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		opacity: 0.72;
		transform: translate(-50%, -50%) scale(1.08);
	}
}

.s-contact-hero__channel {
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, box-shadow 0.35s, background-color 0.35s;
}

.s-contact-hero__channel-icon {
	transition: scale 0.4s cubic-bezier(0.2, 0.8, 0.25, 1.15), background-color 0.35s;
}

.s-contact-hero__channel:hover .s-contact-hero__channel-icon {
	scale: 1.08;
	background: rgba(169, 155, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
	.js :where(.dpx) .s-contact-hero__intro > *,
	.js :where(.dpx) .s-contact-hero__glow {
		animation: none;
	}

	.s-contact-hero__channel:hover .s-contact-hero__channel-icon {
		scale: none;
	}
}

/* ---- blocks/embed/style.css ---- */
/* Plugin section */

.s-embed--flush {
	padding: 0;
}

.dpb-sections > .s-embed--flush:first-child {
	padding-top: var(--dpb-header-h);
}

/* ---- blocks/focus-intro/style.css ---- */
/* «اتاق تمرکز»: copy + two phones (real app screens). */
.s-focus{overflow:hidden}
.s-focus__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.s-focus__title{font-size:clamp(28px,3.3vw,46px);line-height:1.45;margin-top:6px}
.s-focus__title em{font-style:normal;color:var(--acc)}
.s-focus__lead{margin-top:18px}
.s-focus__feats{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.s-focus__feats li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.8;color:var(--soft)}
.s-focus__feats i{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;margin-top:2px;border-radius:50%;background:rgba(106,87,255,.18);color:var(--acc)}
.s-focus__feats svg{width:15px;height:15px}
.s-focus__go{margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.s-focus__go small{font-size:13px;color:var(--muted)}
.s-focus__media{position:relative;justify-self:center;width:min(300px,100%);margin-block:24px}
.s-focus .dch-phone > img{aspect-ratio:780/1688;object-position:top}
.s-focus__back{position:absolute;z-index:0;top:40px;right:-120px;width:78%;transform:rotate(9deg);filter:saturate(.75) brightness(.8)}
.s-focus__front{position:relative;z-index:1;transform:rotate(-3deg)}
.s-focus__tag{position:absolute;z-index:2;bottom:96px;left:-70px;display:flex;align-items:center;gap:10px;background:rgba(20,16,51,.94);border:1px solid rgba(110,231,183,.35);border-radius:14px;padding:9px 13px;box-shadow:0 18px 40px rgba(0,0,0,.45);transform:rotate(-3deg)}
.s-focus__tag i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(110,231,183,.16);color:#6EE7B7}
.s-focus__tag svg{width:15px;height:15px}
.s-focus__tag span{display:flex;flex-direction:column;line-height:1.6}
.s-focus__tag small{font-size:11px;color:var(--muted)}
.s-focus__tag b{font-size:13px;color:#6EE7B7}
@media (max-width:900px){
	.s-focus__grid{grid-template-columns:1fr;gap:40px}
	.s-focus__media{width:220px;margin-inline:auto 60px}
	.s-focus__back{right:-90px;top:30px}
	.s-focus__tag{left:-40px;bottom:60px}
}
@media (max-width:720px){
	.s-focus__go{align-items:stretch}
	.s-focus__go .btn{width:100%}
	.s-focus__media{width:190px;margin-inline:auto}
	.s-focus__back{right:-70px}
	.s-focus__tag{left:-56px}
}

/* ---- blocks/home-articles/style.css ---- */
/* Articles — from the home page design (dopabit_hero_E_logo_align.html), scoped by dev conversion. */
:where(.dpx,.editor-styles-wrapper) .art-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
:where(.dpx,.editor-styles-wrapper) .art-grid{margin-top:40px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px}
:where(.dpx,.editor-styles-wrapper) .art{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:var(--b);border:1px solid #2A2366;text-decoration:none;color:var(--text);transition:border-color .25s,transform .25s}
:where(.dpx,.editor-styles-wrapper) .art:hover{border-color:rgba(169,155,255,.5);transform:translateY(-2px)}
:where(.dpx,.editor-styles-wrapper) .art svg{display:block;width:100%;height:auto;background:#151131}
:where(.dpx,.editor-styles-wrapper) .art-body{display:flex;flex-direction:column;gap:12px;padding:26px}
:where(.dpx,.editor-styles-wrapper) .tag{align-self:flex-start;padding:4px 12px;border-radius:999px;background:rgba(169,155,255,.12);font-size:13px;font-weight:700;color:#C7BCFF}
:where(.dpx,.editor-styles-wrapper) .tag.pk{background:rgba(255,111,165,.12);color:#FFB3CF}
:where(.dpx,.editor-styles-wrapper) .art h3{font-size:clamp(20px,2vw,27px);line-height:1.6}
:where(.dpx,.editor-styles-wrapper) .art-side{display:flex;flex-direction:column;gap:20px}
:where(.dpx,.editor-styles-wrapper) .art.sm{flex-direction:row;flex:1}
:where(.dpx,.editor-styles-wrapper) .art.sm svg{width:36%;flex:none;height:auto;min-height:170px}
:where(.dpx,.editor-styles-wrapper) .art.sm .art-body{justify-content:center;padding:20px}
:where(.dpx,.editor-styles-wrapper) .art.sm h3{font-size:19px;line-height:1.7}
@media (max-width:860px){
  :where(.dpx,.editor-styles-wrapper) .art-grid{grid-template-columns:minmax(0,1fr)}
  :where(.dpx,.editor-styles-wrapper) .art.sm svg{min-height:140px}
  :where(.dpx,.editor-styles-wrapper) .art-head .btn{width:100%}
}
/* WordPress: a post's featured image sits in the same box as the design's SVG art (big 640x300, small 160x200 slice). */
:where(.dpx,.editor-styles-wrapper) .art .art-img{display:block;width:100%;max-width:none;height:auto;aspect-ratio:640/300;object-fit:cover;background:#151131}
:where(.dpx,.editor-styles-wrapper) .art.sm .art-img{width:36%;flex:none;height:auto;min-height:170px;aspect-ratio:160/200}
@media (max-width:860px){
  :where(.dpx,.editor-styles-wrapper) .art.sm .art-img{min-height:140px}
}

/* ---- blocks/home-challenge/style.css ---- */
/* Challenge — from the home page design (dopabit_hero_E_logo_align.html), scoped by dev conversion. */
:where(.dpx,.editor-styles-wrapper) .ch-top{display:flex;flex-wrap:wrap;align-items:center;gap:24px 56px}
:where(.dpx,.editor-styles-wrapper) .big21{font-size:clamp(130px,18vw,240px);font-weight:900;line-height:.9;color:transparent;-webkit-text-stroke:2px var(--acc)}
:where(.dpx,.editor-styles-wrapper) .ch-copy{flex:1 1 380px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
:where(.dpx,.editor-styles-wrapper) .ch-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
:where(.dpx,.editor-styles-wrapper) .ch-act span{font-size:15px;color:#E4E0FF}
:where(.dpx,.editor-styles-wrapper) .streak{--sf:0;list-style:none;margin:56px 0 0;padding:0;position:relative;display:flex;justify-content:space-between}
:where(.dpx,.editor-styles-wrapper) .streak::before,:where(.dpx,.editor-styles-wrapper) .streak::after{content:"";position:absolute;top:14px;right:0;left:0;height:2px}
:where(.dpx,.editor-styles-wrapper) .streak::before{background:#2E2860}
:where(.dpx,.editor-styles-wrapper) .streak::after{background:var(--acc);box-shadow:0 0 12px rgba(169,155,255,.6);transform:scaleX(var(--sf));transform-origin:right center;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
:where(.dpx,.editor-styles-wrapper) .streak.in{--sf:.45}
:where(.dpx,.editor-styles-wrapper) .streak li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;color:#8F89B5}
:where(.dpx,.editor-styles-wrapper) .streak li i{width:18px;height:18px;margin-top:5px;border-radius:50%;background:var(--a);border:2px solid #3E3966}
:where(.dpx,.editor-styles-wrapper) .streak li i{transition:background-color .4s ease,box-shadow .4s ease,transform .4s ease;transition-delay:calc(var(--k,0) * 110ms + 200ms)}
:where(.dpx,.editor-styles-wrapper) .streak.in li.done i{width:22px;height:22px;margin-top:3px;background:var(--acc);border:0;box-shadow:0 0 18px rgba(169,155,255,.7)}
:where(.dpx,.editor-styles-wrapper) .streak li.today{color:#FFB3CF}
:where(.dpx,.editor-styles-wrapper) .streak.in li.today i{width:30px;height:30px;margin-top:-1px;border:3px solid var(--pink);box-shadow:0 0 22px rgba(255,111,165,.6);animation:pulse 2.2s ease-in-out 1.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,111,165,.55)}50%{box-shadow:0 0 0 10px rgba(255,111,165,0)}}
@media (max-width:760px){
  :where(.dpx,.editor-styles-wrapper) .streak{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-top:36px;padding:18px;border-radius:22px;background:var(--b);border:1px solid var(--line)}
  :where(.dpx,.editor-styles-wrapper) .streak::before,:where(.dpx,.editor-styles-wrapper) .streak::after{display:none}
  :where(.dpx,.editor-styles-wrapper) .streak li{gap:4px}
  :where(.dpx,.editor-styles-wrapper) .streak li i,:where(.dpx,.editor-styles-wrapper) .streak.in li.done i,:where(.dpx,.editor-styles-wrapper) .streak.in li.today i{margin:0;width:100%;height:auto;aspect-ratio:1;max-width:38px}
  :where(.dpx,.editor-styles-wrapper) .ch-act{flex-direction:column;align-items:stretch;width:100%;text-align:center}
  :where(.dpx,.editor-styles-wrapper) .ch-act .btn{width:100%}
}
/* WordPress: the line's length follows the day fields (render.php writes --sfv only when it differs from the design's .45). */
:where(.dpx,.editor-styles-wrapper) .streak.in{--sf:var(--sfv,.45)}

/* ---- blocks/home-challenges/style.css ---- */
/* Home «چالش‌های رایگان سینا» (canvas: صفحه اصلی · نهایی · دسکتاپ / موبایل). */
.s-hch{position:relative;overflow:hidden;isolation:isolate;padding-bottom:0}
.s-hch__mosaic{position:absolute;inset:-12% -6%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;z-index:-2;transform:rotate(-6deg) scale(1.12);opacity:.5;filter:saturate(.3) brightness(.8);pointer-events:none}
.s-hch__col{display:flex;flex-direction:column;gap:14px;animation:s-hch-up 60s linear infinite}
.s-hch__col:nth-child(even){animation-name:s-hch-down;animation-duration:75s}
.s-hch__col img{display:block;width:100%;border-radius:14px}
@keyframes s-hch-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes s-hch-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.s-hch__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 75% at 70% 45%,rgba(21,17,58,.97) 0%,rgba(21,17,58,.9) 48%,rgba(21,17,58,.55) 100%),linear-gradient(180deg,var(--b) 0%,transparent 16%,transparent 78%,var(--b) 100%)}
.s-hch__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:64px;align-items:center}
.s-hch__copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.s-hch__title{font-size:clamp(34px,4.4vw,60px);line-height:1.3}
.s-hch__copy .dch-lead{max-width:34em}
.s-hch__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid rgba(169,155,255,.16)}
.s-hch__stat{padding:18px 0 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.s-hch__stat + .s-hch__stat{padding-right:22px;border-right:1px solid rgba(169,155,255,.16)}
.s-hch__stat b{font-size:clamp(34px,3.6vw,52px);line-height:1.1;font-weight:900;color:var(--text)}
.s-hch__stat b small{font-size:.48em;color:var(--acc);font-weight:800;margin-right:4px}
.s-hch__stat span{font-size:13px;color:var(--muted);line-height:1.7}
.s-hch__media{position:relative;justify-self:center;width:min(290px,100%)}
.s-hch__media--m{display:none}
.s-hch__back{position:absolute;z-index:0;top:-34px;left:-104px;width:74%;transform:rotate(-13deg);filter:saturate(.75) brightness(.85)}
.s-hch__front{position:relative;z-index:1;transform:rotate(4deg)}
.s-hch__tag{position:absolute;z-index:2;display:flex;flex-direction:column;background:rgba(20,16,51,.94);border:1px solid rgba(169,155,255,.30);border-radius:14px;padding:8px 12px;font-size:12px;line-height:1.7;box-shadow:0 18px 40px rgba(0,0,0,.45);color:var(--text)}
.s-hch__tag b{font-size:13px}
.s-hch__tag--wall{top:-52px;left:-120px;transform:rotate(3deg)}
.s-hch__tag--reel{bottom:22px;right:-30px;transform:rotate(3deg)}
.s-hch__seal{position:absolute;z-index:2;bottom:110px;left:-60px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:rgba(20,16,51,.94);border:1px solid rgba(169,155,255,.30);border-radius:14px;padding:9px 12px;font-size:12px;color:var(--soft);box-shadow:0 18px 40px rgba(0,0,0,.45);transform:rotate(-3deg)}
.s-hch__foot{margin-top:72px}
/* Without the name ticker the section needs its own bottom space. */
.s-hch--bare{padding-bottom:var(--dpb-section-y)}
/* Dark version (when the page rhythm puts it on the dark background). */
.s-hch:not(.dpb-section--alt){background:var(--a)}
.s-hch:not(.dpb-section--alt) .s-hch__veil{background:radial-gradient(60% 75% at 70% 45%,rgba(13,10,34,.97) 0%,rgba(13,10,34,.9) 48%,rgba(13,10,34,.55) 100%),linear-gradient(180deg,var(--a) 0%,transparent 16%,transparent 78%,var(--a) 100%)}
.s-hch__lbl{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:var(--muted);margin-bottom:6px}
.s-hch__lbl a{color:var(--acc);font-weight:700;text-decoration:none}
.s-hch__ticker{border-block:1px solid rgba(169,155,255,.16);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.s-hch__track{display:flex;gap:36px;width:max-content;padding-block:16px;animation:s-hch-tick 46s linear infinite}
.s-hch__ticker:hover .s-hch__track{animation-play-state:paused}
.s-hch__track a{font-size:clamp(26px,3.2vw,44px);font-weight:900;line-height:1.5;color:transparent;-webkit-text-stroke:1.2px rgba(217,212,255,.6);white-space:nowrap;display:flex;align-items:center;gap:36px;text-decoration:none;transition:color .3s}
.s-hch__track a:hover{color:var(--soft);-webkit-text-stroke-color:transparent}
.s-hch__track a::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--pri);box-shadow:0 0 18px var(--pri)}
.s-hch__track a.on{color:var(--text);-webkit-text-stroke:0}
@keyframes s-hch-tick{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media (max-width:900px){
	.s-hch__grid{grid-template-columns:1fr;gap:34px}
	.s-hch__mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}
	.s-hch__col:nth-child(n+5){display:none}
	.s-hch__veil{background:linear-gradient(180deg,rgba(21,17,58,.75) 0%,rgba(21,17,58,.95) 35%,rgba(21,17,58,.97) 100%)}
	.s-hch:not(.dpb-section--alt) .s-hch__veil{background:linear-gradient(180deg,rgba(13,10,34,.75) 0%,rgba(13,10,34,.95) 35%,rgba(13,10,34,.97) 100%)}
	.s-hch__media--d{margin-top:40px}
}
@media (max-width:640px){
	.s-hch__copy{gap:18px}
	.s-hch__copy .dch-lead{font-size:15.5px}
	.s-hch__media--d{display:none}
	.s-hch__media--m{display:block}
	.s-hch__proof{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:center}
	.s-hch__media{width:132px}
	.s-hch__media .dch-phone{padding:5px;border-radius:24px;transform:rotate(-4deg)}
	.s-hch__media .dch-phone > video{border-radius:20px}
	.s-hch__media--m .s-hch__seal{left:auto;right:-10px;bottom:10px;padding:0;background:none;border:0;box-shadow:none}
	.s-hch__media--m .dch-seal{background:#2a2148;box-shadow:0 8px 20px rgba(0,0,0,.5)}
	.s-hch__stats{grid-template-columns:1fr;border:0}
	.s-hch__stat{padding:9px 0;flex-direction:row;align-items:baseline;gap:10px}
	.s-hch__stat + .s-hch__stat{padding-right:0;border-right:0;border-top:1px solid rgba(169,155,255,.16)}
	.s-hch__stat b{font-size:26px;flex:none}
	.s-hch__stat span{font-size:12.5px;line-height:1.5}
	.s-hch__foot{margin-top:48px}
	.s-hch__track a{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.s-hch__col,.s-hch__track{animation:none}}

/* ---- blocks/home-coaching/style.css ---- */
/* Coaching — from the home page design (dopabit_hero_E_logo_align.html), scoped by dev conversion. */
:where(.dpx,.editor-styles-wrapper) .coach-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
:where(.dpx,.editor-styles-wrapper) .coach-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
:where(.dpx,.editor-styles-wrapper) .bio{padding-inline-start:16px;border-inline-start:2px solid var(--pri);font-size:16px;line-height:1.9}
:where(.dpx,.editor-styles-wrapper) .csteps{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
:where(.dpx,.editor-styles-wrapper) .csteps li{display:flex;align-items:flex-start;gap:14px}
:where(.dpx,.editor-styles-wrapper) .csteps .n{flex:none;width:36px;height:36px;border-radius:50%;background:rgba(169,155,255,.14);color:#C7BCFF;display:inline-flex;align-items:center;justify-content:center;font-weight:900}
:where(.dpx,.editor-styles-wrapper) .csteps b{display:block;font-size:17px;line-height:1.6}
:where(.dpx,.editor-styles-wrapper) .csteps small{display:block;font-size:15px;line-height:1.8;color:var(--muted)}
:where(.dpx,.editor-styles-wrapper) .coach-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding-top:6px}
:where(.dpx,.editor-styles-wrapper) .coach-actions a.link{font-weight:700;color:#C7BCFF;text-underline-offset:6px}
:where(.dpx,.editor-styles-wrapper) .photo{position:relative;display:flex;justify-content:center}
:where(.dpx,.editor-styles-wrapper) .photo::before{content:"";position:absolute;inset:8% 4% -2% 10%;background:radial-gradient(closest-side,rgba(106,87,255,.45),rgba(106,87,255,0));border-radius:40px;pointer-events:none}
:where(.dpx,.editor-styles-wrapper) .photo-frame{position:relative;margin:0;width:100%;max-width:460px;aspect-ratio:4/5;border-radius:32px;overflow:hidden;border:1px solid rgba(169,155,255,.3);box-shadow:0 40px 100px rgba(0,0,0,.55);background:#120e2c;isolation:isolate}
:where(.dpx,.editor-styles-wrapper) .photo-frame img{position:absolute;inset:-7% 0;width:100%;height:114%;max-width:none;object-fit:cover;object-position:50% 32%;will-change:transform}
:where(.dpx,.editor-styles-wrapper) .photo-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,10,34,.55),rgba(13,10,34,0) 40%);pointer-events:none}
:where(.dpx,.editor-styles-wrapper) .photo figcaption{position:absolute;z-index:1;bottom:18px;inset-inline-start:18px;display:flex;flex-direction:column;padding:10px 16px;border-radius:16px;background:rgba(13,10,34,.78);border:1px solid rgba(169,155,255,.25);line-height:1.6}
:where(.dpx,.editor-styles-wrapper) .photo figcaption b{font-size:17px}
:where(.dpx,.editor-styles-wrapper) .photo figcaption small{font-size:13px;color:var(--soft)}
@media (max-width:999px){
  :where(.dpx,.editor-styles-wrapper) .coach-grid{grid-template-columns:minmax(0,1fr)}
  :where(.dpx,.editor-styles-wrapper) .photo{order:-1}
  :where(.dpx,.editor-styles-wrapper) .photo-frame{max-width:none;border-radius:28px}
  :where(.dpx,.editor-styles-wrapper) .photo figcaption{inset-inline-start:14px;bottom:14px}
  :where(.dpx,.editor-styles-wrapper) .coach-actions{flex-direction:column;align-items:stretch;text-align:center}
  :where(.dpx,.editor-styles-wrapper) .coach-actions .btn{width:100%}
}

/* ---- blocks/home-day/style.css ---- */
/* Day — from the home page design (dopabit_hero_E_logo_align.html), scoped by dev conversion. */
:where(.dpx,.editor-styles-wrapper) .day-head{display:flex;flex-direction:column;gap:16px;max-width:40em}
:where(.dpx,.editor-styles-wrapper) .timeline{--tlp:0;list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;position:relative}
:where(.dpx,.editor-styles-wrapper) .timeline li{display:flex;flex-direction:column;gap:14px}
:where(.dpx,.editor-styles-wrapper) .tl-time{position:relative;display:flex;align-items:center;gap:10px;padding-top:16px;font-weight:700;color:var(--acc)}
:where(.dpx,.editor-styles-wrapper) .tl-time::before,:where(.dpx,.editor-styles-wrapper) .tl-time::after{content:"";position:absolute;top:0;right:0;left:0;height:2px;border-radius:2px}
:where(.dpx,.editor-styles-wrapper) .tl-time::before{background:#2A2462}
:where(.dpx,.editor-styles-wrapper) .tl-time::after{background:var(--c);box-shadow:0 0 10px var(--c);transform:scaleX(0);transform-origin:right center;transition:transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--k) * 140ms)}
:where(.dpx,.editor-styles-wrapper) .timeline li.in .tl-time::after{transform:scaleX(1)}
:where(.dpx,.editor-styles-wrapper) .tl-ic{flex:none;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:17px;color:var(--ic);background:color-mix(in srgb,var(--ic) 14%,transparent);border:1px solid color-mix(in srgb,var(--ic) 30%,transparent)}
:where(.dpx,.editor-styles-wrapper) .tl-time b{font-weight:700}
:where(.dpx,.editor-styles-wrapper) .noise{display:flex;gap:3px;margin-inline-start:auto}
:where(.dpx,.editor-styles-wrapper) .noise i{width:6px;height:6px;border-radius:2px;background:var(--pink);transition:background-color .3s,transform .3s}
:where(.dpx,.editor-styles-wrapper) .tl-card{position:relative;padding:18px;border-radius:18px;background:var(--card);border:1px solid #2E2766;font-size:15px;line-height:1.85;color:#E4E0FF;transform:rotate(var(--rot,0deg));box-shadow:var(--pile,none);transition:border-color .35s,box-shadow .35s,background-color .35s;cursor:default}
.js :where(.dpx,.editor-styles-wrapper) .tl-card{opacity:0}
:where(.dpx,.editor-styles-wrapper) .timeline li.in .tl-card{animation:drop .9s cubic-bezier(.2,.8,.25,1.15) both;animation-delay:calc(var(--k) * 140ms + 120ms)}
:where(.dpx,.editor-styles-wrapper) .timeline li.in:nth-child(n+4) .tl-card{animation:drop .9s cubic-bezier(.2,.8,.25,1.15) both calc(var(--k) * 140ms + 120ms),buzz 5.2s ease-in-out infinite calc(var(--k) * 0.7s + 1.6s)}
@keyframes drop{0%{opacity:0;transform:translate3d(0,-46px,0) rotate(calc(var(--rot,0deg) * -4)) scale(.94)}60%{opacity:1}100%{opacity:1;transform:rotate(var(--rot,0deg))}}
@keyframes buzz{0%,88%,100%{transform:rotate(var(--rot,0deg))}90%{transform:rotate(var(--rot,0deg)) translateX(-3px) rotate(-1deg)}92%{transform:rotate(var(--rot,0deg)) translateX(3px) rotate(1deg)}94%{transform:rotate(var(--rot,0deg)) translateX(-2px)}96%{transform:rotate(var(--rot,0deg)) translateX(2px)}}
:where(.dpx,.editor-styles-wrapper) .timeline li:hover .tl-card{transform:translateY(-6px)!important;rotate:0deg!important;translate:0 0!important;border-color:rgba(169,155,255,.65);background:#251E5E;box-shadow:0 22px 44px rgba(106,87,255,.28),var(--pile,0 0 #0000)}
:where(.dpx,.editor-styles-wrapper) .timeline li:hover .noise i{background:var(--acc);transform:scale(.7)}
:where(.dpx,.editor-styles-wrapper) .tl-hint{margin-top:22px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
:where(.dpx,.editor-styles-wrapper) .tl-hint .ic{color:var(--acc);font-size:16px}
:where(.dpx,.editor-styles-wrapper) .calc{margin-top:48px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px 64px;align-items:center;padding:clamp(22px,3.5vw,44px);border-radius:28px;background:var(--a);border:1px solid rgba(169,155,255,.22)}
:where(.dpx,.editor-styles-wrapper) .calc label{font-size:clamp(18px,1.6vw,21px);font-weight:700;line-height:1.7;display:block}
:where(.dpx,.editor-styles-wrapper) .range-row{display:flex;align-items:center;gap:18px;margin-top:14px}
:where(.dpx,.editor-styles-wrapper) .range-row output{flex:none;min-width:88px;font-size:22px;font-weight:900}
:where(.dpx,.editor-styles-wrapper) input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:44px;background:transparent;cursor:pointer;margin:0}
:where(.dpx,.editor-styles-wrapper) input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(to left,var(--acc) var(--p,33%),rgba(255,255,255,.12) var(--p,33%))}
:where(.dpx,.editor-styles-wrapper) input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:rgba(255,255,255,.12)}
:where(.dpx,.editor-styles-wrapper) input[type=range]::-moz-range-progress{height:8px;border-radius:999px;background:var(--acc)}
:where(.dpx,.editor-styles-wrapper) input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:#fff;border:6px solid var(--pri);box-shadow:0 0 0 6px rgba(106,87,255,.25)}
:where(.dpx,.editor-styles-wrapper) input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:6px solid var(--pri)}
:where(.dpx,.editor-styles-wrapper) .calc-result{margin-top:14px;font-size:clamp(17px,1.5vw,19px);color:#E4E0FF}
:where(.dpx,.editor-styles-wrapper) .calc-result b{font-size:clamp(26px,2.6vw,32px);font-weight:900;color:#fff}
:where(.dpx,.editor-styles-wrapper) .calc-note{margin-top:10px;font-size:13px;line-height:1.8;color:var(--muted)}
:where(.dpx,.editor-styles-wrapper) .calc .btn{margin-top:20px}
:where(.dpx,.editor-styles-wrapper) .weeks-cap{font-size:14px;color:var(--muted);margin-bottom:12px}
:where(.dpx,.editor-styles-wrapper) .weeks-cap b{color:#FFB3CF}
:where(.dpx,.editor-styles-wrapper) .weeks{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:6px}
:where(.dpx,.editor-styles-wrapper) .weeks span{aspect-ratio:1;border-radius:4px;background:rgba(255,255,255,.08);transition:background-color .25s ease,box-shadow .25s ease}
:where(.dpx,.editor-styles-wrapper) .weeks span.on{background:var(--pink);box-shadow:0 0 10px rgba(255,111,165,.45)}
@media (max-width:999px){
  :where(.dpx,.editor-styles-wrapper) .timeline{grid-template-columns:minmax(0,1fr);gap:0;margin-top:36px}
  :where(.dpx,.editor-styles-wrapper) .timeline::before,:where(.dpx,.editor-styles-wrapper) .timeline::after{content:"";position:absolute;top:22px;bottom:34px;right:21px;width:2px;border-radius:2px}
  :where(.dpx,.editor-styles-wrapper) .timeline::before{background:#2A2462}
  :where(.dpx,.editor-styles-wrapper) .timeline::after{background:linear-gradient(to bottom,#A99BFF,#8F80E6 40%,#FF6FA5);transform:scaleY(var(--tlp));transform-origin:center top;box-shadow:0 0 10px rgba(169,155,255,.5)}
  :where(.dpx,.editor-styles-wrapper) .timeline li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:6px;padding-bottom:18px;position:relative;z-index:1}
  :where(.dpx,.editor-styles-wrapper) .timeline li:last-child{padding-bottom:0}
  :where(.dpx,.editor-styles-wrapper) .tl-time{display:contents}
  :where(.dpx,.editor-styles-wrapper) .tl-time::before,:where(.dpx,.editor-styles-wrapper) .tl-time::after{display:none}
  :where(.dpx,.editor-styles-wrapper) .tl-ic{grid-column:1;grid-row:1 / span 2;align-self:start;width:44px;height:44px;font-size:20px;background:var(--b);border-color:#2E2766;color:#6E6896;transition:color .5s,border-color .5s,box-shadow .5s,background-color .5s}
  :where(.dpx,.editor-styles-wrapper) .timeline li.lit .tl-ic{color:var(--ic);border-color:color-mix(in srgb,var(--ic) 55%,transparent);background:color-mix(in srgb,var(--ic) 14%,var(--b));box-shadow:0 0 18px color-mix(in srgb,var(--ic) 40%,transparent)}
  :where(.dpx,.editor-styles-wrapper) .tl-time b{grid-column:2;grid-row:1;justify-self:start;align-self:center;font-size:15px;padding-top:2px}
  :where(.dpx,.editor-styles-wrapper) .noise{grid-column:2;grid-row:1;justify-self:end;align-self:center;margin:0;padding:6px 9px;border-radius:999px;background:rgba(255,111,165,.08);border:1px solid rgba(255,111,165,.18)}
  :where(.dpx,.editor-styles-wrapper) .noise i{width:5px;height:5px;border-radius:50%}
  :where(.dpx,.editor-styles-wrapper) .tl-card,.js :where(.dpx,.editor-styles-wrapper) .tl-card{grid-column:2;grid-row:2;transform:none!important;rotate:none!important;translate:none!important;animation:none!important;padding:14px 16px;font-size:15px;opacity:1}
  .js :where(.dpx,.editor-styles-wrapper) .timeline li{opacity:0;translate:28px 0;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1)}
  :where(.dpx,.editor-styles-wrapper) .timeline li.in{opacity:1;translate:0 0}
  :where(.dpx,.editor-styles-wrapper) .timeline li.in:nth-child(n+4) .tl-ic{animation:buzzic 4.6s ease-in-out infinite calc(var(--k) * .8s + 1.2s)}
  @keyframes buzzic{0%,86%,100%{transform:none}88%{transform:rotate(-14deg)}90%{transform:rotate(12deg)}92%{transform:rotate(-8deg)}94%{transform:rotate(5deg)}}
  :where(.dpx,.editor-styles-wrapper) .timeline li:hover .tl-card{transform:none!important}
  :where(.dpx,.editor-styles-wrapper) .tl-hint{display:none}
  :where(.dpx,.editor-styles-wrapper) .calc{grid-template-columns:minmax(0,1fr);margin-top:32px}
  :where(.dpx,.editor-styles-wrapper) .calc .btn{width:100%}
}

/* «روز تو» as the intro of the test: the two sections read as one. */
:where(.dpx,.editor-styles-wrapper) .sec.sec--join-next{padding-bottom:clamp(28px,4vw,48px)}
:where(.dpx,.editor-styles-wrapper) .sec.sec--join-prev{padding-top:clamp(20px,3vw,36px)}
:where(.dpx,.editor-styles-wrapper) .day-bridge{margin:clamp(40px,5vw,64px) auto 0;width:fit-content;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--acc);font-weight:800;font-size:clamp(17px,1.6vw,20px);text-decoration:none;text-align:center}
:where(.dpx,.editor-styles-wrapper) .day-bridge svg{width:40px;height:40px;padding:9px;border-radius:50%;border:1px solid rgba(169,155,255,.35);background:rgba(106,87,255,.12);animation:day-bridge-nudge 1.8s ease-in-out infinite}
:where(.dpx,.editor-styles-wrapper) .day-bridge:hover svg{background:var(--dpb-primary,#6A57FF);color:#fff;border-color:transparent}
@keyframes day-bridge-nudge{0%,100%{translate:0 0}50%{translate:0 6px}}
@media (prefers-reduced-motion:reduce){:where(.dpx,.editor-styles-wrapper) .day-bridge svg{animation:none}}

/* ---- blocks/home-daytest/style.css ---- */
/* «روز تو + یه سؤال از تست» — canvas version 1 (2026-10-18).
   Motion: day cards settle in one after another (a small tilt that straightens), the gauge
   needle sweeps past its number and settles, picking an answer shows the insight. */

.s-daytest__inner { display: flex; flex-direction: column; gap: 26px; }
.s-daytest__head { display: flex; flex-direction: column; gap: 12px; }
.s-daytest__head .lead { max-width: 40em; }

/* Day cards */
.s-daytest__days { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.s-daytest__card { box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 18px; background: #1B1547; border: 1px solid #2E2766; transition: border-color .3s, background-color .3s, transform .3s; }
.s-daytest__card:hover { border-color: rgba(169, 155, 255, .5); background: #211A55; }
.s-daytest__card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s-daytest__card-top b { font-size: 15px; font-weight: 800; color: #C7BCFF; }
.s-daytest__dots { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; max-width: 110px; }
.s-daytest__dots i, .s-daytest__legend i { display: block; width: 6px; height: 6px; border-radius: 2px; background: #8F7BFF; opacity: .85; }
.s-daytest__card p { margin: 0; font-size: 14px; line-height: 1.85; color: #E4E0FF; }
.js .s-daytest__days .s-daytest__card { opacity: 0; }
.s-daytest__days.is-in .s-daytest__card { animation: dt-calm .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--dl, 0s); }
@keyframes dt-calm {
	0% { opacity: 0; transform: rotate(var(--rot, 0deg)) translateY(14px); }
	45% { opacity: 1; transform: rotate(var(--rot, 0deg)); }
	100% { opacity: 1; transform: none; }
}
.s-daytest__swipe { display: none; margin: -12px 0 0; font-size: 12px; color: #9E97CC; }

/* Fact + legend */
.s-daytest__strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; }
.s-daytest__fact { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 15px; line-height: 1.8; color: #E4E0FF; }
.s-daytest__fact b { flex: none; font-size: 30px; font-weight: 900; line-height: 1; color: #fff; }
.s-daytest__fact span { display: flex; flex-direction: column; }
.s-daytest__fact small { font-size: 12px; line-height: 1.7; color: #9E97CC; }
.s-daytest__legend { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: #9E97CC; }

/* Question card (right) + gauge card (left) */
.s-daytest__duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; align-items: stretch; }
.s-daytest__duo--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.s-daytest__q { box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 24px; background: #120F2B; border: 1px solid #2E2766; }
.s-daytest__qmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; font-size: 13px; color: #9E97CC; }
.s-daytest__qmeta b { font-weight: 800; color: #C7BCFF; }
.s-daytest__qmeta b + span { display: inline-flex; align-items: center; gap: 10px; }
.s-daytest__qmeta b + span::before, .s-daytest__meta span + span::before { content: ""; display: block; width: 1px; height: 12px; background: #3E3966; }
.s-daytest__qt { margin: 0; font-size: clamp(19px, 1.6vw, 21px); font-weight: 800; line-height: 1.75; color: #F4F2FF; }
.s-daytest__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.s-daytest__opt { font: inherit; font-size: 15px; line-height: 1.6; color: #E4E0FF; text-align: center; min-height: 48px; padding: 10px 8px; border-radius: 14px; background: #1B1547; border: 1px solid #2E2766; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.s-daytest__opt:hover { border-color: #6E66A8; }
.s-daytest__opt[aria-pressed="true"] { background: #2C2470; border-color: #6A57FF; color: #fff; }
.s-daytest__ins { margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(106, 87, 255, .14); font-size: 14px; line-height: 1.9; color: #F4F2FF; animation: dt-ins .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes dt-ins { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.s-daytest__cta.btn { width: 100%; margin-top: auto; white-space: normal; text-align: center; }
.s-daytest__meta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: 13px; color: #9E97CC; }
.s-daytest__meta span { display: inline-flex; align-items: center; gap: 10px; }

.s-daytest__gauge { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 26px; border-radius: 24px; text-align: center; background: radial-gradient(120% 90% at 50% 100%, rgba(106, 87, 255, .28), transparent 60%), #1B1547; border: 1px solid #3A2F8A; overflow: hidden; }
.s-daytest__gfig { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 4px; }
.s-daytest__gfig svg { display: block; width: 100%; height: auto; overflow: visible; }
.s-daytest__needle { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(var(--to, 0deg)); filter: drop-shadow(0 0 6px rgba(199, 188, 255, .75)); }
.js .s-daytest__needle { transform: rotate(-90deg); }
.s-daytest__gfig.is-in .s-daytest__needle { animation: dt-sweep 1.8s cubic-bezier(.2, .7, .2, 1) .3s both; }
@keyframes dt-sweep {
	0% { transform: rotate(-90deg); }
	70% { transform: rotate(var(--over, 0deg)); }
	100% { transform: rotate(var(--to, 0deg)); }
}
.s-daytest__zones { display: flex; justify-content: space-between; padding: 0 2px; font-size: 12px; color: #9E97CC; }
.s-daytest__gtext { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.s-daytest__badge { font-size: 12px; font-weight: 800; color: #C7BCFF; border: 1px solid #4B3BD0; border-radius: 999px; padding: 1px 10px; }
.s-daytest__gtitle { margin: 2px 0 0; font-size: 16px; font-weight: 800; color: #F4F2FF; }
.s-daytest__gnum { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.s-daytest__gnum b { font-size: 52px; font-weight: 900; line-height: 1.1; background: linear-gradient(90deg, #FF6FA5, #C7BCFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-daytest__gnum span { font-size: 14px; color: #C7BCFF; }
.s-daytest__gcap { margin: 0; font-size: 13px; line-height: 1.8; color: #9E97CC; }

@media (max-width: 999px) {
	.s-daytest__inner { gap: 20px; }
	/* One swipeable row that runs to the screen edges. */
	.s-daytest__days { display: flex; gap: 10px; margin: 4px calc(var(--pad, 20px) * -1) 0; padding: 4px var(--pad, 20px) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad, 20px); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.s-daytest__days::-webkit-scrollbar { display: none; }
	.s-daytest__card { flex: 0 0 232px; scroll-snap-align: start; }
	.s-daytest__swipe { display: block; }
	.s-daytest__duo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.s-daytest__q { padding: 20px; }
	.s-daytest__gauge { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; text-align: start; }
	.s-daytest__gfig { flex: none; width: 132px; }
	.s-daytest__gtext { align-items: flex-start; gap: 2px; }
	.s-daytest__gtitle { font-size: 15px; }
	.s-daytest__gnum b { font-size: 38px; }
	.s-daytest__gcap { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.js .s-daytest__days .s-daytest__card { opacity: 1; animation: none; }
	.js .s-daytest__needle { transform: rotate(var(--to, 0deg)); animation: none; }
}

/* ---- blocks/home-faq/style.css ---- */
/* Faq — from the home page design (dopabit_hero_E_logo_align.html), scoped by dev conversion. */
:where(.dpx,.editor-styles-wrapper) .faq-panel{max-width:960px;margin:0 auto;border-radius:40px;background:#201A52;border:1px solid rgba(169,155,255,.2);padding:clamp(22px,5vw,64px);display:flex;flex-direction:column;gap:32px}
:where(.dpx,.editor-styles-wrapper) .faq-head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
:where(.dpx,.editor-styles-wrapper) .faq-list{display:flex;flex-direction:column;gap:10px}
:where(.dpx,.editor-styles-wrapper) .faq-item{border-radius:20px;background:rgba(13,10,34,.5);border:1px solid rgba(169,155,255,.14);transition:background-color .25s,border-color .25s}
:where(.dpx,.editor-styles-wrapper) .faq-item.is-open{background:#2C2470;border-color:rgba(169,155,255,.45)}
:where(.dpx,.editor-styles-wrapper) .faq-item button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;background:transparent;border:0;color:var(--text);font-size:17px;font-weight:700;line-height:1.7;text-align:right;cursor:pointer}
:where(.dpx,.editor-styles-wrapper) .faq-item .pm{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(169,155,255,.12);color:#C7BCFF;display:inline-flex;align-items:center;justify-content:center;font-size:16px;transition:transform .25s,background-color .25s}
:where(.dpx,.editor-styles-wrapper) .faq-item.is-open .pm{transform:rotate(45deg);background:var(--pri);color:#fff}
:where(.dpx,.editor-styles-wrapper) .faq-a{padding:0 22px 20px 70px;font-size:16px;line-height:2;color:var(--muted)}
:where(.dpx,.editor-styles-wrapper) .faq-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
@media (max-width:640px){
  :where(.dpx,.editor-styles-wrapper) .faq-panel{border-radius:28px;padding:22px 14px}
  :where(.dpx,.editor-styles-wrapper) .faq-item button{font-size:15px;padding:16px}
  :where(.dpx,.editor-styles-wrapper) .faq-a{padding:0 16px 16px;font-size:15px}
  :where(.dpx,.editor-styles-wrapper) .faq-contact{flex-direction:column}
  :where(.dpx,.editor-styles-wrapper) .faq-contact .btn{width:100%}
  :where(.dpx,.editor-styles-wrapper) .faq-head{align-items:flex-start;text-align:right}
}

/* ---- blocks/home-final-cta/style.css ---- */
/* Final call to action — from the home page design (dopabit_hero_E_logo_align.html), scoped by dev conversion. */
:where(.dpx,.editor-styles-wrapper) .final{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(620px,90vh,860px);display:flex;align-items:flex-end;background:var(--a)}
:where(.dpx,.editor-styles-wrapper) .final-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(34% 10% at 84% 41%,rgba(201,192,255,.32),rgba(201,192,255,0) 70%),radial-gradient(60% 40% at 50% 38%,rgba(106,87,255,.26),rgba(106,87,255,0) 70%)}
@media (max-width:760px){
  :where(.dpx,.editor-styles-wrapper) .final-glow{background:radial-gradient(40% 8% at 82% 30%,rgba(201,192,255,.3),rgba(201,192,255,0) 70%),radial-gradient(80% 30% at 50% 30%,rgba(106,87,255,.26),rgba(106,87,255,0) 70%)}
}
:where(.dpx,.editor-styles-wrapper) .flow-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;opacity:0;transition:opacity 1.4s ease;touch-action:pan-y}
:where(.dpx,.editor-styles-wrapper) .final.gl-ready .flow-canvas{opacity:1}
:where(.dpx,.editor-styles-wrapper) .final::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,var(--b) 0%,rgba(21,17,58,.82) 24%,rgba(13,10,34,0) 52%)}
:where(.dpx,.editor-styles-wrapper) .final-inner{position:relative;z-index:3;width:100%;padding-block:0 clamp(56px,8vw,96px);text-align:center;pointer-events:none}
:where(.dpx,.editor-styles-wrapper) .final-inner .btn{pointer-events:auto}
:where(.dpx,.editor-styles-wrapper) .final-hint{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:18px}
:where(.dpx,.editor-styles-wrapper) .final-hint .ic{color:var(--acc);font-size:16px}
:where(.dpx,.editor-styles-wrapper) .final-box{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px}
:where(.dpx,.editor-styles-wrapper) .final-box h2{font-size:clamp(34px,4.8vw,64px);line-height:1.35}
:where(.dpx,.editor-styles-wrapper) .final-box .btn-row{justify-content:center}
@media (max-width:760px){
  :where(.dpx,.editor-styles-wrapper) .final-inner{padding-top:340px}
}
@media (max-width:860px){
  :where(.dpx,.editor-styles-wrapper) .final-box .btn-row{width:100%}
}

/* ---- blocks/home-focus/style.css ---- */
/* Focus Room — from the home page design (dopabit_hero_E_logo_align.html), scoped by dev conversion. */
:where(.dpx,.editor-styles-wrapper) .focus-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
:where(.dpx,.editor-styles-wrapper) .focus-copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;order:2}
:where(.dpx,.editor-styles-wrapper) .feat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
:where(.dpx,.editor-styles-wrapper) .feat-list li{display:flex;align-items:center;gap:12px;font-size:16px;color:#E4E0FF}
:where(.dpx,.editor-styles-wrapper) .feat-list .fi{width:40px;height:40px;border-radius:12px;background:rgba(169,155,255,.12);color:var(--acc);display:inline-flex;align-items:center;justify-content:center;font-size:20px;flex:none}
:where(.dpx,.editor-styles-wrapper) .timer{order:1;display:flex;flex-direction:column;align-items:center;gap:22px;padding:clamp(24px,3vw,36px) 20px;border-radius:36px;background:var(--b);border:1px solid rgba(169,155,255,.2);box-shadow:0 30px 80px rgba(0,0,0,.4)}
:where(.dpx,.editor-styles-wrapper) .timer > p{font-size:14px;color:var(--muted)}
:where(.dpx,.editor-styles-wrapper) .modes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
:where(.dpx,.editor-styles-wrapper) .modes button{min-height:44px;padding:0 18px;border-radius:999px;background:transparent;border:1.5px solid rgba(255,255,255,.16);color:var(--soft);font-weight:700;font-size:15px;cursor:pointer}
:where(.dpx,.editor-styles-wrapper) .modes button[aria-pressed=true]{background:rgba(106,87,255,.22);border-color:var(--acc);color:#fff}
:where(.dpx,.editor-styles-wrapper) .dial{position:relative;width:min(280px,70vw);aspect-ratio:1}
:where(.dpx,.editor-styles-wrapper) .dial svg{width:100%;height:100%;transform:rotate(-90deg)}
:where(.dpx,.editor-styles-wrapper) .dial circle{fill:none;stroke-width:10}
:where(.dpx,.editor-styles-wrapper) .dial [data-ring]{stroke:url(#dialGrad);stroke-linecap:round;transition:stroke-dashoffset .3s linear}
:where(.dpx,.editor-styles-wrapper) .dial-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
:where(.dpx,.editor-styles-wrapper) .dial-c output{font-size:clamp(44px,5.6vw,62px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
:where(.dpx,.editor-styles-wrapper) .dial-c span{font-size:14px;color:var(--muted)}
:where(.dpx,.editor-styles-wrapper) .tctrl{display:flex;align-items:center;gap:12px}
:where(.dpx,.editor-styles-wrapper) .tctrl [data-toggle]{min-width:140px}
:where(.dpx,.editor-styles-wrapper) .icon-btn{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.2);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px}
@media (max-width:999px){
  :where(.dpx,.editor-styles-wrapper) .focus-grid{grid-template-columns:minmax(0,1fr)}
  :where(.dpx,.editor-styles-wrapper) .focus-copy{order:1}
  :where(.dpx,.editor-styles-wrapper) .timer{order:2}
  :where(.dpx,.editor-styles-wrapper) .focus-copy .btn{width:100%}
}
/* WordPress: the theme base gives buttons `font: inherit` (line-height 1.9); the design's buttons keep the browser's normal line-height. */
/* (kept at element specificity so the design's mobile `.btn{line-height:1.5}` still wins) */
:where(.dpx,.editor-styles-wrapper) :where(.timer) button{line-height:normal}

/* ---- blocks/home-hero/style.css ---- */
/* Hero — from the home page design (dopabit_hero_E_logo_align.html), scoped by dev conversion. */
:where(.dpx,.editor-styles-wrapper) .hero{min-height:max(760px,100svh);overflow:hidden;isolation:isolate}
:where(.dpx,.editor-styles-wrapper) .hero.bg-a{background:radial-gradient(30% 40% at 33% 47%,rgba(96,76,236,.34),rgba(96,76,236,.12) 45%,rgba(96,76,236,0) 72%),var(--a)}
:where(.dpx,.editor-styles-wrapper) .hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:0;transition:opacity .7s ease}
:where(.dpx,.editor-styles-wrapper) .hero.gl-ready .hero-canvas{opacity:1}
:where(.dpx,.editor-styles-wrapper) .hero-fallback{position:absolute;inset:0;z-index:0;display:none;align-items:center;pointer-events:none}
:where(.dpx,.editor-styles-wrapper) .hero.no-gl .hero-fallback{display:flex}
:where(.dpx,.editor-styles-wrapper) .hero-fallback svg{width:min(52vw,640px);height:auto;margin-inline-start:auto}
:where(.dpx,.editor-styles-wrapper) .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to left,rgba(13,10,34,.92) 0%,rgba(13,10,34,.72) 30%,rgba(13,10,34,0) 58%),linear-gradient(to top,var(--a) 0%,rgba(13,10,34,0) 26%)}
:where(.dpx,.editor-styles-wrapper) .hero-inner{position:relative;z-index:2;min-height:max(760px,100svh);display:flex;flex-direction:column;justify-content:center;padding-top:110px;padding-bottom:40px}
:where(.dpx,.editor-styles-wrapper) .hero-copy{max-width:600px;display:flex;flex-direction:column;align-items:flex-start;gap:26px}
:where(.dpx,.editor-styles-wrapper) .hero h1{font-size:clamp(44px,6.2vw,82px);line-height:1.22}
:where(.dpx,.editor-styles-wrapper) .hero h1 span{display:block}
:where(.dpx,.editor-styles-wrapper) .hero h1 .l2{color:var(--acc)}
:where(.dpx,.editor-styles-wrapper) .hero .lead{font-size:clamp(16px,1.5vw,19px);max-width:32em}
:where(.dpx,.editor-styles-wrapper) .hero-feats{position:relative;z-index:2;margin-top:-28px;padding-bottom:56px}
:where(.dpx,.editor-styles-wrapper) .feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:14px;border-radius:24px;background:rgba(255,255,255,.035);border:1px solid rgba(169,155,255,.18)}
@supports (backdrop-filter:blur(10px)){
  :where(.dpx,.editor-styles-wrapper) .feats{background:rgba(21,17,58,.45);backdrop-filter:blur(12px)}
}
:where(.dpx,.editor-styles-wrapper) .feat{display:flex;align-items:center;gap:14px;padding:8px 10px}
:where(.dpx,.editor-styles-wrapper) .feat-ic{flex:none;width:48px;height:48px;border-radius:50%;background:rgba(169,155,255,.14);border:1px solid rgba(169,155,255,.25);color:var(--acc);display:inline-flex;align-items:center;justify-content:center;font-size:22px}
:where(.dpx,.editor-styles-wrapper) .feat b{display:block;font-size:16px;line-height:1.5}
:where(.dpx,.editor-styles-wrapper) .feat small{display:block;font-size:14px;color:var(--muted);line-height:1.6}
@media (max-width:999px){
  :where(.dpx,.editor-styles-wrapper) .hero{min-height:0}
  :where(.dpx,.editor-styles-wrapper) .hero.bg-a{background:radial-gradient(60% 26% at 50% calc(max(min(64svh,620px),440px) * .47),rgba(96,76,236,.36),rgba(96,76,236,.12) 45%,rgba(96,76,236,0) 72%),var(--a)}
  :where(.dpx,.editor-styles-wrapper) .hero-canvas{height:min(64svh,620px);min-height:440px;bottom:auto}
  :where(.dpx,.editor-styles-wrapper) .hero-fallback{height:min(64svh,620px);min-height:440px;bottom:auto;align-items:center;justify-content:center}
  :where(.dpx,.editor-styles-wrapper) .hero-fallback svg{width:92%;margin:0 auto}
  :where(.dpx,.editor-styles-wrapper) .hero::after{background:linear-gradient(to top,var(--a) 0%,var(--a) calc(100% - min(64svh,620px) + 40px),rgba(13,10,34,0) calc(100% - min(64svh,620px) + 210px))}
  :where(.dpx,.editor-styles-wrapper) .hero-inner{min-height:0;padding-top:calc(max(min(64svh,620px),440px) - 96px);padding-bottom:28px}
  :where(.dpx,.editor-styles-wrapper) .hero-copy{gap:20px}
  :where(.dpx,.editor-styles-wrapper) .hero-feats{margin-top:0}
  :where(.dpx,.editor-styles-wrapper) .feats{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;gap:8px;background:transparent;border:0;backdrop-filter:none}
  :where(.dpx,.editor-styles-wrapper) .feat{flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
  :where(.dpx,.editor-styles-wrapper) .feat-ic{width:40px;height:40px;font-size:19px}
  :where(.dpx,.editor-styles-wrapper) .feat b{font-size:15px}
  :where(.dpx,.editor-styles-wrapper) .feat small{font-size:13px}
}

:where(.dpx,.editor-styles-wrapper) .hero .chip-link { color: inherit; text-decoration: none; }
:where(.dpx,.editor-styles-wrapper) .hero .chip-link:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Longer two-line titles (e.g. «دیگه هیچی حال نمیده؟») get a smaller size so each line stays one line. */
:where(.dpx,.editor-styles-wrapper) .hero h1.h1-long{font-size:clamp(34px,4.1vw,58px);line-height:1.35}
:where(.dpx,.editor-styles-wrapper) .hero h1.h1-long span{text-wrap:balance}

/* ---- blocks/home-method/style.css ---- */
/* «کارت دوره» — canvas «بخش چهار قدم»، کارت دوره (2026-10-19). The page's main call to the course: one
   bold card with the name, the start date, the four steps (thin line to sphere), reasons and the button.
   Motion: view.js adds .is-live, draws the line (--p) and lights the steps (.lit) in order as you scroll;
   once all are lit (.is-done) the sphere breathes, and the first time (.is-shone) the button catches a shine. Without the script
   or with reduced motion everything stays in the final, lit state. */

.s-offer__card { position: relative; overflow: hidden; padding: 52px 56px 48px; border-radius: 36px; border: 1px solid rgba(169, 155, 255, .55); background: radial-gradient(60% 80% at 85% 0%, rgba(106, 87, 255, .55), transparent 65%), radial-gradient(50% 60% at 0% 100%, rgba(255, 111, 165, .16), transparent 70%), linear-gradient(160deg, #211A5A, #120F2B 70%); box-shadow: 0 40px 100px rgba(0, 0, 0, .5), 0 0 60px rgba(106, 87, 255, .18); }

.s-offer__top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.s-offer__ttl { display: flex; flex-direction: column; gap: 12px; }
.s-offer__pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px; background: rgba(169, 155, 255, .18); border: 1px solid rgba(169, 155, 255, .4); color: #E4E0FF; font-size: 13px; font-weight: 800; }
.s-offer__pill i { width: 8px; height: 8px; border-radius: 50%; background: #FF6FA5; box-shadow: 0 0 10px #FF6FA5; }
.s-offer .s-offer__ttl h2 { margin: 0; font-size: clamp(28px, 3.3vw, 46px); font-weight: 900; line-height: 1.35; color: #fff; }
.s-offer__ttl h2 em { font-style: normal; color: #C7BCFF; }
.s-offer .s-offer__ttl p { margin: 0; font-size: 18px; line-height: 1.8; color: #D9D4FF; }

.s-offer__date { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 132px; height: 132px; box-sizing: border-box; border-radius: 28px; background: #0D0A22; border: 1px solid rgba(169, 155, 255, .45); box-shadow: inset 0 0 30px rgba(106, 87, 255, .25); }
.s-offer__date small { font-size: 13px; font-weight: 700; color: #A99BFF; }
.s-offer__date b { font-size: 44px; font-weight: 900; line-height: 1.1; color: #fff; }
.s-offer__date span { font-size: 16px; font-weight: 800; color: #E4E0FF; }

.s-offer__route { position: relative; margin-top: 36px; }
.s-offer__path { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.s-offer__track { position: absolute; top: 59px; right: 12.5%; left: 12.5%; height: 2px; border-radius: 2px; background: #2A2462; }
.s-offer__track i { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(to left, #6E5FD6, #A99BFF 65%, #fff); box-shadow: 0 0 14px rgba(169, 155, 255, .65); transform-origin: right center; transform: scaleX(var(--p, 1)); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.s-offer__path li { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; text-align: center; }
.s-offer__node { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 50%; }
.s-offer__node svg { display: block; width: 120px; height: 120px; transition: opacity .7s ease, filter .7s ease, transform .7s cubic-bezier(.2, .8, .25, 1.15); }
.s-offer__step small, .s-offer__step b { transition: color .6s ease; }
.s-offer__path li:hover .s-offer__node svg { transform: scale(1.06); }
.s-offer__step { display: flex; flex-direction: column; gap: 2px; }
.s-offer__step small { font-size: 13px; font-weight: 700; color: #A99BFF; }
.s-offer__step b { font-size: 20px; font-weight: 900; line-height: 1.5; color: #fff; }

.s-offer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 44px; padding-top: 32px; border-top: 1px solid rgba(169, 155, 255, .18); }
.s-offer__feats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.s-offer__feats li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(13, 10, 34, .5); border: 1px solid rgba(169, 155, 255, .3); font-size: 14px; font-weight: 800; color: #fff; }
.s-offer__feats li { transition: border-color .3s, background-color .3s; }
.s-offer__feats li:hover { border-color: rgba(169, 155, 255, .65); background: rgba(106, 87, 255, .16); }
.s-offer__feats svg { flex: none; color: #C7BCFF; }
.s-offer__go { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.s-offer .s-offer__btn { min-height: 60px; padding: 0 36px; font-size: 18px; font-weight: 900; background: #6A57FF; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 16px 40px rgba(106, 87, 255, .55); }
.s-offer .s-offer__btn { position: relative; overflow: hidden; }
.s-offer .s-offer__btn:hover { background: var(--pri-h); }
.s-offer .s-offer__btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); opacity: 0; pointer-events: none; }

/* Scroll states (only while view.js runs) */
.s-offer__card.is-live li:not(.lit) .s-offer__node svg { opacity: .3; filter: saturate(.3); transform: scale(.9); }
.s-offer__card.is-live li:not(.lit) .s-offer__step small { color: #5F57A0; }
.s-offer__card.is-live li:not(.lit) .s-offer__step b { color: #6F68A8; }
.s-offer__card.is-done li:last-child .s-offer__node { animation: dpb-offer-breathe 3.6s ease-in-out infinite; }
.s-offer__card.is-shone .s-offer__btn::after { animation: dpb-offer-shine 1.1s .5s cubic-bezier(.2, .7, .2, 1) 1 both; }
@keyframes dpb-offer-breathe { 0%, 100% { filter: drop-shadow(0 0 0 rgba(169, 155, 255, 0)); } 50% { filter: drop-shadow(0 0 18px rgba(169, 155, 255, .55)); } }
@keyframes dpb-offer-shine { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
.s-offer__more { font-size: 14px; font-weight: 700; color: #C7BCFF; text-decoration: none; }
.s-offer__more:hover { color: #fff; }

@media (max-width: 999px) {
	.s-offer__card { padding: 40px 32px 36px; }
	.s-offer__bottom { flex-direction: column; align-items: stretch; }
	.s-offer__feats { justify-content: center; }
}
@media (max-width: 760px) {
	.s-offer__card { padding: 28px 18px 24px; border-radius: 28px; }
	.s-offer__top { flex-direction: column; gap: 16px; }
	.s-offer .s-offer__ttl p { font-size: 15px; }
	.s-offer__date { flex-direction: row; gap: 10px; width: auto; height: auto; padding: 10px 16px; border-radius: 18px; }
	.s-offer__date b { font-size: 24px; }
	.s-offer__route { margin-top: 24px; }
	.s-offer__path { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.s-offer__track { top: 28px; bottom: 28px; right: 27px; left: auto; width: 2px; height: auto; }
	.s-offer__track i { background: linear-gradient(to bottom, #6E5FD6, #A99BFF 65%, #fff); transform-origin: center top; transform: scaleY(var(--p, 1)); }
	.s-offer__path li { flex-direction: row; gap: 14px; text-align: start; }
	.s-offer__node { flex: none; width: 56px; height: 56px; overflow: hidden; background: #15113A; border: 1px solid rgba(169, 155, 255, .7); box-shadow: 0 0 22px rgba(106, 87, 255, .45); transition: border-color .6s, box-shadow .6s; }
	.s-offer__card.is-live li:not(.lit) .s-offer__node { border-color: rgba(169, 155, 255, .18); box-shadow: none; }
	.s-offer__node svg { width: 64px; height: 64px; }
	.s-offer__step b { font-size: 17px; }
	.s-offer__bottom { gap: 18px; margin-top: 22px; padding-top: 20px; }
	.s-offer__feats { flex-direction: column; align-items: flex-start; gap: 8px; }
	.s-offer__go { align-items: stretch; text-align: center; }
	.s-offer .s-offer__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.s-offer__track i, .s-offer__node, .s-offer__node svg, .s-offer__step small, .s-offer__step b { transition: none; }
	.s-offer__card.is-done li:last-child .s-offer__node, .s-offer__card.is-shone .s-offer__btn::after { animation: none; }
}

/* ---- blocks/home-product/style.css ---- */
/* Product — from the home page design (dopabit_hero_E_logo_align.html), scoped by dev conversion. */
:where(.dpx,.editor-styles-wrapper) .product-panel{position:relative;overflow:hidden;border-radius:36px;background:var(--panel);border:1px solid rgba(169,155,255,.24);padding:clamp(24px,4.5vw,64px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
:where(.dpx,.editor-styles-wrapper) .product-panel::before{content:"";position:absolute;left:-200px;top:-160px;width:640px;height:640px;background:radial-gradient(closest-side,rgba(106,87,255,.35),rgba(106,87,255,0));pointer-events:none}
:where(.dpx,.editor-styles-wrapper) .product-info{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
:where(.dpx,.editor-styles-wrapper) .product-info h2{font-size:clamp(32px,4vw,54px);line-height:1.35}
:where(.dpx,.editor-styles-wrapper) .checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
:where(.dpx,.editor-styles-wrapper) .checks li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.8;color:#E4E0FF}
:where(.dpx,.editor-styles-wrapper) .checks .ic{font-size:22px;color:var(--acc);margin-top:2px}
:where(.dpx,.editor-styles-wrapper) .meta{font-size:14px;color:var(--muted)}
:where(.dpx,.editor-styles-wrapper) .trust{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
:where(.dpx,.editor-styles-wrapper) .trust .ic{color:var(--acc);font-size:18px}
:where(.dpx,.editor-styles-wrapper) .syllabus{position:relative;border-radius:28px;background:rgba(13,10,34,.7);border:1px solid rgba(169,155,255,.18);padding:24px}
:where(.dpx,.editor-styles-wrapper) .syl-head{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid #2A2550}
:where(.dpx,.editor-styles-wrapper) .syl-head svg{width:58px;height:42px}
:where(.dpx,.editor-styles-wrapper) .syl-head b{display:block;font-size:17px}
:where(.dpx,.editor-styles-wrapper) .syl-head small{color:var(--muted);font-size:14px}
:where(.dpx,.editor-styles-wrapper) .mod{display:flex;align-items:center;gap:14px;padding:15px 4px;border-bottom:1px solid #221D47}
:where(.dpx,.editor-styles-wrapper) .mod:last-child{border-bottom:0}
:where(.dpx,.editor-styles-wrapper) .mod-n{flex:none;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.05);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-weight:900}
:where(.dpx,.editor-styles-wrapper) .mod:first-of-type .mod-n{background:rgba(169,155,255,.14);color:#C7BCFF}
:where(.dpx,.editor-styles-wrapper) .mod div{flex:1}
:where(.dpx,.editor-styles-wrapper) .mod b{display:block;font-size:16px}
:where(.dpx,.editor-styles-wrapper) .mod small{font-size:13px;color:var(--muted)}
:where(.dpx,.editor-styles-wrapper) .free{padding:3px 12px;border-radius:999px;background:rgba(255,111,165,.14);color:#FFB3CF;font-size:13px;font-weight:700}
:where(.dpx,.editor-styles-wrapper) .mod .ic{color:#6E6896;font-size:18px}
@media (max-width:999px){
  :where(.dpx,.editor-styles-wrapper) .product-panel{grid-template-columns:minmax(0,1fr);border-radius:28px}
  :where(.dpx,.editor-styles-wrapper) .product-info .btn-row{width:100%}
}

/* ---- blocks/home-quiz/style.css ---- */
/* Quiz — from the home page design (dopabit_hero_E_logo_align.html), scoped by dev conversion. */
:where(.dpx,.editor-styles-wrapper) .quiz-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
:where(.dpx,.editor-styles-wrapper) .quiz-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
:where(.dpx,.editor-styles-wrapper) .chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
:where(.dpx,.editor-styles-wrapper) .mystery-cap{font-size:15px;font-weight:700;color:#E4E0FF}
:where(.dpx,.editor-styles-wrapper) .mystery{display:flex;gap:12px;list-style:none;margin:10px 0 0;padding:6px 0}
:where(.dpx,.editor-styles-wrapper) .mystery li{width:66px;height:86px;border-radius:16px;background:linear-gradient(180deg,#2A2168,#17113F);border:1px solid rgba(169,155,255,.22);box-shadow:0 10px 24px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:900;color:#fff;text-shadow:0 0 18px rgba(169,155,255,.8);transform:rotate(var(--r))}
:where(.dpx,.editor-styles-wrapper) .mystery li.hot{border-color:rgba(169,155,255,.65);box-shadow:0 0 34px rgba(106,87,255,.5)}
:where(.dpx,.editor-styles-wrapper) .quiz-note{font-size:13px;color:var(--muted)}
:where(.dpx,.editor-styles-wrapper) .qstack{position:relative;padding:28px 12px 12px}
:where(.dpx,.editor-styles-wrapper) .qstack::before,:where(.dpx,.editor-styles-wrapper) .qstack::after{content:"";position:absolute;border-radius:28px;border:1px solid #2A2550}
:where(.dpx,.editor-styles-wrapper) .qstack::before{inset:0 40px 40px 0;background:#1A1540;transform:rotate(-4deg)}
:where(.dpx,.editor-styles-wrapper) .qstack::after{inset:14px 20px 26px 16px;background:#1E1849;transform:rotate(2.5deg)}
:where(.dpx,.editor-styles-wrapper) .qstack > [data-tilt]{position:relative;z-index:1}
:where(.dpx,.editor-styles-wrapper) .qcard{position:relative;z-index:1;border-radius:28px;background:#19143B;border:1px solid rgba(169,155,255,.28);padding:clamp(20px,3vw,32px);box-shadow:0 30px 80px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:18px}
:where(.dpx,.editor-styles-wrapper) .qmeta{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;color:var(--muted)}
:where(.dpx,.editor-styles-wrapper) .qbar{flex:1;max-width:220px;height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
:where(.dpx,.editor-styles-wrapper) .qbar i{display:block;width:25%;height:100%;background:var(--acc);border-radius:999px;margin-inline-start:0}
:where(.dpx,.editor-styles-wrapper) .qq{font-size:clamp(18px,1.7vw,22px);font-weight:700;line-height:1.7}
:where(.dpx,.editor-styles-wrapper) .opts{display:flex;flex-direction:column;gap:10px}
:where(.dpx,.editor-styles-wrapper) .opt{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 18px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid #2E2860;font-size:16px;color:var(--soft)}
:where(.dpx,.editor-styles-wrapper) .opt i{width:18px;height:18px;border-radius:50%;border:1.5px solid #6E6896;flex:none}
:where(.dpx,.editor-styles-wrapper) .opt.sel{background:rgba(106,87,255,.18);border:1.5px solid var(--acc);color:#fff}
:where(.dpx,.editor-styles-wrapper) .opt.sel i{border:5px solid var(--acc)}
:where(.dpx,.editor-styles-wrapper) .results{margin-top:clamp(40px,5vw,64px)}
:where(.dpx,.editor-styles-wrapper) .results-cap{font-size:16px;font-weight:700;color:#E4E0FF;margin-bottom:14px}
:where(.dpx,.editor-styles-wrapper) .results-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
:where(.dpx,.editor-styles-wrapper) .res{display:flex;align-items:center;gap:14px;padding:18px;border-radius:22px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
:where(.dpx,.editor-styles-wrapper) .res-ic{flex:none;width:52px;height:52px;border-radius:16px;background:var(--b);display:inline-flex;align-items:center;justify-content:center;color:var(--acc);font-size:24px}
:where(.dpx,.editor-styles-wrapper) .res b{display:block;font-size:16px;line-height:1.5}
:where(.dpx,.editor-styles-wrapper) .res small{display:block;font-size:14px;color:var(--muted)}
@media (max-width:999px){
  :where(.dpx,.editor-styles-wrapper) .quiz-grid{grid-template-columns:minmax(0,1fr)}
  :where(.dpx,.editor-styles-wrapper) .results-grid{grid-template-columns:1fr 1fr}
  :where(.dpx,.editor-styles-wrapper) .quiz-copy .btn{width:100%}
  :where(.dpx,.editor-styles-wrapper) .mystery{justify-content:space-between;gap:6px}
  :where(.dpx,.editor-styles-wrapper) .mystery li{width:56px;height:74px;font-size:30px}
}
@media (max-width:560px){
  :where(.dpx,.editor-styles-wrapper) .results-grid{grid-template-columns:1fr}
  :where(.dpx,.editor-styles-wrapper) .qstack{padding:20px 6px 6px}
}

/* ---- blocks/home-stories/style.css ---- */
/* Stories — from the home page design (dopabit_hero_E_logo_align.html), scoped by dev conversion. */
:where(.dpx,.editor-styles-wrapper) .stories-head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding-inline:var(--pad);max-width:800px;margin:0 auto}
:where(.dpx,.editor-styles-wrapper) .msg{flex:none;width:340px;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:24px;background:#211B55;border:1px solid rgba(169,155,255,.14)}
:where(.dpx,.editor-styles-wrapper) .msg header{display:flex;align-items:center;gap:10px}
:where(.dpx,.editor-styles-wrapper) .avatar{width:38px;height:38px;border-radius:50%;background:#2E2670;display:inline-flex;align-items:center;justify-content:center;color:var(--acc);font-size:18px;flex:none}
:where(.dpx,.editor-styles-wrapper) .msg header div{flex:1;line-height:1.5}
:where(.dpx,.editor-styles-wrapper) .msg header b{display:block;font-size:14px}
:where(.dpx,.editor-styles-wrapper) .src{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
:where(.dpx,.editor-styles-wrapper) .src i{width:6px;height:6px;border-radius:50%;background:var(--acc)}
:where(.dpx,.editor-styles-wrapper) .src.ig i{background:var(--pink)}
:where(.dpx,.editor-styles-wrapper) .msg time{font-size:12px;color:#8F89B5}
:where(.dpx,.editor-styles-wrapper) .bubble{padding:14px 16px;border-radius:6px 20px 20px 20px;background:#2E2670;font-size:16px;line-height:1.9;color:#ECE9FF}
:where(.dpx,.editor-styles-wrapper) .marquee{margin-top:44px;display:flex;flex-direction:column;gap:16px;-webkit-mask-image:linear-gradient(to left,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to left,transparent,#000 9%,#000 91%,transparent)}
:where(.dpx,.editor-styles-wrapper) .mq-row{overflow:hidden;padding-block:4px}
:where(.dpx,.editor-styles-wrapper) .mq-track{display:flex;width:max-content;animation:mq 64s linear infinite;will-change:transform}
:where(.dpx,.editor-styles-wrapper) .mq-rev .mq-track{animation-duration:72s;animation-direction:reverse}
:where(.dpx,.editor-styles-wrapper) .mq-track .msg{margin-inline-end:16px}
:where(.dpx,.editor-styles-wrapper) .marquee:hover .mq-track,:where(.dpx,.editor-styles-wrapper) .marquee:focus-within .mq-track{animation-play-state:paused}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(50%,0,0)}}
:where(.dpx,.editor-styles-wrapper) .carousel{display:none}
:where(.dpx,.editor-styles-wrapper) .stories-cta{display:flex;justify-content:center;margin-top:40px;padding-inline:var(--pad)}
@media (max-width:760px){
  :where(.dpx,.editor-styles-wrapper) .marquee{display:none}
  :where(.dpx,.editor-styles-wrapper) .carousel{display:block;margin-top:30px}
  :where(.dpx,.editor-styles-wrapper) .car-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--pad) 8px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  :where(.dpx,.editor-styles-wrapper) .car-track::-webkit-scrollbar{display:none}
  :where(.dpx,.editor-styles-wrapper) .car-track .msg{width:min(300px,80vw);scroll-snap-align:center;transition:transform .35s ease,opacity .35s ease;opacity:.55;transform:scale(.95)}
  :where(.dpx,.editor-styles-wrapper) .car-track .msg.is-active{opacity:1;transform:none}
  :where(.dpx,.editor-styles-wrapper) .car-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;padding-inline:var(--pad)}
  :where(.dpx,.editor-styles-wrapper) .car-btn{flex:none;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.18);color:var(--text);display:inline-flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:opacity .2s,border-color .2s}
  :where(.dpx,.editor-styles-wrapper) .car-btn:disabled{opacity:.35;cursor:default}
  :where(.dpx,.editor-styles-wrapper) .car-dots{display:flex;align-items:center;gap:2px}
  :where(.dpx,.editor-styles-wrapper) .car-dots button{width:22px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  :where(.dpx,.editor-styles-wrapper) .car-dots button::after{content:"";width:6px;height:6px;border-radius:999px;background:#3E3966;transition:width .3s,background-color .3s}
  :where(.dpx,.editor-styles-wrapper) .car-dots button[aria-current=true]::after{width:18px;background:var(--acc)}
  :where(.dpx,.editor-styles-wrapper) .stories-head{align-items:flex-start;text-align:right}
  :where(.dpx,.editor-styles-wrapper) .stories-cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  :where(.dpx,.editor-styles-wrapper) .mq-track{animation:none}
  :where(.dpx,.editor-styles-wrapper) .mq-row{overflow-x:auto}
}

/* ---- blocks/landing-app/style.css ---- */
/* Landing «اپ دوپابیت» — hook, tabbed tour over real app screenshots, comparison. */

.s-app__inner { display: flex; flex-direction: column; gap: 44px; }
.s-app__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; }
.s-app__title .hl { color: var(--dpb-accent); }
.s-app__hook { margin: 6px 0 4px; padding: 14px 18px; border-radius: 18px 18px 18px 6px; background: #1B1547; border: 1px solid rgba(169, 155, 255, 0.24); max-width: 640px; display: grid; gap: 6px; }
.s-app__hook blockquote { margin: 0; font-size: 18px; line-height: 1.95; color: var(--dpb-text); font-weight: 600; quotes: "«" "»"; }
.s-app__hook blockquote::before { content: open-quote; }
.s-app__hook blockquote::after { content: close-quote; }
.s-app__hook figcaption { font-size: 13px; color: var(--dpb-muted); }
.s-app__mascot { display: grid; justify-items: center; gap: 6px; width: 220px; }
.s-app__mascot img { width: 132px; height: 132px; object-fit: contain; }
.s-app__bubble { margin: 0; position: relative; padding: 10px 14px; border-radius: 16px; background: #2C2470; color: var(--dpb-text); font-size: 14px; line-height: 1.8; font-weight: 600; text-align: center; }
.s-app__bubble::after { content: ""; position: absolute; bottom: -7px; left: 50%; width: 14px; height: 14px; background: #2C2470; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }

.s-app__tour { display: grid; gap: 22px; }
.s-app__tabs { display: none; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.s-app__tabs::-webkit-scrollbar { display: none; }
.s-app__tour.is-tabs .s-app__tabs { display: flex; justify-content: center; }
.s-app__tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 700; color: var(--dpb-text-2); background: transparent; border: 1px solid var(--dpb-line-dim); border-radius: 999px; padding: 8px 16px 8px 14px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.s-app__tab:hover { border-color: var(--dpb-accent); }
.s-app__tab[aria-selected="true"] { background: var(--dpb-primary); border-color: var(--dpb-primary); color: #fff; }
.s-app__tab:focus-visible { outline: 2px solid var(--dpb-accent-2); outline-offset: 2px; }
.s-app__tab-n { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: rgba(255, 255, 255, 0.1); }
.s-app__panel { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; max-width: 980px; margin-inline: auto; width: 100%; }
.s-app__tour:not(.is-tabs) .s-app__panel + .s-app__panel { margin-top: 28px; }
.s-app__panel[hidden] { display: none; }
.s-app__phone { border-radius: 40px; padding: 9px; background: linear-gradient(160deg, #3a3470, #17133b); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(169, 155, 255, 0.18); }
.s-app__shot { display: block; width: 100%; height: auto; aspect-ratio: 390 / 760; object-fit: cover; object-position: top; border-radius: 32px; background: #0D0A22; }
.s-app__copy { display: grid; gap: 12px; align-content: center; }
.s-app__step { font-size: 13px; font-weight: 800; color: var(--dpb-accent-2); }
.s-app__h { margin: 0; font-size: clamp(22px, 2.4vw, 32px); font-weight: 900; line-height: 1.5; color: var(--dpb-text); }
.s-app__text { margin: 0; font-size: 17px; line-height: 2; color: var(--dpb-muted); }
.s-app__note { margin: 4px 0 0; padding: 12px 16px; border-radius: 14px; background: rgba(106, 87, 255, 0.14); border-inline-start: 3px solid var(--dpb-primary); font-size: 16px; line-height: 1.9; font-weight: 700; color: var(--dpb-text); }

.s-app__cmp { overflow-x: auto; border-radius: 24px; border: 1px solid rgba(169, 155, 255, 0.2); background: #120F2B; max-width: 980px; margin-inline: auto; width: 100%; }
.s-app__cmp table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 16px; }
.s-app__cmp th, .s-app__cmp td { padding: 14px 18px; text-align: start; border-top: 1px solid rgba(169, 155, 255, 0.12); line-height: 1.8; vertical-align: top; }
.s-app__cmp thead th { border-top: 0; font-size: 14px; color: var(--dpb-muted); font-weight: 700; }
.s-app__cmp thead th.is-ours { color: #fff; }
.s-app__cmp tbody th { color: var(--dpb-text-2); font-weight: 700; width: 26%; }
.s-app__cmp td { color: var(--dpb-faint); }
.s-app__cmp .is-ours { background: rgba(106, 87, 255, 0.12); color: var(--dpb-text); font-weight: 600; }
.s-app__ok { color: #7FE0B5; margin-inline-end: 8px; vertical-align: -2px; }

.s-app__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; max-width: 980px; margin-inline: auto; width: 100%; }
.s-app__quote { margin: 0; display: grid; gap: 6px; padding: 14px 18px; border-radius: 18px 18px 18px 6px; background: #1B1547; border: 1px solid rgba(169, 155, 255, 0.2); }
.s-app__quote blockquote { margin: 0; font-size: 16px; line-height: 1.95; color: var(--dpb-text); quotes: "«" "»"; }
.s-app__quote blockquote::before { content: open-quote; }
.s-app__quote blockquote::after { content: close-quote; }
.s-app__quote figcaption { font-size: 13px; color: var(--dpb-muted); }
.s-app__cta { display: grid; gap: 8px; justify-items: center; text-align: center; max-width: 300px; }
.s-app__cta-note { margin: 0; font-size: 13px; line-height: 1.8; color: var(--dpb-muted); }

@media (max-width: 900px) {
	.s-app__head { grid-template-columns: minmax(0, 1fr); }
	.s-app__mascot { display: none; }
	.s-app__foot { grid-template-columns: minmax(0, 1fr); }
	.s-app__cta { max-width: none; }
}
@media (max-width: 720px) {
	.s-app__tour.is-tabs .s-app__tabs { justify-content: flex-start; margin-inline: calc(var(--dpb-gutter) * -1); padding-inline: var(--dpb-gutter); }
	.s-app__panel { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.s-app__phone { width: min(72vw, 280px); margin-inline: auto; border-radius: 34px; padding: 7px; }
	.s-app__shot { border-radius: 28px; }
	.s-app__title br { display: none; }
	.s-app__hook blockquote { font-size: 16px; }
	.s-app__text { font-size: 16px; }
}

/* ---- blocks/landing-coach/style.css ---- */
/* Landing coach — LandingB.dc.html / M-LandingB.dc.html («با سینا آشنا شوید») */

.s-lcoach {
	padding-block: clamp(56px, 7vw, 100px);
}

.s-lcoach__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 72px;
	align-items: center;
}

/* The outline frame is offset towards the bottom-right of the photo. */
.s-lcoach__media {
	padding: 0 24px 24px 0;
}

.s-lcoach__frame-wrap {
	position: relative;
}

.s-lcoach__frame {
	position: absolute;
	top: 24px;
	right: -24px;
	bottom: -24px;
	left: 24px;
	border-radius: 34px;
	border: 1.5px solid var(--dpb-primary);
}

.s-lcoach__figure {
	position: relative;
	margin: 0;
	border-radius: var(--dpb-r-lg);
	overflow: hidden;
	background: var(--dpb-art);
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}

.s-lcoach__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 24%;
}

.s-lcoach__caption {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 18px;
	border-radius: 18px;
	background: rgba(13, 10, 34, 0.82);
	border: 1px solid rgba(169, 155, 255, 0.3);
	line-height: 1.6;
}

.s-lcoach__caption b {
	font-size: 18px;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-lcoach__caption span {
	font-size: 13px;
	color: var(--dpb-text-nav);
}

.s-lcoach__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

.s-lcoach__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s-lcoach__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-accent-2);
}

.s-lcoach__eyebrow::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--dpb-accent);
}

.s-lcoach__title {
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.45;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-lcoach__text {
	max-width: 34em;
	font-size: 17px;
	line-height: 2;
	color: var(--dpb-muted);
}

.s-lcoach__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s-lcoach__points li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--dpb-text-nav);
}

.s-lcoach__points .dpb-icon {
	flex: none;
	margin-top: 4px;
	color: var(--dpb-accent);
}

.s-lcoach .s-lcoach__btn {
	min-height: 52px;
	padding: 0 26px;
	font-size: 16px;
}

@media (max-width: 720px) {
	.s-lcoach__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.s-lcoach__media {
		padding: 0 16px 16px 0;
	}

	.s-lcoach__frame {
		top: 16px;
		right: -16px;
		bottom: -16px;
		left: 16px;
	}

	.s-lcoach__content {
		align-items: stretch;
		gap: 18px;
	}

	.s-lcoach__head {
		align-items: flex-start;
	}

	.s-lcoach__title {
		font-size: 28px;
	}

	.s-lcoach__title br,
	.s-lcoach__text br {
		display: none;
	}

	.s-lcoach .s-lcoach__btn {
		display: flex;
		width: 100%;
	}
}

/* Motion ------------------------------------------------------------------
   The photo rises in and drifts inside its frame while scrolling (data-photo:
   with motion on, the image is slightly taller than the frame and positioned
   absolutely; the frame keeps the 4:5 shape the image gives it). The outline
   frame slides out from behind the photo to its offset, the name card follows,
   and the text block rises with its points one by one. In the editor and with
   reduced motion the photo is framed exactly as designed. */

.s-lcoach__frame-wrap {
	--s-lcoach-off: 24px;
}

.s-lcoach__figure {
	aspect-ratio: 4 / 5;
}

.s-lcoach__caption {
	z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.dpx .s-lcoach__img {
		position: absolute;
		top: -7%;
		left: 0;
		width: 100%;
		height: 114%;
		aspect-ratio: auto;
		object-position: 50% 10%;
		will-change: transform;
	}

	.js .dpx .s-lcoach__media[data-reveal] .s-lcoach__frame {
		transition: translate 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s, opacity 0.8s ease 0.35s;
	}

	.js .dpx .s-lcoach__media[data-reveal]:not(.in) .s-lcoach__frame {
		opacity: 0;
		translate: calc(-1 * var(--s-lcoach-off, 24px)) calc(-1 * var(--s-lcoach-off, 24px));
	}

	.js .dpx .s-lcoach__media[data-reveal] .s-lcoach__caption {
		transition: opacity 0.8s ease 0.7s, translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s;
	}

	.js .dpx .s-lcoach__media[data-reveal]:not(.in) .s-lcoach__caption {
		opacity: 0;
		translate: 0 14px;
	}

	.js .dpx .s-lcoach__points[data-stagger] > * {
		transition-delay: calc(var(--i, 0) * 95ms + 360ms);
	}
}

@media (max-width: 720px) {
	.s-lcoach__frame-wrap {
		--s-lcoach-off: 16px;
	}
}

/* ---- blocks/landing-daily/style.css ---- */
/* Landing daily — LandingPage.dc.html / M-LandingPage.dc.html («یک روز از چالش») */

.s-ldaily {
	padding-block: clamp(56px, 7vw, 100px);
}

.s-ldaily__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 72px;
	align-items: center;
}

.s-ldaily--no-phone .s-ldaily__grid {
	grid-template-columns: minmax(0, 1fr);
}

.s-ldaily__content {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.s-ldaily__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s-ldaily__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-accent-2);
}

.s-ldaily__eyebrow::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--dpb-accent);
}

.s-ldaily__title {
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.45;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-ldaily__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.s-ldaily__step {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.s-ldaily__num {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(169, 155, 255, 0.16);
	color: var(--dpb-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	line-height: 1;
}

.s-ldaily__step:first-child .s-ldaily__num {
	background: var(--dpb-primary);
}

.s-ldaily__step-title {
	font-size: 18px;
	font-weight: 900;
	line-height: 1.6;
	color: var(--dpb-text);
}

.s-ldaily__step-text {
	margin-top: 2px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--dpb-muted);
}

/* Phone mockup */
.s-ldaily__phone-wrap {
	display: flex;
	justify-content: center;
}

.s-ldaily__phone {
	position: relative;
	width: 340px;
	max-width: 100%;
	padding: 10px;
	border-radius: 44px;
	background: var(--dpb-surface-2);
	border: 1px solid rgba(169, 155, 255, 0.35);
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}

.s-ldaily__screen {
	border-radius: 34px;
	overflow: hidden;
	background: #0F0B2A;
}

.s-ldaily__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--dpb-bg-alt);
	border-bottom: 1px solid rgba(169, 155, 255, 0.16);
}

.s-ldaily__avatar {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--dpb-primary);
	color: var(--dpb-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.s-ldaily__who {
	display: flex;
	flex-direction: column;
	line-height: 1.6;
}

.s-ldaily__who b {
	font-size: 14px;
	color: var(--dpb-text);
}

.s-ldaily__who span {
	font-size: 12px;
	color: var(--dpb-muted);
}

.s-ldaily__chat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 14px 18px;
}

.s-ldaily__msg {
	align-self: flex-start;
	max-width: 95%;
	padding: 10px 14px;
	border-radius: 6px 18px 18px 18px;
	background: #211B55;
	font-size: 14px;
	line-height: 1.8;
	color: var(--dpb-text);
}

.s-ldaily__msg--out {
	align-self: flex-end;
	border-radius: 18px 6px 18px 18px;
	background: var(--dpb-primary);
}

.s-ldaily__task {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 6px;
}

.s-ldaily__task-icon {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background: rgba(169, 155, 255, 0.2);
	color: var(--dpb-accent-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.s-ldaily__progress {
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.s-ldaily__progress-text {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--dpb-muted);
}

.s-ldaily__track {
	height: 8px;
	border-radius: var(--dpb-r-pill);
	background: rgba(169, 155, 255, 0.16);
	overflow: hidden;
}

.s-ldaily__fill {
	height: 100%;
	border-radius: var(--dpb-r-pill);
	background: var(--dpb-pink);
}

@media (max-width: 960px) {
	.s-ldaily__grid {
		gap: 48px;
	}
}

@media (max-width: 720px) {
	.s-ldaily__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.s-ldaily__content {
		gap: 22px;
	}

	.s-ldaily__title {
		font-size: 28px;
	}

	.s-ldaily__title br {
		display: none;
	}

	.s-ldaily__phone {
		width: 300px;
	}
}

/* Motion ------------------------------------------------------------------
   Steps: a track joins the numbers; it draws while the list crosses the
   viewport and each number lights up as the line reaches it (view.js sets
   --seg per step and .lit; .is-live arms the dimmed "not yet" state). Without
   JavaScript, in the editor and with reduced motion the track is complete and
   every step shows its final look. The phone floats gently and the chat plays
   message by message; the progress bar fills last. */

.s-ldaily__step {
	position: relative;
}

/* Track segment from this number's centre to the next one (gap 18px). */
.s-ldaily__step:not(:last-child)::before,
.s-ldaily__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 18px;
	right: 17px;
	width: 2px;
	height: calc(100% + 18px);
	border-radius: 2px;
	pointer-events: none;
}

.s-ldaily__step:not(:last-child)::before {
	background: rgba(169, 155, 255, 0.16);
}

.s-ldaily__step:not(:last-child)::after {
	background: linear-gradient(to bottom, var(--dpb-accent), var(--dpb-primary));
	box-shadow: 0 0 10px rgba(169, 155, 255, 0.5);
	transform: scaleY(var(--seg, 1));
	transform-origin: center top;
}

/* Numbers sit above the track (same colour as before, made opaque). */
.s-ldaily__num {
	position: relative;
	z-index: 1;
	background: linear-gradient(rgba(169, 155, 255, 0.16), rgba(169, 155, 255, 0.16)), var(--dpb-bg);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.25, 1.15), box-shadow 0.6s ease;
}

.s-ldaily__step-title,
.s-ldaily__step-text {
	transition: color 0.6s ease, opacity 0.6s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.dpx .s-ldaily__steps.is-live .s-ldaily__step:not(.lit) .s-ldaily__num {
		opacity: 0.45;
		transform: scale(0.86);
	}

	.dpx .s-ldaily__steps.is-live .s-ldaily__step:not(.lit) .s-ldaily__step-title {
		color: var(--dpb-faint);
	}

	.dpx .s-ldaily__steps.is-live .s-ldaily__step:not(.lit) .s-ldaily__step-text {
		opacity: 0.55;
	}

	/* A soft ring when a number lights up. */
	.dpx .s-ldaily__steps.is-live .s-ldaily__step.lit .s-ldaily__num::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		box-shadow: 0 0 0 0 rgba(169, 155, 255, 0.55);
		animation: s-ldaily-ping 0.9s ease-out both;
		pointer-events: none;
	}

	/* The phone floats; the chat plays message by message. */
	.dpx .s-ldaily__phone {
		animation: s-ldaily-float 6.4s ease-in-out infinite;
	}

	.js .dpx .s-ldaily__chat[data-stagger] > * {
		transition-delay: calc(var(--i, 0) * 420ms + 300ms);
	}

	.js .dpx .s-ldaily__chat[data-stagger]:not(.in) > * {
		transform: translate3d(0, 12px, 0) scale(0.96);
	}

	.js .dpx .s-ldaily__chat[data-stagger] .s-ldaily__fill {
		transform-origin: right center;
		transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
		transition-delay: calc(var(--i, 0) * 420ms + 750ms);
	}

	.js .dpx .s-ldaily__chat[data-stagger]:not(.in) .s-ldaily__fill {
		transform: scaleX(0);
	}
}

.s-ldaily__msg--in {
	transform-origin: right bottom;
}

.s-ldaily__msg--out {
	transform-origin: left bottom;
}

@keyframes s-ldaily-ping {
	from {
		box-shadow: 0 0 0 0 rgba(169, 155, 255, 0.55);
	}

	to {
		box-shadow: 0 0 0 12px rgba(169, 155, 255, 0);
	}
}

@keyframes s-ldaily-float {
	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 -8px;
	}
}

/* ---- blocks/landing-faq/style.css ---- */
/* Course landing — FAQ accordion (LandingD.dc.html / M-LandingD.dc.html).
   Head and section padding come from the .s-lkit kit in landing-offer/style.css. */

.s-lfaq__inner {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.s-lfaq__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

.s-lfaq__item {
	padding: 0 18px;
	border-radius: 18px;
	background: rgba(13, 10, 34, 0.5);
	border: 1px solid rgba(169, 155, 255, 0.16);
}

.s-lfaq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.s-lfaq__q::-webkit-details-marker {
	display: none;
}

.s-lfaq__q:hover {
	color: var(--dpb-white);
}

.s-lfaq__icon {
	flex: none;
	color: var(--dpb-accent);
	transition: transform 0.25s ease;
}

.s-lfaq__item[open] .s-lfaq__icon {
	transform: rotate(45deg);
}

.s-lfaq__a {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--dpb-muted);
}

@media (max-width: 720px) {
	.s-lfaq__inner {
		gap: 24px;
	}

	.s-lfaq__list {
		margin: 0;
	}
}

/* Motion: the head rises, items follow one by one (data-stagger); answers open
   smoothly (details[data-lkit-acc], landing-offer/view.js) and the plus turns
   back as soon as an item starts closing. */
.s-lfaq__icon {
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.s-lfaq__item[open].is-closing .s-lfaq__icon {
	transform: none;
}

.s-lfaq__q {
	transition: color 0.2s;
}

/* ---- blocks/landing-final/style.css ---- */
/* Course landing — closing call to action (LandingD.dc.html / M-LandingD.dc.html).
   Countdown and pink button come from the .s-lkit kit in landing-offer/style.css. */

.dpb-section.s-lfinal {
	padding: 0;
	overflow: hidden;
}

.s-lfinal__glow {
	position: absolute;
	left: 50%;
	top: 40%;
	width: 900px;
	height: 900px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(106, 87, 255, 0.28), rgba(106, 87, 255, 0));
	pointer-events: none;
}

.s-lfinal__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 96px var(--dpb-gutter) 40px;
	text-align: center;
}

.s-lfinal__body .dpb-editor-notice {
	margin: 0;
}

.s-lfinal__title {
	max-width: 15em;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.45;
	font-weight: 900;
}

.s-lfinal__text {
	max-width: 30em;
	font-size: 18px;
	line-height: 1.9;
	color: var(--dpb-muted);
}

.s-lfinal__price {
	font-size: 16px;
	line-height: 1.8;
	color: var(--dpb-muted);
}

.s-lfinal__price b {
	font-size: 20px;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-lfinal__btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.s-lfinal .s-lfinal__ghost {
	min-height: 60px;
	padding: 0 26px;
	font-size: 16px;
}

.s-lfinal__lines {
	position: relative;
	margin-top: 8px;
}

.s-lfinal__lines svg {
	display: block;
	width: 100%;
	height: 90px;
}

@media (max-width: 720px) {
	.s-lfinal__body {
		padding: 56px 20px 24px;
	}

	.s-lfinal__title {
		font-size: 28px;
	}

	.s-lfinal__title br,
	.s-lfinal__text br {
		display: none;
	}

	.s-lfinal__btns {
		flex-direction: column;
		width: 100%;
	}

	.s-lfinal__btns .dpb-btn {
		display: flex;
		width: 100%;
	}

	.s-lfinal .s-lfinal__ghost {
		font-size: 16px;
	}
}

/* Motion ------------------------------------------------------------------
   The copy rises line by line (data-stagger), the price counts up and the
   countdown ticks (landing-offer/view.js). Behind it, the home page's flow
   lines (WebGL, canvas.flow-canvas + data-flow): points swirl as chaos and
   settle into lines that converge into one bright line as the section scrolls
   in. The canvas is placed so that bright line lands where the static glow
   lines are drawn (45px above the bottom; the scene draws it at 35% of the
   canvas height, 29% when the canvas is taller than wide) and fades out at its
   top and bottom edges, so the copy stays clean. It fades in on .gl-ready and
   the static lines fade out; without WebGL (.no-gl), in the editor and when
   "show lines" is off, the static lines remain. */

.dpb-section.s-lfinal {
	isolation: isolate;
}

.s-lfinal__canvas {
	position: absolute;
	top: calc(65% - 45px);
	left: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.4s ease;
	touch-action: pan-y;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 35%, transparent calc(35% + 45px));
	mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 35%, transparent calc(35% + 45px));
}

.s-lfinal.gl-ready .s-lfinal__canvas {
	opacity: 1;
}

.s-lfinal.no-gl .s-lfinal__canvas {
	display: none;
}

.s-lfinal__body {
	z-index: 2;
}

.s-lfinal__lines {
	z-index: 0;
	transition: opacity 1.4s ease;
}

.s-lfinal.gl-ready .s-lfinal__lines {
	opacity: 0;
}

@media (max-width: 720px) {
	.s-lfinal__canvas {
		top: calc(71% - 45px);
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 29%, transparent calc(29% + 45px));
		mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 29%, transparent calc(29% + 45px));
	}
}

.s-lfinal__mascot { width: 120px; height: 120px; object-fit: contain; margin-inline: auto; display: block; }
@media (max-width: 720px) { .s-lfinal__mascot { width: 96px; height: 96px; } }
.s-lfinal__title { text-wrap: balance; }

/* ---- blocks/landing-fit/style.css ---- */
/* Landing «برای کی هست، برای کی نیست». */

.s-fit__inner { display: flex; flex-direction: column; gap: 36px; }
.s-fit .dpb-sec-title .hl { color: var(--dpb-accent); }
.s-fit__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin-inline: auto; width: 100%; }
.s-fit__col { border-radius: 28px; padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 16px; background: #120F2B; border: 1px solid rgba(169, 155, 255, 0.2); }
.s-fit__col--yes { border-color: rgba(127, 224, 181, 0.35); }
.s-fit__col--no { border-color: rgba(255, 111, 165, 0.3); }
.s-fit__h { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 800; color: var(--dpb-text); }
.s-fit__badge { width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.s-fit__col--yes .s-fit__badge { background: rgba(127, 224, 181, 0.14); color: #7FE0B5; }
.s-fit__col--no .s-fit__badge { background: rgba(255, 111, 165, 0.14); color: var(--dpb-pink-2); }
.s-fit__list { margin: 0; padding: 0 1.1em 0 0; display: grid; gap: 12px; font-size: 17px; line-height: 1.9; color: var(--dpb-text-nav); }
.s-fit__col--yes .s-fit__list li::marker { color: #7FE0B5; }
.s-fit__col--no .s-fit__list li::marker { color: var(--dpb-pink); }
.s-fit__quote { margin: 0 auto; max-width: 760px; text-align: center; display: grid; gap: 10px; }
.s-fit__quote blockquote { margin: 0; font-size: clamp(18px, 1.8vw, 23px); line-height: 2; font-weight: 700; color: var(--dpb-text); quotes: "«" "»"; }
.s-fit__quote blockquote::before { content: open-quote; }
.s-fit__quote blockquote::after { content: close-quote; }
.s-fit__quote figcaption { font-size: 14px; color: var(--dpb-muted); }

@media (max-width: 760px) {
	.s-fit__cols { grid-template-columns: minmax(0, 1fr); }
	.s-fit__list { font-size: 16px; }
}

/* ---- blocks/landing-gifts/style.css ---- */
/* Course landing — campaign gifts (LandingC.dc.html / M-LandingC.dc.html).
   Head and section padding come from the .s-lkit kit in landing-offer/style.css. */

.s-lgifts__inner {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.s-lgifts__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.s-lgifts__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px;
	border-radius: 26px;
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.2);
}

.s-lgifts__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.s-lgifts__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 16px;
	background: rgba(255, 111, 165, 0.14);
	color: var(--dpb-pink-2);
}

.s-lgifts__num {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-pink-2);
}

.s-lgifts__title {
	font-size: 19px;
	line-height: 1.6;
	font-weight: 900;
}

.s-lgifts__text {
	font-size: 15px;
	line-height: 1.9;
	color: var(--dpb-muted);
}

.s-lgifts__foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid rgba(169, 155, 255, 0.16);
}

.s-lgifts__value {
	font-size: 14px;
	line-height: 1.6;
	color: var(--dpb-muted-2);
}

.s-lgifts__free {
	flex: none;
	display: inline-flex;
	padding: 3px 12px;
	border-radius: var(--dpb-r-pill);
	background: rgba(169, 155, 255, 0.16);
	color: var(--dpb-accent-2);
	font-size: 13px;
	font-weight: 900;
	line-height: 1.6;
}

.s-lgifts__band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 28px;
	border-radius: 24px;
	background: rgba(255, 111, 165, 0.1);
	border: 1px solid rgba(255, 111, 165, 0.38);
}

.s-lgifts__total {
	font-size: 19px;
	line-height: 1.8;
	font-weight: 900;
}

.s-lgifts__total s {
	color: var(--dpb-muted-2);
}

.s-lgifts .s-lgifts__btn {
	flex: none;
	min-height: 52px;
	padding: 0 28px;
	font-weight: 900;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 14px 36px rgba(106, 87, 255, 0.38);
}

@media (max-width: 1100px) {
	.s-lgifts__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.s-lgifts__band {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (max-width: 720px) {
	.s-lgifts__inner {
		gap: 24px;
	}

	.s-lgifts__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.s-lgifts__card {
		padding: 20px;
	}

	.s-lgifts__band {
		padding: 18px;
	}

	.s-lgifts__total {
		font-size: 16px;
	}

	.s-lgifts .s-lgifts__btn {
		display: flex;
		width: 100%;
		font-size: 17px;
	}
}

/* Motion ------------------------------------------------------------------
   Head rises; gift cards reveal one after another (data-stagger) and then bob
   gently out of phase (.float, --k). On hover a card stops, pops slightly and
   gets the spotlight; its icon wiggles. The total band rises last and its value
   counts up when it is a number (data-lkit-count). */

@media (hover: hover) {
	.s-lgifts__card:hover {
		animation-play-state: paused;
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.s-lgifts__card.s-lkit-card:hover {
		scale: 1.03;
	}

	.s-lgifts__card:hover .s-lgifts__icon {
		animation: s-lgifts-wiggle 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
	}
}

.s-lgifts__card.spot::before {
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 111, 165, 0.12), transparent 70%);
}

@keyframes s-lgifts-wiggle {
	0%,
	100% {
		transform: none;
	}

	25% {
		transform: rotate(-12deg) scale(1.08);
	}

	55% {
		transform: rotate(9deg) scale(1.08);
	}

	80% {
		transform: rotate(-4deg);
	}
}

/* ---- blocks/landing-hero/style.css ---- */
/* Landing hero — LandingPage.dc.html / M-LandingPage.dc.html */

.s-lhero {
	overflow: hidden;
	padding-bottom: 0;
}

/* Campaign bar: pinned to the top of the section. When the hero is the first
   section of the page, the bar sits above the site header and pushes it down. */
.s-lhero--bar {
	padding-top: calc(var(--dpb-section-y) + var(--s-lhero-bar-h, 43px));
}

.dpb-sections-page .dpb-sections > .s-lhero.s-lhero--bar:first-child {
	padding-top: calc(var(--dpb-header-h) + 8px + var(--s-lhero-bar-h, 43px));
}

/* The fixed header follows the bar up as it scrolls away (view.js sets
   --s-lhero-bar-top = the part of the bar still on screen). */
body:has(.dpb-sections > .s-lhero--bar:first-child) .site-header {
	top: var(--s-lhero-bar-top, var(--s-lhero-bar-h, 43px));
}

body.admin-bar:has(.dpb-sections > .s-lhero--bar:first-child) .site-header {
	top: calc(32px + var(--s-lhero-bar-top, var(--s-lhero-bar-h, 43px)));
}

.s-lhero__bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	background: var(--dpb-pink);
	color: var(--dpb-bg);
}

.s-lhero__bar-inner {
	max-width: var(--dpb-max);
	margin: 0 auto;
	padding: 10px var(--dpb-gutter);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 15px;
	font-weight: 900;
	line-height: 23px;
	text-align: center;
}

.s-lhero__timer {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.s-lhero__bar .s-lhero__bar-link {
	color: var(--dpb-bg);
	font-weight: 900;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.s-lhero__bar .s-lhero__bar-link:hover {
	color: var(--dpb-white);
}

.s-lhero__glow {
	position: absolute;
	left: 70%;
	top: 380px;
	width: 980px;
	height: 980px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(106, 87, 255, 0.3), rgba(106, 87, 255, 0));
	pointer-events: none;
}

.s-lhero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 56px;
	align-items: center;
	padding: 32px 0 72px;
}

.s-lhero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

.s-lhero__chip {
	padding: 8px 14px;
	line-height: 1.5;
}

.s-lhero__title {
	font-size: clamp(38px, 4.6vw, 62px);
	line-height: 1.35;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-lhero__title .hl {
	color: var(--dpb-accent-2);
}

.s-lhero__text {
	font-size: 19px;
	line-height: 1.95;
	color: var(--dpb-muted);
	max-width: 32em;
}

.s-lhero__btns {
	gap: 12px;
}

.s-lhero .s-lhero__cta {
	padding: 0 28px;
	gap: 10px;
	font-weight: 900;
	background: var(--dpb-pink);
	color: var(--dpb-bg);
	box-shadow: 0 14px 40px rgba(255, 111, 165, 0.38);
}

.s-lhero .s-lhero__cta:hover {
	background: #FF86B5;
	color: var(--dpb-bg);
}

.s-lhero__ghost {
	padding: 0 26px;
	font-size: 16px;
}

.s-lhero__badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.s-lhero__price {
	font-size: 15px;
	line-height: 1.8;
	color: var(--dpb-muted);
}

.s-lhero__price b {
	color: var(--dpb-text);
	font-size: 17px;
}

.s-lhero__price del {
	color: var(--dpb-faint);
	font-size: 14px;
}

/* Intro video */
.s-lhero__media {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--dpb-r-lg);
	overflow: hidden;
	background: var(--dpb-art);
	border: 1px solid rgba(169, 155, 255, 0.32);
	box-shadow: var(--dpb-shadow-deep);
}

.s-lhero__poster {
	position: absolute;
	inset: 0;
}

.s-lhero__art,
.s-lhero__poster-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s-lhero__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(13, 10, 34, 0.72), rgba(13, 10, 34, 0) 55%);
}

.s-lhero__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 88px;
	height: 88px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dpb-pink);
	color: var(--dpb-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 12px rgba(255, 111, 165, 0.2), 0 20px 50px rgba(255, 111, 165, 0.4);
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.s-lhero__play:hover {
	color: var(--dpb-bg);
	transform: translate(-50%, -50%) scale(1.05);
	box-shadow: 0 0 0 16px rgba(255, 111, 165, 0.22), 0 20px 50px rgba(255, 111, 165, 0.45);
}

span.s-lhero__play {
	cursor: default;
}

.s-lhero__label {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: var(--dpb-r-pill);
	background: rgba(13, 10, 34, 0.8);
	border: 1px solid rgba(169, 155, 255, 0.3);
	font-size: 13px;
	line-height: 1.5;
	color: var(--dpb-text-nav);
}

.s-lhero__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

.s-lhero__media.is-playing .s-lhero__shade,
.s-lhero__media.is-playing .s-lhero__play,
.s-lhero__media.is-playing .s-lhero__label {
	display: none;
}

@media (max-width: 960px) {
	.s-lhero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.s-lhero__media {
		order: -1;
	}
}

@media (max-width: 720px) {
	.s-lhero--bar {
		padding-top: calc(var(--dpb-section-y) + var(--s-lhero-bar-h, 36px));
	}

	.dpb-sections-page .dpb-sections > .s-lhero.s-lhero--bar:first-child {
		padding-top: calc(var(--dpb-header-h) + 8px + var(--s-lhero-bar-h, 36px));
	}

	body:has(.dpb-sections > .s-lhero--bar:first-child) .site-header {
		top: var(--s-lhero-bar-top, var(--s-lhero-bar-h, 36px));
	}

	body.admin-bar:has(.dpb-sections > .s-lhero--bar:first-child) .site-header {
		top: calc(46px + var(--s-lhero-bar-top, var(--s-lhero-bar-h, 36px)));
	}

	.s-lhero__bar-inner {
		padding: 8px 16px;
		font-size: 13px;
		line-height: 20px;
	}

	.s-lhero__glow {
		left: 50%;
		width: 620px;
		height: 620px;
	}

	.s-lhero__grid {
		gap: 28px;
		padding: 16px 0 40px;
	}

	.s-lhero__content {
		gap: 18px;
	}

	.s-lhero__title {
		font-size: 34px;
	}

	.s-lhero__text {
		font-size: 16px;
	}

	.s-lhero__text br {
		display: none;
	}

	.s-lhero__btns {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.s-lhero__btns .dpb-btn {
		display: flex;
		width: 100%;
		min-height: 58px;
		font-size: 16px;
	}

	.s-lhero .s-lhero__cta {
		font-size: 17px;
	}

	.s-lhero__media {
		border-radius: 24px;
	}

	.s-lhero__play {
		width: 68px;
		height: 68px;
	}
}

/* Motion ------------------------------------------------------------------
   The copy rises in sequence on load (--d per child, the home hero's "rise"),
   the video card follows and tilts towards the pointer (data-tilt; it reveals
   with opacity + translate because the tilt owns transform), the glow drifts
   with scroll (data-par), the play button breathes, the countdown digits tick
   (view.js) and the price counts up (data-lkit-count). */

.s-lhero__timer .s-lhero__tu {
	display: inline-block;
}

.s-lhero__poster > * {
	transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* No tilting while the video plays. */
.s-lhero__media.is-playing {
	transform: none !important;
}

@media (prefers-reduced-motion: no-preference) {
	.dpx .s-lhero__content > * {
		animation: s-lhero-rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
		animation-delay: calc(var(--d, 0) * 110ms + 100ms);
	}

	.dpx .s-lhero__media {
		animation: s-lhero-media 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.32s backwards;
	}

	.dpx button.s-lhero__play::after,
	.dpx a.s-lhero__play::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		border: 2px solid rgba(255, 111, 165, 0.55);
		pointer-events: none;
		animation: s-lhero-ring 2.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1.6s infinite;
		opacity: 0;
	}

	.s-lhero__media:hover .s-lhero__poster > * {
		transform: scale(1.035);
	}
}

@keyframes s-lhero-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 26px, 0);
	}
}

@keyframes s-lhero-media {
	from {
		opacity: 0;
		translate: 0 34px;
		scale: 0.97;
	}
}

@keyframes s-lhero-ring {
	0% {
		opacity: 0.9;
		transform: scale(1);
	}

	70%,
	100% {
		opacity: 0;
		transform: scale(1.6);
	}
}

@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
	/* The video comes first on phones and tablets. */
	.dpx .s-lhero__media {
		animation-delay: 0.1s;
	}

	.dpx .s-lhero__content > * {
		animation-delay: calc(var(--d, 0) * 110ms + 260ms);
	}
}

/* No cover image: Sina's photo, face kept in frame. */
.s-lhero__poster-img--sina { object-position: 50% 26%; }
@media (max-width: 720px) {
	/* On a phone the quote label would sit on Sina's face. */
	.s-lhero__media--sina .s-lhero__label { display: none; }
}

/* ---- blocks/landing-notyou/style.css ---- */
/* Landing «مشکل از تو نیست» — old school / new school, from episode 0. */

.s-notyou__inner { display: flex; flex-direction: column; gap: 36px; }
.s-notyou .dpb-sec-title .hl { color: var(--dpb-accent); }
.s-notyou__cols { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 20px; align-items: stretch; }
.s-notyou__col { border-radius: 28px; padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 18px; }
.s-notyou__col--old { background: #120F2B; border: 1px dashed rgba(169, 155, 255, 0.22); }
.s-notyou__col--new { background: linear-gradient(155deg, #2C1F7A 0%, #1B1547 70%); border: 1px solid #4B3BD0; box-shadow: 0 30px 80px rgba(106, 87, 255, 0.18); }
.s-notyou__h { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.6; color: var(--dpb-text); }
.s-notyou__col--old .s-notyou__h { color: var(--dpb-muted); }
.s-notyou__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.s-notyou__list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 17px; line-height: 1.9; color: var(--dpb-text-nav); }
.s-notyou__col--old li { color: var(--dpb-faint); }
.s-notyou__col--old li span:last-child { text-decoration: line-through; text-decoration-color: rgba(255, 111, 165, 0.55); text-decoration-thickness: 1.5px; }
.s-notyou__mark { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 111, 165, 0.12); color: var(--dpb-pink-2); margin-top: 1px; }
.s-notyou__num { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--dpb-primary); color: #fff; font-weight: 800; font-size: 14px; margin-top: 1px; }
.s-notyou__col--new li { color: var(--dpb-text); font-weight: 600; }

@media (max-width: 860px) {
	.s-notyou__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
	.s-notyou__list li { font-size: 16px; }
	.s-notyou .dpb-sec-title br { display: none; }
}

/* ---- blocks/landing-offer/style.css ---- */
/* Course landing, parts 3–4 — LandingC/D.dc.html, M-LandingC/D.dc.html, M-LandingSticky.dc.html
   ==========================================================================
   .s-lkit-* is a small kit shared by landing-gifts, landing-offer, landing-register,
   landing-faq, landing-final and landing-sticky (kept here so the sections stay
   in their own folders). Section-specific overrides are always scoped by the
   section class, so bundle order does not matter.
   ========================================================================== */

.dpb-section.s-lkit {
	padding-block: clamp(56px, 7vw, 100px);
}

.s-lkit-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.s-lkit-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-accent-2);
}

.s-lkit-eyebrow__line {
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--dpb-accent);
}

.s-lkit-title {
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.45;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-lkit-lead {
	max-width: 38em;
	font-size: 18px;
	line-height: 1.95;
	color: var(--dpb-muted);
}

/* Pink call-to-action (used with .dpb-btn) */
.dpb-btn.s-lkit-pink {
	min-height: 60px;
	padding: 0 28px;
	background: var(--dpb-pink);
	color: var(--dpb-bg);
	font-size: 17px;
	font-weight: 900;
	box-shadow: 0 14px 40px rgba(255, 111, 165, 0.38);
}

.dpb-btn.s-lkit-pink:hover {
	background: #FF86B5;
	color: var(--dpb-bg);
}

/* Countdown (ticks in landing-offer/view.js) */
.s-lkit-cd {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 10px;
}

.s-lkit-cd[hidden] {
	display: none;
}

.s-lkit-cd__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 84px;
	padding: 14px 10px;
	border-radius: 16px;
	background: rgba(13, 10, 34, 0.72);
	border: 1px solid rgba(255, 111, 165, 0.35);
}

.s-lkit-cd__num {
	font-size: 40px;
	line-height: 1.2;
	font-weight: 900;
	color: var(--dpb-white);
	font-variant-numeric: tabular-nums;
}

.s-lkit-cd__label {
	font-size: 13px;
	line-height: 1.5;
	color: var(--dpb-pink-2);
}

.s-lkit-cd__sep {
	align-self: flex-start;
	padding-top: 18px;
	font-size: 24px;
	line-height: 1.5;
	font-weight: 900;
	color: var(--dpb-pink);
}

@media (max-width: 720px) {
	.s-lkit-title {
		font-size: 28px;
	}

	.s-lkit-lead {
		font-size: 16px;
	}

	.s-lkit-lead br {
		display: none;
	}

	.s-lkit-cd {
		gap: 6px;
	}

	.s-lkit-cd__unit {
		min-width: 62px;
		padding: 10px 8px;
	}

	.s-lkit-cd__num {
		font-size: 28px;
	}

	.s-lkit-cd__label {
		font-size: 12px;
	}

	.s-lkit-cd__sep {
		padding-top: 14px;
	}
}

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

.s-loffer {
	overflow: hidden;
}

.s-loffer__glow {
	position: absolute;
	left: 50%;
	top: 30%;
	width: 900px;
	height: 900px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(106, 87, 255, 0.22), rgba(106, 87, 255, 0));
	pointer-events: none;
}

.s-loffer__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.s-loffer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 28px;
}

.s-loffer__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 36px;
	border-radius: 32px;
	background: var(--dpb-surface-2);
	border: 2px solid var(--dpb-primary);
	box-shadow: 0 0 0 6px rgba(106, 87, 255, 0.12), 0 40px 100px rgba(0, 0, 0, 0.45);
}

.s-loffer__card .dpb-editor-notice {
	margin: 0;
}

.s-loffer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.s-loffer__badge {
	display: inline-flex;
	padding: 6px 14px;
	border-radius: var(--dpb-r-pill);
	background: var(--dpb-pink);
	color: var(--dpb-bg);
	font-size: 13px;
	font-weight: 900;
	line-height: 1.5;
}

.s-loffer__until {
	font-size: 14px;
	line-height: 1.6;
	color: var(--dpb-text-nav);
}

.s-loffer__name {
	font-size: 26px;
	line-height: 1.5;
	font-weight: 900;
}

.s-loffer__price-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.s-loffer__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.s-loffer__price b {
	font-size: 56px;
	line-height: 1.3;
	font-weight: 900;
}

.s-loffer__price span {
	font-size: 18px;
	color: var(--dpb-text-nav);
}

.s-loffer__price-note {
	font-size: 15px;
	line-height: 1.6;
	color: var(--dpb-muted);
}

.s-loffer__after {
	font-size: 14px;
	line-height: 1.6;
	color: var(--dpb-muted-2);
}

.s-loffer__cap {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.s-loffer__cap-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--dpb-text-nav);
}

.s-loffer__bar {
	height: 10px;
	border-radius: var(--dpb-r-pill);
	background: rgba(169, 155, 255, 0.16);
	overflow: hidden;
}

.s-loffer__bar span {
	display: block;
	height: 100%;
	border-radius: var(--dpb-r-pill);
	background: var(--dpb-pink);
}

.s-loffer__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s-loffer__features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--dpb-text-nav);
}

.s-loffer__check {
	flex: none;
	margin-top: 3px;
	color: var(--dpb-accent);
}

.s-loffer__guarantees {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.s-loffer__g {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 30px;
	border-radius: var(--dpb-r-card);
	background: #141033;
	border: 1.5px solid rgba(169, 155, 255, 0.3);
	color: var(--dpb-accent-2);
}

.s-loffer__g--pink {
	background: rgba(255, 111, 165, 0.08);
	border-color: rgba(255, 111, 165, 0.5);
	color: var(--dpb-pink-2);
}

.s-loffer__g-top {
	display: flex;
	align-items: center;
	gap: 14px;
}

.s-loffer__g-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.06);
}

.s-loffer__g-label {
	font-size: 13px;
	line-height: 1.6;
	font-weight: 900;
}

.s-loffer__g-title {
	font-size: 22px;
	line-height: 1.6;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-loffer__g-text {
	font-size: 16px;
	line-height: 2;
	color: var(--dpb-text-nav);
}

.s-loffer__g-note {
	font-size: 14px;
	line-height: 1.9;
	color: var(--dpb-muted-2);
}

@media (max-width: 1100px) {
	.s-loffer__card {
		padding: 28px;
	}

	.s-loffer__cd {
		gap: 8px;
	}

	.s-loffer__cd .s-lkit-cd__unit {
		min-width: 76px;
	}
}

@media (max-width: 900px) {
	.s-loffer__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.s-loffer__guarantees {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}
}

@media (max-width: 720px) {
	.s-loffer__inner {
		gap: 24px;
	}

	.s-loffer__grid {
		gap: 16px;
	}

	.s-loffer__guarantees {
		display: flex;
	}

	.s-loffer__card {
		padding: 22px;
	}

	.s-loffer__cd {
		gap: 6px;
	}

	.s-loffer__cd .s-lkit-cd__unit {
		min-width: 62px;
	}

	.s-loffer__price b {
		font-size: 44px;
	}

	.s-loffer__guarantees {
		gap: 16px;
	}

	.s-loffer__g {
		padding: 22px;
	}
}

/* ==========================================================================
   Motion kit — the home page's motion language for the course landing
   (dev/MOTION.md). Reveals use the global hooks (data-reveal, data-stagger,
   .spot, data-tilt, data-par, data-photo); the kit adds what the landing needs
   on top. Moving or hidden states exist only on the front end (.js .dpx) with
   motion allowed, so the editor preview, visitors without JavaScript and
   reduced motion always see the final design.
   ========================================================================== */

/* Cards with a hover state. The transition list keeps the staggered reveal
   (opacity/transform, delayed per card) and adds quick hover properties, so a
   card can be both a data-stagger child and lift on hover (the lift uses the
   independent `translate` property). .s-lkit-hover = border only,
   .s-lkit-card = border + lift + violet shadow. */
.s-lkit-hover,
.s-lkit-card,
.js .dpx [data-stagger] > .s-lkit-hover,
.js .dpx [data-stagger] > .s-lkit-card {
	transition-property: opacity, transform, translate, scale, border-color, box-shadow, background-color;
	transition-duration: 0.9s, 1s, 0.4s, 0.4s, 0.35s, 0.35s, 0.35s;
	transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1), cubic-bezier(0.2, 0.7, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1), ease, ease, ease;
	transition-delay: var(--lkit-d, 0s), var(--lkit-d, 0s), 0s, 0s, 0s, 0s, 0s;
}

.js .dpx [data-stagger] > .s-lkit-hover,
.js .dpx [data-stagger] > .s-lkit-card {
	--lkit-d: calc(var(--i, 0) * 95ms + 80ms);
}

@media (hover: hover) {
	.s-lkit-hover:hover,
	.s-lkit-card:hover {
		border-color: rgba(169, 155, 255, 0.55);
	}

	.s-lkit-card:hover {
		box-shadow: 0 22px 44px rgba(106, 87, 255, 0.24);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.s-lkit-card:hover {
		translate: 0 -4px;
	}
}

/* Offer motion ------------------------------------------------------------ */

/* The guarantee cards are positioned now (.spot); keep the offer card and its
   deep shadow painted above them, as before. */
.s-loffer__card {
	z-index: 1;
}

@property --s-loffer-a {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@media (prefers-reduced-motion: no-preference) {
	/* The card is tilted by the pointer (data-tilt owns `transform`), so it
	   reveals with opacity + `translate` instead of the global transform. */
	.js .dpx .s-loffer__card[data-reveal] {
		transform: none;
		translate: 0 30px;
		transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--d, 0) * 90ms), translate 1s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--d, 0) * 90ms), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.js .dpx .s-loffer__card[data-reveal].in {
		translate: none;
	}

	/* Features follow the card in. */
	.js .dpx .s-loffer__features[data-stagger] > * {
		transition-delay: calc(var(--i, 0) * 90ms + 420ms);
	}

	/* Capacity bar fills from the start (right) once the card is in. */
	.js .dpx .s-loffer__card[data-reveal] .s-loffer__bar span {
		transform-origin: right center;
		transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s;
	}

	.js .dpx .s-loffer__card[data-reveal]:not(.in) .s-loffer__bar span {
		transform: scaleX(0);
	}

	/* Glow border: a slow light runs along the card's border. */
	.dpx .s-loffer__card::after {
		content: "";
		position: absolute;
		inset: -2px;
		z-index: 2;
		padding: 2px;
		border-radius: inherit;
		background: conic-gradient(from var(--s-loffer-a), transparent 0deg, transparent 230deg, rgba(199, 188, 255, 0.95) 300deg, rgba(255, 111, 165, 0.9) 334deg, transparent 360deg);
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		mask-composite: exclude;
		pointer-events: none;
		animation: s-loffer-sweep 7s linear infinite;
	}

	/* The violet glow behind the offer breathes. */
	.dpx .s-loffer__glow {
		animation: s-loffer-breathe 9s ease-in-out infinite;
	}
}

@keyframes s-loffer-sweep {
	to {
		--s-loffer-a: 360deg;
	}
}

@keyframes s-loffer-breathe {
	0%,
	100% {
		opacity: 1;
		scale: 1;
	}

	50% {
		opacity: 0.7;
		scale: 1.08;
	}
}

/* Guarantee cards: pink cards keep a pink hover. */
@media (hover: hover) {
	.s-loffer__g--pink.s-lkit-card:hover {
		border-color: rgba(255, 111, 165, 0.75);
		box-shadow: 0 22px 44px rgba(255, 111, 165, 0.16);
	}
}

.s-loffer__g--pink.spot::before {
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 111, 165, 0.14), transparent 70%);
}

.s-loffer__g-icon {
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.25, 1.15);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.s-loffer__g:hover .s-loffer__g-icon {
		transform: rotate(-8deg) scale(1.06);
	}
}

/* ---- blocks/landing-problem/style.css ---- */
/* Landing problem — LandingPage.dc.html / M-LandingPage.dc.html («آشناست؟») */

.s-lproblem {
	padding-block: clamp(56px, 7vw, 100px);
}

.s-lproblem__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.s-lproblem__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s-lproblem__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-accent-2);
}

.s-lproblem__eyebrow::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--dpb-accent);
}

.s-lproblem__title {
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.45;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-lproblem__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.s-lproblem__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px 26px;
	border-radius: 24px;
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.2);
}

.s-lproblem__icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: rgba(255, 111, 165, 0.14);
	color: var(--dpb-pink-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.s-lproblem__item p {
	font-size: 17px;
	line-height: 1.9;
	color: var(--dpb-text-nav);
}

.s-lproblem__note {
	padding: 28px 32px;
	border-radius: 24px;
	background: rgba(106, 87, 255, 0.14);
	border: 1px solid rgba(169, 155, 255, 0.34);
	font-size: 20px;
	line-height: 1.9;
	font-weight: 700;
	color: var(--dpb-text);
}

@media (max-width: 720px) {
	.s-lproblem__inner {
		gap: 24px;
	}

	.s-lproblem__title {
		font-size: 28px;
	}

	.s-lproblem__title br {
		display: none;
	}

	.s-lproblem__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.s-lproblem__item {
		padding: 18px;
	}

	.s-lproblem__note {
		padding: 20px;
		font-size: 17px;
	}
}

/* Motion: head rises; the cards follow one by one (data-stagger) with spotlight
   and lift on hover (.spot, .s-lkit-card); the closing note rises last. */
.s-lproblem__icon {
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.25, 1.15), background-color 0.35s;
}

@media (hover: hover) {
	.s-lproblem__item:hover .s-lproblem__icon {
		background: rgba(255, 111, 165, 0.22);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.s-lproblem__item:hover .s-lproblem__icon {
		transform: rotate(-8deg) scale(1.06);
	}
}

/* ---- blocks/landing-proof/style.css ---- */
/* Landing «سینا قبل از تو» (canvas: صفحه دوره · ب · نهایی · دسکتاپ / موبایل). */
.s-lpf__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:64px;align-items:center}
.s-lpf__copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.s-lpf__q{margin:0;font-size:clamp(24px,2.4vw,33px);line-height:1.7;font-weight:800;color:var(--text);text-wrap:pretty}
.s-lpf__q em{font-style:normal;background:linear-gradient(transparent 60%,rgba(255,111,165,.45) 60%)}
.s-lpf__who{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}
.s-lpf__who img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none}
.s-lpf__facts{display:grid;border-top:1px solid rgba(169,155,255,.16)}
.s-lpf__facts div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid rgba(169,155,255,.16);align-items:baseline}
.s-lpf__facts b{font-size:24px;font-weight:900;color:var(--acc)}
.s-lpf__facts span{font-size:15px;color:var(--soft)}
.s-lpf__more{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;color:var(--acc);font-weight:700;font-size:15px;text-decoration:none}
.s-lpf__more svg{width:18px;height:18px}
.s-lpf__board{position:relative;height:680px;max-width:600px;width:100%;justify-self:center}
.s-lpf__pol{position:absolute;margin:0;background:#F7F5FF;padding:10px 10px 0;border-radius:6px;box-shadow:0 24px 50px -10px rgba(0,0,0,.6);transition:transform .4s cubic-bezier(.2,.7,.2,1);color:#1A1440}
.s-lpf__pol:hover{transform:rotate(0deg) scale(1.05)!important;z-index:9}
.s-lpf__pol img,.s-lpf__pol video{display:block;width:100%;object-fit:cover;border-radius:3px;background:#222}
.s-lpf__pol figcaption{padding:8px 4px 10px;font-size:13px;font-weight:700;line-height:1.6}
.s-lpf__pol figcaption small{display:block;font-weight:500;color:#5a5290;font-size:11.5px}
.s-lpf__pol::before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;background:rgba(169,155,255,.6);transform:rotate(-4deg)}
.s-lpf__p1{width:260px;top:20px;right:0;transform:rotate(3deg);z-index:2}
.s-lpf__p1 img{aspect-ratio:4/5;object-position:50% 25%}
.s-lpf__p2{width:210px;top:0;left:40px;transform:rotate(-5deg);z-index:3}
.s-lpf__p2 video{aspect-ratio:9/14}
.s-lpf__p3{width:210px;bottom:0;left:0;transform:rotate(4deg);z-index:4}
.s-lpf__p3 img{aspect-ratio:4/5;object-position:top}
.s-lpf__p4{width:240px;bottom:10px;right:40px;transform:rotate(-3deg);z-index:5}
.s-lpf__p4 img{aspect-ratio:4/3}
.s-lpf__empty{aspect-ratio:4/3;border:2px dashed #b9b1e3;border-radius:3px;display:grid;place-items:center;text-align:center;font-size:13px;line-height:1.8;color:#5a5290;padding:14px;background:repeating-linear-gradient(0deg,transparent 0 23px,#e2ddfa 23px 24px)}
.s-lpf__pin{position:absolute;z-index:8;top:262px;right:-14px;transform:rotate(-8deg);background:#2a2148;box-shadow:0 10px 24px rgba(0,0,0,.5)}
@media (max-width:1000px){
	.s-lpf__grid{display:flex;flex-direction:column;align-items:stretch;gap:20px}
	.s-lpf__copy{display:contents}
	.s-lpf__eyebrow{order:1} .s-lpf__q{order:2} .s-lpf__who{order:3} .s-lpf__board{order:4} .s-lpf__facts{order:5} .s-lpf__more{order:6}
	.s-lpf__board{height:auto;max-width:none;width:auto;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-block:24px 30px;margin-inline:calc(-1 * var(--pad, 20px));padding-inline:var(--pad, 20px);scrollbar-width:none}
	.s-lpf__board::-webkit-scrollbar{display:none}
	.s-lpf__pol{position:relative;inset:auto;flex:0 0 190px;scroll-snap-align:center;box-shadow:0 14px 26px -12px rgba(0,0,0,.7)}
	.s-lpf__p1 img,.s-lpf__p3 img,.s-lpf__p4 img,.s-lpf__empty{aspect-ratio:4/5}
	.s-lpf__p2 video{aspect-ratio:4/5}
	.s-lpf__pin{display:none}
	.s-lpf__q{font-size:22px;line-height:1.8}
	.s-lpf__facts div{grid-template-columns:84px minmax(0,1fr);padding:11px 0}
	.s-lpf__facts b{font-size:21px}
	.s-lpf__facts span{font-size:14px}
}
/* Until Sina's own notebook photo exists, the 4th photo is left out for visitors: centre the 3rd. */
.s-lpf__board:not(:has(.s-lpf__p4)) .s-lpf__p3{left:170px}
@media (max-width:1000px){.s-lpf__board:not(:has(.s-lpf__p4)) .s-lpf__p3{left:auto}}

/* ---- blocks/landing-register/style.css ---- */
/* Course landing — registration (LandingC.dc.html #register / M-LandingC.dc.html).
   Head and section padding come from the .s-lkit kit in landing-offer/style.css. */

.s-lreg__inner {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.s-lreg__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 32px;
	align-items: start;
}

.s-lreg__methods,
.s-lreg__side {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.s-lreg__side .dpb-editor-notice {
	margin: 0;
}

.s-lreg__h {
	font-size: 20px;
	line-height: 1.6;
	font-weight: 900;
	color: var(--dpb-text);
}

/* Payment method options (radio cards) */
.s-lreg__options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s-lreg__opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 76px;
	padding: 12px 16px;
	border-radius: 20px;
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.24);
	color: var(--dpb-text);
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.s-lreg__opt:hover {
	border-color: rgba(169, 155, 255, 0.45);
}

.s-lreg__opt.is-active {
	background: rgba(106, 87, 255, 0.2);
	border-color: var(--dpb-primary);
	box-shadow: inset 0 0 0 1px var(--dpb-primary), 0 0 0 4px rgba(106, 87, 255, 0.14);
}

/* Same state without JavaScript (kept as a separate rule: an unsupported :has()
   must not invalidate the rule above). */
.s-lreg__opt:has(.s-lreg__radio:checked) {
	background: rgba(106, 87, 255, 0.2);
	border-color: var(--dpb-primary);
	box-shadow: inset 0 0 0 1px var(--dpb-primary), 0 0 0 4px rgba(106, 87, 255, 0.14);
}

.s-lreg__opt:has(.s-lreg__radio:focus-visible) {
	outline: 2px solid var(--dpb-accent);
	outline-offset: 3px;
}

.s-lreg__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.s-lreg__opt-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: rgba(169, 155, 255, 0.14);
	color: var(--dpb-accent-2);
}

.s-lreg__opt-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

.s-lreg__opt-text b {
	font-size: 17px;
	line-height: 1.5;
	font-weight: 900;
}

.s-lreg__opt-text span {
	font-size: 13px;
	line-height: 1.6;
	color: var(--dpb-muted);
}

.s-lreg__opt-badge {
	flex: none;
	padding: 2px 10px;
	border-radius: var(--dpb-r-pill);
	background: rgba(255, 111, 165, 0.18);
	color: var(--dpb-pink-2);
	font-size: 12px;
	font-weight: 900;
	line-height: 1.6;
}

/* Instructions of the chosen method */
.s-lreg__panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(169, 155, 255, 0.22);
}

.s-lreg__panel[hidden] {
	display: none;
}

.s-lreg__panel-title {
	font-size: 16px;
	line-height: 1.6;
	font-weight: 700;
}

.s-lreg__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.s-lreg__steps li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--dpb-text-nav);
}

.s-lreg__step-num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(169, 155, 255, 0.16);
	color: var(--dpb-accent-2);
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
}

.s-lreg__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px;
	border-radius: 18px;
	background: var(--dpb-bg);
	border: 1px dashed rgba(169, 155, 255, 0.4);
}

.s-lreg__card-label {
	font-size: 13px;
	line-height: 1.6;
	color: var(--dpb-muted-2);
}

.s-lreg__card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.s-lreg__card-num {
	min-width: 0;
	font-size: 20px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: 0.06em;
	overflow-wrap: anywhere;
}

.s-lreg__copy {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 14px;
	border-radius: 12px;
	border: 1px solid rgba(169, 155, 255, 0.3);
	background: rgba(255, 255, 255, 0.05);
	color: var(--dpb-text-nav);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}

.s-lreg__copy:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(169, 155, 255, 0.5);
}

.s-lreg__card-holder {
	font-size: 14px;
	line-height: 1.6;
	color: var(--dpb-text-nav);
}

.s-lreg .s-lreg__panel-btn {
	min-height: 50px;
	font-size: 16px;
	white-space: normal;
	text-align: center;
}

.s-lreg__note {
	font-size: 14px;
	line-height: 1.8;
	color: var(--dpb-muted-2);
}

/* Form and thank-you boxes */
.s-lreg__box {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border-radius: var(--dpb-r-card);
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.28);
}

.s-lreg__box--form {
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.s-lreg__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.s-lreg__form .dpb-form-notice {
	font-size: 14px;
}

.s-lreg__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.s-lreg__field label {
	font-size: 14px;
	line-height: 1.6;
	color: var(--dpb-text-nav);
}

.s-lreg__input {
	width: 100%;
	min-height: 52px;
	padding: 0 16px;
	border-radius: 14px;
	background: var(--dpb-bg);
	border: 1.5px solid rgba(169, 155, 255, 0.24);
	color: var(--dpb-text);
	font-size: 15px;
	text-align: right;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.s-lreg__input::placeholder {
	color: var(--dpb-faint);
}

.s-lreg__input:focus {
	outline: none;
	border-color: var(--dpb-accent);
	box-shadow: 0 0 0 4px rgba(169, 155, 255, 0.16);
}

.s-lreg__input[aria-invalid="true"] {
	border-color: rgba(255, 111, 165, 0.7);
}

.s-lreg__error {
	font-size: 13px;
	line-height: 1.6;
	color: var(--dpb-pink-2);
}

.s-lreg__error[hidden] {
	display: none;
}

.s-lreg__amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 16px;
	background: rgba(169, 155, 255, 0.08);
}

.s-lreg__amount span {
	font-size: 14px;
	line-height: 1.6;
	color: var(--dpb-muted);
}

.s-lreg__amount b {
	font-size: 18px;
	line-height: 1.6;
	font-weight: 900;
}

.s-lreg__submit {
	min-height: 60px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--dpb-r-pill);
	background: var(--dpb-pink);
	color: var(--dpb-bg);
	font-size: 17px;
	font-weight: 900;
	line-height: 1.4;
	cursor: pointer;
	box-shadow: 0 14px 40px rgba(255, 111, 165, 0.38);
	transition: background-color 0.2s, transform 0.15s;
}

.s-lreg__submit:hover {
	background: #FF86B5;
}

.s-lreg__submit:active {
	transform: translateY(1px);
}

.s-lreg__trust {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--dpb-muted);
}

.s-lreg__trust .dpb-icon {
	flex: none;
	color: var(--dpb-accent);
}

.s-lreg__box--done {
	align-items: flex-start;
}

.s-lreg__box--done:focus {
	outline: none;
}

.s-lreg__done-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(169, 155, 255, 0.16);
	color: var(--dpb-accent-2);
}

.s-lreg__done-title {
	font-size: 24px;
	line-height: 1.5;
	font-weight: 900;
}

.s-lreg__done-text {
	font-size: 16px;
	line-height: 2;
	color: var(--dpb-muted);
}

.s-lreg .s-lreg__edit {
	font-size: 15px;
}

@media (max-width: 960px) {
	.s-lreg__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

@media (max-width: 720px) {
	.s-lreg__inner {
		gap: 24px;
	}

	.s-lreg__grid {
		gap: 20px;
	}

	.s-lreg__panel {
		padding: 18px;
	}

	.s-lreg__box {
		padding: 22px;
	}
}

/* Motion ------------------------------------------------------------------
   Head, methods and form rise in sequence; the payment options follow one by
   one (data-stagger — their own colour transitions are kept). The chosen
   method's instructions slide in when they appear, an error message drops in,
   the submit button lifts and glows on hover, and the thank-you box arrives
   with its check mark popping in. */

.js .dpx .s-lreg__options[data-stagger] > .s-lreg__opt {
	transition-property: opacity, transform, background-color, border-color, box-shadow;
	transition-duration: 0.9s, 1s, 0.2s, 0.2s, 0.2s;
	transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1), cubic-bezier(0.2, 0.7, 0.2, 1), ease, ease, ease;
	transition-delay: calc(var(--i, 0) * 95ms + 260ms), calc(var(--i, 0) * 95ms + 260ms), 0s, 0s, 0s;
}

.s-lreg__opt-icon {
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.25, 1.15), background-color 0.3s;
}

.s-lreg__submit {
	transition: background-color 0.2s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
}

@media (hover: hover) {
	.s-lreg__submit:hover {
		box-shadow: 0 18px 46px rgba(255, 111, 165, 0.48);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.s-lreg__submit:hover {
		transform: translateY(-2px);
	}

	.s-lreg__submit:active {
		transform: translateY(1px);
	}

	.s-lreg__opt:hover .s-lreg__opt-icon {
		transform: rotate(-8deg) scale(1.06);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.dpx .s-lreg__panel:not([hidden]) {
		animation: s-lreg-panel 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	}

	.dpx .s-lreg__error:not([hidden]) {
		animation: s-lreg-drop 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	}

	.dpx .s-lreg__box--done {
		animation: s-lreg-done 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	}

	.dpx .s-lreg__done-icon {
		animation: s-lreg-pop 0.7s cubic-bezier(0.2, 0.8, 0.25, 1.15) 0.25s backwards;
	}
}

@keyframes s-lreg-panel {
	from {
		opacity: 0;
		translate: 0 12px;
	}
}

@keyframes s-lreg-drop {
	from {
		opacity: 0;
		translate: 0 -4px;
	}
}

@keyframes s-lreg-done {
	from {
		opacity: 0;
		translate: 0 18px;
		scale: 0.98;
	}
}

@keyframes s-lreg-pop {
	from {
		opacity: 0;
		scale: 0.4;
	}
}

/* ---- blocks/landing-sticky/style.css ---- */
/* Course landing — sticky registration bar (M-LandingSticky.dc.html). Phones only.
   Pink button comes from the .s-lkit kit in landing-offer/style.css. */

.s-lsticky {
	display: none;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	background: rgba(13, 10, 34, 0.96);
	border-top: 1px solid rgba(169, 155, 255, 0.16);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.s-lsticky__price {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.s-lsticky__price span {
	font-size: 12px;
	line-height: 1.6;
	color: var(--dpb-muted);
}

.s-lsticky__price b {
	font-size: 17px;
	line-height: 1.5;
	font-weight: 900;
}

.s-lsticky .dpb-btn.s-lsticky__btn {
	flex: none;
	min-height: 48px;
	padding: 0 28px;
	font-size: 17px;
}

@media (max-width: 720px) {
	.s-lsticky {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 60;
		display: flex;
		padding-bottom: calc(10px + env(safe-area-inset-bottom));
		box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.45);
		transform: translateY(110%);
		visibility: hidden;
		transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.45s;
	}

	/* Shown once the hero's buttons are scrolled past (.is-on, view.js), hidden
	   again while the registration or the closing section is on screen
	   (.is-away). It slides in with the home design's curve and its price and
	   button follow. */
	.s-lsticky.is-on:not(.is-away) {
		transform: none;
		visibility: visible;
		transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
	}

	.s-lsticky__price {
		transition: opacity 0.4s ease, translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.s-lsticky .dpb-btn.s-lsticky__btn {
		transition: background-color 0.2s, box-shadow 0.2s, color 0.2s, transform 0.15s, opacity 0.4s ease, scale 0.5s cubic-bezier(0.2, 0.8, 0.25, 1.15);
	}

	.s-lsticky:not(.s-lsticky--preview):not(.is-on) .s-lsticky__price,
	.s-lsticky.is-away .s-lsticky__price {
		opacity: 0;
		translate: 0 10px;
	}

	.s-lsticky:not(.s-lsticky--preview):not(.is-on) .s-lsticky__btn,
	.s-lsticky.is-away .s-lsticky__btn {
		opacity: 0;
		scale: 0.94;
	}

	.s-lsticky.is-on:not(.is-away) .s-lsticky__price {
		transition-delay: 0.12s;
	}

	.s-lsticky.is-on:not(.is-away) .s-lsticky__btn {
		transition-delay: 0s, 0s, 0s, 0s, 0.2s, 0.2s;
	}

	/* The bar replaces the theme's mobile bar (also when the block sits inside
	   a reusable pattern, where has_block() cannot see it). */
	body:has(.s-lsticky:not(.s-lsticky--preview)) .mobile-bar,
	body:has(.s-lsticky:not(.s-lsticky--preview)) .sticky-cta {
		display: none !important;
	}

	body:has(.s-lsticky:not(.s-lsticky--preview)) .site-footer {
		padding-bottom: calc(96px + env(safe-area-inset-bottom));
	}
}

/* Editor preview: shown in place, at phone width. */
.s-lsticky.s-lsticky--preview {
	position: static;
	display: flex;
	max-width: 420px;
	margin: 24px auto;
	border: 1px solid rgba(169, 155, 255, 0.16);
	border-radius: 18px;
	box-shadow: none;
	transform: none;
	visibility: visible;
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
	.s-lsticky,
	.s-lsticky__price,
	.s-lsticky .dpb-btn.s-lsticky__btn {
		transition: none !important;
	}

	.s-lsticky .s-lsticky__price,
	.s-lsticky .s-lsticky__btn {
		opacity: 1 !important;
		translate: none !important;
		scale: none !important;
	}
}

/* ---- blocks/landing-strip/style.css ---- */
/* Landing strip — LandingPage.dc.html / M-LandingPage.dc.html (band under the hero) */

.s-lstrip {
	padding-block: 36px;
}

.s-lstrip__list {
	list-style: none;
	margin-block: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--s-lstrip-cols, 3), minmax(0, 1fr));
	gap: 24px;
}

.s-lstrip__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 20px;
}

.s-lstrip__icon {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 16px;
	background: rgba(169, 155, 255, 0.14);
	color: var(--dpb-accent-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.s-lstrip__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.6;
}

.s-lstrip__body strong {
	font-size: 16px;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-lstrip__body span {
	font-size: 14px;
	color: var(--dpb-muted);
}

@media (max-width: 960px) {
	.s-lstrip__list {
		gap: 16px;
	}

	.s-lstrip__item {
		padding: 8px 0;
	}
}

@media (max-width: 720px) {
	.s-lstrip {
		padding: 28px 20px;
	}

	.s-lstrip__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.s-lstrip__item {
		padding: 6px 0;
	}
}

/* Motion: the three items reveal one after another (data-stagger); the icon
   lifts and brightens when an item is pointed at. */
.s-lstrip__icon {
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.25, 1.15), background-color 0.35s, color 0.35s;
}

@media (hover: hover) {
	.s-lstrip__item:hover .s-lstrip__icon {
		background: rgba(169, 155, 255, 0.24);
		color: var(--dpb-white);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.s-lstrip__item:hover .s-lstrip__icon {
		transform: translateY(-3px);
	}
}

/* ---- blocks/landing-syllabus/style.css ---- */
/* Landing syllabus — LandingB.dc.html / M-LandingB.dc.html («سرفصل‌ها») */

.s-lsyllabus {
	padding-block: clamp(56px, 7vw, 100px);
}

.s-lsyllabus__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.s-lsyllabus__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s-lsyllabus__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-accent-2);
}

.s-lsyllabus__eyebrow::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--dpb-accent);
}

.s-lsyllabus__title {
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.45;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-lsyllabus__lead {
	max-width: 38em;
	font-size: 18px;
	line-height: 1.95;
	color: var(--dpb-muted);
}

.s-lsyllabus__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.s-lsyllabus__chip {
	padding: 8px 14px;
	line-height: 1.5;
}

.s-lsyllabus__modules {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

.s-lsyllabus__module {
	border-radius: 22px;
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.2);
	padding: 0 24px;
	transition: border-color 0.2s;
}

.s-lsyllabus__module[open] {
	border-color: rgba(169, 155, 255, 0.3);
}

.s-lsyllabus__summary {
	cursor: pointer;
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	list-style: none;
}

.s-lsyllabus__summary::-webkit-details-marker {
	display: none;
}

.s-lsyllabus__summary::marker {
	content: "";
}

.s-lsyllabus__summary-main {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
}

.s-lsyllabus__num {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(169, 155, 255, 0.14);
	color: var(--dpb-accent-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	line-height: 1;
}

.s-lsyllabus__name {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.6;
}

.s-lsyllabus__name b {
	font-size: 18px;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-lsyllabus__name span {
	font-size: 13px;
	color: var(--dpb-muted);
}

.s-lsyllabus__toggle {
	flex: none;
	color: var(--dpb-accent);
	transition: transform 0.25s;
}

.s-lsyllabus__module[open] .s-lsyllabus__toggle {
	transform: rotate(45deg);
}

.s-lsyllabus__lessons {
	list-style: none;
	margin: 0;
	padding: 0 0 8px;
}

.s-lsyllabus__lesson {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid rgba(169, 155, 255, 0.16);
}

.s-lsyllabus__lesson-label {
	flex: none;
	min-width: 72px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-accent-2);
}

.s-lsyllabus__lesson-name {
	font-size: 16px;
	line-height: 1.8;
	color: var(--dpb-text-nav);
}

@media (max-width: 720px) {
	.s-lsyllabus__inner {
		gap: 22px;
	}

	.s-lsyllabus__title {
		font-size: 28px;
	}

	.s-lsyllabus__title br,
	.s-lsyllabus__lead br {
		display: none;
	}

	.s-lsyllabus__lead {
		font-size: 16px;
	}

	.s-lsyllabus__module {
		padding: 0 16px;
	}

	.s-lsyllabus__name b {
		font-size: 16px;
	}
}

/* Motion: head, chips and modules reveal in sequence (data-reveal / data-stagger);
   modules get the cursor spotlight and a brighter border on hover; a module opens
   smoothly (details[data-lkit-acc], landing-offer/view.js), the plus turns, and
   its lessons cascade in. */
.s-lsyllabus__toggle {
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.s-lsyllabus__module[open].is-closing .s-lsyllabus__toggle {
	transform: none;
}

.s-lsyllabus__num {
	transition: background-color 0.35s, color 0.35s;
}

@media (hover: hover) {
	.s-lsyllabus__module:hover .s-lsyllabus__num {
		background: rgba(169, 155, 255, 0.24);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.dpx .s-lsyllabus__module.is-opening .s-lsyllabus__lesson {
		animation: s-lsyllabus-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
		animation-delay: calc(var(--j, 0) * 45ms + 80ms);
	}
}

@keyframes s-lsyllabus-in {
	from {
		opacity: 0;
		translate: 0 8px;
	}
}

/* ---- blocks/landing-system/style.css ---- */
/* Landing system — LandingPage.dc.html / M-LandingPage.dc.html (three pillars) */

.s-lsystem {
	padding-block: clamp(56px, 7vw, 100px);
}

.s-lsystem__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.s-lsystem__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s-lsystem__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-accent-2);
}

.s-lsystem__eyebrow::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--dpb-accent);
}

.s-lsystem__title {
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.45;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-lsystem__lead {
	max-width: 38em;
	font-size: 18px;
	line-height: 1.95;
	color: var(--dpb-muted);
}

.s-lsystem__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.s-lsystem__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 14px 14px 26px;
	border-radius: var(--dpb-r-card);
	background: #141033;
	border: 1px solid rgba(169, 155, 255, 0.2);
}

.s-lsystem__art {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 140px;
	border-radius: 20px;
	background: #241D5E;
	overflow: hidden;
}

.s-lsystem__art--target {
	background: #2A1E5C;
}

.s-lsystem__art--group {
	background: #1F2A66;
}

.s-lsystem__svg {
	display: block;
	width: 190px;
	height: 118px;
}

.s-lsystem__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s-lsystem__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 10px;
}

.s-lsystem__label {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-pink-2);
}

.s-lsystem__body h3 {
	font-size: 21px;
	font-weight: 900;
	line-height: 1.5;
	color: var(--dpb-text);
}

.s-lsystem__body p {
	font-size: 15px;
	line-height: 1.95;
	color: var(--dpb-muted);
}

.s-lsystem__goal {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px 28px;
	border-radius: 24px;
	background: var(--dpb-surface-2);
	border: 1px solid rgba(169, 155, 255, 0.3);
}

.s-lsystem__goal-icon {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 16px;
	background: rgba(169, 155, 255, 0.16);
	color: var(--dpb-accent-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.s-lsystem__goal p {
	font-size: 19px;
	line-height: 1.9;
	font-weight: 700;
	color: var(--dpb-text);
}

@media (max-width: 720px) {
	.s-lsystem__inner {
		gap: 24px;
	}

	.s-lsystem__title {
		font-size: 28px;
	}

	.s-lsystem__title br,
	.s-lsystem__lead br {
		display: none;
	}

	.s-lsystem__lead {
		font-size: 16px;
	}

	.s-lsystem__cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.s-lsystem__goal {
		padding: 18px;
	}

	.s-lsystem__goal p {
		font-size: 16px;
	}
}

/* Motion: head rises; the three pillars follow one by one (data-stagger) with
   spotlight and lift on hover; the artwork zooms gently inside its frame. */
.s-lsystem__art > * {
	transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.s-lsystem__card:hover .s-lsystem__art > * {
		transform: scale(1.07);
	}
}

.s-lsystem__goal-icon {
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.25, 1.15);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.s-lsystem__goal:hover .s-lsystem__goal-icon {
		transform: rotate(-8deg) scale(1.06);
	}
}

/* ---- blocks/landing-testimonials/style.css ---- */
/* Landing testimonials — LandingB.dc.html / M-LandingB.dc.html («نتیجه‌ی شاگردها») */

.s-ltesti {
	padding-block: clamp(56px, 7vw, 100px);
}

.s-ltesti__inner {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.s-ltesti__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.s-ltesti__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dpb-accent-2);
}

.s-ltesti__eyebrow::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--dpb-accent);
}

.s-ltesti__title {
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.45;
	font-weight: 900;
	color: var(--dpb-text);
}

.s-ltesti__sub {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 900;
	line-height: 1.5;
	color: var(--dpb-text);
}

/* Video cards: a row on desktop, a swipeable strip on phones. */
.s-ltesti__videos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(220px, 1fr);
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: rgba(169, 155, 255, 0.3) transparent;
}

.s-ltesti__video {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 24px;
	overflow: hidden;
	background: linear-gradient(160deg, #2A2170, #4A2A6E);
	border: 1px solid rgba(169, 155, 255, 0.2);
	scroll-snap-align: start;
}

.s-ltesti__video--2 {
	background: linear-gradient(160deg, #1F2A66, #2A2170);
}

.s-ltesti__video--3 {
	background: linear-gradient(160deg, #4A2A6E, #2C2260);
}

.s-ltesti__video--4 {
	background: linear-gradient(160deg, #2C2260, #1F2A66);
}

.s-ltesti__cover {
	position: absolute;
	inset: 0;
	opacity: 0.55;
}

.s-ltesti__cover--image {
	opacity: 1;
}

.s-ltesti__svg,
.s-ltesti__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s-ltesti__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(13, 10, 34, 0.85), rgba(13, 10, 34, 0) 55%);
}

.s-ltesti__play {
	position: absolute;
	top: 42%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 58px;
	height: 58px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dpb-pink);
	color: var(--dpb-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 8px rgba(255, 111, 165, 0.2);
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.s-ltesti__play:hover {
	color: var(--dpb-bg);
	transform: translate(-50%, -50%) scale(1.06);
	box-shadow: 0 0 0 11px rgba(255, 111, 165, 0.22);
}

span.s-ltesti__play {
	cursor: default;
}

.s-ltesti__caption {
	position: absolute;
	right: 14px;
	left: 14px;
	bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.6;
}

.s-ltesti__caption b {
	font-size: 16px;
	color: var(--dpb-text);
}

.s-ltesti__caption span {
	font-size: 13px;
	line-height: 1.7;
	color: var(--dpb-text-nav);
}

.s-ltesti__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
	object-fit: contain;
}

.s-ltesti__video.is-playing .s-ltesti__shade,
.s-ltesti__video.is-playing .s-ltesti__play,
.s-ltesti__video.is-playing .s-ltesti__caption {
	display: none;
}

/* Written testimonials */
.s-ltesti__quotes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.s-ltesti__quote {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	border-radius: 22px;
	background: #211B55;
	border: 1px solid rgba(169, 155, 255, 0.14);
}

.s-ltesti__who {
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1.6;
}

.s-ltesti__avatar {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	overflow: hidden;
	background: #2E2670;
	color: var(--dpb-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.s-ltesti__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s-ltesti__who b {
	display: block;
	font-size: 14px;
	color: var(--dpb-text);
}

.s-ltesti__who span {
	font-size: 12px;
	color: var(--dpb-muted-2);
}

.s-ltesti__bubble {
	padding: 12px 14px;
	border-radius: 6px 18px 18px 18px;
	background: #2E2670;
	font-size: 15px;
	line-height: 1.95;
	color: var(--dpb-text-nav);
}

@media (min-width: 1100px) {
	.s-ltesti__quotes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.s-ltesti__inner {
		gap: 24px;
	}

	.s-ltesti__title {
		font-size: 28px;
	}

	.s-ltesti__title br {
		display: none;
	}

	.s-ltesti__videos {
		grid-auto-columns: 240px;
		gap: 12px;
		padding-bottom: 8px;
	}

	.s-ltesti__quotes {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

/* Motion ------------------------------------------------------------------
   Head and sub-titles rise; video cards and written stories reveal one after
   another (data-stagger). The video strip is a scroll container, so its cards
   reveal with a slight scale instead of rising (nothing pokes out of the strip
   while they come in); on hover the cover drifts closer and the play button
   glows. Written stories get the cursor spotlight and lift.
   (The desktop marquee of home-stories was left out on purpose: it would
   replace this approved grid with moving rows.) */

.s-ltesti__cover {
	transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease;
}

.s-ltesti__play {
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.25, 1.15), box-shadow 0.35s;
}

@media (hover: hover) {
	.s-ltesti__video:hover .s-ltesti__cover:not(.s-ltesti__cover--image) {
		opacity: 0.75;
	}

	.s-ltesti__video:hover .s-ltesti__play {
		box-shadow: 0 0 0 11px rgba(255, 111, 165, 0.22), 0 16px 40px rgba(255, 111, 165, 0.4);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.js .dpx .s-ltesti__videos[data-stagger]:not(.in) > * {
		transform: scale(0.95);
	}

	.s-ltesti__video:hover .s-ltesti__cover {
		transform: scale(1.06);
	}

	.s-ltesti__video:hover .s-ltesti__play {
		transform: translate(-50%, -50%) scale(1.08);
	}
}

.s-ltesti__avatar {
	transition: box-shadow 0.35s;
}

@media (hover: hover) {
	.s-ltesti__quote:hover .s-ltesti__avatar {
		box-shadow: 0 0 0 3px rgba(169, 155, 255, 0.35);
	}
}

/* ---- blocks/landing-timeline/style.css ---- */
/* Landing «از امروز تا روز ۳۰» — vertical timeline with a mascot pose per station. */

.s-tl__inner { display: flex; flex-direction: column; gap: 40px; }
.s-tl .dpb-sec-title .hl { color: var(--dpb-accent); }
.s-tl__list { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 820px; display: grid; gap: 14px; position: relative; }
.s-tl__list::before { content: ""; position: absolute; top: 18px; bottom: 18px; inset-inline-start: 17px; width: 2px; background: linear-gradient(to bottom, var(--dpb-primary), rgba(106, 87, 255, 0.15)); border-radius: 2px; }
.s-tl__step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; align-items: start; position: relative; }
.s-tl__dot { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #0D0A22; border: 2px solid var(--dpb-primary); color: #fff; margin-top: 18px; position: relative; z-index: 1; }
.s-tl__dot:empty::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dpb-accent); }
.s-tl__step--gold .s-tl__dot { background: #F2C14E; border-color: #F2C14E; color: #2a1f00; }
.s-tl__step--done .s-tl__dot { background: #7FE0B5; border-color: #7FE0B5; color: #0b2a1f; }
.s-tl__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 22px; border-radius: 22px; background: #141033; border: 1px solid rgba(169, 155, 255, 0.2); }
.s-tl__step--gold .s-tl__card { background: #241c07; border-color: rgba(242, 193, 78, 0.45); }
.s-tl__step--done .s-tl__card { background: linear-gradient(155deg, #1a3a30, #141033 75%); border-color: rgba(127, 224, 181, 0.4); }
.s-tl__txt { display: grid; gap: 4px; }
.s-tl__when { font-size: 13px; font-weight: 800; color: var(--dpb-accent-2); }
.s-tl__step--gold .s-tl__when { color: #F2C14E; }
.s-tl__step--done .s-tl__when { color: #7FE0B5; }
.s-tl__title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.6; color: var(--dpb-text); }
.s-tl__text { margin: 0; font-size: 16px; line-height: 1.9; color: var(--dpb-muted); }
.s-tl__pose { width: 88px; height: 88px; object-fit: contain; }
.s-tl__btns { justify-content: center; }

@media (max-width: 720px) {
	.s-tl__card { padding: 14px 16px; gap: 10px; }
	.s-tl__pose { width: 64px; height: 64px; }
	.s-tl__title { font-size: 17px; }
	.s-tl__text { font-size: 15px; }
}

/* ---- blocks/tools-hub/style.css ---- */
/* «ابزارهای دوپابیت» — canvas «بخش ابزارهای رایگان»، نسخه‌ی نهایی (2026-10-19).
   Sina's card with the free sign-in, three big free tools (real app screen + mascot), a small row of
   the tools course students get. */

.s-tools__inner { display: flex; flex-direction: column; gap: 28px; }
.s-tools .dpb-sec-title .hl { color: var(--dpb-accent); }
.s-tools ul { list-style: none; margin: 0; padding: 0; }

/* Sina's card */
.s-tools__pass { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 28px; align-items: center; margin-top: 30px; padding: 26px 32px; border-radius: 28px; background: radial-gradient(80% 90% at 50% 0%, rgba(106, 87, 255, .42), transparent 70%), #1B1547; border: 1px solid rgba(169, 155, 255, .45); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.s-tools__sina { display: block; height: 200px; width: auto; max-width: none; margin: -64px 0 -26px; align-self: end; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.s-tools__pass-head { display: flex; flex-direction: column; gap: 8px; }
.s-tools__pill { align-self: flex-start; display: inline-flex; padding: 4px 12px; border-radius: 999px; background: var(--dpb-primary); color: #fff; font-size: 13px; font-weight: 800; }
.s-tools__pass-head b { font-size: 24px; font-weight: 900; line-height: 1.45; color: #fff; }
.s-tools__go { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.s-tools__go small { font-size: 12px; color: var(--dpb-muted-2); }

/* Free tools */
.s-tools__big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s-tools__bcard { display: flex; flex-direction: column; height: 100%; border-radius: 26px; overflow: hidden; text-decoration: none; color: inherit; background: radial-gradient(100% 60% at 50% 0%, rgba(106, 87, 255, .4), transparent 70%), #1B1547; border: 1px solid rgba(169, 155, 255, .5); transition: transform .3s ease, box-shadow .3s ease, border-color .3s; }
.s-tools__bcard:hover { transform: translateY(-4px); border-color: rgba(169, 155, 255, .8); box-shadow: 0 24px 50px rgba(0, 0, 0, .35), 0 0 34px rgba(106, 87, 255, .25); }
.s-tools__shot { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 200px; overflow: hidden; }
.s-tools__shot::after { content: ""; position: absolute; inset: auto 0 0; height: 50px; background: linear-gradient(to bottom, rgba(27, 21, 71, 0), #1B1547); }
.s-tools__phone { display: block; box-sizing: border-box; width: 170px; height: 340px; margin: 0 0 -150px 90px; border-radius: 30px; padding: 6px; background: linear-gradient(160deg, #3A3480, #120F2B 55%); box-shadow: 0 0 0 1px rgba(199, 188, 255, .35) inset; }
.s-tools__phone img { display: block; width: 100%; height: auto; max-width: none; border-radius: 24px; }
.s-tools__who { position: absolute; z-index: 2; left: 14px; bottom: 0; height: 116px; width: auto; max-width: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); transition: transform .4s cubic-bezier(.2, .9, .25, 1.2); }
.s-tools__bcard:hover .s-tools__who { transform: translateY(-6px) rotate(-3deg); }
.s-tools__bt { display: flex; flex-direction: column; gap: 4px; padding: 14px 20px 0; }
.s-tools__bt b { font-size: 20px; font-weight: 900; color: #fff; }
.s-tools__bt span { font-size: 14px; color: var(--dpb-muted); line-height: 1.8; }
.s-tools__more { display: flex; align-items: center; justify-content: space-between; margin: auto 20px 18px; padding-top: 12px; border-top: 1px solid rgba(169, 155, 255, .16); font-size: 14px; font-weight: 800; color: var(--dpb-accent-2); }
.s-tools__bt + .s-tools__more { margin-top: 14px; }

/* Students-only row */
.s-tools__paid { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.s-tools__paid-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 800; color: var(--dpb-muted); }
.s-tools__small { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.s-tools__scard { display: flex; align-items: center; gap: 10px; height: 100%; box-sizing: border-box; padding: 10px 12px 10px 10px; border-radius: 18px; background: #1B1547; border: 1px solid #2E2766; text-decoration: none; color: inherit; transition: border-color .3s; }
.s-tools__scard:hover { border-color: rgba(169, 155, 255, .45); }
.s-tools__ic { flex: none; display: flex; width: 44px; height: 44px; box-sizing: border-box; padding: 3px; border-radius: 12px; background: #221B57; }
.s-tools__ic img { display: block; width: 100%; height: 100%; object-fit: contain; filter: saturate(.45) brightness(.85); }
.s-tools__scard b { font-size: 14px; font-weight: 800; color: #C9C4E6; }

@media (max-width: 999px) {
	.s-tools__small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.s-tools__pass { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-top: 64px; padding: 20px 14px 18px; }
	.s-tools__sina { position: absolute; right: 2px; top: -70px; height: 158px; margin: 0; }
	.s-tools__pass-head { padding-inline-start: 90px; min-height: 70px; justify-content: flex-end; }
	.s-tools__pass-head b { font-size: 18px; white-space: nowrap; letter-spacing: -.2px; }
	.s-tools__go { align-items: stretch; text-align: center; }
	.s-tools__go .btn { width: 100%; }
	.s-tools__big { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.s-tools__shot { height: 150px; }
	.s-tools__phone { width: 140px; height: 280px; margin: 0 0 -140px 90px; }
	.s-tools__who { height: 96px; }
	.s-tools__small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.s-tools__bcard, .s-tools__who { transition: none; }
}

/* ---- blocks/voices/style.css ---- */
/* «پیام‌های واقعی» — anonymous messages, masonry wall or a row of three.
   Motion: cards rise in one after another as they scroll in, light follows the cursor,
   a gentle 3D tilt on hover, the highlighted phrase is drawn in, filters re-deal the cards. */

.s-voices__inner { display: flex; flex-direction: column; gap: 32px; }
.s-voices .dpb-sec-title .hl { color: var(--dpb-accent); }

/* Filter chips with counts */
.s-voices__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.s-voices__chip { font: inherit; display: inline-flex; flex-direction: column; align-items: center; gap: 0; font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--dpb-text-2); background: transparent; border: 1px solid var(--dpb-line-dim); border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: background .25s, border-color .25s, color .25s, translate .25s cubic-bezier(.2,.8,.2,1); }
.s-voices__chip-row { display: inline-flex; align-items: center; gap: 6px; }
.s-voices__chip small { font-size: 11px; font-weight: 600; color: var(--dpb-muted); }
.s-voices__count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(169, 155, 255, 0.14); color: var(--dpb-accent-2); transition: background .25s, color .25s; }
.s-voices__chip:hover { border-color: var(--dpb-accent); translate: 0 -2px; }
.s-voices__chip[aria-pressed="true"] { background: var(--dpb-primary); border-color: var(--dpb-primary); color: #fff; box-shadow: 0 10px 26px rgba(106, 87, 255, 0.35); }
.s-voices__chip[aria-pressed="true"] small { color: rgba(255, 255, 255, 0.8); }
.s-voices__chip[aria-pressed="true"] .s-voices__count { background: rgba(255, 255, 255, 0.22); color: #fff; }
.s-voices__chip:focus-visible { outline: 2px solid var(--dpb-accent-2); outline-offset: 2px; }

/* Layouts */
.s-voices--wall .s-voices__list { columns: 3 280px; column-gap: 16px; }
.s-voices--wall .s-voices__card { break-inside: avoid; margin-bottom: 16px; }
.s-voices--row .s-voices__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }

/* Card */
.s-voices__card { --delay: 0ms; position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 10px; padding: 18px 20px; border-radius: 22px 22px 22px 8px; background: #15113A; border: 1px solid rgba(169, 155, 255, 0.2); transform-origin: 50% 100%;
	transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--delay), transform .85s cubic-bezier(.2,.7,.2,1) var(--delay), filter .7s ease var(--delay), translate .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s, background-color .35s; }
.s-voices__card[hidden] { display: none; }
.s-voices__card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(169, 155, 255, 0.18), transparent 70%); }
.s-voices__card::after { content: "«"; position: absolute; top: -18px; left: 10px; z-index: -1; font-size: 120px; line-height: 1; font-weight: 900; color: var(--dpb-accent); opacity: .07; transition: opacity .4s, translate .5s cubic-bezier(.2,.8,.2,1), scale .5s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.s-voices__card--big { background: linear-gradient(160deg, #2a1f73, #1B1547); border-color: #4B3BD0; }
.s-voices__card--big::after { opacity: .14; }
.s-voices__card--big .s-voices__text { font-size: 20px; }
.s-voices__card:hover { translate: 0 -6px; border-color: rgba(169, 155, 255, 0.55); box-shadow: 0 24px 50px rgba(106, 87, 255, 0.25); }
.s-voices__card:hover::before { opacity: 1; }
.s-voices__card:hover::after { opacity: .16; translate: 4px 4px; scale: 1.08; }

.s-voices__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.6; color: var(--dpb-muted); }
.s-voices__pf { flex: none; width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; transition: rotate .4s cubic-bezier(.2,.8,.2,1); }
.s-voices__card:hover .s-voices__pf { rotate: -10deg; }
.s-voices__pf--tg { background: #173a52; color: #8fd0ff; }
.s-voices__pf--ig { background: #3A1F3A; color: #FFB3CF; }
.s-voices__pf--msg { background: #2C2470; color: #C7BCFF; }
.s-voices__text { margin: 0; font-size: 17px; line-height: 2; color: var(--dpb-text); }
.s-voices__text mark { color: inherit; padding: 0 2px; background: linear-gradient(rgba(255, 111, 165, 0.42), rgba(255, 111, 165, 0.42)) no-repeat 100% 88% / 100% 40%; transition: background-size .9s cubic-bezier(.2,.7,.2,1) calc(var(--delay) + 350ms); }
.s-voices__card:hover mark { background-size: 100% 100%; transition-delay: 0ms; transition-duration: .4s; }
.s-voices__proof summary { cursor: pointer; font-size: 13px; color: var(--dpb-accent-2); width: fit-content; }
.s-voices__proof img { margin-top: 10px; width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(169, 155, 255, 0.2); }

/* Scroll-in (JS adds .is-in per card; without JS everything simply shows) */
.js .s-voices__card { opacity: 0; transform: translate3d(0, 34px, 0) scale(.95) rotate(var(--rot, 0deg)); filter: blur(6px); }
.js .s-voices__card:nth-child(3n+1) { --rot: -1.2deg; }
.js .s-voices__card:nth-child(3n+2) { --rot: 1deg; }
.js .s-voices__card.is-in { opacity: 1; transform: none; filter: none; }
.js .s-voices__card:not(.is-in) mark { background-size: 0% 40%; }

/* Re-deal after a filter click */
.s-voices__card.is-pop { animation: s-voices-pop .55s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: var(--pop, 0ms); }
@keyframes s-voices-pop { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.94); } }

/* «پیام‌های بیشتر» */
.s-voices__more-wrap { display: none; justify-content: center; }
@media (min-width: 721px) { .s-voices--more-d.has-more:not(.is-open) .s-voices__more-wrap { display: flex; } }
@media (max-width: 720px) { .s-voices--more-m.has-more:not(.is-open) .s-voices__more-wrap { display: flex; } }
.s-voices__more { gap: 8px; }
.s-voices__more::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -2px; }
.s-voices__note { text-align: center; }
@media (min-width: 721px) {
	.s-voices.has-more:not(.is-open) .s-voices__card.is-more-d { display: none; }
}

@media (max-width: 900px) {
	.s-voices--row .s-voices__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
	.s-voices__filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--dpb-gutter) * -1); padding-inline: var(--dpb-gutter); }
	.s-voices__filters::-webkit-scrollbar { display: none; }
	.s-voices__chip { flex: 0 0 auto; }
	.s-voices.has-more:not(.is-open) .s-voices__card.is-more-m { display: none; }
	.s-voices__text { font-size: 16px; }
	.s-voices__card--big .s-voices__text { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.js .s-voices__card, .js .s-voices__card.is-in { opacity: 1; transform: none; filter: none; transition: border-color .2s, box-shadow .2s; }
	.js .s-voices__card:not(.is-in) mark { background-size: 100% 40%; }
	.s-voices__card:hover { translate: none; }
	.s-voices__card.is-pop { animation: none; }
}
/* After the entrance the tilt follows the cursor quickly. */
.s-voices__card.is-settled { transition: opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1), filter .3s, translate .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s, background-color .35s; }