/* =============================================================
   STORY — فال کف دست
   -------------------------------------------------------------
   The palm reading landing page. Loaded only on the palm service
   (functions.php → story-{layout}.css), on top of skin-palm.css.

   Colour comes from the skin's tokens. The four line colours are
   the report's own palette, so the lines on the hand and the
   report below them read as one object.

   Motion
     Initial hidden states live under `.ps-js` only. Without
     JavaScript — or for a crawler — every word and image is
     simply there. The script adds the class, then plays.

     One entrance curve (--fm-ease-out) everywhere. Only transform,
     opacity, clip-path and stroke-dashoffset move.
   ============================================================= */

.ps {
	--ps-heart: #F0ABFC;
	--ps-head:  #67E8F9;
	--ps-life:  #A78BFA;
	--ps-fate:  #FBBF24;

	--ps-ease: var(--fm-ease-out);
	--ps-rise: 900ms;

	color: var(--fm-text-body);
	overflow-x: clip;
}

/* -------------------------------------------------------------
   Shared furniture
   ------------------------------------------------------------- */

.ps-head { max-inline-size: 42rem; margin-block-end: var(--fm-space-10); }
.ps-head--center { margin-inline: auto; text-align: center; }

.ps-head__title {
	margin: 0 0 var(--fm-space-3);
	color: var(--fm-text-primary);
	font-size: var(--fm-text-3xl);
	line-height: var(--fm-lh-3xl);
	font-weight: var(--fm-weight-display);
	text-wrap: balance;
}

.ps-head__lead {
	margin: 0;
	color: var(--fm-text-muted);
	font-size: var(--fm-text-md);
	line-height: var(--fm-lh-md);
}

.ps-link {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--fm-control-md);
	color: var(--fm-text-accent);
	font-weight: var(--fm-weight-medium);
	text-decoration: underline;
	text-decoration-color: var(--fm-border-accent);
	text-underline-offset: .45em;
	transition: text-decoration-color var(--fm-dur-base) var(--ps-ease);
}
.ps-link:hover { text-decoration-color: currentColor; }

.ps-micro {
	margin: var(--fm-space-3) 0 0;
	color: var(--fm-text-muted);
	font-size: var(--fm-text-xs);
}

.ps-facts .ps-num { font-feature-settings: "tnum" 1; }

/* -------------------------------------------------------------
   Reveal
   ------------------------------------------------------------- */

.ps-js .ps-rv {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition:
		opacity var(--ps-rise) var(--ps-ease),
		transform var(--ps-rise) var(--ps-ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.ps-js .ps-rv.in { opacity: 1; transform: none; }

/* =============================================================
   1 · HERO
   ============================================================= */

.ps-hero {
	position: relative;
	/* The nav is sticky, not overlaid: no need to clear it. */
	padding-block: var(--fm-space-10) var(--fm-space-16);
	background: var(--fm-gradient-deep);
	isolation: isolate;
}

/* A slow bloom behind the hand. Transform only — no blur animates. */
.ps-hero::before {
	content: "";
	position: absolute;
	inset-block-start: 8%;
	inset-inline-end: 4%;
	inline-size: min(70vw, 720px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(157, 36, 114, .38), transparent 66%);
	z-index: -1;
	animation: ps-breathe 14s var(--fm-ease-inout) infinite alternate;
	pointer-events: none;
}
@keyframes ps-breathe { to { transform: translate3d(-4%, 6%, 0) scale(1.12); } }

.ps-hero__grid {
	display: grid;
	gap: var(--fm-space-12);
	align-items: center;
}
@media (min-width: 960px) {
	.ps-hero__grid { grid-template-columns: 1.05fr .95fr; }
}

.ps-hero__title {
	margin: var(--fm-space-2) 0 var(--fm-space-5);
	color: var(--fm-text-primary);
	font-size: clamp(calc(27px * var(--fm-scale)), 4.1vw, calc(46px * var(--fm-scale)));
	line-height: 1.22;
	font-weight: 800;
	letter-spacing: -.01em;
	text-wrap: balance;
}
.ps-hero__title em {
	font-style: normal;
	white-space: nowrap;   /* «خودِ دستت» is one idea; never split it */
	background: linear-gradient(100deg, var(--ps-heart), var(--ps-life) 55%, var(--ps-head));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Each title line rises out of its own mask. */
.ps-line-mask { display: block; overflow: clip; padding-block-end: .08em; }
.ps-line-mask > .ps-rise { display: block; }

.ps-hero__lead {
	margin: 0 0 var(--fm-space-8);
	max-inline-size: 36rem;
	color: var(--fm-text-body);
	font-size: var(--fm-text-md);
	line-height: 2;
}

.ps-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fm-space-3) var(--fm-space-6);
}

.ps-cta { box-shadow: 0 18px 48px -18px rgba(157, 36, 114, .9); }

.ps-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fm-space-2) var(--fm-space-5);
	margin: var(--fm-space-8) 0 0;
	padding: 0;
	list-style: none;
	color: var(--fm-text-muted);
	font-size: var(--fm-text-sm);
}
.ps-facts li { display: inline-flex; align-items: center; gap: var(--fm-space-2); }
.ps-facts li + li::before {
	content: "";
	inline-size: 4px;
	block-size: 4px;
	margin-inline-end: var(--fm-space-3);
	border-radius: 50%;
	background: var(--fm-border-strong);
}
.ps-facts b { color: var(--fm-text-primary); font-weight: var(--fm-weight-bold); }

