/**
 * Homepage v2 — "eucalyptus primary" (2026-09-10, owner-approved; decisions.md).
 *
 * Scoped under `body.home` and enqueued only on is_front_page(), so nothing here reaches another
 * page. Built on tokens.css and the shared chrome vocabulary in chrome.css (.iz-btn, .iz-link and
 * the --iz-* motion tokens); the offer cards have their own file, offer-card.css.
 *
 * Colour: eucalyptus is the action colour; the tinted grounds are the vault's Surface Blue, not the
 * green (owner's note on the prototype); the tests band is its own warm light ground (2026-09-26
 * redesign, see the section below) — colour is still spent only on full-width bands and the one
 * thing a page wants noticed. Coral is spent on the signature underline and a few seats left on a
 * workshop.
 *
 * Motion, by the Emil Kowalski rules the prototype was reviewed against:
 *   - the hero enters through @starting-style from a visible resting state: copy staggered
 *     40–420ms, the static hero illustration's frame 900ms, the sprout's stem drawing over 1.4s
 *     and its leaves unfolding;
 *   - on a fine pointer the sprout leans toward the cursor on a spring (home.js);
 *   - sections below the first viewport rise 16px and fade over 620ms, 60ms apart — home.js adds
 *     `.will-reveal` only to what starts off-screen, so the first frame is always complete;
 *   - constant motion (light) is linear or a slow ease and pauses on hover;
 *   - reduced motion: tokens.css flattens every transition; the rules at the end also stop the
 *     loops and drop the transforms.
 *
 *   - the situation chips run as one slow linear ribbon (28px a second) that rests under a
 *     pointer, focus or a finger, and can be dragged with momentum (home.js);
 *   - the tests band plays its three steps once, in order, when they scroll into view — transform,
 *     opacity and clip-path only, 30–80ms between neighbours; it is explanatory, so it runs longer
 *     than a UI transition is allowed to.
 *
 * The separate topic ribbon that used to sit under the hero is gone (2026-09-26, decisions.md) —
 * every one of its links duplicated the hero's own situation chips or the "four doors" cards a
 * few hundred pixels either side of it. The 2026-09-29 ribbon is those chips themselves, moving:
 * one set of links, not a second one.
 *
 * Spacing (2026-09-29): every margin, padding and gap is a role token or a `--space-N` step from
 * design-system.md "The spacing standard", every text style one `font: var(--text-*)` shorthand.
 * What is still a literal is geometry the standard exempts (rule 5) — icon and node sizes, control
 * heights, borders, optical offsets of decoration — and the icon sizes are named once, below.
 */

body.home {
	overflow-x: clip;

	/* One rhythm for the whole page. Every band used `clamp(64px, 8vw, 104px)` on both edges, so
	   at 1280 two neighbours put 102.4 + 102.4 = 205px of nothing between them — more than a
	   third of a viewport, on a page with nine peer sections. 88px is the deliberate figure: it
	   and the 64px floor are both on the 8pt grid, and 7vw puts the page exactly on one of them
	   at each of the three widths this design system is verified at (390 → 64, 768 → 64,
	   1280 → 88). The seam rule below spends it once rather than twice where nothing else marks
	   the boundary. */
	--home-gap: var(--space-band);

	/* Icon sizes — exempt from the type ladder (spacing standard, rule 5): a glyph is drawn, not
	   read. Named once here because tokens.css has no icon-size token yet. */
	--home-icon: 17px;      /* beside a label; `.iz-link .fa-solid` in chrome.css is the same 17 */
	--home-icon-tile: 22px; /* inside a 48px `.iz-tile`, the kit's own figure */
	--home-leaf: 22px;      /* the leaf beside every section title */
	--home-icon-node: 30px; /* a 24px glyph in a 56px step node: icons.css draws a glyph at .8em */
}
body.home .site-content { overflow-x: clip; }

body.home h1,
body.home h2,
body.home h3 { color: var(--color-heading); font-family: var(--font-display); text-wrap: balance; margin: 0; }
body.home .home-section p,
body.home .home-hero p { margin: 0; }

.home-leaf { width: var(--home-leaf); height: var(--home-leaf); flex: none; color: var(--secondary-500); }

/* ------------------------------------------------------------------ scroll progress */
.home-progress {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	inset-inline: 0;
	z-index: 60;
	height: 2px;
	background: var(--secondary-500);
	transform: scaleX(0);
	transform-origin: right center;
	pointer-events: none;
}

/* ------------------------------------------------------------------ art slots */
.home-hero.has-art::after,
.home-section.has-art::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--home-art) center / cover no-repeat;
	pointer-events: none;
}
.home-section.has-art { position: relative; isolation: isolate; }

/* ------------------------------------------------------------------ hero */
.home-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: var(--space-section) 0 var(--space-band);
}
.home-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: auto -10% -30% auto;
	width: 62vw;
	max-width: 900px;
	aspect-ratio: 1;
	background: radial-gradient(closest-side, var(--surface-green), transparent 72%);
	opacity: .9;
}
.home-hero__light {
	position: absolute;
	z-index: -1;
	top: -20%;
	inset-inline-start: 30%;
	width: 44vw;
	max-width: 640px;
	aspect-ratio: 1;
	background: radial-gradient(closest-side, rgb(255 251 235 / .9), transparent 70%);
	animation: home-drift 26s var(--iz-ease-in-out) infinite alternate;
	pointer-events: none;
}
@keyframes home-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-12%, 10%, 0); } }

.home-hero__grid {
	display: grid;
	/* Owner's review, 2026-09-29 — «wider area for the headings»: the copy column was 1.08 of 2
	   and the title capped at 14ch, which broke an eight-word headline over four lines. It is now
	   1.45 of 2.2 and the title runs to the column, so it reads in the two lines it is written
	   in. `minmax(0, …)` on the copy keeps the chip ribbon from widening the column. */
	grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
	gap: var(--space-6);
	align-items: center;
}

.home-eyebrow { display: inline-flex; align-items: center; gap: var(--gap-inline); color: var(--color-text-accent); font: var(--text-eyebrow); }
/* Type program run 5 (2026-09-27): the hero title is the one `--text-display` rung on the site
   (30–40px, 760, 1.45 leading), replacing the page's own fluid clamp. */
body.home .home-hero h1 {
	margin-top: var(--space-head);
	font: var(--text-display);
	line-height: 1.6; /* more air between the two lines (owner, 2026-10-01); the underline sits in it */
}
.home-mark { position: relative; display: inline-block; color: var(--secondary-700); }
.home-mark svg { position: absolute; inset: auto 0 -.08em 0; width: 100%; height: .42em; overflow: visible; }
.home-mark path {
	fill: none;
	stroke: var(--secondary-300);
	stroke-width: 4;
	stroke-linecap: round;
	opacity: .8;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 900ms var(--iz-ease-in-out) 700ms;
}
/* Size and leading deliberately absent: `.public-lead` in content.css already carries the
   `--text-body-l` pair (18px/1.8889), which is the token for exactly this role. The override used
   to add `font-size: clamp(16px, 1.3vw, 18px)`, and a 16→18 fluid range is too narrow to read as
   fluid — it just manufactured a tier. Below 1231px it resolved to the 16px body size, so the
   hero lead was the same size as ordinary prose; at 1280 it resolved to 16.64px, a tier 0.64px
   away from body text that no reader can perceive and that a type census counts as its own size.
   Only the measurements that are genuinely this hero's own stay here. */
body.home .home-hero .public-lead {
	max-width: 52ch;
	margin-top: var(--space-head);
}
.home-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-block); }

/* «امروز ذهن‌تان بیشتر درگیر چیست؟»
   The block runs the width of the copy column (it was capped at 560px) so the ribbon has room. */
.home-situations { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--iz-line-soft); }
body.home .home-situations__label { display: flex; align-items: center; gap: var(--gap-inline); color: var(--color-heading); font: var(--text-caption); font-weight: 600; }
.home-situations__label .iz-brand-illustration { font-size: var(--icon-l); }

/* The chips. Three states of one row:
     - no script: a wrapping row of links (this rule as it stands);
     - `.is-marquee` (home.js): one line, clipped to the column with both ends faded, the track
       moved by a linear Web Animation and by the pointer;
     - `.is-row` (home.js, reduced motion): one line that scrolls sideways under the finger, still.
   The block padding is the room the 3px focus ring needs inside a box that clips; the negative
   margin gives it back, so the row sits where it did. */
