/* =============================================================================
   PAGINA MODULA 3.0  (/modula-3-0/, se încarcă doar pe ea)
   =============================================================================

   Landing page-ul care desface editorul nou bucată cu bucată: de ce l-am refăcut,
   ce face fiecare parte, cum îl încerci. Generat de ~/modula-ollie-build/gen_beta.py,
   cu piesele din site.css: secțiunile (`.mh-section`), eticheta numerotată
   (`.mh-rule`), capul de secțiune (`.mh-head`), CTA-ul final (`.mh-start-box`).
   Structura e inspirată de deltatheme.com (zonele cu textură, planșele, rânduri
   cu etichetă, machete de produs, tab-uri, grila de abilități), desenată cu cele
   două fonturi și paleta site-ului. Demo-urile mici (înainte / acum, clipurile
   anatomiei, istoricul, chat-ul, tab-urile) sunt pornite de beta.js.

   CUPRINS
     0. Fundalurile pe toată lățimea
     1. Piese comune (rânduri cu etichetă, machete, capturi, citatul mare, tab-uri, bife)
    1b. Zonele cu textură și planșele
     2. Capul paginii (pe negru, cu captura editorului)
     3. 01 De ce (înainte / acum: editorul vechi peste cel nou, cu mâner)
    3b. Citatul echipei (grila fină, iconițele, celula selectată)
     4. 02 Anatomia (ecranul cu clipurile, cele zece părți dedesubt)
     5. 04 Salvarea și undo (istoricul)
     6. 05 Pozele (tab-urile cu text)
     7. 06 Asistenții AI (pilonii, chat-ul, grila de abilități)
     8. 07 Întrebările
     9. Mișcare redusă
    10. Ecrane înguste
   ========================================================================== */


/* -----------------------------------------------------------------------------
   0. FUNDALURILE PE TOATĂ LĂȚIMEA
   Conținutul rămâne în coloana obișnuită (wideSize), dar fundalurile cu textură
   ies până la marginea ecranului. `--m3-bleed` = distanța de la marginea
   coloanei până la marginea ecranului; `--m3-out` = cât trece un panou cu
   textură de macheta de pe el, spre mijlocul paginii.
   -------------------------------------------------------------------------- */

body {
	--m3-bleed: max(var(--wp--preset--spacing--medium), (100vw - var(--wp--style--global--wide-size)) / 2);
	--m3-out: clamp(40px, 5vw, 96px);
}

/* 100vw include și bara de derulare: ce trece de marginea secțiunii se taie, ca
   pagina să nu se poată derula în lateral. */
.wp-block-post-content > .mh-section { overflow-x: clip; }


/* Fără colțuri rotunjite pe pagina asta: capturile, planșele, machetele, butoanele,
   etichetele și cutia de la final au colțuri drepte. Rotunjimile vin din variabile
   (`--mc-radius-*` și presetările din theme.json), puse aici pe zero doar pentru
   conținutul paginii; header-ul și footer-ul rămân ca pe restul site-ului. Rămân
   rotunde doar cercurile (punctele numerotate, mânerul slider-ului, bulinele). */
.wp-block-post-content {
	--mc-radius-card: 0px;
	--mc-radius-row: 0px;
	--mc-radius-control: 0px;
	--wp--preset--border-radius--xs: 0px;
	--wp--preset--border-radius--sm: 0px;
	--wp--preset--border-radius--md: 0px;
	--wp--preset--border-radius--lg: 0px;
	--wp--preset--border-radius--xl: 0px;
	--wp--preset--border-radius--2-xl: 0px;
	--wp--preset--border-radius--full: 0px;
}


/* -----------------------------------------------------------------------------
   1. PIESE COMUNE
   -------------------------------------------------------------------------- */

/* În componentele de mai jos spațiile le dau gap-urile, nu marginea pe care tema
   o pune între blocuri (aceea ar împinge primul element dintr-o grilă mai jos). */
.mh-inner .m3-zone > *, .m3-board > *, .m3-hero-text > *,
.m3-split > *, .m3-rows > *, .m3-row > *, .m3-row-body > *, .m3-mock > *,
.m3-ba > *, .m3-ba-nums > *, .m3-ba-stat > *,
.m3-quote > *, .m3-cells > *, .m3-cell > *, .m3-quote-copy > *, .m3-x > *, .m3-x-screen > *, .m3-x-parts > *, .m3-x-part > *,
.m3-tabs > *, .m3-tab > *, .m3-tab-body > *, .m3-tab-copy > *,
.m3-hist-top > *, .m3-hist-list > *,
.m3-ai > *, .m3-pillars > *, .m3-pillar > *, .m3-abils > *, .m3-abil-grid > *,
.m3-faq > * {
	margin: 0;
}

/* Secțiunile se ating: între benzile colorate, spațiul pe care tema îl pune între
   blocuri ar apărea ca o fâșie crem. */
.wp-block-post-content > .mh-section { margin-block: 0; }

/* Două coloane: textul și imaginea / macheta. */
.m3-split {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: 64px;
	align-items: start;
}

/* Bifele în stânga, captura cu tab-uri în dreapta, la fel de înalte. Dacă lista e
   mai scurtă, bifele se răsfiră pe toată înălțimea capturii; dacă e mai lungă,
   captura crește cu ea și se taie la dreapta, fără să se deformeze. */
.m3-split.is-even { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: stretch; }
.m3-split.is-even > .m3-checks { align-content: space-between; }
.m3-split.is-even > .m3-tabs.is-ready { display: flex; flex-direction: column; }
.m3-split.is-even > .m3-tabs.is-ready > .m3-tab:not([hidden]) { display: flex; flex: 1; flex-direction: column; }
.m3-split.is-even > .m3-tabs.is-ready .m3-shot { flex: 1; }
.m3-split.is-even > .m3-tabs.is-ready .m3-shot img { height: 100%; object-fit: cover; object-position: left top; }

/* Rândurile cu etichetă (ca „SYNTAX / Standard syntax" din Delta): eticheta mică
   în stânga, titlul și o frază în dreapta, cu linii fine între rânduri. */