.ps-js .ps-rise {
	opacity: 0;
	transform: translate3d(0, 105%, 0);
}
.ps-hero.is-play .ps-rise {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--ps-rise) var(--ps-ease),
		transform 1100ms var(--ps-ease);
	transition-delay: calc(var(--i, 0) * 110ms);
}

/* ---- The stage: a real hand, and the quiz it replaces ---- */

.ps-hero__stage {
	position: relative;
	margin-block-end: var(--fm-space-10);
	/* Fit the whole hand in the first screen: width follows the
	   height left after the nav, at the drawing's own 400:520 ratio. */
	max-inline-size: min(420px, calc((100svh - 150px) * .77));
	margin-inline: auto;
	inline-size: 100%;
}

.ps-hand {
	position: relative;
	margin: 0;
	aspect-ratio: 400 / 520;
}

/* -------------------------------------------------------------
   The sketch (template-parts/palm-hand.php)
   An illustration, never a photograph. It draws itself like a
   pencil: outline, a fainter second pass, creases, then the four
   coloured lines. Pencil strokes stay the same weight at any size
   (non-scaling); the coloured lines scale with the drawing.
   ------------------------------------------------------------- */

.ps-sketch { display: block; inline-size: 100%; block-size: auto; overflow: visible; }

.ps-sk-fill { stroke: none; }
.ps-sk-line,
.ps-sk-echo {
	fill: none;
	stroke: #F3B6DC;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	vector-effect: non-scaling-stroke;
}
.ps-sk-line { stroke-width: 2; }
.ps-sk-echo { stroke-width: 1; stroke-opacity: .32; }

.ps-sk-detail path {
	fill: none;
	stroke: #F3B6DC;
	stroke-opacity: .34;
	stroke-width: 1.2;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}
.ps-sk-spark { fill: var(--ps-heart); opacity: .7; }

.ps-trace {
	fill: none;
	stroke-width: 6;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	filter: drop-shadow(0 0 7px currentColor);
}
.ps-trace--heart { color: var(--ps-heart); stroke: var(--ps-heart); }
.ps-trace--head  { color: var(--ps-head);  stroke: var(--ps-head); }
.ps-trace--life  { color: var(--ps-life);  stroke: var(--ps-life); }
.ps-trace--fate  { color: var(--ps-fate);  stroke: var(--ps-fate); }

/* Waiting state — only with JS, so a crawler or a no-JS visitor
   always sees the finished drawing. */
.ps-js .ps-sk-line,
.ps-js .ps-sk-echo,
.ps-js .ps-trace { stroke-dashoffset: 1; }
.ps-js .ps-sk-fill,
.ps-js .ps-sk-detail,
.ps-js .ps-sk-spark { opacity: 0; }

/* The sketch plays wherever its container does: the hero on load,
   every other copy as it scrolls in. */