.home-chips { margin-top: var(--space-stack); }
.home-chips__track { display: flex; flex-wrap: wrap; gap: var(--gap-inline); }
.home-chips.is-marquee,
.home-chips.is-row { margin-block: calc(var(--space-stack) - var(--space-0)) calc(-1 * var(--space-0)); padding-block: var(--space-0); }
.home-chips.is-marquee {
	position: relative;
	overflow: hidden; /* fallback for an engine without `clip` */
	overflow: clip;   /* not a scroll container, so focusing a chip cannot scroll the box itself */
	cursor: grab;
	touch-action: pan-y; /* the page still scrolls vertically from here; sideways is the ribbon's */
	-webkit-user-select: none;
	user-select: none;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--space-5), #000 calc(100% - var(--space-5)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--space-5), #000 calc(100% - var(--space-5)), transparent);
}
.home-chips.is-marquee.is-dragging { cursor: grabbing; }
.home-chips.is-marquee .home-chips__track { position: relative; flex-wrap: nowrap; width: max-content; will-change: transform; }
.home-chips.is-marquee .home-chip { flex: none; -webkit-user-drag: none; }
.home-chips.is-marquee.is-dragging .home-chip { pointer-events: none; }
.home-chips.is-row { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.home-chips.is-row::-webkit-scrollbar { display: none; }
.home-chips.is-row .home-chips__track { flex-wrap: nowrap; width: max-content; padding-inline: var(--space-0); }
.home-chips.is-row .home-chip { flex: none; }

.home-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-inline);
	min-height: 44px;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	font: var(--text-caption);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 160ms var(--iz-ease), border-color 160ms var(--iz-ease), color 160ms var(--iz-ease), transform 140ms var(--iz-ease-out);
}
.home-chip .iz-brand-illustration { font-size: var(--icon-m); pointer-events: none; }
.home-chip:active { transform: scale(var(--iz-press)); }
.home-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
.home-chip[aria-pressed="true"] { border-color: var(--secondary-700); background: var(--secondary-700); color: #fff; }
@media (hover: hover) and (pointer: fine) {
	.home-chip:not([aria-pressed="true"]):hover { border-color: var(--secondary-400); background: var(--secondary-50); color: var(--secondary-800); }
}
body.home .home-situations__answer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-0) var(--space-2);
	min-height: 58px; /* two lines of the sentence, so choosing a chip never moves the page */
	margin-top: var(--space-stack);
	color: var(--color-text);
	font: var(--text-body-s);
	transition: opacity 160ms var(--iz-ease), filter 160ms var(--iz-ease);
}
.home-situations__answer.is-swapping { opacity: 0; filter: blur(2px); }

/* The visual: the transparent lady and sprout sit alongside each other, never on top of one another. */
.home-hero__visual { position: relative; left: var(--space-3); display: flex; flex-direction: row-reverse; align-items: flex-end; gap: var(--space-2); width: calc(100% + var(--space-7)); max-width: 500px; justify-self: center; }
.home-hero__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	max-width: 100%;
	overflow: hidden;
	border-radius: 170px 28px 170px 28px;
	background: var(--surface-green);
	box-shadow: var(--iz-shadow-lift);
	will-change: transform;
}
.home-hero__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.home-hero__frame--illustration { flex: 1 1 0; min-width: 0; padding: var(--space-3); overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
.home-hero__frame--illustration img { object-fit: contain; transform: none; }

.home-sprout {
	position: relative;
	flex: 0 0 112px;
	color: var(--secondary-500);
	z-index: 2;
	width: 112px;
	min-width: 0;
	max-width: none;
	height: auto;
	left: -48px; /* Close the visible gap left by the SVG's transparent side padding. */
	bottom: 44px; /* Optical baseline: the lady SVG has a deeper transparent bottom inset. */
	overflow: visible;
	transform-origin: 50% 100%;
}
/* The hero plant: the site's leaf repeated up a stem (front-page.php). On load the stem draws and the
   leaves unfold bottom to top (--i); then a slow gust climbs the stem — every leaf sways on the same
   period, each a beat after the one below — and two small leaves drift beside it. */
.home-sprout__ground { fill: var(--secondary-600); opacity: .12; }
.home-sprout__stem { fill: none; stroke: url(#hs-stem); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1300ms var(--iz-ease-in-out) 250ms; }
.home-sprout__leaf { transform-box: fill-box; transform-origin: 0% 76%; transform: none; transition: transform 850ms cubic-bezier(.22, 1, .36, 1), opacity 350ms var(--iz-ease-out); transition-delay: calc(600ms + var(--i) * 170ms); }
.home-sprout__crown { transform-box: fill-box; transform-origin: 30% 100%; }
.home-sprout__sway { transform-box: fill-box; transform-origin: 0% 76%; animation: home-sway 6s var(--iz-ease-in-out) infinite; animation-delay: calc(2.4s + var(--i) * 280ms); }
/* Starts and ends at rest, so the loop picks up from the unfolded leaf without a jump. */
@keyframes home-sway { 0%, 100% { transform: none; } 35% { transform: rotate(3.5deg); } 70% { transform: rotate(-2.5deg); } }
.home-sprout__drift { color: var(--secondary-400); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: home-drift 9s var(--iz-ease-in-out) 3s infinite; }
.home-sprout__drift--b { color: var(--accent-300); animation-duration: 11s; animation-delay: 6.5s; }
@keyframes home-drift {
	0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
	15%  { opacity: .8; }
	50%  { transform: translate(-10px, 22px) rotate(-40deg); }
	85%  { opacity: .6; }
	100% { opacity: 0; transform: translate(6px, 46px) rotate(-80deg); }
}

.home-in { transition: opacity 640ms var(--iz-ease-out), transform 640ms var(--iz-ease-out); }
.home-in--1 { transition-delay: 40ms; }
.home-in--2 { transition-delay: 120ms; }
.home-in--3 { transition-delay: 200ms; }
.home-in--4 { transition-delay: 300ms; }
.home-in--5 { transition-delay: 420ms; }
.home-in--visual { transition: opacity 900ms var(--iz-ease-out) 160ms, transform 900ms var(--iz-ease-out) 160ms; }
@starting-style {
	.home-in { opacity: 0; transform: translateY(14px); }
	.home-in--visual { opacity: 0; transform: translateY(22px) scale(.98); }
	.home-sprout__stem { stroke-dashoffset: 1; }
	.home-sprout__leaf { opacity: 0; transform: rotate(-40deg) scale(.15); }
	.home-mark path { stroke-dashoffset: 1; }
}

/* ------------------------------------------------------------------ sections */
.home-section { padding-block: var(--home-gap); }
.home-section--tint { background: var(--surface-blue); }
/* Where the ground changes — a tinted band, the deep tests band, a section carrying art — the
   change of colour is what tells a reader a new section started, and the full pair of gaps is
   right. Where two plain sections meet, nothing marks the seam but the space itself, so the
   second one drops its own top padding and the boundary costs one gap instead of two. Which
   pairs are plain depends on what the site has published, so this is a rule rather than a list. */
.home-section:not(.home-section--tint):not(.home-tests):not(.has-art)
	+ .home-section:not(.home-section--tint):not(.home-tests):not(.has-art) { padding-top: 0; }
.home-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-block); }
/* A link to the whole list, under the cards at the inline end (workshops, 2026-09-29). */
body.home .home-foot { display: flex; justify-content: flex-end; margin-top: var(--space-head); }
.home-title { display: flex; align-items: flex-start; gap: var(--space-2); }
/* Optical: centres the 22px leaf on the heading's first line. */
.home-title .home-leaf { margin-top: calc((var(--text-h2-size) * var(--text-h2-lh) - var(--home-leaf)) / 2); }
/* Type program run 5: every section heading is `--text-h2` (21–24px, 700, 1.5) — the site's one
   section-title rung, replacing this page's own clamp and cap. */
body.home .home-title h2 { font: var(--text-h2); }
body.home .home-title p { margin-top: var(--gap-title); color: var(--iz-ink-soft); font: var(--text-body-s); }

/* Reveal — .will-reveal is only ever added by home.js, and only below the first viewport. */
.will-reveal { opacity: 0; transform: translateY(16px); }
.will-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 620ms var(--iz-ease-out), transform 620ms var(--iz-ease-out);
	transition-delay: calc(var(--i, 0) * 60ms);
}

/* ------------------------------------------------------------------ steps on a vine
   Owner's review, 2026-09-29: each node carries an icon — a 24px glyph in a 56px disc, the size a
   mark needs to be read as a picture rather than a bullet — and the step's number rides on it as
   a 20px badge, so the order still shows at a glance. */