.m3-rows { border-top: 1px solid var(--mc-line); }
.m3-row {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 24px;
	padding: 24px 0;
	border-bottom: 1px solid var(--mc-line);
}
.m3-row-label { padding-top: .5em; color: var(--mc-muted); }
.m3-row-title { font-size: var(--wp--preset--font-size--medium); line-height: 1.1; }
.m3-row-text { margin-top: 8px !important; color: var(--mc-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.6; }

.m3-rows.is-dark,
.m3-rows.is-dark .m3-row { border-color: var(--wp--preset--color--border-dark); }
.m3-rows.is-dark .m3-row-label,
.m3-rows.is-dark .m3-row-text { color: var(--wp--preset--color--main-accent); }

/* Machetele (Find a setting, istoricul, chat-ul): un card alb, cu o notă mică jos. */
.m3-mock {
	padding: 28px;
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius-card);
	background: var(--mc-card);
	color: var(--mc-ink);
	box-shadow: var(--mc-shadow-float);
}
.m3-mock.is-dark {
	border-color: var(--mc-ink);
	background: var(--mc-ink);
	color: var(--wp--preset--color--base);
	box-shadow: none;
}
.m3-mock-note {
	margin-top: 20px !important;
	color: var(--mc-muted);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Capturile de ecran. */
.m3-shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius-row);
	box-shadow: 0 24px 60px rgb(30 30 28 / .10);
}
.m3-caption { margin-top: 14px !important; color: var(--mc-muted); font-size: var(--wp--preset--font-size--x-small); line-height: 1.5; }

/* Tab-urile. beta.js face butoanele din `.m3-tab-name` și pune `.is-ready` pe
   container; fără JavaScript panourile stau unul sub altul, cu numele deasupra. */