:is(.ps-hero.is-play, .in) .ps-sk-line {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1600ms var(--fm-ease-inout) 150ms;
}
:is(.ps-hero.is-play, .in) .ps-sk-echo {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1700ms var(--fm-ease-inout) 350ms;
}
:is(.ps-hero.is-play, .in) .ps-sk-fill {
	opacity: 1;
	transition: opacity 900ms var(--ps-ease) 700ms;
}
:is(.ps-hero.is-play, .in) .ps-sk-detail {
	opacity: 1;
	transition: opacity 900ms var(--ps-ease) 900ms;
}
:is(.ps-hero.is-play, .in) .ps-sk-spark {
	opacity: .7;
	transition: opacity 900ms var(--ps-ease) 1200ms;
}
:is(.ps-hero.is-play, .in) .ps-trace {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1300ms var(--ps-ease);
}
:is(.ps-hero.is-play, .in) .ps-trace--heart { transition-delay: 1300ms; }
:is(.ps-hero.is-play, .in) .ps-trace--head  { transition-delay: 1550ms; }
:is(.ps-hero.is-play, .in) .ps-trace--life  { transition-delay: 1800ms; }
:is(.ps-hero.is-play, .in) .ps-trace--fate  { transition-delay: 2050ms; }

.ps-tag {
	/* Physical, not logical: these points sit on a photograph, and a
	   photograph does not mirror in RTL. */
	position: absolute;
	top: var(--y);
	left: var(--x);
	transform: translate(-50%, -50%);
	padding: 4px 10px;
	border-radius: var(--fm-radius-full);
	background: rgba(12, 6, 14, .78);
	border: 1px solid currentColor;
	font-size: var(--fm-text-2xs);
	font-weight: var(--fm-weight-medium);
	white-space: nowrap;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.ps-tag--heart { color: var(--ps-heart); }
.ps-tag--head  { color: var(--ps-head); }
.ps-tag--life  { color: var(--ps-life); }
.ps-tag--fate  { color: var(--ps-fate); }

.ps-js .ps-tag { opacity: 0; transform: translate(-50%, -30%); }
.ps-hero.is-play .ps-tag {
	opacity: 1;
	transform: translate(-50%, -50%);
	transition: opacity 600ms var(--ps-ease), transform 700ms var(--ps-ease);
}
.ps-hero.is-play .ps-tag--heart { transition-delay: 2100ms; }
.ps-hero.is-play .ps-tag--head  { transition-delay: 2350ms; }
.ps-hero.is-play .ps-tag--life  { transition-delay: 2600ms; }
.ps-hero.is-play .ps-tag--fate  { transition-delay: 2850ms; }

.ps-chip {
	/* Hangs below the palm, never over it — the lower palm carries the
	   life and fate lines, the two the eye should land on last. */
	position: absolute;
	inset-inline: 14%;
	inset-block-end: -7%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var(--fm-space-3) var(--fm-space-5);
	border-radius: var(--fm-radius-lg);
	background: rgba(12, 6, 14, .82);
	border: 1px solid var(--fm-border-accent);
	box-shadow: 0 0 0 1px rgba(240, 171, 252, .08), 0 20px 50px -20px rgba(240, 171, 252, .55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	text-align: center;
}
.ps-chip__k { color: var(--fm-text-muted); font-size: var(--fm-text-2xs); }
.ps-chip__v {
	min-block-size: 1.6em;
	color: var(--fm-text-primary);
	font-size: var(--fm-text-lg);
	font-weight: 800;
}
.ps-chip__v.is-typing::after {
	content: "";
	display: inline-block;
	inline-size: 2px;
	block-size: 1em;
	margin-inline-start: 3px;
	vertical-align: -.12em;
	background: var(--ps-heart);
	animation: ps-caret .8s steps(1) infinite;
}
@keyframes ps-caret { 50% { opacity: 0; } }

.ps-js .ps-chip { opacity: 0; transform: translate3d(0, 16px, 0) scale(.96); }
.ps-hero.is-play .ps-chip {
	opacity: 1;
	transform: none;
	transition: opacity 700ms var(--ps-ease) 3000ms, transform 900ms var(--ps-ease) 3000ms;
}

/* The quiz everyone else runs. It arrives first — familiar — then
   greys out and falls back once the real hand has been read. */
.ps-quiz {
	position: absolute;
	inset-block-start: 4%;
	inset-inline-end: -6%;
	inline-size: 46%;
	min-inline-size: 150px;
	padding: var(--fm-space-3);
	border-radius: var(--fm-radius-md);
	background: #F4F1F6;
	color: #3B3342;
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
	transform: rotate(4deg);
	transform-origin: 80% 0;
	transition:
		opacity 900ms var(--ps-ease),
		transform 1100ms var(--ps-ease),
		filter 900ms var(--ps-ease);
}
.ps-quiz p { margin: 0; }
.ps-quiz__tag { font-size: 10px; font-weight: 700; color: #8C8494; }
.ps-quiz__q { margin-block: 4px 8px !important; font-size: 12px; font-weight: 700; line-height: 1.5; }
.ps-quiz__opts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ps-quiz__opts li {
	display: grid;
	justify-items: center;
	gap: 3px;
	padding: 4px 2px;
	border-radius: 6px;
	background: #E7E2EB;
}
.ps-quiz__opts svg { inline-size: 100%; max-inline-size: 30px; }
.ps-quiz__opts i {
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	border: 1.5px solid #A79FAE;
}
.ps-mini-palm { fill: #D8D1DE; }
.ps-mini-line { fill: none; stroke: #6B6272; stroke-width: 1.4; stroke-linecap: round; }
.ps-quiz__foot { margin-block-start: 8px !important; font-size: 10.5px; color: #6B6272; }

/* Struck through by a hand-drawn line, then sent to the back. */
.ps-quiz::after {
	content: "";
	position: absolute;
	inset-inline: 10%;
	inset-block-start: 52%;
	block-size: 3px;
	border-radius: 3px;
	background: var(--ps-heart);
	transform: rotate(-8deg) scaleX(0);
	transform-origin: right;
	transition: transform 600ms var(--ps-ease);
}

.ps-js .ps-quiz { opacity: 0; transform: rotate(10deg) translate3d(0, 20px, 0); }
.ps-hero.is-play .ps-quiz {
	opacity: 1;
	transform: rotate(4deg);
	transition-delay: 300ms;
}
.ps-hero.is-read .ps-quiz {
	opacity: .5;
	filter: grayscale(1);
	transform: rotate(-3deg) translate3d(-14%, -6%, 0) scale(.86);
	transition-delay: 0ms;
}
.ps-hero.is-read .ps-quiz::after { transform: rotate(-8deg) scaleX(1); }

/* On a phone the hook has to be in the first screen, so the copy
   column dissolves and its parts interleave with the hand: headline,
   then the hand, then the argument and the button. */
@media (max-width: 959px) {
	.ps-hero { padding-block: var(--fm-space-6) var(--fm-space-12); }
	.ps-hero__grid { gap: var(--fm-space-5); }
	.ps-hero__copy { display: contents; }

	.ps-hero__copy > .fm-section__eyebrow { order: 1; margin: 0; }
	.ps-hero__title   { order: 2; margin: 0; }
	.ps-hero__stage   { order: 3; }
	.ps-hero__lead    { order: 4; margin: 0; }
	.ps-hero__actions { order: 5; }
	.ps-facts         { order: 6; margin: 0; }

	.ps-hero__stage {
		max-inline-size: min(290px, 74vw);
		margin-block-end: var(--fm-space-12);
	}
	.ps-quiz {
		inline-size: 52%;
		min-inline-size: 0;
		inset-inline-end: -16%;
		inset-block-start: 0;
		padding: 8px;
	}
	.ps-quiz__q { font-size: 10.5px; }
	.ps-quiz__foot { display: none; }

	.ps-chip { inset-inline: 10%; inset-block-end: -13%; padding: var(--fm-space-2) var(--fm-space-4); }
	.ps-chip__v { font-size: var(--fm-text-md); }
	.ps-tag { padding: 2px 8px; font-size: 10px; }
}

/* =============================================================
   2 · PROBLEM
   ============================================================= */

.ps-pains {
	display: grid;
	gap: var(--fm-space-4);
}
@media (min-width: 860px) {
	.ps-pains { grid-template-columns: repeat(3, 1fr); }
}

.ps-pain {
	position: relative;
	padding: var(--fm-space-8) var(--fm-space-6) var(--fm-space-6);
	border: 1px solid var(--fm-border);
	border-radius: var(--fm-radius-lg);
	background: var(--fm-surface-1);
}
.ps-pain h3 {
	margin: 0 0 var(--fm-space-3);
	color: var(--fm-text-primary);
	font-size: var(--fm-text-lg);
}
.ps-pain p { margin: 0; color: var(--fm-text-muted); line-height: 1.95; }
.ps-pain__no {
	position: absolute;
	inset-block-start: var(--fm-space-5);
	inset-inline-end: var(--fm-space-6);
	color: var(--fm-border-strong);
	font-size: var(--fm-text-2xl);
	font-weight: 800;
	line-height: 1;
}

.ps-pain--quote { border-color: var(--fm-border-accent); background: var(--fm-surface-2); }
.ps-pain blockquote {
	margin: 0 0 var(--fm-space-4);
	padding: var(--fm-space-4);
	border-radius: var(--fm-radius-md);
	border-inline-start: 3px solid var(--ps-heart);
	background: rgba(240, 171, 252, .06);
}
.ps-pain blockquote p { color: var(--fm-text-primary); font-weight: var(--fm-weight-medium); }
.ps-pain cite {
	display: block;
	margin-block-start: var(--fm-space-2);
	color: var(--fm-text-muted);
	font-size: var(--fm-text-xs);
	font-style: normal;
}

.ps-verdict {
	margin: var(--fm-space-12) auto 0;
	max-inline-size: 34rem;
	color: var(--fm-text-primary);
	font-size: var(--fm-text-2xl);
	line-height: var(--fm-lh-2xl);
	font-weight: 800;
	text-align: center;
	text-wrap: balance;
}

/* =============================================================
   3 · GUIDE
   ============================================================= */

.ps-guide__grid {
	display: grid;
	gap: var(--fm-space-10);
	align-items: center;
}
@media (min-width: 860px) {
	.ps-guide__grid { grid-template-columns: .8fr 1.2fr; }
}

.ps-guide__count {
	text-align: center;
	padding: var(--fm-space-10) var(--fm-space-6);
	border-radius: var(--fm-radius-xl);
	background: var(--fm-gradient-deep-soft);
	border: 1px solid var(--fm-border);
}
.ps-guide__big { display: inline-flex; align-items: baseline; gap: 4px; }
.ps-guide__big > span,
.ps-guide__big b {
	font-size: clamp(calc(56px * var(--fm-scale)), 9vw, calc(88px * var(--fm-scale)));
	font-weight: 800;
	line-height: 1;
	background: linear-gradient(120deg, var(--ps-heart), var(--ps-life));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ps-guide__count p { margin: var(--fm-space-4) 0 0; color: var(--fm-text-muted); }
.ps-guide__copy p { margin: 0 0 var(--fm-space-4); line-height: 2; }

/* =============================================================
   3b · AI, NOT A CHATBOT
   ============================================================= */

.ps-compare { display: grid; gap: var(--fm-space-4); }
@media (min-width: 760px) { .ps-compare { grid-template-columns: 1fr 1fr; } }

.ps-compare__col {
	padding: var(--fm-space-6);
	border-radius: var(--fm-radius-lg);
	border: 1px solid var(--fm-border);
	background: var(--fm-surface-1);
}
.ps-compare__col h3 { margin: 0 0 var(--fm-space-4); color: var(--fm-text-muted); font-size: var(--fm-text-lg); }
.ps-compare__col ul { display: grid; gap: var(--fm-space-3); margin: 0; padding: 0; list-style: none; }
.ps-compare__col li { position: relative; padding-inline-start: var(--fm-space-6); color: var(--fm-text-muted); line-height: 1.9; }
.ps-compare__col li::before {
	content: "–";
	position: absolute;
	inset-inline-start: 0;
	color: var(--fm-text-disabled);
}

.ps-compare__col--us { border-color: var(--fm-border-accent); background: var(--fm-surface-2); }
.ps-compare__col--us h3 { color: var(--fm-text-primary); }
.ps-compare__col--us li { color: var(--fm-text-body); }
.ps-compare__col--us li::before { content: "✦"; color: var(--ps-heart); font-size: .8em; }

/* =============================================================
   4 · REPORT
   ============================================================= */

.ps-doc {
	position: relative;
	max-inline-size: 1040px;
	margin-inline: auto;
	padding: var(--fm-space-8);
	border: 1px solid var(--fm-border-strong);
	border-radius: var(--fm-radius-xl);
	background:
		radial-gradient(600px 300px at 90% 0%, rgba(167, 139, 250, .14), transparent 70%),
		radial-gradient(500px 260px at 0% 100%, rgba(103, 232, 249, .07), transparent 70%),
		var(--fm-surface-1);
	box-shadow: 0 40px 100px -50px rgba(157, 36, 114, .8);
}
@media (max-width: 640px) { .ps-doc { padding: var(--fm-space-5); } }

.ps-doc__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--fm-space-5);
	padding-block-end: var(--fm-space-6);
	border-block-end: 1px solid var(--fm-border);
}
.ps-doc__who { display: flex; align-items: center; gap: var(--fm-space-5); }
.ps-doc__thumb {
	flex: none;
	inline-size: 72px;
	block-size: 72px;
	display: grid;
	place-items: center;
	padding: 8px;
	border-radius: 50%;
	border: 2px solid var(--fm-border-accent);
	background: var(--fm-surface-2);
}
.ps-doc__k { margin: 0; color: var(--fm-text-muted); font-size: var(--fm-text-xs); }
.ps-doc__arch {
	margin: 0;
	font-size: var(--fm-text-2xl);
	font-weight: 800;
	line-height: 1.4;
	background: linear-gradient(100deg, #C4B5FD, var(--ps-heart) 50%, var(--ps-head));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ps-doc__sub { margin: 0; color: var(--fm-text-muted); font-size: var(--fm-text-sm); }

.ps-rarity {
	margin: 0;
	padding: 8px 16px;
	border-radius: var(--fm-radius-full);
	color: var(--ps-heart);
	font-size: var(--fm-text-sm);
	font-weight: 700;
	border: 1px solid rgba(240, 171, 252, .4);
	background: rgba(240, 171, 252, .08);
	box-shadow: 0 0 22px rgba(240, 171, 252, .22);
}

.ps-doc__body {
	display: grid;
	gap: var(--fm-space-8);
	padding-block-start: var(--fm-space-8);
}
@media (min-width: 900px) {
	.ps-doc__body { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
}

.ps-radar { margin: 0; text-align: center; }
.ps-radar svg { inline-size: 100%; max-inline-size: 300px; overflow: visible; }
.ps-radar figcaption { margin-block-start: var(--fm-space-2); color: var(--fm-text-muted); font-size: var(--fm-text-xs); }
.ps-radar__ring { fill: none; stroke: rgba(255, 255, 255, .08); }
.ps-radar__shape {
	fill: rgba(167, 139, 250, .28);
	stroke: #C4B5FD;
	stroke-width: 2;
	stroke-linejoin: round;
	transform-origin: 150px 150px;
}
.ps-radar__label {
	fill: var(--fm-text-body);
	font-family: var(--fm-font);
	font-size: 13px;
	font-weight: 600;
	text-anchor: middle;
}
.ps-js .ps-radar__shape { transform: scale(0); opacity: 0; }
.ps-doc.in .ps-radar__shape {
	transform: none;
	opacity: 1;
	transition: transform 1400ms var(--ps-ease) 300ms, opacity 600ms var(--ps-ease) 300ms;
}

/* Tabs — a row of 44px targets that scrolls sideways on phones. */
.ps-tabs {
	display: flex;
	gap: var(--fm-space-2);
	margin-block-end: var(--fm-space-5);
	padding-block-end: var(--fm-space-2);
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}
.ps-tabs::-webkit-scrollbar { display: none; }

.ps-tab {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: var(--fm-space-2);
	min-block-size: 44px;
	padding-inline: var(--fm-space-4);
	border: 1px solid var(--fm-border);
	border-radius: var(--fm-radius-full);
	background: transparent;
	color: var(--fm-text-muted);
	font: inherit;
	font-size: var(--fm-text-sm);
	font-weight: var(--fm-weight-medium);
	cursor: pointer;
	scroll-snap-align: start;
	transition: color var(--fm-dur-base) var(--ps-ease), background var(--fm-dur-base) var(--ps-ease), border-color var(--fm-dur-base) var(--ps-ease);
}
.ps-tab:hover { color: var(--fm-text-primary); border-color: var(--fm-border-strong); }
.ps-tab[aria-selected="true"] {
	color: var(--fm-text-primary);
	border-color: transparent;
	background: var(--fm-gradient-button);
}
.ps-tab__n {
	display: inline-grid;
	place-items: center;
	inline-size: 20px;
	block-size: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	font-size: 11px;
}

/* A grid or flex child defaults to min-width:auto, so the nowrap tab row
   would push this column wider than the card. Zero lets it shrink and
   the tab row scroll inside it instead. */
.ps-chapters { min-inline-size: 0; }

.ps-panel { outline: none; }
.ps-panel h3 { margin: 0 0 var(--fm-space-3); color: var(--fm-text-primary); font-size: var(--fm-text-xl); }
.ps-panel > p { margin: 0 0 var(--fm-space-5); line-height: 2; }
.ps-panel.is-enter { animation: ps-panel 600ms var(--ps-ease); }
@keyframes ps-panel { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

.ps-bar { margin-block-end: var(--fm-space-4); }
.ps-bar__row {
	display: flex;
	justify-content: space-between;
	margin-block-end: 6px;
	font-size: var(--fm-text-sm);
}
.ps-bar__row b { color: var(--ps-head); font-weight: 700; }
.ps-bar__track {
	display: block;
	block-size: 8px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .07);
	overflow: hidden;
}
.ps-bar__track i {
	display: block;
	block-size: 100%;
	inline-size: var(--v);
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ps-life), var(--ps-head));
	box-shadow: 0 0 12px rgba(167, 139, 250, .5);
	transform-origin: right;
}
.ps-js .ps-bar__track i { transform: scaleX(0); }
.ps-doc.in .ps-panel:not([hidden]) .ps-bar__track i {
	transform: none;
	transition: transform 1300ms var(--ps-ease) 200ms;
}

.ps-note {
	margin: var(--fm-space-2) 0 0;
	padding: var(--fm-space-3) var(--fm-space-4);
	border-radius: var(--fm-radius-md);
	border: 1px solid rgba(240, 171, 252, .3);
	background: rgba(240, 171, 252, .06);
	color: var(--fm-text-body);
	font-size: var(--fm-text-sm);
	line-height: 1.9;
}
.ps-note b { color: var(--ps-heart); }
.ps-note--blind { border-color: rgba(52, 211, 153, .32); background: rgba(52, 211, 153, .06); }
.ps-note--blind b { color: #6EE7B7; }
.ps-note--time { border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .07); }
.ps-note--time b { color: var(--ps-fate); }

.ps-doc__foot {
	margin: var(--fm-space-8) 0 0;
	padding-block-start: var(--fm-space-5);
	border-block-start: 1px solid var(--fm-border);
	color: var(--fm-text-muted);
	font-size: var(--fm-text-sm);
	text-align: center;
}

/* =============================================================
   5 · TWO HANDS
   ============================================================= */

.ps-two__pair {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--fm-space-4);
	max-inline-size: 760px;
	margin-inline: auto;
}
.ps-two__hand { margin: 0; text-align: center; }
.ps-two__art { max-inline-size: 240px; margin-inline: auto; }
.ps-two__hand figcaption { display: grid; gap: 2px; margin-block-start: var(--fm-space-3); }
.ps-two__hand b { color: var(--fm-text-primary); font-size: var(--fm-text-lg); }
.ps-two__hand span { color: var(--fm-text-accent); font-size: var(--fm-text-sm); }
.ps-two__hand em { color: var(--fm-text-muted); font-size: var(--fm-text-xs); font-style: normal; }
.ps-two__plus { color: var(--fm-border-strong); font-size: var(--fm-text-3xl); font-weight: 300; }

/* =============================================================
   6 · PLAN
   ============================================================= */

.ps-steps {
	counter-reset: ps-step;
	display: grid;
	gap: var(--fm-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 860px) {
	.ps-steps { grid-template-columns: repeat(3, 1fr); }
}
.ps-step {
	counter-increment: ps-step;
	position: relative;
	padding: var(--fm-space-6);
	border-radius: var(--fm-radius-lg);
	border: 1px solid var(--fm-border);
	background: var(--fm-surface-1);
}
.ps-step::before {
	content: counter(ps-step, persian);
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	margin-block-end: var(--fm-space-4);
	border-radius: var(--fm-radius-md);
	background: var(--fm-gradient-button);
	color: var(--fm-text-on-brand);
	font-size: var(--fm-text-lg);
	font-weight: 800;
}
.ps-step h3 { margin: 0 0 var(--fm-space-2); color: var(--fm-text-primary); font-size: var(--fm-text-lg); }
.ps-step p { margin: 0; color: var(--fm-text-muted); line-height: 1.95; }

/* =============================================================
   7 · NO DOOM
   ============================================================= */

.ps-safe__grid {
	display: grid;
	gap: var(--fm-space-8);
	padding: var(--fm-space-10) var(--fm-space-8);
	border-radius: var(--fm-radius-xl);
	border: 1px solid var(--fm-border);
	background: var(--fm-surface-1);
}
@media (min-width: 860px) {
	.ps-safe__grid { grid-template-columns: 1fr 1fr; align-items: center; }
	.ps-honest { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .ps-safe__grid { padding: var(--fm-space-6) var(--fm-space-5); } }

.ps-never {
	display: grid;
	gap: var(--fm-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ps-never li {
	font-size: var(--fm-text-xl);
	font-weight: 700;
	color: var(--fm-text-muted);
}
/* The strike is drawn, not printed: it runs across each word as it arrives. */
.ps-never s { position: relative; text-decoration: none; }
.ps-never s::after {
	content: "";
	position: absolute;
	inset-inline: -4px;
	inset-block-start: 55%;
	block-size: 3px;
	border-radius: 3px;
	background: var(--ps-heart);
	transform-origin: right;
}
.ps-js .ps-never s::after { transform: scaleX(0); }
.ps-js .ps-never .in s::after {
	transform: scaleX(1);
	transition: transform 700ms var(--ps-ease);
	transition-delay: calc(var(--i, 0) * 90ms + 350ms);
}

.ps-honest {
	margin: 0;
	padding-block-start: var(--fm-space-6);
	border-block-start: 1px solid var(--fm-border);
	color: var(--fm-text-muted);
	font-size: var(--fm-text-sm);
	line-height: 2;
}

/* =============================================================
   9 · FINAL
   ============================================================= */

.ps-final__card {
	position: relative;
	overflow: hidden;
	padding: var(--fm-space-16) var(--fm-space-6);
	border-radius: var(--fm-radius-xl);
	border: 1px solid var(--fm-border-accent);
	background: var(--fm-gradient-deep);
	text-align: center;
}
.ps-final__hand { inline-size: 110px; margin: 0 auto var(--fm-space-5); }

.ps-final__title {
	margin: 0 0 var(--fm-space-3);
	color: var(--fm-text-primary);
	font-size: var(--fm-text-4xl);
	line-height: var(--fm-lh-4xl);
	font-weight: 800;
}
.ps-final__lead {
	margin: 0 auto var(--fm-space-8);
	max-inline-size: 30rem;
	color: var(--fm-text-body);
	font-size: var(--fm-text-md);
}

/* =============================================================
   Mobile CTA dock
   ============================================================= */

.ps-dock { display: none; }

@media (max-width: 959px) {
	.ps-dock {
		display: block;
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: var(--fm-z-sticky);
		padding: var(--fm-space-3) var(--fm-space-4) calc(var(--fm-space-3) + env(safe-area-inset-bottom));
		background: linear-gradient(to top, rgba(12, 6, 14, .96) 55%, transparent);
		transform: translate3d(0, 110%, 0);
		transition: transform 500ms var(--ps-ease);
		pointer-events: none;
	}
	.ps-dock.is-shown { transform: none; pointer-events: auto; }
	.ps-dock__btn { inline-size: 100%; }
}

/* =============================================================
   Reduced motion — reduce, never remove.
   Loops stop; long travel goes. Fades and the one-shot line
   drawing stay, faster — they carry meaning, not decoration.
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
	.ps-hero::before,
	.ps-chip__v.is-typing::after { animation: none; }

	.ps-js .ps-rv,
	.ps-js .ps-rise { transform: none; }
	.ps-js .ps-rv { transition: opacity 500ms ease; }
	.ps-hero.is-play .ps-rise { transition: opacity 500ms ease; }

	:is(.ps-hero.is-play, .in) :is(.ps-trace, .ps-sk-line, .ps-sk-echo) { transition-duration: 700ms; }

	.ps-js .ps-quiz,
	.ps-hero.is-play .ps-quiz,
	.ps-hero.is-read .ps-quiz { transform: rotate(4deg); }

	.ps-js .ps-radar__shape { transform: none; }
}