.home-steps__box { position: relative; }
.home-vine { position: absolute; inset: 0 0 auto 0; width: 100%; height: 64px; color: var(--secondary-400); pointer-events: none; }
.home-vine path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1600ms var(--iz-ease-in-out) 100ms; }
.home-steps__box.is-in .home-vine path, .home-steps__box:not(.will-reveal) .home-vine path { stroke-dashoffset: 0; }
.home-steps__list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
/* The 4px sets the 56px node on the 64px vine's own middle. */
.home-step { position: relative; display: grid; justify-items: center; text-align: center; align-content: start; gap: var(--gap-title); padding-top: var(--space-0); }
.home-step__node {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--space-2);
	border: 1.5px solid var(--secondary-300);
	border-radius: 50%;
	background: var(--color-bg);
	box-shadow: 0 0 0 6px var(--color-bg);
	color: var(--secondary-700);
	font-size: var(--home-icon-node);
	line-height: 1;
	transition: background-color 400ms var(--iz-ease-out), color 400ms var(--iz-ease-out), border-color 400ms var(--iz-ease-out);
}
.home-step__num {
	position: absolute;
	top: -4px;
	inset-inline-end: -4px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-surface);
	box-shadow: 0 0 0 1.5px var(--secondary-300);
	color: var(--secondary-800);
	font: var(--text-micro);
	font-weight: 700; /* a numeral: the ladder's weight for figures */
	line-height: 1;
}
.home-steps__box.is-in .home-step__node, .home-steps__box:not(.will-reveal) .home-step__node { border-color: var(--secondary-700); background: var(--secondary-700); color: #fff; }
.home-steps__box.is-in .home-step:nth-child(1) .home-step__node { transition-delay: 500ms; }
.home-steps__box.is-in .home-step:nth-child(2) .home-step__node { transition-delay: 1000ms; }
.home-steps__box.is-in .home-step:nth-child(3) .home-step__node { transition-delay: 1500ms; }
body.home .home-step h3 { font: var(--text-h4); }
body.home .home-step p { max-width: 34ch; font: var(--text-body-s); }

/* ------------------------------------------------------------------ four doors */
body.home .home-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
.home-path {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-stack);
	padding: var(--pad-card);
	border: 1px solid var(--iz-line-soft);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	transition: transform 220ms var(--iz-ease-out), box-shadow 220ms var(--iz-ease-out), border-color 220ms var(--iz-ease-out);
}
.home-path__icon { transition: background-color 220ms var(--iz-ease), color 220ms var(--iz-ease); }
body.home .home-path h3 { margin-top: var(--space-0); font: var(--text-h4); }
body.home .home-path p { flex: 1; font: var(--text-body-s); }
/* Owner's review, 2026-09-29 — «buttons align to left»: each card's action sits at the inline end. */
.home-path > .iz-link, .home-path__status { align-self: flex-end; }
.home-path__status { display: inline-flex; align-items: center; gap: var(--gap-inline); min-height: 44px; color: var(--iz-ink-soft); font: var(--text-caption); }
.home-path--featured {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "icon title link" "icon text link";
	column-gap: var(--space-3);
	row-gap: var(--gap-title);
	align-items: center;
	overflow: hidden;
	padding: var(--space-4) var(--space-5);
	border-color: transparent;
	background: linear-gradient(160deg, var(--secondary-700), var(--secondary-800));
	color: var(--secondary-100);
}
.home-path--featured .home-path__icon { grid-area: icon; width: 56px; height: 56px; background: rgb(255 255 255 / .12); color: #fff; }
body.home .home-path--featured h3 { grid-area: title; align-self: end; margin: 0; color: #fff; font: var(--text-h4); }
body.home .home-path--featured p { grid-area: text; flex: none; align-self: start; max-width: 52ch; color: var(--secondary-200); font: var(--text-body-s); }
.home-path--featured .iz-link { grid-area: link; align-self: end; justify-self: end; padding-inline-start: var(--space-4); color: #fff; }
.home-path__badge { position: absolute; top: 16px; inset-inline-end: 24px; padding: var(--pad-chip-y) var(--pad-chip-x); border-radius: var(--radius-pill); background: rgb(255 255 255 / .12); color: var(--secondary-100); font: var(--text-micro); }
.home-path__glyph { position: absolute; inset-inline-end: 120px; bottom: -70px; width: 190px; height: 190px; color: var(--secondary-500); opacity: .45; pointer-events: none; transition: transform 600ms var(--iz-ease-out); }
@media (hover: hover) and (pointer: fine) {
	.home-path:hover { transform: translateY(-3px); border-color: var(--primary-200); box-shadow: var(--iz-shadow-lift); }
	.home-path:not(.home-path--featured):hover .home-path__icon { background: var(--primary-100); color: var(--primary-700); }
	.home-path--featured:hover .home-path__glyph { transform: rotate(-8deg) translateY(-6px); }
	.home-path--featured .iz-link:hover { color: var(--secondary-100); }
}

/* ------------------------------------------------------------------ about */
.home-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); gap: var(--space-band); align-items: center; }
/* Scoped through `.home-about` (not just `body.home`) so this beats `.home-section p { margin: 0 }`
   above — that reset has the same two classes plus its own `p`, one more element than
   `body.home .home-about__body` alone, which made it win the tie and silently zero this margin.
   `.home-hero .public-lead` avoids the same trap with a third class; this mirrors that fix. */
body.home .home-about .home-about__body { max-width: 48ch; margin-top: var(--space-head); font: var(--text-body); }
.home-about__traits { display: flex; flex-wrap: wrap; gap: var(--gap-inline); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.home-about__traits li { padding: var(--pad-chip-y) var(--pad-chip-x); border: 1px solid var(--iz-line-soft); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--secondary-800); font: var(--text-caption); font-weight: 500; }
.home-signature { position: relative; display: inline-block; margin-top: var(--space-4); }
/* The wordmark exception (docs/type-and-space-prompt.md §3.1): stays Pinar, and sized to the
   `--text-h1` rung it already matched rather than its own literal. */
.home-signature span { color: var(--color-heading); font: var(--text-h1); font-weight: 700; }
.home-signature svg { position: absolute; inset: auto -6px -10px -6px; width: calc(100% + 12px); height: 18px; overflow: visible; }
.home-signature path { fill: none; stroke: var(--accent-500); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--iz-ease-in-out) 300ms; }
.home-about.is-in .home-signature path, .home-about:not(.will-reveal) .home-signature path { stroke-dashoffset: 0; }
body.home .home-about__copy p:last-child { margin-top: var(--space-2); }
.home-about__portrait {
	position: relative;
	display: grid;
	place-items: center;
	justify-self: center;
	width: 100%;
	max-width: 380px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 28px 170px 28px 170px;
	/* Grey, not a tint: the owner's 2026-09-19 rule for every inner box. A photo (has-photo) covers
	   this edge to edge; the art fallback below sits centred on it instead. */
	background: var(--iz-sunk);
	color: var(--secondary-600);
}
.home-about__portrait.has-photo img { width: 100%; height: 100%; object-fit: cover; }
/* The art fallback: shown at its own size (372×314, never upscaled — isazadeh_art_url_crisp()),
   centred rather than stretched, so it reads as a placed illustration and not a cropped photo. */
.home-about__portrait .home-about__art { width: 78%; max-width: 372px; height: auto; object-fit: contain; }
.home-about__portrait .home-branch { position: absolute; inset: auto -8% -6% auto; width: 96%; opacity: .9; }

/* ------------------------------------------------------------------ carousels (courses, workshops)
   Rebuilt 2026-09-26; per-carousel counts and full-width-on-phone added 2026-09-27. The rails used
   to size their columns to the count, so two courses became two 588px cards with 330px covers and
   one workshop a 560px card alone in the middle of the band. Now every card keeps one width
   whatever the count, decided by `--rail-per` through the calc formula below — courses stay three
   to a view from 1024px and two from 768px; a wider workshop card reads better with fewer to a
   view, so it drops to two from 1024px and one from 768px (`#home-workshops-track` overrides, below
   and in the two media queries further down). Below 768px both carousels show exactly one card,
   full width within the page gutters — no peeking sliver of a second card; a row with fewer real
   items than one view ends on a door to the catalogue (front-page.php) instead of stretching, and
   starts at the inline start, never centred.

   The track is a scroll-snap row that works with no script at all: swipe, trackpad, shift-wheel, or
   focus it (tabindex=0) and use the arrow keys. home.js adds the head's arrows and «۱ از ۲» only
   when a card is actually out of view.

   `--rail-bleed` lets the track run past the container and pads it back, so the first card sits on
   the page edge but can scroll out under it. Below 1024 it is the page gutter itself (32px, then
   16px under 768 — .public-wrap's own figures, content.css), so a card can still scroll out under
   the screen edge even with none left to peek in. From 1024 it is 24px, one gap: room for the hover
   shadow and the focus ring, while the next card, 24px further on, stays out of sight. The block
   padding is the same room for the 3px lift and its shadow, which an overflow container would
   otherwise clip; the negative margins give it back, so the section's rhythm is unchanged. */