.m3-tabs > * + * { margin-top: 48px !important; }
.m3-tab-name {
	margin-bottom: 20px !important;
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.m3-tabs.is-ready > * + * { margin-top: 0 !important; }
.m3-tabs.is-ready .m3-tab-name { display: none; }
.m3-tabs.is-ready .m3-tab[hidden] { display: none; }
.m3-tablist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px !important; }
.m3-tablist button {
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--mc-line);
	border-radius: var(--wp--preset--border-radius--full);
	background: transparent;
	color: var(--mc-ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.m3-tablist button:hover { border-color: var(--mc-ink); }
.m3-tablist button[aria-selected="true"] { border-color: var(--mc-ink); background: var(--mc-ink); color: var(--wp--preset--color--base); }
.m3-tablist button:focus-visible { outline: 2px solid var(--mc-ink); outline-offset: 3px; }
.m3-tab:focus-visible { outline: 2px solid var(--mc-ink); outline-offset: 8px; border-radius: var(--mc-radius-row); }
.m3-tabs.is-ready .m3-tab:not([hidden]) { animation: m3-fade .35s ease both; }

@keyframes m3-fade {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* Lista cu bife pătrate (ca în Delta). Începutul unei bife poate fi îngroșat, ca un
   titlu; restul textului e atunci gri. */
.m3-checks { display: grid; gap: 12px; margin: 24px 0 0 !important; padding: 0 !important; list-style: none; }
.m3-checks li { position: relative; padding-left: 32px; font-size: var(--wp--preset--font-size--small); line-height: 1.6; }
.m3-checks li:has(strong) { color: var(--mc-muted); }
.m3-checks strong { color: var(--mc-ink); font-weight: 600; }
.m3-checks.is-big { gap: 24px; margin: 0 !important; }
.m3-checks.is-big > li { margin: 0; }
.m3-checks.is-big li { padding-left: 36px; }
.m3-checks li::before {
	content: "";
	position: absolute;
	top: .2em;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 0;
	background: var(--mc-ink);
}
.m3-checks li::after {
	content: "";
	position: absolute;
	top: calc(.2em + 6px);
	left: 6px;
	width: 8px;
	height: 4px;
	border-bottom: 2px solid var(--mc-card);
	border-left: 2px solid var(--mc-card);
	transform: rotate(-45deg);
}


/* -----------------------------------------------------------------------------
   1b. ZONELE CU TEXTURĂ ȘI PLANȘELE
   Ca la deltatheme.com: o bandă făcută din poza unei galerii, moale, ca un cadru
   stricat (blocuri încețoșate, dâre, rânduri rupte), cu granulație și linii de scanare
   peste ea, care se rupe în pătrate mari acolo unde întâlnește pagina; peste ea stă o
   planșă (o foaie crem cu riglă sus) sau o machetă. Banda e `::before` pe `.m3-zone`
   (și pe `.mh-start`, CTA-ul de la final). Fiecare zonă își alege mai jos poza, locul
   și marginea care se rupe.

   Straturile benzii, de sus în jos: liniile de scanare (`--m3-scan`, o linie de 1px la
   fiecare 3px), granulația (o placă de 128px desenată la dublu, amestecată cu `overlay`)
   și poza, la mărimea ei în pixeli CSS (`--m3-size-*`): banda doar decupează din ea, nu
   o întinde. Masca le taie pe toate: pe margine pătratele (un SVG, deci clare la orice
   densitate de pixeli: pătrate de 32px în trepte, apoi pătrățele de 4px care se răresc),
   pe restul benzii un gradient plin, cu 2px peste pătrate, ca să nu rămână o linie între
   ele. Pe retina sunt clare granulația, liniile și pătratele; poza e moale intenționat.

   Fișierele le face ~/modula-ollie-build/textures.mjs: la fiecare generare au alt nume,
   iar scriptul schimbă și numele (și mărimile pozelor) din fișierul ăsta.
   -------------------------------------------------------------------------- */

body {
	--m3-size-hero: 2880px 1100px;
	--m3-size-save: 1600px 720px;
	--m3-size-ai: 2880px 800px;
	--m3-size-cta: 2880px 840px;
	/* cât de adâncă e marginea care se rupe (tot din textures.mjs: pătratele câte sunt × 32px) */
	--m3-edge-hero: 320px;
	--m3-edge-save: 192px;
	--m3-edge-ai: 320px;
	--m3-edge-cta: 320px;
	/* cât de lung e desenul marginii, care se repetă de-a lungul ei (pe orizontală, pe verticală) */
	--m3-edge-len: 1440px;
	--m3-edge-len-y: 1600px;
	--m3-scan: repeating-linear-gradient(to bottom, rgb(30 30 28 / .14) 0 1px, transparent 1px 3px);
}

.m3-zone,
.mh-start { position: relative; isolation: isolate; }
.m3-zone::before,
.mh-start::before {
	content: "";
	position: absolute;
	z-index: -1;
	background-position: 0 0, 0 0, center top;
	background-repeat: repeat, repeat, no-repeat;
	background-blend-mode: normal, overlay, normal;
	pointer-events: none;
	/* se rupe marginea de sus (panoul de la 04 o are pe cea din stânga, mai jos) */
	-webkit-mask-position: center top, center bottom;
	mask-position: center top, center bottom;
	-webkit-mask-size: var(--m3-edge-len) var(--m3-edge), 100% calc(100% - var(--m3-edge) + 2px);
	mask-size: var(--m3-edge-len) var(--m3-edge), 100% calc(100% - var(--m3-edge) + 2px);
	-webkit-mask-repeat: repeat-x, no-repeat;
	mask-repeat: repeat-x, no-repeat;
}

/* Capul paginii: banda urcă din capătul secțiunii până puțin peste jumătatea capturii, deci
   se vede doar pe lângă ea, și se rupe în sus, în negru. Poza e „Alpine panorama”, prima din captură; spre jos
   o umbră (al treilea strat) o stinge aproape până la negrul benzii. */
.m3-zone.is-hero::before {
	top: calc(50% - 35px);
	right: calc(-1 * (var(--m3-bleed) - var(--m3-hero-out)));
	bottom: 0;
	left: calc(-1 * (var(--m3-bleed) - var(--m3-hero-out)));
	--m3-edge: var(--m3-edge-hero);
	background-image: var(--m3-scan), url("../img/beta/m3-grain-096b5670.webp"),
		linear-gradient(to bottom, rgb(30 30 28 / 0) 30%, rgb(30 30 28 / .85)), url("../img/beta/m3-hero-060090d6.webp");
	background-position: 0 0, 0 0, 0 0, center top;
	background-repeat: repeat, repeat, no-repeat, no-repeat;
	background-size: auto, 128px 128px, 100% 100%, var(--m3-size-hero);
	background-blend-mode: normal, overlay, normal, normal;
	-webkit-mask-image: url("../img/beta/m3-edge-hero-b9608696.svg"), linear-gradient(#000 0 0);
	mask-image: url("../img/beta/m3-edge-hero-b9608696.svg"), linear-gradient(#000 0 0);
}

/* Abilitățile AI: banda stă sub jumătatea de jos a planșei, până la capătul secțiunii,
   și se rupe în sus. */
.m3-zone.is-ai::before {
	top: 38%;
	right: calc(-1 * var(--m3-bleed));
	bottom: calc(-1 * var(--wp--preset--spacing--xx-large));
	left: calc(-1 * var(--m3-bleed));
	--m3-edge: var(--m3-edge-ai);
	background-image: var(--m3-scan), url("../img/beta/m3-grain-096b5670.webp"), url("../img/beta/m3-ai-0ee49636.webp");
	background-size: auto, 128px 128px, var(--m3-size-ai);
	-webkit-mask-image: url("../img/beta/m3-edge-ai-6e870a52.svg"), linear-gradient(#000 0 0);
	mask-image: url("../img/beta/m3-edge-ai-6e870a52.svg"), linear-gradient(#000 0 0);
}

/* Panourile de sub o machetă: ies din coloană până la marginea ecranului și se rup spre
   mijlocul paginii. Din margine se vede doar fâșia din stânga machetei: în ea, pătrățelele;
   treptele rămân mai mult sub machetă. */
.m3-pane { padding-block: 56px; }
.m3-zone.is-save::before {
	--m3-edge: var(--m3-edge-save);
	top: 0;
	right: calc(-1 * var(--m3-bleed));
	bottom: 0;
	left: calc(-1 * var(--m3-out));
	background-image: var(--m3-scan), url("../img/beta/m3-grain-096b5670.webp"), url("../img/beta/m3-save-e2c1eb4a.webp");
	background-position: 0 0, 0 0, left center;
	background-size: auto, 128px 128px, var(--m3-size-save);
	-webkit-mask-image: url("../img/beta/m3-edge-save-204a0a61.svg"), linear-gradient(#000 0 0);
	mask-image: url("../img/beta/m3-edge-save-204a0a61.svg"), linear-gradient(#000 0 0);
	-webkit-mask-position: left top, right top;
	mask-position: left top, right top;
	-webkit-mask-size: var(--m3-edge) var(--m3-edge-len-y), calc(100% - var(--m3-edge) + 2px) 100%;
	mask-size: var(--m3-edge) var(--m3-edge-len-y), calc(100% - var(--m3-edge) + 2px) 100%;
	-webkit-mask-repeat: repeat-y, no-repeat;
	mask-repeat: repeat-y, no-repeat;
}
/* Pe negru, istoricul are panoul în dreapta; între rânduri și el, loc pentru margine. */
.m3-saving .m3-split { gap: calc(var(--m3-out) + 32px); }

/* CTA-ul de la final: banda urcă din footer și se rupe spre titlu. Secțiunea primește
   mai mult loc deasupra cutiei (cutia coboară peste footer, deci altfel banda ar fi doar
   o fâșie de pătrate). */
.wp-block-post-content > .mh-start { padding-top: clamp(160px, 14vw, 320px) !important; }
.mh-start::before {
	--m3-edge: var(--m3-edge-cta);
	inset: 0;
	background-image: var(--m3-scan), url("../img/beta/m3-grain-096b5670.webp"), url("../img/beta/m3-cta-ee16905c.webp");
	background-size: auto, 128px 128px, var(--m3-size-cta);
	-webkit-mask-image: url("../img/beta/m3-edge-cta-d7a9c1ab.svg"), linear-gradient(#000 0 0);
	mask-image: url("../img/beta/m3-edge-cta-d7a9c1ab.svg"), linear-gradient(#000 0 0);
}

/* Planșa: o foaie crem cu riglă sus. Opacă, ca să acopere banda. */
.m3-board {
	position: relative;
	padding: 88px 64px 64px;
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius-card);
	background: color-mix(in srgb, var(--mc-card) 55%, var(--wp--preset--color--base));
	color: var(--mc-ink);
}

/* Rigla: o linioară la 10px, una mai lungă la fiecare 50px. */
.m3-board::before {
	content: "";
	position: absolute;
	top: 14px;
	right: 18px;
	left: 18px;
	height: 12px;
	background:
		repeating-linear-gradient(90deg, var(--mc-muted) 0 1px, transparent 1px 50px) top left / 100% 12px no-repeat,
		repeating-linear-gradient(90deg, var(--mc-line) 0 1px, transparent 1px 10px) top left / 100% 6px no-repeat;
	opacity: .7;
	pointer-events: none;
}


/* -----------------------------------------------------------------------------
   2. CAPUL PAGINII
   Pe negru, de la logo până sub captura editorului: headerul din page-landing
   primește și el fundalul negru, ca să fie o singură bandă. Textul e centrat.
   -------------------------------------------------------------------------- */

.site-header-minimal { background: var(--mc-ink); }
.site-header-minimal .wp-block-site-title a { color: var(--wp--preset--color--base); }

.m3-hero-text { max-width: 860px; margin-inline: auto; text-align: center; }
.m3-hero-title {
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: .95;
	letter-spacing: -.02em;
}
.m3-hero-title em { font-style: italic; }
.m3-hero-lead { max-width: 580px; margin-top: 36px !important; margin-inline: auto !important; color: var(--wp--preset--color--main-accent); line-height: 1.6; }
.m3-hero .m3-hero-btns { gap: 12px; justify-content: center; margin-top: 36px !important; }
/* Cele două butoane, aceeași mărime (stilul Outline din core vine cu un padding mai
   mic), în culorile de pe negru: primul alb, al doilea doar cu contur. */
.m3-hero .m3-hero-btns .wp-block-button__link { padding: 1.15em 2.1em; }
.m3-hero .m3-hero-btns .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--wp--preset--color--base); color: var(--mc-ink); }
.m3-hero .m3-hero-btns .is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--base); }
.m3-hero .m3-hero-btns .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--wp--preset--color--main-accent); }
.m3-hero .m3-hero-btns .is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--base); color: var(--mc-ink); }

/* Captura iese din coloană (`--m3-hero-out` pe fiecare parte, cât lasă marginea
   ecranului) și stă lipită de capătul benzii negre: jos n-are nici ramă, nici colțuri
   rotunde. Umbra rămâne în bandă (altfel s-ar vedea ca o pată peste secțiunea următoare). */
.m3-hero { --m3-hero-out: clamp(0px, calc(var(--m3-bleed) - 40px), 120px); }
.wp-block-post-content > .m3-hero { overflow: clip; }
.m3-hero .mh-inner > .m3-zone.is-hero { margin-block-start: 160px; margin-inline: calc(-1 * var(--m3-hero-out)); }
.m3-hero-shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--border-dark);
	border-bottom: 0;
	border-radius: var(--mc-radius-card) var(--mc-radius-card) 0 0;
	box-shadow: 0 0 90px rgb(0 0 0 / .4);
}