.home-head__aside { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
/* Nothing to show (the workshops head holds only the arrows, hidden until a card is out of view):
   the box leaves the row, so it cannot cost the head a wrapped line of gap on a phone. */
.home-head__aside:not(:has(> :not([hidden]))) { display: none; }
.home-carousel__nav { display: flex; align-items: center; gap: var(--gap-inline); }
.home-carousel__nav[hidden] { display: none; }
body.home .home-carousel__status { min-width: 4.5em; color: var(--iz-ink-soft); font: var(--text-button-s); text-align: center; }
/* The kit's icon button, plus `opacity` for the ends of the row. aria-disabled rather than
   `disabled`, so a keyboard user who pressed «بعدی» to the last page keeps their focus on it. */
.home-carousel__btn { transition: background-color .16s var(--iz-ease), color .16s var(--iz-ease), opacity .16s var(--iz-ease), transform .16s var(--iz-ease-out); }
.home-carousel__btn[aria-disabled="true"] { opacity: .38; cursor: default; }
@media (hover: hover) and (pointer: fine) {
	.home-carousel__btn[aria-disabled="true"]:hover { background: #fff; color: var(--iz-text); }
}

/* A block formatting context, so the track's negative margins cannot collapse through it: this box
   is exactly the cards' row, and the focus ring below is drawn around it. */
.home-carousel { position: relative; display: flow-root; }
.home-rail {
	/* Steps, not the fluid `--gap-grid`: the whole-pixel card arithmetic below needs a whole gap. */
	--rail-gap: var(--space-4);
	--rail-bleed: var(--space-4);
	--rail-per: 3;
	--rail-basis: calc((100% - (var(--rail-per) - 1) * var(--rail-gap)) / var(--rail-per));
	display: flex;
	gap: var(--rail-gap);
	margin: calc(-1 * var(--space-4)) calc(-1 * var(--rail-bleed)) calc(-1 * var(--space-6));
	padding: var(--space-4) var(--rail-bleed) var(--space-6);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--rail-bleed);
	scrollbar-width: none;
}
.home-rail::-webkit-scrollbar { display: none; }
/* The track's own box runs to the screen edges below 1024, where a ring would be cut off; the ring
   goes round the row of cards instead. */
.home-rail:focus-visible { outline: none; }
.home-carousel:has(> .home-rail:focus-visible)::after {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: calc(var(--radius-card) + 8px);
	box-shadow: 0 0 0 3px var(--color-focus-ring);
	pointer-events: none;
}
/* Rounded to whole pixels. Blink turns `(100% - 48px) / 3` into `33.333% - 16px`, and the float
   third comes out 1/64px short: 383.984px cards at 1280, a scroll range of 815.92px, which Chrome
   truncates to 815 — so the last page stopped 1px short of the container edge. Whole-pixel cards
   make the range whole too (384 at 1280 and up, 304 at 1024, exact). The plain declaration first
   is the fallback for an engine without round(). */
.home-rail__item {
	display: flex;
	flex: 0 0 var(--rail-basis);
	flex-basis: round(nearest, var(--rail-basis), 1px);
	min-width: 0;
	scroll-snap-align: start;
	/* Named so offer-card.css can revert the workshop card's stacked layout once it has the room
	   (2026-09-27) — set here, one level up, because CSS containment disallows a container matching
	   a query against its own size. */
	container-type: inline-size;
	container-name: home-offer;
}
.home-rail__item > * { flex: 1; min-width: 0; }

/* The door at the end of a short row: a link to the catalogue, with its count. Grey on the canvas and
   white on the tinted band — the two grounds the owner allows an inner box (2026-09-19). */
.home-rail__end {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gap-title);
	padding: var(--pad-card);
	border: 1px solid var(--iz-line-soft);
	border-radius: var(--radius-card);
	background: var(--iz-sunk);
	color: var(--color-text);
	text-align: center;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .16s var(--iz-ease), border-color .16s var(--iz-ease), transform .16s var(--iz-ease-out);
}
.home-section--tint .home-rail__end { border-color: rgb(255 255 255 / .9); background: rgb(255 255 255 / .6); }
/* Never wider than the file: state-empty-learning is 280px, card-workshop 444px (the PHP asks
   isazadeh_art_url_crisp() for 240 and 280). */
.home-rail__end-art { display: block; width: min(70%, 240px); height: auto; margin-bottom: var(--space-stack); }
.home-rail__end-art--wide { width: min(92%, 280px); margin-bottom: var(--space-0); }
.home-rail__end-label { display: inline-flex; align-items: center; gap: var(--gap-inline); color: var(--color-heading); font: var(--text-subtitle); font-weight: 600; transition: color .16s var(--iz-ease); }
.home-rail__end-label .fa-solid { color: var(--secondary-700); font-size: var(--home-icon); transition: transform .2s var(--iz-ease-out); }
.home-rail__end-meta { color: var(--iz-ink-soft); font: var(--text-caption); }
.home-rail__end:active { transform: scale(var(--iz-press-lg)); }
.home-rail__end:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
@media (hover: hover) and (pointer: fine) {
	.home-rail__end:hover { border-color: var(--primary-200); background: var(--color-surface); }
	.home-rail__end:hover .home-rail__end-label { color: var(--secondary-700); }
	.home-rail__end:hover .home-rail__end-label .fa-solid { transform: translateX(-3px); }
}

/* Per-carousel counts (2026-09-27): courses stay three-up on a desktop and two-up on a tablet; a
   wider workshop card reads better with fewer to a view, so it drops to two-up on a desktop and
   one-up on a tablet. `--rail-per` alone decides the width — the calc formula above turns per:1
   into a full-width `--rail-basis` on its own, no override needed. */
@media (min-width: 1024px) {
	#home-workshops-track { --rail-per: 2; }
}
@media (max-width: 1023px) {
	.home-rail { --rail-gap: var(--space-3); --rail-bleed: var(--space-5); --rail-per: 2; }
	#home-workshops-track { --rail-per: 1; }
}
@media (max-width: 767px) {
	.home-rail { --rail-bleed: var(--space-3); }
	/* Exactly one card per view, full width within the page gutters — no peeking sliver of the next
	   card (2026-09-27; both carousels used to peek at 84%/min 380px). `--rail-per: 1` alone would
	   do it through the calc formula, but the literal `100%` here matches how `.home-rail` already
	   overrides `--rail-basis` directly at this breakpoint. */
	#home-courses-track, #home-workshops-track { --rail-per: 1; --rail-basis: 100%; }
	/* The arrows and the count share one line under the heading with «همه»: the link at the start,
	   the controls at the end, the edge the row scrolls toward. */
	.home-head__aside { flex: 1 0 100%; justify-content: space-between; }
}

/* ------------------------------------------------------------------ tests: the procedure and the door
   v4, 2026-09-30 (owner: a two-column band, the procedure looping on one side, the call to action
   on the other, brand plants behind it, some big, animated and draggable; the why is above the
   PHP block in front-page.php). Replaces v3's three scroll-played steps and offer bar. Revised
   the same day to a deep ground, a faster loop, six leaves and no pause control.

   Colour is spent on the band itself: a deep teal-green ground (`--primary-900` into
   `--secondary-800`, a rose glow low at the inline end), the pattern and the leaves in light brand
   tints on it. Everything on the ground is white or near-white text (AA on every part of the
   gradient) and the one button is the kit's light one. The stage has no card (2026-09-30): the white
   drawings sit straight on the band.

   Layers, back to front:
     1. the ground          .home-tests background
     2. the pattern         `.iz-pattern--leaves` from kit.css (::before), quiet toward the CTA
     3. the leaves          `.home-tests__leaf` — inline SVG, decorative, moved by home.js; they live
                            in the band's padding and gutters, never under a line of text
     4. the two columns     `.home-tests__grid`

   Modes. The stage has two:
     storyboard (default)   the scenes as a grid of stills at rest, every step title listed
                            above them. This is what a page without script or with reduced motion shows.
     live (`.is-live`)      home.js adds it when it starts the loop: the scenes stack, one shows at a
                            time, straight on the band (no card, frame or fill behind them); the step titles are
                            visually hidden text.
   Every scene's markup and base CSS is its resting (final) state, so the storyboard needs no
   extra rules; the loop's from-frames live in home.js, which animates only transform, opacity,
   clip-path and stroke-dashoffset. */
.home-tests {
	--iz-pattern-ink: rgb(255 255 255 / .06);
	/* The stage's colour ranks (owner, 2026-09-30):
	     1st  what the demo presses and lands — the cursor, the confirm button, the check: --primary-600
	     2nd  selection and progress — the ring, picked answers, the bar, the chart's highlight: --primary
	     3rd  supporting marks — chip icons, the timer, the other bars, legend, slot and insight icons,
	          confetti: teal, the brand's teal-blue mixed half with its sage, so it bridges the green
	          ground and the blue marks. --tt-teal is 5.1:1 on white. */
	--tt-teal: color-mix(in oklab, var(--primary-500) 50%, var(--secondary-500));
	--tt-teal-soft: color-mix(in oklab, var(--primary-200) 50%, var(--secondary-200));
	--tt-teal-50: color-mix(in oklab, var(--primary-50) 50%, var(--secondary-50));
	--iz-pattern-opacity: 1;
	--iz-pattern-size: 260px;
	position: relative;
	isolation: isolate;
	display: block;
	overflow: hidden;
	/* The brand's sage, flat (owner, 2026-09-30: the navy with red and blue glows read as fake and
	   off-brand; teal was tried, the owner chose the green). One tone, a step lighter than the
	   footer's secondary-900; the pattern is the only texture. The leaves and the stage's badge
	   are recoloured for this ground. */
	background: var(--secondary-700);
}
.home-tests__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); align-items: center; gap: var(--space-6); }

/* ---- the call to action, at the inline start */
.home-tests__cta {
	/* The kit's focus ring is a blue at .45; on this ground it is a white one. */
	--color-focus-ring: rgb(255 255 255 / .9);
	display: grid;
	justify-items: start;
	gap: var(--space-stack);
}
.home-tests__eyebrow { display: flex; align-items: center; gap: var(--gap-inline); color: var(--secondary-200); font: var(--text-eyebrow); }
.home-tests__eyebrow .home-leaf { color: var(--secondary-300); }
body.home .home-tests h2 { color: #fff; font: var(--text-h2); }
body.home .home-tests__lead { max-width: 44ch; color: rgb(255 255 255 / .88); font: var(--text-body); text-wrap: pretty; }
.home-tests__test {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	width: min(100%, 26rem);
	padding: var(--pad-row);
	border: 1px solid rgb(255 255 255 / .18);
	border-radius: var(--radius-card);
	background: rgb(255 255 255 / .08);
}
/* The kit's coral tile was the loudest thing on the band, louder than the button. */
.home-tests__test .iz-tile { background: rgb(255 255 255 / .14); color: #fff; }
body.home .home-tests__test-title { color: #fff; font: var(--text-body-s); font-weight: 600; }
.home-tests__facts { display: flex; flex-wrap: wrap; gap: var(--gap-inline); margin: var(--space-0) 0 0; padding: 0; list-style: none; }
.home-tests__facts li { display: inline-flex; align-items: center; gap: var(--space-0); padding: var(--pad-chip-y) var(--pad-chip-x); border-radius: var(--radius-pill); background: rgb(255 255 255 / .14); color: #fff; font: var(--text-micro); }
.home-tests__facts .fa-solid { font-size: var(--icon-xs); }
.home-tests__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-1); }
.home-tests__go {
	/* Taller than the kit's default: the one thing on the band meant to be pressed. The label
	   stays `.iz-btn`'s own `--text-button`. */
	min-height: 56px;
	padding: 0 var(--space-5);
	box-shadow: 0 16px 32px -14px rgb(from var(--secondary-900) r g b / .6);
}
.home-tests__go:active { transform: scale(var(--iz-press)); }
.home-tests__actions .iz-count { background: rgb(255 255 255 / .16); color: #fff; }

/* ---- the stage, at the inline end.
   No card, no fill, no border, no shadow (owner, 2026-09-30): the storyboard is the list and the
   stills on the band, and in the loop the drawings' own white cards sit on the band. */
.home-tests__stage { position: relative; display: grid; gap: var(--space-2); }
.home-tests__view { display: grid; gap: var(--space-2); }
.home-tests__scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }

/* The step titles: real text, one step up the ladder from body copy, at the top of the drawing
   area. A numbered list by default (the storyboard, and what a screen reader gets); in the loop
   only the current one shows and home.js swaps them. The face stays the body face: these label a
   picture, they are not headlines. */
.home-tests__steps { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; }
.home-tests__steps li { display: flex; align-items: center; gap: var(--space-1); min-height: 40px; color: #fff; font: var(--text-h3); font-family: var(--font-body); }
.hs__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgb(255 255 255 / .16); color: #fff; font-size: var(--icon-m); }
.hs__n { color: var(--secondary-200); font-variant-numeric: tabular-nums; }
.tscene {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 264px;
	padding: var(--space-4) var(--space-3);
	overflow: hidden;
	border-radius: var(--radius-card);
	border: 1px solid rgb(255 255 255 / .14);
	background: rgb(255 255 255 / .08);
}
/* Scenes with two stacked pieces (filters over cards, a sheet over its insight card). */
.tscene--pick, .tscene--result { grid-auto-flow: row; align-content: center; justify-items: center; gap: var(--space-3); }
.tcur { display: none; }

/* Shared drawing vocabulary: a white sheet, and the blank stroke that stands for words. */
.tcard--main, .tq, .tres, .tbook {
	background: var(--color-surface);
	border-radius: var(--radius-card);
	box-shadow: 0 1px 2px rgb(from var(--secondary-900) r g b / .12), 0 20px 40px -22px rgb(from var(--secondary-900) r g b / .45);
}
.tcard--ghost i, .tq__blank, .tq__stroke, .tres__lines span { display: block; height: 8px; border-radius: var(--radius-pill); background: var(--iz-line-soft); }

/* ---- scene 1: a test, picked */
.tpick { position: relative; width: min(60%, 19rem); }
.tcard--main { position: relative; display: grid; justify-items: start; gap: var(--space-stack); padding: var(--pad-row); }
.tcard--main b { color: var(--color-heading); font: var(--text-body-s); font-weight: 600; }
.tcard__ring { position: absolute; inset: 0; border: 1.5px solid var(--primary-500); border-radius: inherit; pointer-events: none; }
.tcard__facts { display: flex; flex-wrap: wrap; gap: var(--gap-inline); }
.tcard__facts span { display: inline-flex; align-items: center; gap: var(--space-0); padding: var(--pad-chip-y) var(--pad-chip-x); border-radius: var(--radius-pill); background: var(--iz-sunk); color: var(--iz-ink-soft); font: var(--text-micro); }
.tcard__facts .fa-solid { font-size: var(--icon-xs); }
.tpick__filters { display: flex; gap: var(--space-1); }
.tchip { display: inline-flex; align-items: center; gap: var(--space-1); height: 28px; padding: 0 var(--space-2); border: 1px solid var(--iz-line-soft); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--tt-teal); font-size: var(--icon-xs); }
.tchip__stroke { display: block; width: 44px; height: 6px; border-radius: var(--radius-pill); background: var(--iz-line-soft); }
.tcard__check { position: absolute; inset-block-start: calc(var(--space-2) * -1); inset-inline-end: calc(var(--space-2) * -1); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary-600); box-shadow: 0 0 0 3px var(--color-surface); color: #fff; font-size: var(--icon-s); }
.tcard--ghost { position: absolute; inset: 0; display: grid; align-content: start; gap: var(--space-1); padding: var(--pad-row); border: 1px solid var(--iz-line-soft); border-radius: var(--radius-card); background: var(--color-surface); scale: .94; }
.tcard--ghost i:nth-child(1) { width: 32px; height: 32px; border-radius: var(--space-1); }
.tcard--ghost i:nth-child(2) { width: 70%; }
.tcard--ghost i:nth-child(3) { width: 46%; }
.tcard--ghost em { display: flex; gap: var(--space-0); }
.tcard--ghost u { display: block; width: 30px; height: 12px; border-radius: var(--radius-pill); background: var(--iz-sunk); }
/* `rotate` and `translate` place the fan; the loop animates `transform`, so the two never fight. */
.tcard--ghost-a { rotate: -7deg; translate: -30% 3%; }
.tcard--ghost-b { rotate: 7deg; translate: 30% 3%; }
.tpick > .tcard--main { z-index: 1; }
.tcard--main .iz-tile { background: var(--tt-teal-50); color: var(--tt-teal); }

/* ---- scene 2: questions, answered */
.tqa { position: relative; display: grid; gap: var(--space-2); width: min(82%, 26rem); }
.tqa__top { grid-row: 1; grid-column: 1; display: flex; align-items: center; justify-content: space-between; }
.tqa__dots { display: flex; gap: var(--space-0); }
.tqa__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--iz-line-soft); }
.tqa__dot i { position: absolute; inset: 0; border-radius: 50%; background: var(--primary-600); opacity: 0; }
.tqa__dot.is-done i { opacity: 1; }
.tqa__timer { position: relative; display: block; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--tt-teal); }
/* A countdown drawn without a paint: two half rings in the track's grey rotate into view (the
   right half first, then the left), so the coloured ring underneath is eaten clockwise. Physical
   `left`/`right` here because a circle has no reading direction. */
.tqa__half { position: absolute; inset-block: 0; width: 12px; overflow: hidden; }
.tqa__half--r { left: 12px; }
.tqa__half--l { left: 0; }
.tqa__half i { position: absolute; inset-block: 0; display: block; width: 12px; box-sizing: border-box; border: 3px solid var(--iz-line-soft); }
.tqa__half--r i { left: 0; border-left: 0; border-radius: 0 12px 12px 0; transform-origin: 0 50%; transform: rotate(-180deg); }
.tqa__half--l i { right: 0; border-right: 0; border-radius: 12px 0 0 12px; transform-origin: 100% 50%; transform: rotate(180deg); }
.tq { grid-row: 2; grid-column: 1; display: grid; align-content: start; gap: var(--space-stack); padding: var(--pad-row); }
.tq { position: relative; z-index: 1; }
.tq--next { z-index: 0; opacity: 0; }
body.home .tq__prompt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--color-heading);
	font: var(--text-body-s);
	font-weight: 600;
}
.tq__blank--short { width: 60%; }
.tq__opts { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.tq__opts li { position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--gap-inline); min-height: 36px; padding: 0 var(--space-2); border: 1.5px solid var(--iz-line-soft); border-radius: var(--space-2); color: var(--iz-ink-soft); font: var(--text-caption); }
.tq__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq__stroke { flex: 1; max-width: 62%; }
.tq__opts li:nth-child(2) .tq__stroke { max-width: 48%; }
.tq__opts li:nth-child(3) .tq__stroke { max-width: 70%; }
/* The chosen look is a layer, so choosing animates opacity and never a colour. */
.tq__fill { position: absolute; z-index: -1; inset: -1.5px; display: none; overflow: hidden; border: 1.5px solid var(--primary-500); border-radius: inherit; background: var(--primary-50); }
.is-picked .tq__fill { display: block; }
.tq__rip { position: absolute; inset-block: 0; inset-inline-start: calc(50% - 30px); width: 60px; height: 60px; margin-block: auto; border-radius: 50%; background: rgb(from var(--primary-500) r g b / .28); opacity: 0; }
.is-picked { color: var(--primary-800); }
.tq__mark { position: relative; flex: none; display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--color-border); border-radius: 50%; color: #fff; font-size: var(--icon-xs); }
.tq__mark b { position: absolute; inset: -1.5px; display: none; border-radius: 50%; background: var(--primary-600); }
.tq__mark i { position: relative; display: none; font-size: var(--icon-xs); }
.is-picked .tq__mark b, .is-picked .tq__mark i { display: block; }
.tqa__progress { grid-row: 3; grid-column: 1; display: flex; align-items: center; gap: var(--space-2); }
.tqa__count { flex: none; display: grid; color: var(--color-text); font: var(--text-micro); font-variant-numeric: tabular-nums; }
.tqa__count span { grid-area: 1 / 1; }
.tqa__count span:not(:first-child) { opacity: 0; }
.tqa__bar { flex: 1; display: block; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--iz-line-soft); }
.tqa__bar span { display: block; height: 100%; border-radius: inherit; background: var(--primary-600); transform: scaleX(var(--p, .2)); transform-origin: 100% 50%; /* the inline start; this site has no LTR variant */ }