/* -----------------------------------------------------------------------------
   3. 01 DE CE
   Înainte / acum: captura editorului vechi stă peste cea a editorului nou și e
   tăiată la mâner (`--m3-ba`). beta.js adaugă mânerul și un câmp range nevăzut
   peste toată imaginea, deci merge cu mouse-ul, cu degetul și cu săgețile. Fără
   JavaScript, linia stă la jumătate. Sub ea, cifrele buclei vechi lângă cele de acum.
   -------------------------------------------------------------------------- */

.m3-ba {
	--m3-ba: 50%;
	position: relative;
	overflow: hidden;
	aspect-ratio: 2360 / 1327;
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius-card);
	background: var(--mc-card);
	box-shadow: 0 24px 60px rgb(30 30 28 / .10);
}
.m3-ba > .m3-ba-img { position: absolute; inset: 0; }
.m3-ba-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.m3-ba-img.is-old { clip-path: inset(0 calc(100% - var(--m3-ba)) 0 0); }
/* Linia dintre ele. */
.m3-ba::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	left: var(--m3-ba);
	width: 2px;
	margin-left: -1px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 0 0 1px rgb(30 30 28 / .18);
	pointer-events: none;
}
.m3-ba-knob {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: var(--m3-ba);
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	border-radius: 50%;
	background: var(--mc-ink);
	box-shadow: 0 8px 24px rgb(30 30 28 / .3);
	pointer-events: none;
}
.m3-ba-knob::before {
	content: "";
	position: absolute;
	inset: 14px;
	background: var(--wp--preset--color--base);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.m3-ba-range {
	position: absolute;
	z-index: 4;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}
.m3-ba-range:focus-visible + .m3-ba-knob { outline: 2px solid var(--wp--preset--color--base); outline-offset: 3px; }
.m3-ba-label {
	position: absolute;
	z-index: 2;
	top: 16px;
	padding: 6px 14px;
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--mc-ink);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	box-shadow: 0 4px 14px rgb(30 30 28 / .25);
	pointer-events: none;
}
/* „Before" stă pe bara neagră a WordPress-ului, „Now" pe bara albă a editorului nou. */
.m3-ba-label.is-before { left: 16px; background: var(--wp--preset--color--base); color: var(--mc-ink); }
.m3-ba-label.is-now { right: 16px; }

/* Cifrele: cea veche în gri, tăiată, apoi cea de acum. */
.m3-why-wrap .mh-inner > .m3-ba-nums { margin-block-start: 48px; }
.m3-ba-nums {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 64px;
	align-items: end;
}
.m3-ba-stat { padding-top: 20px; border-top: 1px solid var(--mc-line); }
.m3-ba-what { color: var(--mc-muted); font-size: var(--wp--preset--font-size--x-small); }
.m3-ba-num {
	margin-top: 10px !important;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
}
.m3-ba-num .is-old { color: var(--mc-muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.m3-ba-to { margin: 0 .3em; color: var(--mc-muted); font-family: var(--wp--preset--font-family--instrument-sans); font-size: var(--wp--preset--font-size--medium); vertical-align: .25em; }
.m3-ba-text { max-width: 400px; color: var(--mc-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.6; }


/* -----------------------------------------------------------------------------
   3b. CITATUL ECHIPEI
   Pe negru, o grilă fină pe toată banda, ca un canvas de design: în stânga nouă
   celule cu iconițele părților editorului, una selectată (rama cu mânere și
   eticheta ei); în dreapta citatul. Celula are `--m3-cell` (o șeptime din
   coloană, socotită din lățimea ei), iar liniile pornesc de la marginea
   coloanei, ca să cadă exact pe celule.
   -------------------------------------------------------------------------- */

.m3-quote-wrap .mh-inner { container-type: inline-size; }
.m3-quote {
	--m3-cell: calc(100cqw / 7);
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: calc(3 * var(--m3-cell)) minmax(0, 1fr);
	align-items: center;
}
.m3-quote::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -50vh;
	right: calc(-1 * var(--m3-bleed));
	bottom: -50vh;
	left: calc(-1 * var(--m3-bleed));
	background-image:
		linear-gradient(to right, var(--wp--preset--color--border-dark) 1px, transparent 1px),
		linear-gradient(to bottom, var(--wp--preset--color--border-dark) 1px, transparent 1px);
	background-position: var(--m3-bleed) 50vh;
	background-size: var(--m3-cell) var(--m3-cell);
	/* Grila ține doar până la celule și se stinge înainte de citat: textul stă pe negru curat. */
	-webkit-mask-image: linear-gradient(to right, #000 calc(var(--m3-bleed) + 2.5 * var(--m3-cell)), transparent calc(var(--m3-bleed) + 3.6 * var(--m3-cell)));
	mask-image: linear-gradient(to right, #000 calc(var(--m3-bleed) + 2.5 * var(--m3-cell)), transparent calc(var(--m3-bleed) + 3.6 * var(--m3-cell)));
	pointer-events: none;
}
.wp-block-post-content > .m3-quote-wrap { overflow: clip; }

.m3-cells { display: grid; grid-template-columns: repeat(3, var(--m3-cell)); grid-auto-rows: var(--m3-cell); }
.m3-cell { position: relative; }
.m3-cell::before {
	content: "";
	position: absolute;
	inset: 30%;
	background: var(--wp--preset--color--base);
	-webkit-mask: var(--m3-ico) no-repeat center / contain;
	mask: var(--m3-ico) no-repeat center / contain;
}
.m3-cell.is-grid { --m3-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E"); }
.m3-cell.is-lightbox { --m3-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3Crect x='8.5' y='8.5' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
.m3-cell.is-filter { --m3-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 7.5V19l-4-2v-4.5z'/%3E%3C/svg%3E"); }
.m3-cell.is-undo { --m3-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 13 4 8l5-5'/%3E%3Cpath d='M4 8h10a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E"); }
.m3-cell.is-eye { --m3-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.m3-cell.is-search { --m3-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.m3-cell.is-devices { --m3-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='13' height='10' rx='1.5'/%3E%3Cpath d='M6.5 18h5'/%3E%3Crect x='17' y='9' width='5' height='11' rx='1.2'/%3E%3C/svg%3E"); }
.m3-cell.is-shield { --m3-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 3 8.2 7 10 4-1.8 7-5.5 7-10V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.m3-cell.is-sparkle { --m3-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3l1.8 5.2L17 10l-5.2 1.8L10 17l-1.8-5.2L3 10l5.2-1.8z'/%3E%3Cpath d='M18 15l.8 2.2L21 18l-2.2.8L18 21l-.8-2.2L15 18l2.2-.8z'/%3E%3C/svg%3E"); }
/* Celula selectată: rama, cele patru mânere și eticheta de deasupra. */
.m3-cell.is-picked { box-shadow: inset 0 0 0 1px var(--wp--preset--color--base); }
.m3-cell.is-picked::after {
	content: "";
	position: absolute;
	inset: -3px;
	background:
		linear-gradient(var(--wp--preset--color--base) 0 0) 0 0 / 7px 7px no-repeat,
		linear-gradient(var(--wp--preset--color--base) 0 0) 100% 0 / 7px 7px no-repeat,
		linear-gradient(var(--wp--preset--color--base) 0 0) 0 100% / 7px 7px no-repeat,
		linear-gradient(var(--wp--preset--color--base) 0 0) 100% 100% / 7px 7px no-repeat;
	pointer-events: none;
}
.m3-cell-tag {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	padding: 3px 8px;
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--mc-ink);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 600;
	letter-spacing: .04em;
	white-space: nowrap;
}

.m3-quote-copy { padding-left: var(--m3-cell); }
.m3-quote-label {
	color: var(--wp--preset--color--main-accent);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.m3-quote-text {
	max-width: 560px;
	margin-top: 24px !important;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.12;
}
.m3-quote-more { max-width: 460px; margin-top: 24px !important; color: var(--wp--preset--color--main-accent); font-size: var(--wp--preset--font-size--small); line-height: 1.6; }
.m3-quote-who { margin-top: 32px !important; font-size: var(--wp--preset--font-size--x-small); }
.m3-quote-who strong { font-weight: 600; }
.m3-quote-who span { margin-left: 6px; color: var(--wp--preset--color--main-accent); }


/* -----------------------------------------------------------------------------
   4. 02 ANATOMIA
   Editorul cum se deschide, mai lat decât coloana (`--m3-wide-out` pe fiecare
   parte, cât lasă marginea ecranului), cu cele zece părți dedesubt. Fiecare parte
   are un clip, filmat de ~/modula-ollie-build/anat/scenes.mjs pe canvas-ul de
   redesign: un cursor face ce face partea, camera îl urmărește. beta.js pune
   clipurile pe ecran, peste captură, și scrie sub el ce face cursorul. Fără
   JavaScript rămân captura și lista.
   -------------------------------------------------------------------------- */

.m3-anat-wrap { --m3-wide-out: clamp(0px, calc(var(--m3-bleed) - 32px), 210px); }
.m3-x { margin-inline: calc(-1 * var(--m3-wide-out)); }

/* Ecranul: captura, iar peste ea clipul care merge. Fără ramă de planșă și fără
   fundal: doar o linie fină și umbra, ca la celelalte capturi. */
.m3-x-screen {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--mc-line);
	background: var(--mc-card);
	box-shadow: 0 30px 80px rgb(30 30 28 / .12);
}
.m3-x-poster,
.m3-x-poster img { display: block; width: 100%; height: 100%; margin: 0; }
.m3-x.is-live:not(.is-idle) .m3-x-screen { cursor: pointer; }

/* Cele două video-uri: cel nou apare peste cel vechi, iar cel vechi se stinge abia
   după aceea, ca între clipuri să nu se vadă captura. */
.m3-x-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .3s ease .3s;
	pointer-events: none;
}
.m3-x-video.is-on { z-index: 1; opacity: 1; transition-delay: 0s; }

/* Partea arătată cu mouse-ul: o ramă pe zona ei. Arătată din listă sau de pe punct,
   restul ecranului se și întunecă, ca în primele secunde ale clipului ei (pe captură
   doar rama, altfel ecranul ar clipi cât plimbi mouse-ul peste el). */
.m3-x-spot {
	position: absolute;
	z-index: 2;
	border: 2px solid var(--mc-ink);
	box-shadow: 0 0 0 2px var(--wp--preset--color--base);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}
.m3-x.is-dim .m3-x-spot { box-shadow: 0 0 0 2px var(--wp--preset--color--base), 0 0 0 100vmax rgb(30 30 28 / .38); }
.m3-x.is-pointing .m3-x-spot { opacity: 1; }

/* Zonele părților se pot apăsa (cele mici stau peste cele mari), punctele la fel. */
.m3-x-hot {
	position: absolute;
	z-index: 3;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}
.m3-x-pins { position: absolute; z-index: 4; inset: 0; pointer-events: none; transition: opacity .3s ease; }
.m3-x-pin {
	position: absolute;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mc-ink);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 600;
	box-shadow: 0 0 0 4px rgb(245 243 238 / .92), 0 6px 16px rgb(30 30 28 / .25);
	cursor: pointer;
	pointer-events: auto;
	transition: opacity .2s ease, transform .2s ease;
}
.m3-x.is-pointing .m3-x-pin { opacity: .25; }
.m3-x.is-pointing .m3-x-pin.is-on { opacity: 1; transform: scale(1.25); }
/* Cât merge un clip, punctele și zonele nu se văd (clipul nu mai e captura). */
.m3-x:not(.is-idle) .m3-x-pins { visibility: hidden; opacity: 0; }
.m3-x:not(.is-idle) .m3-x-hot { display: none; }

/* Pe pauză: un buton mare de play în mijlocul ecranului. */
.m3-x-paused {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 50%;
	width: 72px;
	height: 72px;
	margin: -36px 0 0 -36px;
	border-radius: 50%;
	background: var(--mc-ink);
	box-shadow: 0 0 0 4px rgb(245 243 238 / .92);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}
.m3-x-paused::before {
	content: "";
	position: absolute;
	inset: 24px 22px 24px 29px;
	background: var(--wp--preset--color--base);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.m3-x.is-paused .m3-x-paused { opacity: 1; }

/* Sub ecran: ce face cursorul acum (cu numărul părții, ca punctul ei) și butonul
   Play all / Pause / Play. */
.m3-x-bar {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 56px;
	margin-top: 24px !important;
}
.m3-x-cap { display: flex; flex: 1; align-items: center; gap: 16px; min-width: 0; margin: 0; }
.m3-x-cap-n {
	display: grid;
	flex: 0 0 32px;
	place-items: center;
	height: 32px;
	border-radius: 50%;
	background: var(--mc-ink);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 600;
}
.m3-x.is-idle .m3-x-cap-n { display: none; }
.m3-x-cap-text {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.01em;
}
.m3-x-cap.is-new .m3-x-cap-text { animation: m3-fade .35s ease both; }
.m3-x-btn {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--mc-line);
	border-radius: 0;
	background: transparent;
	color: var(--mc-ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	cursor: pointer;
	transition: border-color .2s ease;
}
.m3-x-btn:hover { border-color: var(--mc-ink); }
.m3-x-btn:focus-visible { outline: 2px solid var(--mc-ink); outline-offset: 3px; }
/* Iconița: un triunghi (play), sau două bare (pauză). */
.m3-x-btn::before {
	content: "";
	flex: 0 0 10px;
	height: 12px;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.m3-x-btn.is-pause::before {
	background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
	clip-path: none;
}

/* Cele zece părți, pe cinci coloane. Linia de sus a părții care merge se umple cu
   negru, cât a mers clipul ei (`--m3-p`, din beta.js). Toată partea e un buton
   (`.m3-x-go`, pus de beta.js peste ea). */
.m3-x-parts {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 40px 24px;
	margin-top: 40px !important;
}
.m3-x.is-live .m3-x-bar + .m3-x-parts { margin-top: 32px !important; }
.m3-x-part { position: relative; padding-top: 20px; border-top: 1px solid var(--mc-line); }
.m3-x-part::before {
	content: "";
	position: absolute;
	top: -1px;
	right: 0;
	left: 0;
	height: 2px;
	background: var(--mc-ink);
	transform: scaleX(var(--m3-p, 0));
	transform-origin: left;
}
.m3-x-n {
	color: var(--mc-muted);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 600;
	letter-spacing: .14em;
	font-variant-numeric: tabular-nums;
}
.m3-x-title { margin-top: 10px !important; font-size: var(--wp--preset--font-size--medium); line-height: 1.1; }
.m3-x-text { margin-top: 8px !important; color: var(--mc-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.m3-x-part.is-on .m3-x-n { color: var(--mc-ink); }
.m3-x-part.is-hover .m3-x-title,
.m3-x-part.is-on .m3-x-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.m3-x-go {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}
.m3-x-go:focus-visible { outline: 2px solid var(--mc-ink); outline-offset: 6px; }


/* -----------------------------------------------------------------------------
   5. 04 SALVAREA ȘI UNDO
   Pe negru. Istoricul e un card alb în care butoanele Undo / Redo chiar taie și
   pun la loc schimbările din listă (beta.js); un click pe un rând sare până la el.
   -------------------------------------------------------------------------- */

.m3-saving .mh-lead,
.m3-ai-wrap .mh-lead { color: var(--wp--preset--color--main-accent) !important; }

/* Sub text, asistenții cu care merge: un rând de logouri, ca la deltatheme.com
   (căile vin din ~/modula-ollie-build/ai_logos.py). */
.m3-ai-side { max-width: 450px; }
.m3-ai-side > *, .m3-logos > * { margin: 0; }
.m3-logos { margin-top: 32px !important; }
.m3-logos-label {
	color: var(--mc-muted);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.m3-logos-list { display: flex; flex-wrap: wrap; gap: 16px 18px; margin-top: 16px !important; padding: 0; list-style: none; }
.m3-logos-list li { margin: 0; line-height: 0; }
.m3-logos-list svg { width: 26px; height: 26px; color: var(--wp--preset--color--main-accent); transition: color .2s; }
.m3-logos-list li:hover svg { color: var(--wp--preset--color--base); }

.m3-hist-top { gap: 16px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--mc-line); }
/* Starea stă mereu pe un rând. Butoanele nu se mută (ar fugi de sub cursor la Undo);
   dacă un „Undid: …" lung nu mai încape lângă ele, se termină cu „…". */
.m3-hist-head { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; white-space: nowrap; }
.m3-hist-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.m3-hist-head::before {
	content: "";
	flex: 0 0 16px;
	height: 16px;
	background: var(--mc-ink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.m3-hist-btns { flex-shrink: 0; gap: 6px; }
.m3-hist-btns .wp-block-button__link {
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--mc-line);
	background: var(--mc-tint);
	color: var(--mc-ink);
	font-size: var(--wp--preset--font-size--xx-small);
	white-space: nowrap;
}
.m3-hist-btns .wp-block-button__link:hover { border-color: var(--mc-ink); }
.m3-hist-btns .wp-block-button__link:disabled { opacity: .4; cursor: default; border-color: var(--mc-line); }
.m3-hist-list { display: grid; }
.m3-hist-item {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 4px 13px 22px;
	position: relative;
	border-bottom: 1px solid var(--mc-line);
	font-size: var(--wp--preset--font-size--x-small);
	transition: color .2s ease, opacity .2s ease;
}
.m3-hist-item strong { font-weight: 600; }
.m3-hist-item span { color: var(--mc-muted); white-space: nowrap; }
.m3-hist-item.is-origin strong { font-weight: 400; color: var(--mc-muted); }
/* Unde ești acum în istoric: un punct în fața rândului. */
.m3-hist-item.is-current::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 4px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: var(--mc-ink);
}
.m3-hist-item.is-undone { color: var(--mc-muted); }
.m3-hist-item.is-undone strong { font-weight: 400; text-decoration: line-through; }
.m3-hist.is-live .m3-hist-item { cursor: pointer; }
.m3-hist.is-live .m3-hist-item:hover { background: var(--mc-tint); }
.m3-hist-item:focus-visible { outline: 2px solid var(--mc-ink); outline-offset: -2px; }


/* -----------------------------------------------------------------------------
   6. 05 POZELE
   Cinci tab-uri; în fiecare, textul cu bife în stânga și captura în dreapta.
   -------------------------------------------------------------------------- */

.m3-tab-body {
	display: grid;
	grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
	gap: 64px;
	align-items: center;
}
.m3-tab-title { font-size: var(--wp--preset--font-size--medium); line-height: 1.1; }
.m3-tab-text { margin-top: 16px !important; color: var(--mc-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.6; }


/* -----------------------------------------------------------------------------
   7. 06 ASISTENȚII AI
   Pe negru: trei piloni în rânduri, chat-ul (pașii apar pe rând) și grila
   numerotată cu abilitățile reale din modula/discover; câte o celulă se
   aprinde din când în când, ca un asistent care lucrează.
   -------------------------------------------------------------------------- */

.m3-ai {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: 64px;
	align-items: center;
}
.m3-pillars { border-top: 1px solid var(--wp--preset--color--border-dark); }
.m3-pillar {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: 24px;
	padding: 24px 0;
	border-bottom: 1px solid var(--wp--preset--color--border-dark);
}
.m3-pillar-title { color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--medium); line-height: 1.1; }
.m3-pillar-text { color: var(--wp--preset--color--main-accent); font-size: var(--wp--preset--font-size--small); line-height: 1.6; }

.m3-chat { display: grid; gap: 12px; }
.m3-chat > * { margin: 0; transition: opacity .4s ease, transform .4s ease; }
.m3-chat-me {
	justify-self: end;
	max-width: 88%;
	padding: 12px 16px;
	border-radius: 0;
	background: var(--mc-tint);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
}
.m3-chat-tool {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius-control);
	color: var(--mc-muted);
	font-size: var(--wp--preset--font-size--xx-small);
}
.m3-chat-tool::before {
	content: "";
	flex: 0 0 8px;
	height: 4px;
	margin-top: -3px;
	border-bottom: 1.5px solid currentColor;
	border-left: 1.5px solid currentColor;
	transform: rotate(-45deg);
}
.m3-chat-reply { font-size: var(--wp--preset--font-size--x-small); line-height: 1.55; }
.m3-chat.is-waiting > *:not(.m3-mock-note) { opacity: 0; transform: translateY(6px); }
.m3-chat > .is-shown { opacity: 1 !important; transform: none !important; }

/* Grila stă pe o planșă, iar planșa pe bandă (`.m3-zone.is-ai`, secțiunea 1b). */
.m3-abils.m3-board { padding: 64px 32px 32px; }
.m3-abil-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px !important;
	color: var(--mc-muted);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.m3-abil-head::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mc-ink); }
.m3-abil-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	border-top: 1px solid var(--mc-line);
	border-left: 1px solid var(--mc-line);
}
.m3-abil {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-right: 1px solid var(--mc-line);
	border-bottom: 1px solid var(--mc-line);
	background: var(--mc-card);
	font-size: var(--wp--preset--font-size--x-small);
	transition: background .4s ease;
}
.m3-abil span { color: var(--mc-muted); font-size: var(--wp--preset--font-size--xx-small); font-variant-numeric: tabular-nums; }
.m3-abil.is-on { background: var(--wp--preset--color--primary-alt); }


/* -----------------------------------------------------------------------------
   8. 07 ÎNTREBĂRILE
   Titlul în stânga, răspunsurile în dreapta (ca pe pricing).
   -------------------------------------------------------------------------- */

.m3-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }


/* -----------------------------------------------------------------------------
   9. MIȘCARE REDUSĂ
   Fără animații; demo-urile din beta.js nu pornesc singure (arată starea de
   final), iar clipurile anatomiei merg doar la click. Mânerul de la înainte /
   acum merge oricum.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.m3-tabs.is-ready .m3-tab:not([hidden]),
	.m3-x-cap.is-new .m3-x-cap-text { animation: none; }
	.m3-x-video,
	.m3-x-spot,
	.m3-x-pins,
	.m3-x-pin,
	.m3-x-paused,
	.m3-chat > *,
	.m3-abil { transition: none; }
}


/* -----------------------------------------------------------------------------
   10. ECRANE ÎNGUSTE
   -------------------------------------------------------------------------- */

/* Cele zece părți ale anatomiei: sub 1200px, pe cinci coloane titlurile s-ar rupe
   pe trei rânduri; trec pe două coloane. */
@media (max-width: 1200px) {
	.m3-x-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
}

@media (max-width: 1000px) {
	.m3-split,
	.m3-split.is-even,
	.m3-ai,
	.m3-tab-body { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.m3-split.is-even > .m3-tabs.is-ready .m3-shot img { height: auto; }
	.m3-abil-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.m3-saving .m3-split { gap: 40px; }

	/* Subtitrarea clipurilor poate avea două rânduri: le ține mereu, ca lista să nu sară. */
	.m3-x-cap-text { display: flex; align-items: center; min-height: 2.2em; }

	.m3-ba-nums { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.m3-ba-text { grid-column: 1 / -1; }

	/* Citatul trece sub celule; celulele cresc la o cincime din coloană. */
	.m3-quote { --m3-cell: calc(100cqw / 6); grid-template-columns: minmax(0, 1fr); gap: 64px; }
	/* Citatul e sub celule: grila se stinge în jos, înainte de el. */
	.m3-quote::before {
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(50vh + 2.6 * var(--m3-cell)), transparent calc(50vh + 3 * var(--m3-cell) + 28px));
		mask-image: linear-gradient(to bottom, #000 calc(50vh + 2.6 * var(--m3-cell)), transparent calc(50vh + 3 * var(--m3-cell) + 28px));
	}
	.m3-quote-copy { padding-left: 0; }
	.m3-zone.is-save::before { left: calc(-1 * var(--m3-bleed)); }
}

@media (max-width: 760px) {
	.m3-board { padding: 56px 20px 40px; }
	.m3-board::before { top: 10px; right: 12px; left: 12px; }
	.m3-hero .mh-inner > .m3-zone.is-hero { margin-block-start: 96px; }
	/* Pe telefon captura ar fi prea mică: e mai lată decât ecranul și iese prin dreapta. */
	.m3-hero-shot img { width: 170%; max-width: none; border-radius: var(--mc-radius-row) 0 0 0; }

	/* Pe telefon captura e mică: mânerul și etichetele se micșorează. */
	.m3-ba { border-radius: var(--mc-radius-row); }
	.m3-ba-knob { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
	.m3-ba-knob::before { inset: 11px; }
	.m3-ba-label { top: 10px; padding: 4px 10px; }
	.m3-ba-label.is-before { left: 10px; }
	.m3-ba-label.is-now { right: 10px; }
	.m3-ba-nums { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.m3-why-wrap .mh-inner > .m3-ba-nums { margin-block-start: 32px; }

	.m3-quote { --m3-cell: calc(100cqw / 3); gap: 56px; }

	/* Logourile asistenților: două rânduri egale, câte cinci. */
	.m3-logos-list { display: grid; grid-template-columns: repeat(5, auto); justify-content: start; gap: 18px 30px; }

	/* Anatomia: ecranul merge de la o margine la alta. Punctele ar fi prea mici, deci
	   părțile se aleg din listă (sau apăsând pe zona lor din ecran); lista are un rând
	   pe parte, cu numărul în stânga. */
	.m3-x-screen { margin-inline: calc(-1 * var(--m3-bleed)); border-inline: 0; }
	.m3-x-pins { display: none; }
	.m3-x-paused { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
	.m3-x-paused::before { inset: 18px 16px 18px 22px; }
	/* Butonul rămâne doar cu iconița, ca subtitrarea să aibă loc; ea ține mereu trei
	   rânduri, ca lista de dedesubt să nu sară la fiecare pas. */
	.m3-x-bar { gap: 16px; }
	.m3-x-btn { justify-content: center; width: 44px; padding: 0; }
	.m3-x-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.m3-x-cap-text { min-height: 3.3em; }
	.m3-x-parts { grid-template-columns: minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--mc-line); }
	.m3-x-part { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: start; padding: 16px 0; }
	.m3-x-n { grid-row: span 2; padding-top: .5em; }
	.m3-x-title { margin-top: 0 !important; }
	.m3-x-go:focus-visible { outline-offset: 2px; }

	.m3-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.m3-row-label { padding-top: 0; }
	.m3-abils.m3-board { padding: 48px 12px 12px; }
	.m3-pane { padding-block: 32px; }
	.m3-abil-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.m3-abil { padding: 12px; }
	.m3-pillar { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.m3-faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.m3-mock { padding: 22px 18px; }
	.m3-hist-top { flex-wrap: wrap; }
	/* Pe telefon, grila arată primele 20 de abilități: toate 40 ar face o coloană fără sfârșit. */
	.m3-abil:nth-child(n+21) { display: none; }
}