/* ---- scene 3: a result, shown as shapes only */
.tres { width: min(66%, 20rem); overflow: hidden; }
.tres__band { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--gap-inline); padding: var(--space-2) var(--pad-row); background: var(--primary-700); color: #fff; font-size: var(--icon-m); }
.tres__band b { font: var(--text-caption); font-weight: 600; }
/* A sheet-white cover that slides off toward the inline end, uncovering the band. */
.tres__cover { position: absolute; inset: 0; background: var(--color-surface); transform: translateX(-101%); }
.tres__chart { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-3); padding: var(--pad-row) var(--pad-row) 0; }
.tres__bars { display: flex; align-items: flex-end; gap: var(--space-1); height: 84px; }
.tres__bars span { flex: 1; height: calc(var(--h) * 100%); border-radius: var(--space-1) var(--space-1) 0 0; background: var(--tt-teal-soft); transform-origin: 50% 100%; }
.tres__bars span:last-child { background: var(--primary-500); }
.tres__sprout { position: relative; display: block; width: 52px; aspect-ratio: 64 / 84; }
.tres__sprout svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tres__drift { position: absolute; width: 14px; height: 14px; color: var(--secondary-400); opacity: .6; pointer-events: none; }
.tres__drift--a { inset-block-start: 10px; inset-inline-start: 36%; }
.tres__drift--b { inset-block-start: 26px; inset-inline-end: 22%; width: 10px; height: 10px; }
.tres__drift--c { inset-block-start: 4px; inset-inline-end: 8px; width: 12px; height: 12px; }
.tres__legend { display: flex; gap: var(--space-3); padding: var(--space-1) var(--pad-row) var(--pad-row); }
.tres__legend span { display: flex; flex: 1; align-items: center; gap: var(--space-1); }
.tres__legend b { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tt-teal-soft); }
.tres__legend span:nth-child(2) b { background: var(--primary-500); }
.tres__legend span:nth-child(3) b { background: var(--tt-teal); }
.tres__legend i { display: block; flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--iz-line-soft); }
.tres__insight { display: flex; align-items: center; gap: var(--space-2); width: min(66%, 20rem); padding: var(--pad-row); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: 0 1px 2px rgb(from var(--secondary-900) r g b / .12), 0 20px 40px -22px rgb(from var(--secondary-900) r g b / .45); }
.tres__insight-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tt-teal-50); color: var(--tt-teal); font-size: var(--icon-s); }
.tres__lines { display: grid; flex: 1; gap: var(--space-1); }
.tres__lines span { position: relative; overflow: hidden; }
.tres__line--short { width: 62%; }
.tres__lines i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .95), transparent); transform: translateX(-100%); }

/* ---- scene 4: a session, booked (only drawn while the booking page exists) */
.tbook { display: grid; gap: var(--space-1); width: min(74%, 22rem); padding: var(--pad-row); }
.tbook__head { display: flex; align-items: center; justify-content: center; }
body.home .tbook__month { color: var(--color-heading); font: var(--text-caption); font-weight: 700; }
.tbook__wd, .tbook__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.tbook__wd { color: var(--iz-ink-soft); font: var(--text-micro); }
.tbook__grid { gap: 2px; }
.tbook__day { position: relative; display: grid; place-items: center; height: 22px; border-radius: var(--space-1); color: var(--color-text); font: var(--text-micro); font-variant-numeric: tabular-nums; }
.tbook__day.is-past { color: var(--iz-ink-soft); opacity: .6; }
.lay { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: var(--primary-600); color: #fff; font-style: normal; }
.tbook__times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); }
.tbook__time { position: relative; display: grid; place-items: center; height: 28px; border: 1.5px solid var(--iz-line-soft); border-radius: var(--radius-pill); color: var(--color-text); font: var(--text-micro); }
.tbook__time .lay { inset: -1.5px; }
.tbook__slot { display: flex; align-items: center; gap: var(--gap-inline); color: var(--primary-800); font: var(--text-caption); font-weight: 600; }
.tbook__slot .fa-solid { color: var(--tt-teal); font-size: var(--icon-s); }
.tbook__cta { position: relative; }
.tbook__confirm { position: relative; display: grid; place-items: center; height: 44px; border-radius: var(--radius-input); background: var(--primary-600); color: #fff; opacity: 0; }
.tbook__confirm b { font: var(--text-button); }
/* At rest the button has become its round check; the loop presses the bar, narrows it, and lands the circle. */
.tbook__check { position: absolute; inset: 0; display: grid; place-items: center; width: 44px; height: 44px; margin-inline: auto; border-radius: 50%; background: var(--primary-600); color: #fff; font-size: var(--icon-m); }
/* The leaves that leave the check when it lands: at rest, nowhere to be seen. */
.tbook__conf { position: absolute; inset: 0; width: 18px; height: 18px; margin: auto; color: var(--secondary-400); opacity: 0; pointer-events: none; }
.tbook__conf:nth-of-type(odd) { color: var(--tt-teal); }

/* ---- live mode: one scene at a time */
/* The drawing area has no fill, border or frame (owner, 2026-09-30): the drawings' own white cards
   sit straight on the band. It is a plain box the scenes are stacked in. */
.is-live .home-tests__view { position: relative; display: block; aspect-ratio: 4 / 3; }
.is-live .home-tests__scenes { position: absolute; inset: 0; display: block; }
/* Every scene stays mounted and the incoming one fades up over the outgoing one; only opacity
   changes (no visibility flip, no display). */
.is-live .tscene { position: absolute; inset: 0; min-height: 0; padding: var(--space-3); border: 0; border-radius: 0; background: none; opacity: 0; pointer-events: none; transition: opacity 200ms var(--iz-ease-out); will-change: opacity; }
.is-live .tscene.is-on { opacity: 1; transition: opacity 260ms var(--iz-ease-out); }
/* There is no frame for a card to be clipped by, so the pick scene (its fanned cards and its check
   badge overhang the picked card) is not clipped. */
.is-live .tscene--pick { overflow: visible; }
/* The answer scene's progress row and question counter sit outside a white card, so on the band
   they are drawn on white pills (AA: the ink is the body colour on white, never on the teal). */
.is-live .tqa__top, .is-live .tqa__progress { padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface); }
/* Only what moves while the scenes change gets its own layer. */
.is-live .tcur { position: absolute; inset: 0 auto auto 0; z-index: 3; display: block; width: 20px; height: 20px; opacity: 0; pointer-events: none; }
.tcur i { position: absolute; inset: 0; border-radius: 50%; background: var(--primary-600); box-shadow: 0 0 0 3px #fff, 0 6px 12px rgb(0 0 0 / .18); }
.tcur em { position: absolute; inset: 0; border: 2px solid var(--primary-600); border-radius: 50%; opacity: 0; }
.is-tests-live .home-tests__leaf, .is-tests-live .home-tests__stage { will-change: transform; }
/* Live: the step titles are not drawn (owner, 2026-09-30). The list stays as text for a screen
   reader (home.js moves `aria-current`); the storyboard shows every title. */
.is-live .home-tests__steps { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- the leaves.
   Three inline-SVG plants (six until 2026-09-30, the owner asked for fewer): A and D hang from the top corners, C sits on the bottom edge, in the band's top and bottom padding and its
   gutters, partly bleeding off (the band clips them), so none sits under a line of text. Their
   idle sway is CSS — rotate around the stem base, long and out of phase — and everything the
   pointer does to them is home.js, which writes `transform` on the wrapper while the SVG inside
   keeps the sway. Decorative: aria-hidden, unfocusable, and only the painted shapes take the
   pointer, so a leaf behind the copy never blocks a link. */
.home-tests__leaves { position: absolute; inset: 0; pointer-events: none; }
.home-tests__defs { position: absolute; }
.home-tests__leaf { position: absolute; z-index: 0; width: var(--w); aspect-ratio: var(--ar); transform-origin: var(--ox) var(--oy); user-select: none; -webkit-user-select: none; }
.home-tests__leaf.is-dragging { z-index: 2; }
.home-tests__leaf-art { display: block; width: 100%; height: 100%; overflow: visible; opacity: .6; transform-origin: var(--ox) var(--oy); }
.home-tests__leaf-art * { pointer-events: visiblePainted; }
/* The band is sage (secondary-700): the leaves are two of its pale tints, no accent, and the art
   sits at .6 so they stay a backdrop behind the copy and the stage. */
.tl-a, .tl-c { color: var(--secondary-200); }
.tl-b { color: var(--secondary-300); }
/* A, large: hangs from the top edge at the inline start, its stem base hidden above the band. */
.home-tests__leaf--a { --w: clamp(9.5rem, 18vw, 15rem); --ar: 220 / 320; --ox: 50%; --oy: 1%; --sway: 11s; --sway-delay: -3s; --amp: 2.2deg; inset-inline-start: 2%; top: calc(var(--w) * -1.05); rotate: 5deg; }
/* D, medium: a branch hanging from the top corner at the inline end. */
.home-tests__leaf--d { --w: clamp(7rem, 12vw, 11rem); --ar: 200 / 220; --ox: 5%; --oy: 3%; --sway: 10s; --sway-delay: -8s; --amp: 3deg; inset-inline-end: 6%; top: calc(var(--w) * -.5); rotate: -4deg; }
/* C, small: on the bottom edge between the columns. */
.home-tests__leaf--c { --w: clamp(5rem, 8vw, 7.5rem); --ar: 120 / 160; --ox: 50%; --oy: 99%; --sway: 7s; --sway-delay: -1s; --amp: 4deg; inset-inline-start: 46%; bottom: calc(var(--w) * -.16); rotate: 7deg; }
@media (hover: hover) and (pointer: fine) {
	.is-tests-live .home-tests__leaf-art * { cursor: grab; }
	.is-tests-live .home-tests__leaf.is-dragging .home-tests__leaf-art * { cursor: grabbing; }
}
/* The leaves stand still until home.js starts the band (the still is a finished picture), and never
   sway on a lite device (data-tests-mode is written by the inline script after the band). */
.home-tests[data-tests-mode="live"]:not(.is-tests-on) .home-tests__leaf-art { animation-play-state: paused; }
.home-tests[data-tests-mode="lite"] .home-tests__leaf-art { animation: none; }
@media (prefers-reduced-motion: no-preference) {
	.home-tests__leaf-art { animation: tests-sway var(--sway) var(--iz-ease-in-out) var(--sway-delay) infinite alternate; }
	.home-tests.is-idle .home-tests__leaf-art { animation-play-state: paused; }
	/* `transform`, not the `rotate` property: a transform animation runs on the compositor, so three
	   swaying plants cost the main thread nothing. */
	@keyframes tests-sway { from { transform: rotate(calc(var(--amp) * -1)); } to { transform: rotate(var(--amp)); } }
}

/* Desktop: the stage takes more of the row and the drawings are drawn 15% larger (owner,
   2026-09-30). `scale` on the scenes box keeps the cursor maths intact: home.js places the cursor
   from layout offsets inside the same scaled box. */
@media (min-width: 901px) {
	.home-tests__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 12fr); gap: var(--space-5); }
	.is-live .home-tests__scenes { scale: 1.15; }
	/* and the drawings' width caps rise with it, so a wide screen gets a wider drawing, not more air */
	.tpick { width: min(60%, 22rem); }
	.tqa { width: min(82%, 30rem); }
	.tres, .tres__insight { width: min(66%, 24rem); }
	.tbook { width: min(74%, 25rem); }
}
@media (max-width: 900px) {
	.home-tests__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-band); }
	/* The animation first, the call to action after it. The words stay first in the source (the
	   section's heading is what names the landmark), so this is a visual order only. */
	.home-tests__stage { order: -1; justify-self: center; width: min(100%, 44rem); }
	.home-tests__leaf--a { --w: 7.5rem; }
	.home-tests__leaf--d { --w: 6rem; }
	.home-tests__leaf--c { display: none; }
	/* The drawings span 90% of the stage (owner, 2026-09-30; they were 66% at most, inside a frame
	   with padding on every side). */
	.is-live .home-tests__view { aspect-ratio: 5 / 4; }
	.is-live .tscene { padding: var(--space-3) 5%; }
	.is-live .tqa, .is-live .tbook, .is-live .tres, .is-live .tres__insight { width: 100%; max-width: none; }
	.is-live .tpick { width: 78%; max-width: none; }
}
@media (max-width: 640px) {
	.home-tests__view { grid-template-columns: minmax(0, 1fr); }
	.is-live .home-tests__view { aspect-ratio: 9 / 10; }
	/* A small inset on both sides; the pick scene's fan is closed up so its cards stay inside it
	   (at 78% with a ±30% fan they ran off both edges of a phone). */
	.is-live .tscene { padding-inline: var(--space-3); }
	.is-live .tpick { width: 70%; }
	.tcard--ghost-a { translate: -18% 3%; }
	.tcard--ghost-b { translate: 18% 3%; }
	.home-tests__actions { width: 100%; }
	.home-tests__go { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ what to expect */
.home-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--gap-grid); margin: 0; padding: 0; list-style: none; }
.home-trust li { display: grid; justify-items: start; align-content: start; gap: var(--gap-title); padding-top: var(--space-4); border-top: 1.5px solid var(--primary-200); }
.home-trust__icon { margin-bottom: var(--space-2); transition: background-color 220ms var(--iz-ease), color 220ms var(--iz-ease), transform 220ms var(--iz-ease-out); }
body.home .home-trust h3 { font: var(--text-h4); }
body.home .home-trust p { font: var(--text-body-s); }
@media (hover: hover) and (pointer: fine) { .home-trust li:hover .home-trust__icon { background: var(--secondary-600); color: #fff; transform: rotate(-6deg); } }

/* ------------------------------------------------------------------ articles: a picture grid and the next few
   Owner, 2026-09-30, second pass ("keep it restrained"): at the inline start a 2×2 grid of the four
   latest articles as picture cards (post-card.php `overlay`); at the inline end the next posts, up
   to three, as compact lines (`line`). The list exists only when a fifth post does (C2); without it
   the grid takes the whole width, four across. Both variants are styled here because only the
   homepage draws them; content.css still gives every `.post-card` its base (the stretched link,
   the ring on the card), and the rules below turn off the base hover lift for both.

   The picture card. 4:3, so the 2×2 grid stays about as tall as two cards side by side. The scrim is
   two layers: a dark gradient that alone carries the text's contrast — measured with a pure white
   picture behind it, the worst case — and over it a light blur masked to fade upward, which only
   softens the picture. The top ~60% of the picture is untouched. Without backdrop-filter the
   gradient is the whole scrim. Hover (fine pointers): the picture scales to 1.03 and the scrim
   deepens a touch; nothing else moves.

   ≤1024: the grid full width (2×2), the list under it. ≤640: the grid becomes a sideways snap row
   (each card 82% wide, the next one showing) — a 2×2 at phone width leaves a 170px card, too small
   for a two-line title on a 4:3 picture. */
.home-posts { display: grid; gap: var(--space-block); align-items: start; }
.home-posts.has-list { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
/* The picture cards are a looping carousel (owner, 2026-10-01): two to a view beside the side list, three
   when there is none, one with the next peeking on a phone. The lines beside them stay a vertical list. */
.home-posts__main { display: grid; gap: var(--space-2); min-width: 0; }
.home-posts__nav { justify-self: end; }
.home-posts__grid {
	--posts-gap: var(--space-3);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--posts-gap)) / 3);
	gap: var(--posts-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Room for the focus ring, which a scrolling box would otherwise clip. */
	margin: calc(-1 * var(--space-2));
	padding: var(--space-2);
	scroll-padding-inline: var(--space-2);
}
.home-posts__grid::-webkit-scrollbar { display: none; }
.home-posts__grid > .post-card { scroll-snap-align: start; }
.home-posts__grid:focus-visible { outline: none; box-shadow: var(--iz-focus); border-radius: var(--radius-card); }
.has-list .home-posts__grid { grid-auto-columns: calc((100% - var(--posts-gap)) / 2); }

.post-card--overlay {
	display: grid;
	aspect-ratio: 4 / 3;
	border: 0;
	border-radius: var(--radius-card);
	background: linear-gradient(160deg, var(--primary-700), var(--secondary-800));
	isolation: isolate;
}
.post-card--overlay .post-card__media { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; background: transparent; color: rgb(255 255 255 / .5); }
.post-card--overlay .post-card__media img { transition: transform 260ms var(--iz-ease-out); }
/* Never shorter than 9.5rem, so on a small card it still reaches over the title and meta line. */
.post-card__scrim { position: absolute; inset: auto 0 0; z-index: -1; height: max(72%, 10.5rem); pointer-events: none; }
.post-card__scrim::before, .post-card__scrim::after { content: ""; position: absolute; inset: 0; }
/* The contrast layer: at least .56 black wherever a two-line title and the meta line under it can
   reach, fading to nothing over the top third of the scrim. Measured over a pure white picture: the
   top of a two-line title 5.5:1, the meta line 7.3:1 (at 220, 257 and 313px card heights). */
/* Eased, not three straight segments (owner, 2026-10-01: a smoother fade): the .56 floor holds under the
   text (the bottom ~55%), then the dark lets go along an S-curve of small steps, so no edge shows. */
.post-card__scrim::before { background: linear-gradient(to top, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .72) 18%, rgb(0 0 0 / .64) 36%, rgb(0 0 0 / .56) 52%, rgb(0 0 0 / .47) 62%, rgb(0 0 0 / .36) 71%, rgb(0 0 0 / .25) 79%, rgb(0 0 0 / .15) 86%, rgb(0 0 0 / .07) 92%, rgb(0 0 0 / .02) 97%, transparent 100%); }
/* The deeper hover state is its own layer, so it animates opacity and never a gradient. */
.post-card__scrim::after { background: linear-gradient(to top, rgb(0 0 0 / .16), rgb(0 0 0 / .08) 40%, rgb(0 0 0 / .02) 70%, transparent 88%); opacity: 0; transition: opacity 260ms var(--iz-ease-out); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.post-card__scrim { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to top, #000 38%, rgb(0 0 0 / .8) 55%, rgb(0 0 0 / .5) 70%, rgb(0 0 0 / .2) 85%, transparent 100%); mask-image: linear-gradient(to top, #000 38%, rgb(0 0 0 / .8) 55%, rgb(0 0 0 / .5) 70%, rgb(0 0 0 / .2) 85%, transparent 100%); }
}
.post-card--overlay .post-card__body { align-self: end; gap: 0; padding: var(--pad-row); }
.post-card--overlay .post-card__meta { color: rgb(255 255 255 / .88); } /* under the title, in the darkest band */
/* One step under the section's card titles (--text-h4): the picture is the lead here. */
.post-card--overlay .post-card__title { color: #fff; font: var(--text-body-s); font-weight: 700; }
/* A white ring inside the kit's (whose blue alone would not show on a dark picture). */
.post-card--overlay:has(.post-card__link:focus-visible) { box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-focus-ring); }

/* The compact line lives in content.css since 2026-09-30 (the articles' sidebar draws it too). */
.home-posts__list { display: grid; gap: var(--space-2); }
/* Each side line is a card of its own: white, with a border (owner, 2026-10-01). */
.home-posts__list > .post-card--line,
.has-list .home-posts__list > .post-card--line:first-child { padding: var(--space-2); border: 1px solid var(--iz-line-soft); border-radius: var(--radius-card); background: var(--color-surface); }
.home-posts__list > .post-card--line + .post-card--line { border-top: 1px solid var(--iz-line-soft); border-radius: var(--radius-card); }
.home-posts__list > .post-card--line .post-card__link::after { border-radius: var(--radius-card); }

@media (hover: hover) and (pointer: fine) {
	.post-card--overlay:hover { transform: none; box-shadow: none; }
	.post-card--overlay:hover .post-card__title a { color: #fff; }
	.post-card--overlay:hover .post-card__media img { transform: scale(1.03); }
	.post-card--overlay:hover .post-card__scrim::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.post-card--overlay:hover .post-card__media img { transform: none; }
}
@media (max-width: 1024px) {
	.home-posts.has-list { grid-template-columns: minmax(0, 1fr); }
	.home-posts:not(.has-list) .home-posts__grid, .has-list .home-posts__grid { grid-auto-columns: calc((100% - var(--posts-gap)) / 2); }
}
@media (max-width: 767px) {
	.home-posts:not(.has-list) .home-posts__grid, .has-list .home-posts__grid { grid-auto-columns: 86%; gap: var(--space-2); --posts-gap: var(--space-2); }
}

/* ------------------------------------------------------------------ forum
   Owner's review, 2026-09-29: every question is its own box — white, with a border — instead of
   a ruled list; the category line is gone; the mark is a Font Awesome icon; the ask box is grey,
   not a tint (the 2026-09-19 rule for inner boxes), and its button sits at the inline end. */
.home-forum { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: var(--space-block); align-items: start; }
.home-forum__rows { display: grid; gap: var(--gap-list); }
.home-question {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	padding: var(--pad-row);
	border: 1px solid var(--iz-line-soft);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	transition: border-color 180ms var(--iz-ease), box-shadow 180ms var(--iz-ease), scale 160ms var(--iz-ease-out);
}
.home-question__icon { font-size: var(--home-icon-tile); }
body.home .home-question h3 { font: var(--text-h4); }
.home-question h3 a { color: inherit; text-decoration: none; transition: color 180ms var(--iz-ease); }
.home-question__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.home-question__link:focus-visible { outline: none; }
.home-question:has(.home-question__link:focus-visible) { box-shadow: 0 0 0 3px var(--color-focus-ring); }
/* The whole box is the link's target, so the whole box answers the press. */
.home-question:has(.home-question__link:active) { scale: var(--iz-press-lg); }
body.home .home-question__meta { display: flex; flex-direction: column; align-items: flex-end; color: var(--iz-ink-soft); font: var(--text-caption); white-space: nowrap; }
.home-question__meta b { color: var(--color-heading); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
	.home-question:hover { border-color: var(--primary-200); box-shadow: var(--shadow-card); }
	.home-question:hover h3 a { color: var(--secondary-700); }
}
.home-forum__ask { display: flex; flex-direction: column; gap: var(--gap-title); padding: var(--pad-card); border: 1px solid var(--iz-line-soft); border-radius: var(--radius-card); background: var(--color-surface); }
body.home .home-forum__ask h3 { font: var(--text-h4); }
body.home .home-forum__ask p { font: var(--text-body-s); }
.home-forum__ask .iz-btn { align-self: flex-end; margin-top: var(--space-2); }
.home-forum__ask h3 { display: flex; align-items: center; gap: var(--gap-inline); }
.home-forum__ask h3 .fa-solid { color: var(--secondary-600); font-size: var(--text-h4-size); }

/* The footer card follows the last section with the same rhythm. */
body.home .site-footer.has-card { padding-top: 0; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1024px) {
	.home-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.home-hero__visual { width: 100%; max-width: 440px; margin-top: var(--space-1); }
	body.home .home-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* The course and workshop carousels, and the tests band, have their own breakpoints, with
	   their sections above. */
}
@media (max-width: 860px) {
	.home-steps__list { grid-template-columns: 1fr; gap: var(--space-4); }
	.home-vine { display: none; }
	/* The node stands at the start of the row: its 56px plus one 16px step of room. */
	.home-step { justify-items: start; text-align: start; padding-top: 0; padding-inline-start: calc(56px + var(--space-3)); min-height: 56px; }
	.home-step__node { position: absolute; top: 0; inset-inline-start: 0; margin: 0; }
	.home-step:not(:last-child)::before { content: ""; position: absolute; top: 60px; bottom: -20px; inset-inline-start: 27px; width: 2px; background: var(--secondary-200); }
	.home-about, .home-forum { grid-template-columns: minmax(0, 1fr); }
	.home-about__portrait { order: -1; max-width: 320px; }
}
@media (max-width: 560px) {
	.home-hero__visual { max-width: 358px; gap: var(--space-1); }
	.home-sprout { flex-basis: 100px; width: 100px; left: -40px; }
	body.home .home-paths, .home-trust { grid-template-columns: 1fr; }
	.home-path--featured { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "text text" "link link"; row-gap: var(--space-1); padding: var(--pad-card); }
	.home-path--featured .iz-link { padding-inline-start: 0; }
	.home-path__glyph { inset-inline-end: -30px; opacity: .3; } /* the link sits at the inline end, over the leaf: quieter here so it stays clear */
	.home-question { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--gap-title); }
	body.home .home-question__meta { grid-column: 2; flex-direction: row; gap: var(--space-2); }
	.home-actions .iz-btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------ reduced motion: fewer, gentler
   home.js does its half: the chips stay a still row that scrolls sideways (`.is-row`, never
   `.is-marquee`), and the tests band starts neither its loop nor its leaves, so it stays the
   storyboard of its scenes at rest (its sway is gated in its own block). */
@media (prefers-reduced-motion: reduce) {
	.home-hero__light, .home-sprout__sway { animation: none; }
	.home-sprout__drift { display: none; }
	.will-reveal { transform: none; }
	.home-path, .home-trust__icon { transform: none !important; }
	.home-question { scale: none !important; }
	@starting-style {
		.home-in, .home-in--visual { transform: none; }
		.home-sprout__stem, .home-mark path { stroke-dashoffset: 0; }
		.home-sprout__leaf { opacity: 1; transform: none; }
	}
}

/* «ادامهٔ مطلب ←» on the side list's article cards only (owner, 2026-10-01): just the green label and arrow,
   no background or padding. Decorative — the title's link covers the card. */
.post-card--line .post-card__btn { display: inline-flex; align-items: center; align-self: flex-end; gap: var(--gap-inline); margin-top: var(--space-1); padding: 0; background: none; color: var(--secondary-700); font: var(--text-button-s); white-space: nowrap; }
.post-card--line .post-card__btn .fa-solid { font-size: var(--text-body-s-size); transition: transform 200ms var(--iz-ease-out); }
@media (hover: hover) and (pointer: fine) {
	.post-card--line:hover .post-card__btn .fa-solid { transform: translateX(-3px); }
}

/* A looping row can be dragged with a mouse; while it is, snapping and text selection are off so the row follows the pointer. */
.home-posts__grid.is-draggable { cursor: grab; }
.home-posts__grid.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.home-posts__grid img { -webkit-user-drag: none; }